원티드 프리온보딩 프론트엔드 코스가 끝난지 거의 한 달이 지났다. 끝나자 마자 바로 다른 프로젝트를 시작하게 되어서 바로 회고를 쓰지 못했는데 프로젝트도 다 끝났으니 프리온보딩 코스의 회고를 작성해보려 한다. ✨ Project 한달동안 총 2개의 개인 과제와 4개의 팀 과제를 진행했다. 1. Todo-list 코스를 시작하고 제일 처음으로 한 팀 과제. 처음에만 해도 타입스크립트는 물론이고 린터도 사용해보지 않았었다. 멘토님께서 알려주신 폴더 구조와 린터 세팅, 그리고 타입스크립트를 이용해서 간단하게 투두리스트를 만들어보았다. 투두 리스트라는 작은 프로젝트를 10명의 팀원(그것도 모두 프론트엔드!)과 함께 하려다 보니 역할을 나누기가 굉장히 어려웠다. 최대한 세세하게 역할을 나눴고, 나는 폴더 세팅과 라..

카카오 지도 api를 이용해 검색한 키워드와 관련된 결과를 지도에 마커로 찍어주는 기능을 만들어봤다. 1. 카카오 개발자 페이지에서 api key 발급 https://developers.kakao.com/ 2. 도메인 등록 메뉴의 플랫폼 -> Web에서 기본 도메인으로 http://localhost:3000을 등록해준다. 3. .env 파일을 만들어 key값 따로 저장 이 때 변수명은 꼭 REACT_APP으로 시작하도록 지어줘야 한다. 그리고 꼭 자바스크립트 키를 넣어줘야 한다! 모든 권한을 갖고 있다길래 Admin 키로 했었는데 계속 안되서 설마하고 자바스크립트 키로 했더니 됐다. REACT_APP_KAKAO_KEY=카카오 지도 API 자바스크립트 키 4. react-kakao-maps-sdk 설치 y..

오늘 오랜만에 다시 등장해주신 특별 게스트님과 함께 모의면접을 진행했다. 다른 분들께서 대답하시는건데도 불구하고 너무 떨렸고 막상 같이 대답해보려고 하니 머릿 속에서 대충 알고 있던 것을 말로 설명하는 것이 쉽지 않다고 느꼈다. 좀 더 정확한 개념 공부의 필요성을 느꼈다. 🥲 😯 오늘 멘토님 말씀 간단 정리 너무 급하게 취업하려고 하면 안좋은 회사에 가게될 수 있으니 면접도 많이 보면서 좋은 회사를 골라서 가도록 하자. (취업은 연애와 같다^^...) 링크드인 프로필은 영어 버전, 한국어 버전 둘 다 만들어 놓고 틈틈히 관리하자. 면접 질문때문에 멘탈이 탈탈 털려서 정리를 많이 못했는데 수업을 다시 들어보면서 한번씩 더 정리해봐야겠다. 오늘 나왔던 질문들과 추가적인 다른 질문들은 정리해서 다시 블로그를 ..

오늘 수업 내용 정리 글자색은 기본 검정색으로 하지 말자. 촌스럽다. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ https://color.adobe.com/ HTML 데이터세트(dataset) 사용하기 (+React) 데이터세트는 HTML 표준에 정의된 기능이다. DOM 요소에 값을 저장하고 JS 코드로 값을 읽어들일 수 있다. html 태그 내에 `data-속성-이름`을 추가하면 된다. 만약 `data-user-name`이라는 데이터세트를 추가했다고 했을 때, js에서 읽어들일 때 `data-`는 제거되고, userName과 같이 카멜케이스로 변경하여 읽는다. 각 태그마다 1개의 데이터셋 속..

Squash and Merge feature 브랜치의 commit history를 합쳐 깔끔하게 만들기 위해서 사용한다. commit a+b+c를 합쳐 commit abc를 만들어지고 master에 추가된다. abc는 하나의 parent를 가진다. git checkout master git merge --squash my-branch git commit -m "commit message" pr한 후 머지할 경우에는 squash and merge를 선택해주면 된다. 이번 과제할 때 squash and merge를 한 후 새로운 pr을 만들면 그 전의 커밋까지 계속 같이 보이는 현상이 있었다. squash and merge를 한 후에는 브랜치를 삭제해줘야 하는데, 이전의 브랜치와 같은 브랜치에서 계속 작업하..

오늘 수업 내용 정리 사이드 바 같은 건 aside 태그를 이용하고 나머지 내용 부분은 main 태그를 이용하자. dl, dt, dd 태그 쓸 때, 각 dt, dd마다 따로 작업해주고 싶다면 div로 감싸주자. map함수로 돌릴 경우 꼭 li태그로 써주기 클릭이벤트가 있는 건 무조건 button으로! 괜히 li에 onClick을 넣지 말자. 숫자에 언더바를 써주면 보기 더 좋다. (1000000은 1_000_000 처럼 쓸 수 있다.) code climate -> 코드를 분석해 줌. storybook js로 컴포넌트를 관리할 수 있다. Chromatic을 이용해 storybook js로 만든 컴포넌트를 공유할 수 있다. 성능 확인을 위해서는 개발자도구의 performance, lighthouse 탭을 이..

Victory.js 사용하기 victory js를 사용해보았다. 워낙 문서가 잘 되어있어서 기본적인 차트 그리기에는 어려움이 없었지만 과제의 요구사항에 따라서 추가적으로 구현하려니 어려움을 겪었다. 여러 번의 삽질을 통해 일단 기본적인 레이아웃까지는 완성했다. 과제의 요구사항에서 첫 번째 그래프의 y축은 왼쪽에, 두 번째 그래프의 y축은 오른쪽에 표시하라고 되어 있었다. 둘의 단위가 비슷하다면 쉽게 구현했겠지만 하나는 백 단위고, 하나는 십 단위라서 한 그래프에 비슷하게 보여주는 것이 어려웠다. 😥 바로 코드 고고 일단 샘플로 사용할 데이터는 아래와 같다. Chart.tsx const data = [ { click: 559, conv: 37, date: '2022-02-01', }, { click: 69..

오늘 기업 과제를 하나 더 끝냈고 또 다시 새로운 과제가 시작되었다. 이번 과제에서는 개인적으로 아쉬웠던 점도 있었기 때문에 다음 과제 때는 더 열심히 참여하면서 해야겠다. 오늘 수업 내용 useQuery의 key값에는 함수 이름같은 건 쓰지말고 문자열 또는 배열로 넣자. // 문자열 useQuery('todos', ...) // 배열 useQuery(['todos'], ...) mark 태그를 span으로 감싸는 건 html을 잘 모르는 것이다. (문서를 보니 보통 p태그나 blockquote 안에서 쓰는 듯.) span으로 무언가를 감싸는 것 자체가 좋지 않음. 리덕스 툴킷 상태 리셋해줄 때 reset용 값을 따로 만들지 말고 INITIAL_STATE를 그대로 넣어주면 편함. 차트 그리는 라이브러리는..

Redux Toolkit 리덕스를 사용하는 구조에서는 전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장하며, 상태를 변경하는 것은 어떤 일이 일어날 지를 서술하는 객체인 액션(action)을 내보내는(dispatch) 것이 유일한 방법이다. 그리고 액션이 전체 애플리케이션의 상태를 어떻게 변경할 지 명시하기 위해서는 리듀서(reducer)의 작성이 필요하다. 리듀서는 변화를 일으키는 함수로써, 전달받은 액션을 가지고 새로운 상태를 만들어 스토어에 전달한다. 이 모든 설계는 데이터가 단방향으로 흐른다는 전제 하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했다. 대표적으로 언급되는 리덕스의 문제는 1. 스토어 환경 설정이 복잡하다. 2. 유용하게 ..

React Query server state를 관리하는 라이브러리로, 리액트 프로젝트에서 서버와 클라이언트 사이 비동기 로직들을 손쉽게 다루게 해주는 도구이다. 데이터 fetching, 백그라운드에서 데이터 업데이트, Optimistic Updates, 캐싱과 key를 통한 전역 상태와 같은 사용 등 많은 유용한 기능을 제공한다. 리액트 쿼리에서는 API 통신을 위한 여러 함수를 useQuery와 같은 Hook 인터페이스로 제공한다. import React from "react"; import ReactDOM from "react-dom"; import { QueryClient, QueryClientProvider, useQuery } from "react-query"; import { ReactQuer..