원티드 프리온보딩 프론트엔드 인턴십 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번된다. 연쇄적인 반응을 유발하면 어떤 상태가 될지 예측하기가 어…

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

✔ 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 의외로 프론트엔드에서 어려…

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

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

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