개인 과제 끝나고 컨디션 바닥 찍었다가 다시 돌아온 사람의 TIL... 오늘 수업에는 게스트가 와주셔서 코드리뷰를 해주셨다! 런캣: cpu 사용량 알려주는 프로그램. 맥에만 있는 줄 알았는데 윈도우에도 있어서 한 마리 들여놨다. 디자인 사이트: pinterest, dribble, behance return 하는 부분은 최대한 로직없이 깔끔하게 짜는 것이 좋다. 구글 폰트 noto sans -> 다른 건 깔끔한데 숫자가 못생겼다. lato -> 숫자가 깔끔. open sans 폰트를 다 다운받으면 용량이 커지기 때문에 서브셋만 받는 식으로 용량을 줄일 수 있다. IE 사용자 쫓아내기 index.html에 if IE 넣어주기. 포트폴리오 사이트에 누구 들어오는지 궁금할 때 구글 analytics 적용해보기...

드디어.. 무한 스크롤을 완성했다. 사실 깔끔하게 짜진 못한 것 같은데 그래도 기능은 잘 동작하는 중이다! 무한 스크롤 구현에는 intersection-observer을 이용했다. 영화 정보는 한 번에 10개씩 받아오고 맨 아래로 내리면 추가적으로 10개씩 받아온다. const [movieList, setMovieList, resetMovieList] = useRecoil(movieListState) // 영화 api로 받아온 영화 정보 const [currPage, setCurrPage] = useState(1) // 현재 페이지 번호 const [isLoading, setIsLoading] = useState(false) // 로딩 중 여부 const [totalResults, setTotalResu..

저번에 만났던 문제를 다시 만났다. 저번에는 yarn-lock 파일을 삭제해서 해결했었는데 그게 문제가 아니었다. 어떤 solution에서는 package.json 파일에 간 후 Ctrl+s로 저장을 하면 된다고 해서 해봤는데, 그 순간에는 문제가 해결되지만 파일을 수정하거나 페이지를 새로고침하면 다시 오류가 발생했다. 그래서 깃허브 이슈와 에러 메세지를 다시 읽어보았다. 지금까지 vscode의 bash에서 yarn start를 하고 있었는데, vscode 터미널의 폴더 경로는 모두 소문자로 되어있었다(ex. desktop/git/~~). 그런데 BaseConfig에는 폴더 경로의 앞문자가 대문자였다(ex. Desktop/Git/~~). 따라서 직접 폴더를 우클릭해 'Code에서 열기'로 열거나 터미널에..

⛓️ Recoil Recoil의 등장배경 Redux, Mobx는 단순 자바스크립트 상태관리 라이브러리일 뿐, 리액트를 위한 상태관리 라이브러리는 아니었다. 2020년 5월 페이스불이 발표한 리액트 상태관리 라이브러리 리코일은 최대한 Reactish하게 문법이 이루어져있으며 오직 리액트를 위한 상태관리 라이브러리이다. 리덕스나 Mobx를 사용하기 위해서는 store 구성을 위한 package.json에 있는 CRA 설정부터 action, reducer 등 기본적인 보일러 플레이트를 설계해야 하고, 그에 따른 코드들을 감싸주어야 환경설정이 끝난다. 하지만 리코일은 RecoilRoot를 최상위로 감싸주면 사실상 프로젝트 설정은 끝난다. RecoilRoot 리코일 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 ..

기업과제를 앞두고 타입스크립트를 공부해봤다. (정말 간단하게 맛보기..) 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:..

투두리스트를 만드는 과제가 오늘까지 제출이었다. 기능 구현은 어느정도 시간 안에 완료된 것 같은데 여러명이 한 번에 PR을 날리고 merge하는 과정을 거치다 보니 테스트할 시간이 부족했다. 따라서 만약 3일 안에 해야 할 과제일 경우 구현은 이틀 안에 완료하고 테스트하는 시간을 하루정도 가져야 한다고 알려주셨다. html 태그를 최대한 많이 활용하자. 라이브러리 / 유용한 사이트 store.js -> localStorage를 편리하게 쓸 수 있다. slick.js -> 캐러셀 라이브러리. day.js -> 날짜 변환에 사용. moment.js는 용량이 크기 때문에 dayjs를 많이 사용하는 추세이다. json to ts -> 자동으로 타입 정의해주는 vscode 익스텐션. can i use squoos..

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 [브랜치명] 소소하게 느낀 점 팀으로 하다보니 서로 모르는 것들을 물어볼 수 있다는 것이 큰 장점..

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 [브랜치 이름]' 처럼..

🔍 검색이 잘 되는 사람이 되자. 원티드, 링크드인, 로켓펀치 등에 항상 자기 프로필을 올려놓고, 이력서는 항상 업데이트하면서 pdf로 가지고 다닐 것. 인터뷰 여러번 보면서 내 시장가치를 알 수 있음(연봉협상할 때도 좋음.). 📝 TIL(Today I Learned) 오늘 배운 내용을 매일 요약해서 적어놓기. 스스로 배운거 정리하는 데에도 도움이 됨. 💡 유용한 사이트/라이브러리 regex101.com 정규식 테스트해주는 사이트. classnames 라이브러리 dribbble.com 디자인 훔쳐보기 좋은 사이트. 🎀 VSCode Extension autoRenameTag Beautify -> json 파일 자동 정렬 ESLint Prettier Stylelint TODO Highlight Timesta..