DEVELOPMENT

자바스크립트 비동기

by

“javascript Fetch” 에 관해 공부하였는데 “javascript 비동기”, “Promise”, “콜백 함수”, “멀티 스레드”, “async/await” 개념이 튀어 나옵니다… 이렇게 하나의 개념을 이해하는 데 여러 개념이 줄줄이 알아야 하는 경우 골치가 아픕니다. 이번 포스트에서는 아직 잘 이해하지 못한 복잡한 개념은 제외하고 다른 개념들을 이해하는 데 핵심인 “비동기”란 무엇인지 간단한 개념만 정리해보겠습니다. 동기 (Synchronous) VS 비동기 (Asynchronous) 자바스크립트에서 동기(Synchronous)와 … Read more

자바스크립트 Fetch 함수 : API로 데이터 가져오기

by

fetch 함수는 웹 API를 통해 네트워크 리소스를 가져오는데 사용되는 JavaScript의 함수입니다. 이 함수는 Promise를 반환하며, 비동기적으로 네트워크 리소스를 요청하고 응답을 처리할 수 있도록 합니다. Fetch 함수 다음 코드 예제를 통해 Fetch 함수의 작동을 확인 할 수 있습니다. 1 fetch(url): 주어진 url로부터 데이터를 가져오는 네트워크 요청을 시작합니다. fetch는 Promise를 반환하며, 비동기적으로 요청이 완료될 때까지 기다리게 됩니다. … Read more

VScode에서 Git 시작하기

by

“Git 시작하기” 처음에는 git을 몰랐고, 초반에는 git을 알고도 많이 활용하지 않았습니다. 지금은 git이 없으면 안됩니다… Git은 버전 관리 시스템(VCS, Version Control System) 중 하나로, 소스 코드 및 파일의 변경 이력을 관리하고 추적하는 도구입니다. 개발 프로젝트에서 여러 개발자들이 함께 작업하거나 소프트웨어의 다양한 버전을 효과적으로 관리할 수 있도록 도와줍니다. 개인적으로 협업까지 가지 않더라도 프로젝트 수준으로 가면 git은 … Read more

부트스트랩 아이콘

by

다양한 아이콘을 여기저기 구글링 할 필요 없이 구할 수 있게 해주는 게 부트스트랩 아이콘 입니다. “부트스트랩 아이콘”을 이용하여 다양한 아이콘을 웹페이지에 사용할 수 있습니다. 부트스트랩 아이콘 사용하기 Bootstrap Icons · Official open source SVG icon library for Bootstrap (getbootstrap.com) 위의 링크에 접속합니다. 아이콘을 가져오기 위해서는 import를 해줘야 합니다. 여러 방법이 있지만 이번에는 간단하게 CDN으로 import … Read more

부트스트랩 카드 구현

by

“부트스트랩 카드“는 웹 페이지에서 정보를 시각적으로 구성하고 표현할 때 사용되며, 다양한 콘텐츠를 그룹화하고 레이아웃을 형성하는 데 유용합니다. 텍스트, 이미지, 버튼 등 다양한 요소를 카드 내에 조합하여 사용자에게 일관된 디자인과 레이아웃을 제공합니다. 이번 포스트에서는 부트스트랩 카드 구현하는 법을 정리해보았습니다. 부트스트랩 카드 추가하기 https://getbootstrap.com/docs/5.3/components/card/ 위의 링크에서 부트스트랩 메뉴 > Component > Card 로 들어가면 원하는 카드 형식을 … Read more

부트스트랩 모달 구현

by

페이지에서 새로고침 없이 사용자에게 정보를 표시하거나 입력 받을 때는 어떻게 해야 할까요? 정말 여러가지 방법이 있지만 부트스트랩의 “모달”은 이를 정말 쉽게 구현할 수 있게 도와줍니다. 모달이란? 모달창은 웹 페이지에서 부분적으로 띄워진 독립적인 창으로, 주로 정보를 표시하거나 사용자로부터 추가 입력을 받을 때 사용되는 팝업 형태의 UI 요소입니다. 모달 만들기 https://getbootstrap.com/docs/5.3/components/modal/위의 링크로 들어가 원하는 모달창 코드를 복사합니다. … Read more

부트스트랩 시작하기

by

“부트스트랩 (Bootstrap)“은 트위터에서 개발한 오픈 소스 프론트엔드 프레임워크로, HTML, CSS, JavaScript를 이용하여 웹 개발을 빠르고 쉽게 구현할 수 있게 도와주는 도구입니다. 처음 부트스트랩 개념을 들었을 때, “HTML, CSS 조금 편하게 해주는 건가….? 굳이 사용해야 될까…?” 라는 생각이 들었습니다. 그런데 막상 사용해보니 유려한 디자인의 구성을 정말 빠르고 쉽게 개발할 수 있게 해준다는 것을 깨달았습니다. (부트스트랩 없이 … Read more

자바스크립트 화살표 함수

by

이번 포스트에서는 자바스크립트 함수 포스트에서 다루지 못했던 화살표 함수 특징에 대해서 정리해 보았습니다 화살표 함수의 선언 방법들 괄호는 생략 가능합니다. 하지만 매개변수가 하나의 단순한 형태의 경우에만 생략이 가능합니다. 화살표 함수의 특징 this, arguments, super에 바인딩 되지 않으므로 메소드로 사용하면 안됩니다. 생성자로 사용하면 안됩니다. new로 호출하면 TypeError를 던집니다. 화살표 함수는 yield 문을 사용할 수 없습니다. 화살표 … Read more

자바스크립트 함수 표현식

by

이번 포스트에서는 자바스크립트 함수 포스트에서 다루지 못했던 함수 표현식 특징에 대해서 정리해 보았습니다. 함수 표현식 문법 함수 표현식은 다양한 형태로 사용될 수 있습니다. 주의해야 할 점은 function 키워드만 사용하고 이름을 안 넣으면 함수 선언문으로 오해해서 오류가 발생한다는 점입니다. 함수 표현식은 변수에 할당되거나 다른 표현식의 일부로 사용되어야 합니다. 위 코드에서 func1은 함수 표현식으로 인식되어서 함수 이름이 없어도 … Read more