전체 글45 HTML과 CSS로 구현한 UI와 자바스크립트 코드를 연결해보자. 지난 포스팅에서 일상생활을 프로그래밍화 해보는 방법을 소개했었습니다. 이번에는 지난번 구현해 봤던 인스타그램 태그 목록의 UI를 HTML과 CSS로 유사하게 구현해 보고 이를 지난번 구현했던 자바스크립트 코드와 연결해보려고 합니다. 인스타그램 태그 목록 위 이미지에서 검색어를 입력하는 input과 탭 목록 그리고 검색한 결과를 보여주는 리스트 이 3가지를 HTML과 CSS로 먼저 구현해 보겠습니다. index.html 인기 계정 오디오 태그 장소 style.css body { background-color: black; } .c_inputContainer { display: flex; margin-bottom: 10px; } #search_input { background: gray; height: 30.. 2023. 4. 19. 일상생활에서의 프로그래밍 - 추상화 모든 프로그래밍 언어에서 절대 빠지지 않는 몇 가지 규칙이 있습니다. "상수", "변수", "반복", "조건" 이 4가지입니다. 이 4가지를 이해하면 일상생활에서 우리가 이용하는 것의 대부분을 소프트웨어화 할 수 있습니다. 이를 프로그래밍에서는 "추상화"라고 하기도 합니다. 몇 가지 예를 살펴보겠습니다. 인스타그램 태그 목록 위 이미지는 인스타그램의 태그 탭에서 "바다"라는 키워드로 검색했을 때 나오는 태그 목록들입니다. 이를 코드로 나타내면 다음과 같습니다. const TAG_LIST = ["바다", "산", "바다다", "바다스타그램", "바다뷰", "산스타그램", "산티아고순례길"]; let result = []; TAG_LIST.forEach((tag) => { if (tag.includes("바.. 2023. 4. 12. NPM(Node.js) 설치 자바스크립트로 개발하기 위해서 우리는 NPM을 설치해야 합니다. 사실 NPM이 없어도 개발하는데 문제는 없지만 굉장히 불편합니다. NPM은 Node.js Package Manager의 약자로, 자바스크립트 진영에서 사용되는 패키지들을 편하게 설치하도록 도와주는 도구입니다. 예를 들어, 프론트엔드에서 달력을 만든다고 생각해 보겠습니다. 달력 컴포넌트를 구현할 수도 있지만, 다른 뛰어난 개발자들이 만들어놓은 달력 컴포넌트를 가져다 쓸 수 있다면 더 좋지 않을까요? 남들이 만들어놓은 이런 컴포넌트들이나 함수(function)들을 쉽게 가져다 쓸 수 있도록 도와주는 도구가 NPM이라고 생각하시면 편합니다. 그리고 첨언하자면, 이런 식으로 어떤 기능이나 UI 컴포넌트들을 만들어놓은 것을 라이브러리라고 합니다. W.. 2023. 4. 7. Github 계정 생성과 Git 설치 Github와 Git은 형상 관리를 위해 있는 도구입니다. 형상 관리란 여러 개발자가 소스코드를 공유하면서 개발해야 하기 때문에 필요한 도구라고 생각하시면 됩니다. 프로젝트를 진행하면서 소스 코드를 USB로 매번 주고받는다고 생각해 보면 불편한 것 같지 않으신가요? 예를 들어, A개발자와 B개발자가 회원가입을 같이 구현하기로 했다고 가정해 봅시다. A개발자가 본인이 맡은 부분을 다 구현하고 B개발자가 이를 받아서 이어 개발하면 시간도 더 오래 걸릴 것이고 이 교환 과정을 매번 USB로 주고받는다면 시간적, 인적 낭비일 것입니다. 형상 관리 도구를 이용하면 A, B개발자가 동시에 진행하고 이를 병합하는 과정에서도 겹치는 부분은 알아서 표시해주기도 하고 겹치지 않는 부분은 자동으로 병합을 해주기 때문에 개발.. 2023. 4. 7. 이전 1 2 3 4 ··· 12 다음 728x90
