치춘짱베리굿나이스

개인과제 #1 공식적인 내생각 코드를 짜다 보니 Suspense를 단단히 잘못 알고 있는 듯한 느낌이 들어서 (실제로도 잘못 쓰고 있었던게 맞았다) Suspense 관련해서 자료를 정리하고, 또 Suspense 관련 자료를 검색하다 보니 비동기 처리랑 Promise 관련해서 자료 정리하고... 공부할 게 끝이 없다 작업 내용 (삽질 오브 삽질) 자꾸 로컬 스토리지 값이 초기화되던 문제 useEffect(() => { store.set('storageData', favoriteData); }, [favoriteData]); 이 코드가 문제였다 storageData는 FavoritePage에 들어올 때마다 값이 initialData로 초기화되는데, favoriteData가 변경되었으니 당연히 저 useEff..

개인과제 #1 공식적인 내생각 하루종일 갤갤대느라 별거 안했다... 처참하다 (ㅋㅋ) 로컬 스토리지에 값 올리는 것까진 했는데 새로고침할 때마다 로컬 스토리지에 있는 값이 자꾸 초기화된다 이부분 내일 다시 한번 봐야겠다 작업 내용 (삽질한 내용) Suspense에 대해 단단히 잘못 알고 있는 듯한 나 {renderMovieContainer()} 딱 이렇게만 해 놓으면 renderMovieContainer() 돌아가는 동안 로딩 컴포넌트가 렌더링 되는 줄 알았다 내 예상은 renderMovieContainer 내의 모든 내용이 렌더링될 때까지 로딩 컴포넌트가 빙글빙글 돌아가는 거였는데 실상은 하나라도 로딩되면 Array.map 메서드의 작업 내용이 끝나지 않아도 suspense가 종료되고 컴포넌트가 렌더링..

개인과제 #1 공식적인 내생각 무한스크롤 구현하면서 IntersectionObserver를 처음 다뤄봤는데, 린터의 비명소리와 타입스크립트의 타입 거부, 온갖 삽질이 겹쳐져 무한스크롤만 세시간 넘게 잡은 것 같다 삽질 이유도 찾아보면 참 별거아니었는데... 작업 내용 (삽질 내용) API 명세와 실제 데이터의 타입이 다르게 들어오는 문제 export declare interface ISearchResult { Response: 'True' | 'False' | null; totalResults?: number; Error?: string; } Bool이라길래 당연히 Boolean인 줄 알았는데 실제로는 문자열이 들어와서 암만 searchResult.Response 로 조건문을 작성해봐야 true만 반환되..

팁 어린이은행 ㅋㅋ 경력자와 신입의 가장 큰 차이는 경력자는 이미 신입일 시절에 특정 이슈에 대해 막혀본 경험과 해결한 경험이 있다는 것 (같은 이슈가 나와도 빠르게 해결할 수 있음) 열심히살자 HTML 기본 사용법 div와 span 정도만 알아도 나머지는 다 비슷비슷하다 (형제 태그 느낌) 프론트엔드의 꽃은 다양한 html 태그를 어떻게 적재적소에 활용하나에 있다 비슷한 기능을 하지만 역할을 구분지을 때 쓰는 시맨틱 태그, 헤더 태그, 리스트 태그, 꾸미기 태그, 입력창 태그, 이름도 안 들어본 태그 등 종류가 굉장히 많다 내비게이션 바는 nav 태그 상단 내비든, 하단 내비든, 우측 내비든 nav 태그로 구분지어놓는 게 좋다 div랑 동작은 같지만 이름만 구분해둔 시맨틱 태그임 리스트 형식으로 여러 ..

개인과제 #1 공식적인 내생각 손가락 끝을 다쳐서 반창고를 감았더니 타자치는 느낌이 이상하다 오늘 유독 기침이 심해져서 집중이 하나도 안 됐다... 그래도 개인과제 얼레벌레 시작해서 다행이다 노션 정리보다 코드 작성에 더 시간투자 많이 하니까 재미있었다 남들보단 실력이 부족할지 몰라도 내가 재밌는 개발을 할 수 있어서 다행이다 코드리뷰 1등으로 요청하길 잘했다... 로직만 중요한게 아님을 많이 느낌 작업 내용 typescript interface에서 ?의 의미 interface ITest { value1: string; value2?: string; } 있어도 되고 없어도 되는 값을 의미한다 커스텀 훅 만들어보기 export const useFetchMovie = (page: number): ISearc..

개인과제 #1 시작 공식적인 내생각 이라고 제목은 적었지만 사실 타입스크립트 이것저것 만져보느라 진도는 많이 못 나갔고... 강의 내용 정리나 정리하면서 궁금했던 것들 위주로 블로그에 정리하느라 바빴다 글로 하나씩 정리하는 것보다 실제로 코드짜는게 더 재밌다는 생각이 들었다... 하지만 정리 안 하면 지는 느낌임 내일은 본격적으로 영화앱 만들기 시작하고 가능하면 날씨앱도 만들어보고 싶다 과제 분량이 많다 보니 강의내용 정리도 계속 밀려서 1일차 강의내용을 오늘 정리를 끝냈다 ㅡ,,ㅡ;; 큰일났다 집중력 어떡하지 오늘 정리한 내용 yarn 사용해보기 npm 대신 yarn 써보기 npm 대신 yarn 써보기 yarn 지금까지 프로젝트에선 npm 만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn 으..

서론 항상 일은 더 생기기 때문에 이것을 염두하고 미리미리 작업해야 한다 일주일이면 걸릴 과제라면 한달은 잡아놓고 해야 넉넉함 수정사항은 계속 생기기 때문 코드리뷰 1팀 handleChange 이벤트 받아오기 const handleChange = ({currentTarget}) => {} e에서 currentTarget 받아올 때 구조분해 할당으로 받아오면 알아보기 힘들다 return값 내보낼 때 객체로 묶어 내보내기 return [date, {handlePrevClick, handleNextClick, handleCalChange}]; return { date, handlePrevClick, handleNextClick, handleCalChange }; 위의 반환문을 아래의 반환문으로 작성할 수 있다..

투두리스트 작성 예시 dribble.com 디자이너들끼리의 커뮤니티(?) 로, 사람들이 만든 웹 디자인들이 올라온다 Figma 없이 하나의 테마만 갖고 작업할 때 참고하기 좋다 다만 디자이너들이 온갖 기교를 넣어서 만들어놓은 동작이나 애니메이션이 많기 때문에 쳐낼 기능은 쳐내면서 작업하자.. ColorSlurp 화면상의 색상을 찍어 색상코드를 받아올 수 있는 프로그램 (mac용) 프로젝트 초기화 하기 .eslintrc.json { "extends": ["airbnb", "airbnb/hooks", "react-app", "prettier"], "env": { "browser": true, "jasmine": true, "jest": true }, "settings": { "import/extensions..