프론트엔드 기초 개념 1. 브라우저의 동작 순서 HTML 마크업을 처리하고 DOM 트리를 준비한다. CSS 마크업을 처리하고 CSSOM 트리를 준비한다. DOM과 CSSOM을 결합하여 렌더링 트리를 만든다. 렌더링 트리에서 각 요소의 최종 위치와 크기를 계산하는 과정을 거쳐 박스 모델을 생성한다. 화면에 페인팅한다. 2. CORS 자바스크립트는 필요한 데이터를 어디서든 받아올 수 있다. 웹페이지를 만든 서버는 물론이고 다른 서버에서도 당연하게 데이터를 받아올 수 있다. 이 때, 다른 도메인으로 리소스를 요청하는 것을 이라고 한다. 그런데 교차 출처 HTTP 요청은 보안 문제를 일으킬 수 있다. 악의적인 의도를 가진 사람들이 이 기능을 이용하여 사용자의 개인 정보를 훔치는 등 데이터를 훔칠 수 있기 때문이다. 그래서 브라우저들은 원칙적으로 정책을 통해 이런 요청을 제한한다. 이 정책을 라고 부른다. 따라서, 기본적으로 자바스크립트는 자신과 같은 출처에서만 데이터를 받아올 수 있다…

호이스팅 이전에 변수 호이스팅 관련하여 정리한 적이 있었는데, 자바스크립트 개념을 다시 공부하면서 이해도가 달라져 다시 정리해야할 필요성을 느꼈다. 이번에는 실행 컨텍스트의 관점에서 정리를 해보았다. 1. 실행 컨텍스트 먼저 자바스크립트의 동작을 알기 위해서는 실행 컨텍스트를 알아야한다. 실행 컨텍스트 관련해서는 따로 정리를 했다. 2. 실행 컨텍스트와 호이스팅 위의 코드는 호이스팅에 의해 에러가 아니라 라는 값이 출력된다. 2-1. 자바스크립트 엔진의 동작 순서 자바스크립트 엔진은 콜 스택을 통해 코드 실행을 한다. 콜 스택은 LIFO 방식으로 동작하기 때문에 가장 마지막에 푸시된 컨텍스트가 가장 먼저 실행된다. 엔진이 코드를 읽어 들이면서 전역 실행 컨텍스트를 생성하고 콜 스택에 올린다. 콜 스택이 전역 실행 컨텍스트를 실행하던 도중, 함수 호출문을 만나면 해당 함수의 지역 실행 컨텍스트를 생성하여 콜 스택에 푸시한다. 엔진은 전역 실행 컨텍스트 실행을 멈추고 지역 실행 컨텍스…

소프트웨어 테스트와 TDD 이미지 출처: (https://www.fitaacademy.in/blog/why-do-we-need-software-testing/) 1. 소프트웨어 테스트 소프트웨어 테스트라는 것은 소프트웨어가 정상적으로 동작하는지 확인하는 것을 의미한다. 이전에는 개발자는 개발만하고 테스팅 과정에는 큰 관여를 하지 않았지만, 최근에는 개발자가 자동화 할 수 있는 소프트웨어 테스트를 구현하고 실행하는 것이 보편화 되어가고 있다. 코드를 통해 테스트를 자동화한다면 이점이 생긴다. 사람이 실행하는 것 보다 빠르다. 정해진 스크립트에 의해 일관성있게 동작하기 때문에 휴먼 에러를 기피할 수 있다. 피드백을 빠른 주기로 개발중에 받을 수 있다. 따라서, 소프트웨어 테스트를 통한 테스트의 자동화는 개발자의 생산성을 향상시킬 수 있다. 1-1. Unit Test 유닛 테스트는 테스트중에 가장 Low Level이고 가장 작은 범위를 테스트한다. 개별 함수, 메서드, 클래스, 컴포넌…

원티드 프리온보딩 프론트엔드 인턴십 4주차 회고 4주차에는 코드 리뷰, 소프트웨어 테스트, 실행 컨텍스트와 클로저에 대해 배웠다. 1. 코드 리뷰 1-1. Default Value 설정 함수를 호출할 때 기본값을 설정하는 것 보다 Parameter의 기본값을 설정하여 사용하는 것이 함수 호출 시에 매번 기본값을 설정하지 않아도 되고 코드 가독성에도 좋다. 1-2. Debounce value vs function Debounce를 구현한 로직이 onChange를 통한 값의 변화를 Debounce 시키는 방법과 요청을 보내는 함수 자체를 Debounce 시키는 방법으로 나뉘었었다. 이 중 더 효율적인 방법은 함수 자체를 Debounce 하는 방법이다. value를 debounce 하는 방법은 state를 하나 더 사용해야한다. 불필요한 렌더링이 일어난다. 연쇄적인 변화 방법을 사용하기 때문에 로직 파악이 어려워진다. 목적 자체가 결국 함수의 실행을 debounce 처리하는 것이기 때문…

원티드 프리온보딩 프론트엔드 인턴십 3주차 회고 3주차에는 코드 리뷰, contextAPI, 의존성, TypeScript에 대해 배웠다. 1. 코드 리뷰 1-1. 매직넘버 지양 매직 넘버란 코드에서 쓰일 수 있는 특정 숫자를 지칭한다. 코드에서 4 와 같은 숫자는 그냥 사용한다면 어떤 의미인지 알기 어렵다. 상수로 정의하여 숫자에 대한 의미까지 같이 부여하는 것이 적합하다. 1-2. 관심사 분리, 선언적 개발, 추상화 추상화라는 것은 문제의 본질만 남기고 부가적인 내용은 없애는 것이다. 핵심 내용이 더 두드러지도록 코드를 배치해야한다. 코드중복을 줄이고, 핵심 내용이 아닌 코드들은 함수를 이용하여 짧고 직관적으로 표현하는 것이 좋다. 1-3. useEffect를 통한 연쇄 반응 지양 위의 방식은 useEffect를 통해 연쇄적인 state 변화를 일으키기 때문에 좋지 않다. 위의 로직은 div를 클릭한다면 렌더링이 3번된다. 연쇄적인 반응을 유발하면 어떤 상태가 될지 예측하기가 어…

자바스크립트의 비동기 처리 과정 1. 자바스크립트 엔진 자바스크립트는 기본적으로 싱글 스레드에서 동작한다. 싱글 스레드라는 말은 하나의 call stack에서 한번에 하나의 task밖에 처리할 수 없다는 말과 같다. 그래서 비동기를 이용하여 효율적으로 task를 처리한다. 그렇다면 어떻게 동작하여 효율성을 높이는지 궁금증이 생긴다. 자바스크립트 엔진은 코드를 실행하는 일을 하고, 비동기적인 로직들은 모두 Web API에서 처리된다. 이미지 출처: (https://sculove.github.io/post/javascriptflow/) 2. Event Loop, Queue Event Loop는 자바스크립트 엔진과 브라우저의 Web API 사이에서 작동하여 task 순서를 제어한다. 콜 스택이 비어있을 때 큐에서 task를 꺼내 콜 스택에 넣는 역할을 한다. 자바스크립트는 이 Event Loop와 큐들을 이용하여 비동기 작업을 수행한다. 직접적인 작업은 Web API에서 처리하고 완료…

리액트의 최적화 1. 리액트의 렌더링 리액트의 리렌더링은 state가 변화되었을 때 이루어진다. 크게 아래의 4단계를 거치게된다. 기존 컴포넌트의 UI를 재사용할 지 확인한다. 함수 컴포넌트: 컴포넌트 함수를 호출한다 / Class 컴포넌트: 메소드를 호출한다. 2의 결과를 통해서 새로운 VirtualDOM을 생성한다. 이전의 VirtualDOM과 새로운 VirtualDOM을 비교해서 실제 변경된 부분만 DOM에 적용한다. 2. React.memo 리액트는 컴포넌트의 UI가 변화 되었는지 검증 후에 리렌더링을 실시한다. 만약 하위 컴포넌트의 state가 변화되지 않았다면 비효율적으로 검증하는 과정을 거칠 필요가 없다. 그래서 리액트는 개발자에게 컴포넌트에 대한 리렌더링 여부를 표현할 수 있는 React.memo 함수를 제공하고 이를 통해 기존의 컴포넌트의 UI를 재사용할 지 판단하는 방법을 채택했다. React.memo로 감싸진 컴포넌트는 이전 props와 다음 props의 값을…

원티드 프리온보딩 프론트엔드 인턴십 2주차 회고 화요일 ~ 금요일에 강의 수강, 개인 과제, 팀 과제를 수행하니 꽤나 바빴고 정신없이 흘러갔다. 1주차에는 새롭게 만난 분들과 협업을 위해 소통하는 법을 배웠었다. 프로젝트 구조, 컨벤션을 맞춰가는 과정을 배웠고 ESLint, Prettier, Husky 등을 활용하여 결과물을 냈다. 2주차에는 1주차 과제 리뷰, 최적화, 의존성, 관심사 분리에 대해 배웠다. 1. 과제 리뷰 과제 리뷰는 클린 코드 위주로 진행되었다. 멘토님의 판단과 설득력 있는 근거를 들을 때 마다 머리를 맞은 것 같은 인사이트를 받았다. 1-1. Single source of truth 불필요하게 state를 퍼뜨려서 사용하지 말고 그대로 사용하자는 말이다. props로 state를 사용할 때, 또 하나의 state를 만들어서 사용하는 것이 아니라, 기능이 같다면 props를 그대로 사용해야한다. 불필요한 state가 많아질수록 관리가 어려워지고 버그 발생의 위험…

✔ 협업을 위한 Husky 이미지 출처: (https://dev.to/maithanhdanh/configuration-for-husky-pre-commit-1fo5) 1. Husky ESLint와 Prettier를 도입해도 사용자가 적용하지 않으면 문제가 생긴다. 따라서 자동화를 통해 강제성을 부여할 필요성이 생긴다. Git Hooks를 통해 Git 이벤트가 발생될 때 스크립트를 실행하여 자동화를 할 수 있다. Husky는 Git Hooks를 쉽게 설정하고 관리할 수 있게 도와준다. 2. Husky를 통한 Git hooks 적용 2-1. Husky 설치 2-2. 스크립트 추가 꼭 postinstall 프로퍼티로 사용해야한다. 이후에 clone 받아서 사용하는 사람이 npm install을 통해 husky install까지 한번에 설치하기 위해 설정한다. —cache 옵션은 한번 검증한 파일을 변화가 없다면 다시 검증하지 않기 위해 캐싱을 하게 하는 옵션이다. 2-3. pre-co…

출처: (https://nvie.com/posts/a-successful-git-branching-model/) ✔ Git-flow Git-flow 란? Git-flow는 대중적으로 많이 사용되는 개발 작업 절차이자 방법론 중 하나이다. Git-flow 방식을 사용할 경우, 체계적이고 효율적으로 프로젝트를 관리할 수 있다. 브랜치를 이용한 프로젝트 관리 방식이다. Branch Git-flow에서 사용되는 대표적인 브랜치는 아래와 같다. main: 프로덕트로 배포할 수 있는 브랜치 develop: 프로덕트가 되기 전의 개발 버전을 다루는 브랜치 feature: 단위별로 기능을 개발하는 브랜치 release: main 브랜치로 병합 전에 QA를 통해 버그를 찾아내기 위한 브랜치 hotfixes: 버그가 발생했을 경우, 빠르게 버그를 수정하기 위한 브랜치 순서 main 브랜치와 develop 브랜치로 시작한다. feature 브랜치를 생성하여 기능을 개발하고 develop 브랜치에 병합…

✔ 협업을 위한 ESLint, Prettier 이미지 출처: (https://muhaddis.info/automate-the-code-formatting-with-eslint-and-prettier/) 1. ESLint와 Prettier ❓ESLint와 Prettier를 사용해야 하는 이유 프로젝트에 참여하는 개발자들은 각기 코딩 스타일이 다르다. 그래서 다른 스타일을 가진 개발자가 코드를 보려면 피로도가 증가한다. 팀원과의 소통을 통해 어느정도 정할 수 있다고 해도, 그 갯수가 계속해서 증가한다면 한계가 생긴다. 코드 스타일 자동화를 통해 이를 해결할 수 있다. 이를 도와주는 대표적인 도구가 ESLint, Prettier이다. 2. ESLint 일관된 코드를 보장해주는 것이 ESLint의 역할이다. 코드의 구문을 분석하여 버그 발생의 여지가 있는 코드, 불필요한 코드, 위험성이 존재하는 코드 등에 대한 경고를 출력해준다. 2-1. 설치 2-2. 설정 루트 디렉토리에 .eslin…

✔ 구글 클라우드(Google Cloud Platform)로 HTTPS 적용하기 1. 인스턴스 그룹 만들기 Compute Engine 메뉴 > 인스턴스 그룹 메뉴 > 인스턴스 그룹 만들기 버튼 클릭 > New unmanaged instance group 메뉴에서 위와 같이 생성한다. 2. 고정 IP 생성 고정 IP를 생성해야한다. 3. 고정 IP 설정 참고 3. 부하 분산기 생성 네트워크 서비스 메뉴 > 부하분산 메뉴로 이동하여 HTTPS로 부하 분산기를 생성한다. 그리고 백엔드, 프론트엔드를 구성해야한다. 백엔드, 프론트엔드 구성 후 부하 분산기 생성을 하면 HTTPS 적용까지 시간이 다소 소요된다. 3-1. 백엔드 구성 위의 메뉴에서 백엔드 서비스 만들기를 클릭한다. 이름 입력 후, 인스턴스 그룹에 생성했던 그룹을 넣는다. Cloud CDN의 상태 확인에는 기본값인 webrtc-healthcheck을 넣고 생성한다. 3-2. 프론트엔드 구성 만들어놓은 고정 IP주소…

✔ 구글 클라우드(Google Cloud Platform)로 도메인 적용하기 1. 도메인 구입 도메인 구매 사이트에서 도메인을 구매한다. Google Domain에서 구입하면 연동이 가능하다. 2. 도메인 추가 및 네임서버 설정 네트워크 서비스 카테고리에서 구매한 도메인을 추가한다. 도메인 세부 정보에서 네임버서 주소를 복사하여 구매한 플랫폼에 추가한다. 네임서버가 적용이 되었어도 실질적으로 처리가 되는데 시간이 꽤 오래 걸릴 수 있다. nslookup -type=ns [도메인] 명령어를 통해 반영이 되었는지 확인할 수 있다. 3. 고정 IP 설정 임시로 되어 있던 외부 ip를 위와 같이 설정하여 고정 ip로 변경한다. 4. 도메인과 IP 연결 네트워크 서비스에서 레코드를 추가한다. A유형에 고정 IP를 추가, CNAME유형에 도메인을 추가하여 레코드 모음을 추가한다. 위와 같이 레코드 모음을 설정해준다. 적용이 완료되었는지 확인한다.

✔ 구글 클라우드(Google Cloud Platform)로 배포하기 구글 클라우드 배포 GCP에서는 Paas 서비스인 App Engine과 Iaas 서비스인 Compute Engine을 이용하여 배포를 할 수 있다. 1. App Engine 웹서버를 배포하기 적합하고 app.yaml 파일을 이용하여 배포 환경을 핸들링 할 수 있다. 1-1. 프로젝트 생성 로그인 후 프로젝트를 생성한다. 1-2. 앱 만들기 App Engine 메뉴에서 애플리케이션을 생성한다. 리전은 한국 서버인 asia-northeast3를 선택한다. 1-3. Google Cloud SDK 설치 및 gcloud 사용 Google Colud SDK 다운로드 후 터미널을 통해 배포할 프로젝트의 디렉토리에서 Configuration을 설정한다. 기존 프로젝트가 있을 경우 위 처럼 출력되는데, 배포할 프로젝트의 환경을 만들어주면 된다. 프로젝트의 루트 디렉토리에 app.yaml 파일을 생성하여 위와 같이 배포 환경…

✔ 8주차 회고 1. Did 8주차에는 소스 리팩토링과 최적화, 배포를 진행했다. ① 소스 리팩토링, 최적화 개발하느라 지저분해진 코드 정리를 진행했다. 같은 역할의 로직을 조금 더 가독성 있는 로직으로 바꾸려고 시도를 했다. 컴포넌트명, 변수명, 함수명 등을 직관적인 명칭으로 변경을 했다. 리렌더링 될 필요가 없는 자식 컴포넌트들을 memo를 통해 캐싱하여 최적화를 했다. ② 배포 Google Cloud를 사용하여 운영서버 배포를 진행했다. 서버, 웹서버를 직접 관리하고 싶었기 때문에 Iaas 서비스인 Compute Engine을 이용했다. 배포를 진행하면서 정리를 했다. 도메인 적용과 HTTPS 적용도 진행했다. 2. Issues ① 소스 리팩토링, 최적화 관심사에 따라 컴포넌트 분리를 잘했어야 했다는 생각이 들었다. 역할에 맞는 컴포넌트 분리를 얼마나 잘 하느냐에 따라서 최적화, 유지보수까지 큰 영향을 미친다는 것을 알았다. ② 배포 도메인과 HTTPS 적용까지 시간이 꽤 소…

✔ 7주차 회고 7주차에는 CRUD를 베이스로 컬렉션 기능을 구현했다. 기존에 만들어놨던 컴포넌트들을 재활용하여 구현했다. 1. Did ① 컬렉션 리스트 MUI의 테이블 컴포넌트들을 이용하여 구현했다. 추가된 컬렉션들을 최신순으로 출력했다. ② 컬렉션 디테일 기존에 사용했던 리스트, 디테일 컴포넌트를 재활용하여 디테일 페이지를 구현했다. 글의 작성자인지를 검증하여 Edit, Delete 버튼 출력 여부 분기 처리를 했다. ③ 컬렉션 추가 기존에 사용했던 검색 컴포넌트와 테이블 컴포넌트를 재활용하여 컬렉션 추가 페이지를 구현했다. 체크 박스와 게시판이 연동 되어야 하는 것에서 조금 어려웠지만 전역 state를 통해 해결했다. ④ 컬렉션 수정 추가 기능과는 다르게 기존 데이터를 가져와야했고, 게시판에 들어있는 영화들은 검색 시에 체크박스에 체크가 되어 있어야 했다. add 컴포넌트에서 navigate의 state 기능을 이용하여 add와 edit으로 분기 처리하여 구현했다. …

✔ 5,6주차 회고 회사에서 진행하던 프로젝트가 막바지 단계여서 야근이 잦아졌다. 프로젝트에 많은 시간 투자를 하지 못해서 아쉬웠다. 5,6 주차에는 헤더의 검색 창을 통한 영화 검색 기능, 검색 페이지를 구현했다. 1. Did ① 헤더를 통한 검색 템플릿을 참고하여 헤더의 돋보기 아이콘 클릭 시 검색 레이어가 출력되게 구현했고 검색 시 Search 메뉴로 이동하면서 검색 결과를 앨범 리스트로 출력 해주도록 구현했다. ② 메뉴를 통한 검색 Search 메뉴를 통해 들어와 검색을 했을 때 검색 결과를 앨범 리스트로 출력 해주도록 구현했다. ③ 검색 기능 API에 검색어를 파라미터로 설정하여 요청을 하면 검색 결과를 제공해주는 기능이 있어서 React-Query를 통해 검색어가 변경되면 요청을 보내는 방식으로 구현했다. 2. Issues ① 동일 컴포넌트 사용 동일 컴포넌트로 헤더를 통한 검색, 메뉴를 통한 검색에 따른 결과를 출력 해주다보니 디테일한 부분들을 신경써야했다. 상단 검…

✔ 4주차 회고 4주차에는 영화 페이지를 구현했다. 로그인 시에 메인이 될 화면이고 분류에 맞는 영화를 앨범형 리스트로 만들어야했다. 1. Did ① API 영화 리스트 렌더링에 필요한 데이터를 위해 API 호출을 해야했다. 호출할 API 주소와 필요한 키 값들을 Config 파일을 따로 만들어 관리하기 용이하게 설정했고 동일한 데이터 응답 시간을 단축하기 위해 React-Query를 사용했다. ② React-Query 단순히 데이터를 캐싱하여 사용하고 설정한 값들의 변경을 감지하여 재요청을 보내는 목적으로 리액트 쿼리를 사용했기 때문에 비교적 간단하게 사용할 수 있었다. useQuery 메소드를 사용하여 키값과 변경을 감지할 변수, 데이터를 요청하여 promise를 리턴 받을 함수, 특정 상황에 따라 사용을 하기 위한 enabled 정도로 가장 일반적인 패턴으로 구현했다. ③ 페이지 레이아웃 및 데이터 렌더링 Mui를 이용하여 리스트 페이지의 레이아웃을 구현했다. 정렬 카테고리…

✔ 3주차 회고 3주차에는 간단한 마이페이지를 구현했다. 이미지 입출력을 구현 해보기 위해 진행했고 Multer 라이브러리를 이용하여 비교적 간단하게 구현하였다. 1. Did ① Multer Multer 라이브러리는 파일 업로드를 위해 사용되는 Node.js의 미들웨어이다. multipart/form-data 형식으로 파일 업로드를 지원하기 때문에 header에 Content-Type을 multipart/form-data로 지정하여 FormData를 송신하는 것으로 처리했다. 단일 파일을 업로드 하는 기능이기 때문에 upload.single(${key}) 를 이용하여 미들웨어를 사용했다. Multer를 처음 다루기 때문에 사용법이 미흡했던 점과 repository가 없을 시에는 디렉토리 생성, 파일명 인코딩 등 미처 생각하지 못했던 부분들을 하나씩 처리하느라 조금 어려움을 겪었지만, 라이브러리 사용법이 간단하여 수월하게 구현한 것 같다. 2. Issues 의외로 프론트엔드에서 어려…

1. 이슈 React 환경에서 개발 도중 새로고침을 하면 와 같은 에러가 출력되면서 페이지를 정상적으로 출력하지 못하는 문제가 있었다. 2. 원인 404 에러가 출력 되는 것으로 보아, 클라이언트 문제라 판단했고 그 아래의 오류 메세지에서 힌트를 얻을 수 있었다. /main/users/bundle.js의 스크립트 실행하는 것을 거부했다는 메세지였다. 스크립트 파일의 MIME 유형이 application/javascript가 아니라 text/html로 되어 있기 때문에 출력이 어렵다는 메세지이고 파일 참조가 비정상적으로 되고 있었던 것이 원인이었다. 3. 해결 구글링과 chatGPT, bingCHAT을 이용하여 해결 방법을 찾았고, 해결방법은 webpack 설정에 있었다. 기존에 사용하던 output 객체에는 path와 filename 프로퍼티만 존재했는데, publicPath를 이용하여 기본으로 참조해야할 path를 지정해주어야 새로고침을 했을 때도 파일이 정상적으로 참조가 되는…

✔ React-Router-Dom v6 기존 React-Router-Dom v5에서 v6로 넘어가면서, 사용법이 바뀌고 기능이 추가되는 등 큰 변화가 있었다. 대표적으로 변경된 것, 간단한 사용법을 정리한다. 1. Routes ① Switch의 네이밍이 Routes로 변경되었다. ② exact 옵션이 제거되었다. ③ component, render props가 제거되고 element props가 생겼다. ④ path props에 상대경로로 지정이 가능해졌다. 위와 같이 사용할 수 있다. 2. 중첩 라우팅 v6 에서는 중첩 라우팅을 가독성 있게 설정할 수 있고 관리가 용이하다. 위와 같이 바로 중첩 라우팅을 설정할 수도 있지만 Outlet을 사용하면 좀 더 효율적으로 사용할 수 있다. v5 였다면 각 컴포넌트에 레이아웃을 포함 시켜야했을 로직을 위처럼 Outlet과 중첩 라우팅을 이용하여 코드 가독성과 관리를 용이하게 할 수 있다. 3. Hooks ① useLocation 기존 v5…

✔ 2주차 회고 생각했던 것 보다 오류와 많이 직면하게 되었다. 오류 해결에 시간 투자를 많이 했기에 프로젝트 진척도가 떨어졌고 목표로 정했던 것들을 전부 달성하진 못했다. 조금 더 집중해서 목표 달성에 힘을 써야겠다는 생각을 했다. 1. Did ① React-Router-Dom v6 기존에 사용하던 React-Router-Dom v5버전에서 v6버전으로 마이그레이션을 하게 되었다. 다뤄보지 않은 v6보다 사용하던 v5의 방식이 익숙했기 때문에 계속 사용하려고 했으나, mui free 템플릿의 소스를 보고 생각이 바뀌었다. 템플릿의 라우터 소스를 보고, 중첩 라우팅을 좀 더 효율적이고 직관적인 소스로 관리할 수 있겠다는 생각이 들었다. 그래서 v6로 마이그레이션을 진행했고 소스를 좀 더 효율적으로 관리할 수 있게 되었다. 그리고 귀중한 블로그 글들을 참고하여 v6에서는 어떤 점이 달라졌는지 정리를 해보았다. ③ 메인 레이아웃 템플릿을 이용하여 메인 레이아웃을 구성했다. 이미 존재하…

✔ 팝콘 프로젝트 나는 다양한 문화생활을 좋아하지만 특히 영화를 애정한다. 학생 시절엔 영화 기자라는 직업에 관심이 있었고 하루에 한편 이상의 영화를 보는 것이 일과이고 낙이었을 정도였다. 그래서 지금도 여전히 영화 관련 컨텐츠에 항상 관심을 가지고있다. 개발 세상에 들어올 때, 영화 관련 웹사이트를 만들어 서비스를 해보고 싶다는 생각을 계속 해왔고 이번 사이드 프로젝트의 주제로 선정을 하게 되었다. 1. 사이드 프로젝트 재직중인 회사에서 풀스택으로 일을 해왔고 어떤 포지션이 나에게 더 적합한지 생각을 해왔다. 내 소스가 화면으로 즉각적으로 표현되면서 UI/UX와 디자인에 대해서도 고민할 수 있는 프론트엔드를 좋아하게 되었다. 그래서 자연스레 프론트엔드로 커리어를 전환하고 싶다는 생각이 들었다. 자바스크립트, 리액트, 타입스크립트 공부를 진행했고 학습한 것들을 적용하면서 경험을 쌓을 사이드 프로젝트의 필요성을 느꼈다. 그래서 영화를 주제로 한 팝콘 프로젝트를 시작하게 되었다. 2.…

HTTP 기초 1. 인터넷 네트워크 1-1. IP(인터넷 프로토콜) IP 주소를 통해 패킷이라는 통신 단위로 데이터를 전달한다. IP는 대상을 쉽게 분별할 수 있다는 장점이 있다. 패킷을 받을 대상의 상태와 관계없이 패킷을 전송하거나, 패킷이 유실되어도 알 수 없다는 점 등의 단점이 있다. 1-2. TCP 프로토콜 IP 패킷 안에 들어가 있고 PORT, 전송제어, 순서 등의 정보를 가지고 있어 IP의 단점을 보완해준다. TCP는 전송제어 프로토콜이다. TCP 3 way handshake 연결을 지향하고 데이터 전달을 보증한다. ❓ 3 way handshake? 클라이언트-서버 통신 환경에서 클라이언트가 접속 요청 메세지를 서버에게 보내면 서버가 요청을 수락한다는 메세지와 함께 접속 요청 메세지를 보내고 클라이언트가 서버에게 데이터를 전송하게 되는데, 이 과정을 3 way handshake라고 한다. 1-3. UDP 프로토콜 단순하고 빠르다는 장점이 있다. 데이터 전달 보증과 순서 …

실행 컨텍스트 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하고 관리한다. 식별자, 스코프, this 등은 렉시컬 환경을 통해 관리되고, 코드의 실행 순서는 콜 스택과 실행 컨텍스트를 통해 관리된다. 1. 실행 컨텍스트 구성 실행 컨텍스트는 크게 세가지로 구성되어 있다. 변수 환경(Variable Environment): 컨텍스트 내의 식별자들에 대한 정보, 함수 선언 등이 저장되는 공간 렉시컬 환경(Lexical Environment): 컨텍스트가 속한 렉시컬 스코프(스코프 체인) 정보를 담고 있는 공간, 초기화 과정에서는 변수 환경과 동일하지만, 이후엔 변경사항이 실시간으로 변경된다. This Binding: this가 바인딩되는 공간, 어떤 객체에 바인딩될 지 결정하는 공간 2. 실행 컨텍스트 생성과정 컨텍스트 생성 단계(Execution Context Creation Phase): 실행 컨텍스트가 생성되며, 실행 컨텍스트 구성 요소의 정보가 초기화된다. 코드 실행 단…

✔ 사용하는 이유 제네릭은 코드의 재사용성과 유연성을 높이기 위해 사용한다. 함수나 클래스에서 사용할 타입을 나중에 결정할 수 있도록 허용하며, 동일한 함수나 클래스에서 여러 가지 타입을 다룰 수 있도록 한다. ✔ 제네릭 사용법 ① 타입 지정 위와 같이 제네릭을 이용하여 기본 타입을 설정할 수 있다. ② 빌트인 제네릭 ❓ 빌트인 제네릭이란? 타입스크립트에 내장된 제네릭으로, 타입스크립트에서 제공하는 내장 데이터 구조(Array, Promise, map 등)나 함수에서 사용된다. 위와 같이 DOM을 제어할 때 Element 타입 지정을 해야한다. ③ 제네릭 작성 함수 호출 타입과 리턴 타입이 같을 때, 제네릭을 이용하면 유용하다. 예를 들어, 위와 같이 item 객체를 리턴해주는 로직은 같지만 파라미터와 리턴의 타입이 다른 경우가 있다고 가정했을 때 제네릭을 사용하면 유용하다. 위에서 T는 타입을 의미하고 넣어주는 타입이 리턴 받는 타입이 된다. 어떤 타입을 받느냐에 따라 타입이 나…

✔ 사용하는 이유 자바스크립트는 원래 현재처럼 널리 쓰일 용도로 만들어지지 않았다. 그렇기 떄문에 특이점이 많고 문제가 발생할 소지를 가지고 있다. 예를 들어, 자바스크립트에서는 null이나 undefined에 값을 곱해도 오류가 출력되지 않는다. 오류로 출력되지 않기 때문에 처리하기가 까다롭고 이러한 점은 치명적인 오류와 버그로 이어질 수가 있다. 타입스크립트는 이러한 오류와 버그가 발생하는 것을 방지하기 위해 사용된다. ✔ 타입 사용법 기초 ① 기본 타입 지정 위와 같이 “변수명: 타입” 의 형태로 변수에 타입을 지정할 수 있다. 변수에 지정된 타입이 아닌 다른 타입의 값을 할당하려고 하면 오류가 발생한다. ② 함수 (1) 함수 파라미터, 리턴 타입 지정 위와 같이 파라미터의 타입과 리턴 타입을 할당할 수 있다. 선언된 함수의 리턴 타입과 다른 타입의 값을 리턴하는 로직을 구현하거나, 선언된 함수의 타입과 다른 타입의 아규먼트로 호출한다면 오류가 발생한다. (2) void 타입…

자바스크립트는 클래스 기반의 객체지향 언어와는 다르게 프로토타입 기반 객체지향 언어이다. 프로토타입 자바스크립트의 모든 객체는 부모 객체와 연결되어 있다. 그리고 부모 객체의 프로퍼티나 메소드를 상속받아 사용할 수 있는데, 부모 객체를 프로토타입 객체, 줄여서 프로토타입이라 부른다. 개발자 도구를 통해 Object를 열어보면 다음과 같다. 자바스크립트의 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가진다. [[Prototype]]은 상속을 구현하는데 사용되고 __proto__로 접근할 수 있다. __proto__프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다. 1. _proto_, [[Prototype]], prototype 프로퍼티 1-1. _proto_ 모든 객체가 가지고 있고, 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 참조 링크 역할을 한다. 그래서 객체는 상속을 받아 부모 객체의 프로퍼티와 …

자바스크립트에서의 비동기란 로직이 끝날 때 까지 기다리지 않고 다음 코드를 실행하는 것을 말한다. 비동기와 Promise 1. 비동기 비동기를 사용하는 이유는 일을 처리하는 속도가 향상되기 때문이다. 비동기를 사용하지 않는다면 시간이 오래 걸리는 일을 진행하는 동안 아무 동작도 하지 못하고 기다려야한다. 비동기를 사용하면 시간이 오래 걸리는 일을 진행하도록 두고 그 다음 일을 처리하기 때문에 일을 병렬적으로 처리하여 처리 속도가 향상시킬 수 있다. 1-1. 비동기의 문제점 비동기로 동작하는 ajax의 일이 언제 끝나는지 모르기 때문에 일의 처리 순서를 보장 받을 수 없고, 에러가 출력된다. 비동기의 문제점은 바로 일의 처리 순서를 보장 받을 수 없다는 것이다. 2. 콜백 함수 비동기 업무의 처리 순서를 보장 받기 위해 콜백 함수를 사용한다. 콜백 함수를 이용하면 일이 끝난 후에 함수를 실행 시키기 때문에 실행 순서를 보장 받을 수 있다. 따라서 위와 같이 콜백 함수를 활용하면 일이…

보통 자바스크립트 문법은 ES6 이전과 이후로 나뉜다. ES6를 기준으로 자바스크립트의 사용법이 크게 바뀌었고, 효율적인 문법들이 많이 등장했다. 화살표 함수는 그 중 하나이다. Arrow Function 1. 선언 화살표 함수는 function 키워드를 사용하지 않고 => 를 사용하여 간단하게 함수를 선언할 수 있다. 2. 호출 아래와 같이 콜백 함수로도 사용할 수 있다. 화살표 함수는 익명으로만 사용할 수 있기 때문에 함수를 호출할 때는 함수 표현식을 사용해야 한다. 3. this 일반 함수와 비교 했을 때, 화살표 함수와의 가장 큰 차이는 this에 바인딩할 객체의 할당 방식이 다르다는 것이다. 일반 함수는 this에 바인딩할 객체가 함수 호출 방식에 따라 동적으로 결정되고, 화살표 함수는 정적으로 결정된다. 화살표 함수의 this는 항상 상위 스코프의 this를 참조한다. 위와 같이 콜백 함수를 일반 함수로 선언하면 원하는 결과가 출력되지 않는다. 그 이유는 this글 에서…

this 자바스크립트의 this는 함수가 호출될 때 암묵적으로 전달 받는다. 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 1. 함수 호출 전역 객체는 모든 객체의 최상위 객체를 의미하고 this는 기본적으로 전역 객체 window에 바인딩된다. 따라서, 전역으로 선언한 함수는 전역 객체의 메소드이다. 글로벌 영역에 변수, 함수를 선언하고 호출하면 전역 객체에 접근 가능한 변수 window를 사용하여 호출한 것과 같다. 1-1. 내부함수 1-2. 메소드 내부의 함수 1-3. 콜백함수 내부함수, 메소드 내부의 함수, 콜백함수의 this도 기본적으로 전역 객체에 바인딩되기 때문에 window를 참조한다. 2. 메소드 호출 객체의 프로퍼티 값이 함수이면 메소드로 호출된다. 이 때 메소드 내부의 this는 메소드를 소유한 객체에 바인딩된다. 메소드를 호출하는 각각의 객체를 기준으로 name 프로퍼티로 출력된다. 3. 생성자 함수 호출 생성자 함수로 함수를 호출했을 때는, …

React Hooks React Hooks는 React v16.8 기준으로 등장하여 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 도와준다. 1. useState ① useState 위와 같은 형태로 선언하여 사용하고 함수형 컴포넌트에서 상태 관리를 할 수 있게 도와준다. ② prev를 이용하여 이전 state값을 사용할 수 있다. ③ props를 전달할 때는 위와 같이 element에 값을 할당하여 전달한다. ❗️ 결과 ㅇ + 버튼 클릭 시 1씩 증가한다. ㅇ - 버튼 클릭 시 1씩 감소한다. ㅇ Reset 버튼 클릭 시 전달받은 Props 값으로 초기화된다. 2. useEffect useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 도와준다. ① useEffect에서 두번째 아규먼트로 빈 배열을 넣어주면 마운트 시에만 실행한다. 빈 배열이 아닌 다른 값을 넣어주면 그 값이 갱신될 때 useEffect를 재실행한다. ② 컴포넌트가 언마운트 되기 전이나 업데…

변수는 값을 저장하고 참조하기 위해 사용하고, 언어 관점에서 데이터를 관리하기 위한 핵심요소중의 하나이다. 자바스크립트 엔진의 값 할당 보통 변수를 선언할 때, 위와 같은 방식을 사용한다. 이것은 정확히 얘기하면 변수 선언과 값의 할당을 한번에 표현한 것이다. 변수 a는 사람을 위한 식별자이고 자바스크립트 엔진은 변수 a를 메모리 주소로 파악하고 메모리에 접근한다. 자바스크립트 엔진은 변수에 값을 할당할 때 선언 단계, 초기화 단계, 값 할당 단계로 3단계에 걸쳐서 수행한다. 선언 단계: 엔진이 변수 이름을 인식하는 단계 초기화 단계: 값을 저장할 공간을 확보하고 undefined를 할당하여 초기화 하는 단계 값 할당 단계: undefined로 선언된 변수에 실제값을 할당하는 단계 변수 선언은 코드를 읽어들이는 시점인 런타임 이전에 실행되고 값의 할당은 런타임에 실행된다. 각 단계가 나뉘어 있고 수행 시기가 다르기 때문에 위와 같은 결과가 출력된다. ❓ 굳이 undefined로 초…

리액트 컴포넌트에서 데이터는 Props와 State 두가지를 다룬다. Props props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 부모 컴포넌트가 자식 컴포넌트에게 값을 주어야 사용할 수 있다. props는 직접 수정할 수 없다는 특징이 있다. 으로 name props를 전달하고 실행 시 결과는 defaultProps 컴포넌트에 props를 지정하지 않았을 때는 defaultProps를 지정하여 기본값을 설정할 수 있다. 로 defaultProps를 지정하고 실행 시 결과는 📂 참고자료 VELOPERT님 글 생활코딩님 강의

프론트엔드의 라이브러리는 종류가 다양하다. 현 시점에서 가장 많이 쓰이는 라이브러리로 ReactJS, VueJS, AngularJS 3대장을 꼽는다. 이 셋은 각각 다른 특징을 가지고 있다. ❓ 자바스크립트로 구현하면 되는데 굳이 라이브러리를 쓰는 이유? ❗️ 사용자 인터렉션이 적다면 라이브러리를 사용하지 않아도 되지만, 요즘의 웹은 정말 많은 기능과 데이터를 다루기 때문에 수많은 DOM을 관리하기란 쉽지 않은 일이다. 라이브러리를 통하여 관리 부담을 줄이고 UI 구현에 집중할 수 있다. Why React? 블럭 단위로 소스를 관리하는 컴포넌트라는 개념에 집중한다. 컴포넌트 사용은 소스 관리에 용이하고 재사용성이 뛰어나다. Virtual DOM이라는 가상의 DOM을 사용한다. 변화를 감지했을 때, 해당 부분만 렌더링을 해줄 수 있다. 변화가 있을 때 마다 페이지 전체를 렌더링 하는 것과 바뀐 곳만 렌더링 하는 것은 성능면에서 차이가 있을 것이다. 커뮤니티가 크다는 것이 큰 장점이다.…

1. Github Pages & Gatsby 정말 많은 블로그 플랫폼이 있다. 노션, 티스토리, 벨로그 등등 취향껏 고를 수 있게 각각 특색이 있었다. 그중에 내가 고른 플랫폼은 깃헙 블로그이다. 정해진 범위 내에서의 커스텀이 아닌 전체를 커스텀 할 수 있다는 점, 소스를 표현하기 쉽다는 점이 매력적이었다. 깃헙 페이지스에서 호스팅 서비스를 제공하기 때문에 구축이 어렵지 않았다. 😀 깃헙 페이지스가 호스팅 서비스를 제공하니 페이지 파일들을 만들어주면 되는데, 정적 사이트 생성기를 이용하면 보다 편하게 파일을 생성할 수 있다. 대표적으로 Jekyll과 Gatsby가 있다. 지킬은 Ruby를 기반으로 동작하고 개츠비는 React와 GraphQL를 기반으로 동작한다. 학습중인 리액트를 사용할 기회도 있고 나만의 디자인으로 이루어진 블로그를 만들어 볼 욕심도 있어서 개츠비를 선택했다. 2. 설치 2-1. Template 생성 이미 다양한 템플릿들이 패키지로 많이 나와있다. 지금은 빠르고 …