Education
[TIL] 22.05.18 프리온보딩 Day 12 - React Query
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..
[TIL] 22.05.17 프리온보딩 Day 11
개인 과제 끝나고 컨디션 바닥 찍었다가 다시 돌아온 사람의 TIL... 오늘 수업에는 게스트가 와주셔서 코드리뷰를 해주셨다! 런캣: cpu 사용량 알려주는 프로그램. 맥에만 있는 줄 알았는데 윈도우에도 있어서 한 마리 들여놨다. 디자인 사이트: pinterest, dribble, behance return 하는 부분은 최대한 로직없이 깔끔하게 짜는 것이 좋다. 구글 폰트 noto sans -> 다른 건 깔끔한데 숫자가 못생겼다. lato -> 숫자가 깔끔. open sans 폰트를 다 다운받으면 용량이 커지기 때문에 서브셋만 받는 식으로 용량을 줄일 수 있다. IE 사용자 쫓아내기 index.html에 if IE 넣어주기. 포트폴리오 사이트에 누구 들어오는지 궁금할 때 구글 analytics 적용해보기...
[TIL] 22.05.12 프리온보딩 Day 8 - Infinite scroll(intersection-observer)
드디어.. 무한 스크롤을 완성했다. 사실 깔끔하게 짜진 못한 것 같은데 그래도 기능은 잘 동작하는 중이다! 무한 스크롤 구현에는 intersection-observer을 이용했다. 영화 정보는 한 번에 10개씩 받아오고 맨 아래로 내리면 추가적으로 10개씩 받아온다. const [movieList, setMovieList, resetMovieList] = useRecoil(movieListState) // 영화 api로 받아온 영화 정보 const [currPage, setCurrPage] = useState(1) // 현재 페이지 번호 const [isLoading, setIsLoading] = useState(false) // 로딩 중 여부 const [totalResults, setTotalResu..
[엘리스 AI 트랙 4기] 데이터 분석 웹 프로젝트 회고
🎊 3주동안 진행했던 데이터 분석 웹 프로젝트가 저번 주에 드디어 끝이 났다! About Project 이번 프로젝트는 그동안 배운 numpy, pandas를 이용해서 데이터 분석을 하고, 그와 관련된 웹사이트를 만들어야 했다. 시간 관계상 kaggle에 있는 데이터셋만 사용해야해서 주제를 정하기 어려웠지만 그래도 2~3일만에 대략적인 기획은 완료할 수 있었다. 우리 팀이 찾았던 데이터셋은 바로 kaggle에 있는 Wine reviews라는 데이터였다. ( https://www.kaggle.com/datasets/zynicide/wine-reviews ) 와인에 대한 평점과 특징, 생산되는 나라 등 여러 정보가 복합적으로 있어서 활용하기에 좋다고 생각해서 선택했다. 기본 기능으로 와인 검색(와인 태그별,..
[TIL] 22.05.11 프리온보딩 Day 7
저번에 만났던 문제를 다시 만났다. 저번에는 yarn-lock 파일을 삭제해서 해결했었는데 그게 문제가 아니었다. 어떤 solution에서는 package.json 파일에 간 후 Ctrl+s로 저장을 하면 된다고 해서 해봤는데, 그 순간에는 문제가 해결되지만 파일을 수정하거나 페이지를 새로고침하면 다시 오류가 발생했다. 그래서 깃허브 이슈와 에러 메세지를 다시 읽어보았다. 지금까지 vscode의 bash에서 yarn start를 하고 있었는데, vscode 터미널의 폴더 경로는 모두 소문자로 되어있었다(ex. desktop/git/~~). 그런데 BaseConfig에는 폴더 경로의 앞문자가 대문자였다(ex. Desktop/Git/~~). 따라서 직접 폴더를 우클릭해 'Code에서 열기'로 열거나 터미널에..
[TIL] 22.05.10 프리온보딩 Day 6 - Recoil, CRA .env 설정
⛓️ Recoil Recoil의 등장배경 Redux, Mobx는 단순 자바스크립트 상태관리 라이브러리일 뿐, 리액트를 위한 상태관리 라이브러리는 아니었다. 2020년 5월 페이스불이 발표한 리액트 상태관리 라이브러리 리코일은 최대한 Reactish하게 문법이 이루어져있으며 오직 리액트를 위한 상태관리 라이브러리이다. 리덕스나 Mobx를 사용하기 위해서는 store 구성을 위한 package.json에 있는 CRA 설정부터 action, reducer 등 기본적인 보일러 플레이트를 설계해야 하고, 그에 따른 코드들을 감싸주어야 환경설정이 끝난다. 하지만 리코일은 RecoilRoot를 최상위로 감싸주면 사실상 프로젝트 설정은 끝난다. RecoilRoot 리코일 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 ..
[TIL] 22.05.09 프리온보딩 Day 5 - TypeScript
기업과제를 앞두고 타입스크립트를 공부해봤다. (정말 간단하게 맛보기..) TypeScript for JavaScript Programmers https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 타입 정의하기(Defining Types) 형태를 명시적으로 나타내기 위해서 interface로 선언. interface User { name: string; id: number; } 이제 변수 선언 뒤에 : TypeName의 구문을 통해 자바스크립트 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있다. interface User{ ... } // --- cut --- const user: User = { name:..
[TIL] 22.05.08 프리온보딩 Day 4
투두리스트를 만드는 과제가 오늘까지 제출이었다. 기능 구현은 어느정도 시간 안에 완료된 것 같은데 여러명이 한 번에 PR을 날리고 merge하는 과정을 거치다 보니 테스트할 시간이 부족했다. 따라서 만약 3일 안에 해야 할 과제일 경우 구현은 이틀 안에 완료하고 테스트하는 시간을 하루정도 가져야 한다고 알려주셨다. html 태그를 최대한 많이 활용하자. 라이브러리 / 유용한 사이트 store.js -> localStorage를 편리하게 쓸 수 있다. slick.js -> 캐러셀 라이브러리. day.js -> 날짜 변환에 사용. moment.js는 용량이 크기 때문에 dayjs를 많이 사용하는 추세이다. json to ts -> 자동으로 타입 정의해주는 vscode 익스텐션. can i use squoos..
[TIL] 22.05.05 프리온보딩 Day 3
fork한 후에 올라온 upstream의 커밋 가져오기 upstream이란? Fork 대상이었던 원래 저장소 git 명령어를 이용해 upstream의 새로운 커밋들을 내 로컬 저장소에 pull하면 된다. 1. upstream 추가 git remote add upstream [REPO주소] 2. 내 로컬 저장소로 upstream 저장소에 있는 걸 pull 하기 내 로컬에 클론한 저장소로 pull(또는 fetch)해서 upstream에 새로 올라온 commit들을 가져온다. git pull upstream [브랜치명] 3. Conflict 있을 경우 해결 4. origin에 push git push origin [브랜치명] 소소하게 느낀 점 팀으로 하다보니 서로 모르는 것들을 물어볼 수 있다는 것이 큰 장점..
[TIL] 22.05.04 프리온보딩 Day 2
2일차에는 팀 과제를 진행했다. 전에 팀 프로젝트를 진행할 때는 각자 브랜치에서 작업하고 한 브랜치로 머지하는 방식으로 했었는데, 이번에는 깃허브에 팀 organization도 만들고, PR하는 방법에 대해서도 배웠다. git 초보를 위한 PR 방법 https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/ 🪡 Pull Request 과정 Fork: 타겟 프로젝트의 저장소를 내 저장소로 fork. clone, remote 설정: fork해온 repo를 clone해온다. branch 생성: 작업할 브랜치 생성 수정 작업 후 add, commit, push: 수정 작업 후 push. ('git push origin [브랜치 이름]' 처럼..