치춘짱베리굿나이스

비동기 처리와 Promise 동기 (Synchronous) 와 비동기 (Asynchronous) const [testValue, setTestValue] = useState(0); const handleOnClick = () => { setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); setTestValue(testValue + 1); }; ... {`${testValue}`} add 1 앞에서 prevState에 관해 짧게 정리할 때 슬쩍 본 코드이다 testValue가 한번에 5씩 증가하지 않는 이유가 ‘비동기’ 적인 작동방식 때문이라고 했었는데,..

컴포넌트의 데이터 Fetching & Rendering 크게 세 가지 방법이 있으며, 각각 수행 방법과 시간에 차이가 있다 fetch-on-render (렌더링 직후 불러오기) useEffect(() => { fetchData(); }, []); // Mount될 때 데이터 불러오기 많은 컴포넌트에서 useEffect를 통해 컴포넌트가 마운트되었을 때 데이터를 불러오는 방식을 사용한다 이 방식의 단점은 컴포넌트가 마운트 및 렌더링된 이후에 데이터를 불러오기 시작한다는 점이다 이는 곧 ‘waterfall’ 이라는 문제로 이어진다 const MovieList = () = { const [movieData, setMovieData] = useState(null); // 데이터 초기화 useEffect(() =..

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

localStorage / sessionStorage 이번 기업과제는 로컬스토리지에 값을 저장해야 한다는 조건이 붙어 있어 store 라이브러리를 사용하려고 하는데, 기왕이면 로컬 스토리지에 관해 알고 사용하면 더 좋지 않을까? 싶어 정리를 해 본다 찾아보던 중에 세션 스토리지도 있길래 같이 적으려구 localStorage 로컬 스토리지는 말그대로 로컬에 저장되며, 브라우저를 종료해도 값이 살아있다 또한 같은 페이지 프로토콜 (같은 웹 페이지 주소) 는 탭이나 창이 달라도 같은 로컬 스토리지를 공유하므로, 다른 창을 열었다고 해서 다른 값이 나오지 않는다 이러한 특성 때문에 사용자가 고의로 지워버리지 않는 이상 데이터는 계속 유지된다 브라우저별로 서로 다른 로컬 스토리지 영역을 가지므로, 크롬에서 저장한..

store 설치 $> npm install store $> yarn add store npm 링크 store store A localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood. Latest version: 2.0.12, last published: 5 years ago. Start using store in your project by running `npm i store`. www.npmjs.com yarn 링크 Contributors https://yarnpkg.com/package/store Fast,..

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

IntersectionObserver 무한스크롤을 구현해야 해서 이전에 합류한 프로젝트 코드를 (모바일 뷰 구현할 때 무한스크롤 방식으로 게시글을 불러왔기 때문) 찾아보고 있었는데, 보편적인 방식은 Intersection Observer를 거는 방법 같다 이름만 들어보면 벌써 공포스러운데 차근차근 정리해보도록 하겠다 Intersection Observer가 뭐지? 한국어로 교차 관찰자 / 탐지자 라고 한다 한국말로 풀어도 어렵다 ㅋㅋ ‘타겟 요소’와 ‘타겟의 상위 요소 또는 최상위 요소의 뷰포트’가 교차되는 부분을 비동기적으로 관찰하는 API라고 한다 뷰포트라 함은 우리가 웹 페이지를 보고 있는 바로 그 화면을 의미하며, css 작업을 할 때 vw, vh 단위로 비교적 익숙할 것이다 쉽게 말하자면 어떤 ..

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