치춘짱베리굿나이스

코드리뷰 서론 초대손님 반갑습니다~~ 웹스톤을 쓰는 이유? 추천받아서..? 코드리뷰 #1 Route는 최대한 간단해야 한다 레이아웃은 최상위에 배치해서 래핑하는 것을 추천 기업 같은 경우 페이지가 30~40개급이 돼서 라우터가 무거워질 수록 라우터 구성이 매우 복잡해진다 React-loadable 기본 Lazy 기능도 좋지만 loadable을 쓰면 조금 더 깔끔할 것 코드를 최대한 깔끔하게 쓰자 && 연산자, || 연산자로 도배하는 것보다 if / else문, useMemo 사용하는 것을 추천 삼항연산자는 코드의 depth를 늘어나게 만든다 프론트엔드는 가독성이 중요 ⇒ 가독성을 신경쓰지 않으면 줄 수가 기하급수적으로 늘어난다 나중에 리팩토링 할 수 있으니 그걸 고려하자 공통컴포넌트로 쓸 수 있는 것들은..

코드 예시 리덕스로 다크모드 구현하기 전역 상태관리 라이브러리 context api : 비추함 속도가 느림 사용할 때마다 코드가 캐스캐이딩되어서 코드가 금방 더러워진다 redux toolkit : 추천함 바닐라 redux에 여러 기능과 라이브러리를 포함해서 쉽게 쓸 수 있도록 되어있음 mutation 관리, Thunk 관리, 캐싱 등 일반 리덕스보다 훨씬 쓰기 편함 recoil 아직도 알파단계라 뭐가 금방금방 바뀜 atom 정도 (+ selector) 만 쓸 것 redux 사전 설정 import { Provider } from 'react-redux'; import { store } from './states'; // 전역 상태값 저장하는 store 위치 ... const root = ReactDOM.c..

코드리뷰 코드리뷰 #1 (내코드) readme 리드미만 보면 전교1등이다 (ㅋㅋㅋㅋ) 하이테크 볼펜 20개씩 있을것같다 얼마나 타자를 열심히 쳤으면 손가락이 ㅋㅋ 와 ㅋㅋ 검색어 없을 때 불필요한 API 요청 없애기 export const MovieListContainer = () => { const res = fetchWrappedMovieData(setValue, 1); // 이 부분 때문에 컴포넌트가 로딩될 때마다 검색어가 없어도 값을 fetch한다 .. } 페이지 리렌더링할 때마다 불필요하게 API 요청이 한번씩 더 들어간다 조건문 등을 이용해서 검색어가 없을 땐 API 요청을 없애자 서버가 헛수고하잖어!! 드래그앤 드랍 할 때 내부 문자열 긁히는 거 막기 user-select: none; CSS..

그룹과제 #2 시작 공식적인 내생각 새로운 과제가 시작되었다 여전히 파트분배는 어렵다... 그리고 이번에도 API 명세는 해괴하다 일단 오늘은 정리해야할 내용이 많아서 간단하게 axios로 데이터 fetch만 해 봤는데 response로 들어오는 data 객체에서 우리가 써야 할 정보가 깊이 5 안쪽에 있다 심지어 느려... JSON 파일을 주는 이유를 알 것 같았다 리액트 쿼리랑 리덕스 툴킷 위주로 공부하고 fetch api 함수를 어떻게 잘 다듬을지 고민해봐야겠다 오늘 정리한 강의 과제하느라 얼레벌레 시간보내다가 제대로 정리를 이제야 했다 (반성) 실시간으로 들을땐 진행속도가 빨라서 어버버하다 키워드만 적어놨었는데 진작에 미리 정리하고 개인과제했으면 과제 퀄리티 좀 올라갔을듯 220510 코드리뷰 2..

날씨 앱 서론 자기 코드에 자만심갖거나 쪽팔려하지 말자 ⇒ 발전이 없다 공식문서 신경 많이 쓰기 린터는 절대 끄지마세요 날씨앱 만들기 키값 보관하기 - 환경변수 REACT_APP_[변수명]=[변수값] REACT_APP_API_KEY=12345678 키값 털리면 API 리밋에 걸리거나 돈이 마구 나갈 위험이 있음 깃허브에 올리지 않도록 하기 위해 .env 파일 등에 넣는다 위의 형식으로 .env 파일을 저장하면 process.env.REACT_APP_API_KEY 와 같은 식으로 환경변수를 사용할 수 있다 CRA로 생성한 프로젝트는 변수명 앞에 접두사로 REACT_APP_을 붙여줘야 인식함 NavLink 사용하여 내비게이션 바에 링크 달기 ... cx({ [styles.isActive]: isActive ..

각잡고 정리하다가 조금 오래걸렸다... 서론 린터, 프리티어 절대 끄지 마시오 빨갛게 노랗게 뜨면 다 0점 드리겠습니다 린터와 타입스크립트가 50% 이상 들어간다 코드리뷰 중요 11년차와 1년차의 차이: 삽질을 먼저 해봤느냐 처음해보느냐의 차이 타입스크립트 샘플 참고해가면서 사용하세요 초대손님 환영합니다 코드리뷰 코드리뷰 #1 Readme 꼼꼼히 적기 CRA 디폴트 리드미 사용하지 말고 프로젝트 개요나 설명 등을 적어놓기 폴더구조 같은 걸 첨부하면 코드 읽기에 더 좋다 Router 폴더명 Router는 폴더명 소문자로 해놓는 게 좋다 그리고 파일 하나밖에 없는 상태니까 그냥 폴더로 만들지 말고 파일 하나로 빼자 (router.tsx) 폴더 구조 컴포넌트 이름을 제외하고는 파일명은 어지간하면 다 소문자로 ..

개인과제 #1 종료 https://github.com/chichoon/wanted-movie-app GitHub - chichoon/wanted-movie-app: 원티드 프리온보딩 개인과제 #1 영화 검색 앱 원티드 프리온보딩 개인과제 #1 영화 검색 앱. Contribute to chichoon/wanted-movie-app development by creating an account on GitHub. github.com 공식적인 내생각 어지간한건 어제 완성을 해놨어서 오늘은 라이브러리 위주로 정리하고 리드미 작성했다 깃허브 페이지로 배포하려 하니 하위 링크에서 404 에러가 걸려버려서 찾아보니 깃허브 페이지는 싱글페이지 어플리케이션 지원을 안 해서 그런 것이었다 404 리디렉션용 html 파일이..

개인과제 #1 완성, 배포 공식적인 내생각 Suspense로 로딩창 구현해보겠다고 온갖 삽질을 하다가 오늘 드디어 해결했다 겸사겸사 localStorage 값이 뜬금없이 초기화되는 문제도 해결하고, 드래그앤 드롭도 구현했다 Suspense + Promise 로 로딩 구현하는 게 제일 힘들었다... 하나 잘 막으면 다른 하나에서 터지고 이게 다 비동기 때문이다 setState가 비동기라서 그렇다 진짜 상태값 바뀌는 타이밍을 모르겠어서... 배포도 마치긴 했는데 깃허브 페이지 배포는 언제 해도 헷갈린다 배포 후에 데이터 받아오는 함수가 동작을 안해서 환경변수가 제대로 적용이 안 된줄 알고 한참을 해멨는데 CRA는 컴파일할 때 env 파일 변수를 알아서 잘 컴파일해준다는 걸 뒤늦게 알았고 사실 https 이슈..