React🚀

✨참고✨ React가 빠른 이유? virtual(존재하지 않는)소스코드에 처음부터 HTML을 넣지 않고,HTML에서 HTML을 추가하거나 제거하기 떄문application이 로드할 때 비어 있는 HTML을 로드하게 되고,그런 다음에 react가 HTML을 밀어넣게 된다

개인 공부를 위해 작성했습니다3주차부터는 React를 배우게 되는데 HTML, CSS, JS에 겨우 익숙(?) 아니지.. 아직 익숙할 정도는 아니지,😂ㅠ 해졌다 싶은데 어려울 것만 같은 React를 배우게 되어 예습 겸 공부했던 내용을 정리해본다.React에서 사용되

Component 단위의 Javascript Library가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다가상 돔(Virtual Dom) 은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술로 불필요한 UI

개인 공부를 위해 작성했습니다state : 상태화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체constructor()에서 선언된 state의 값을 변경할 때 사용props : properties(속성)props는 부모 component로부터 전달 받은 데

개인 공부를 위해 작성했습니다State & Event에 대해 공부하던 중, this와 bind의 개념을 정립하고자 기록해본다.객체지향 언어에서의 일반적인 this는 현재 객체를 지칭하지만, js의 this는 실행할 때의 context를 의미함class component

개인 공부를 위해 작성했습니다westagram project 중 react로 댓글 기능을 구현할 때 map()를 사용하여 구현하게 되었는데, 실행시켜 보니 작동하는 데에 문제는 없으나 에러가 발생했다. 에러의 내용은 각 항목에 key를 넣어야 한다는 내용쓰....😂작

개인 공부를 위해 작성했습니다4주차에 mock data 활용하여 react westagram을 구현하기 위해 공부하던 중fetch() 함수 사용법에 대해 더 공부하고자 찾아보고 정리한 내용 기록해본다.UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우

개인 공부를 위해 작성했습니다부모 컴포넌트와 자식 컴포넌트의 Lifecycle에 대해 알아보고 관련된 에러를 해결하는 방법 알기!!시기 적절했던 세션👍 바로 적용했던 조건부 렌더링!!React 컴포넌트 안의 state와 생명주기constructorrendercompo

개인 공부를 위해 작성했습니다백엔드와 처음으로 통신했던💡! 데이터를 주고 받는 것을 직접 실습 한!! 매우매우매우매우 신기했던🤩! 로그인 & 회원가입 API 유저가 이메일을 입력하면 Email Input의 handleInput 함수가 실행된다.handleInput

개인 공부를 위해 작성했습니다1차 프로젝트를 하면서 메인 페이지의 전체 상품을 가져오는 기능 구현 중, 성능상 한 번에 많은 상품이 전부 노출되기 보단 스크롤에 따라 일정 데이터의 양 만큼 호출되도록 기능 구현이 필요했다. 그럴 때 알게 된 무한스크롤 기능 구현했던 내

개인 공부를 위해 작성했습니다무한스크롤 기능 구현하며 배운 documentElement.clientWidth를 활용하여 만든 페이지 넘기기 버튼!화면 사이즈를 구해와서 각 카드의 데이터를 몇 개씩 가져와야 하는지 계산 한 후 Prev/Next Btn 클릭할 때 마다 해

개인 공부를 위해 작성했습니다메인 페이지를 작업하면서 백엔드와 통신하는 일이 다른 페이지에 비해 적었는데, 이번 작업을 하면서 토큰을 받아와서 백엔드에 주고 내가 원하는 데이터를 받아오는 방법을 배울 수 있었다.😃혼자 작업을 했을 때와는 비교도 안 되게 뿌듯한 순간이

개인 공부를 위해 작성했습니다1차 프로젝트에서 젤 애정하는 코드💜 생각보다 시간 오래걸리지 않아서 더 뿌듯했던 코드!this.myRef = React.createRef(); 를 사용해본 코드! react에서 요소 선택시 사용한다.event별 기능 구현. 평점 선택 전

개인 공부를 위해 작성했습니다route + -ing : 경로(route)를 찾아가는 행위즉 라우팅 이란, 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것. React Router정해진 경우(정적, static)에 대해서만 경로를 표현동적인 경로를 처

개인 공부를 위해 작성했습니다2차 프로젝트 중 GoToTop Btn 기능을 구현했는데, 멘토님의 리뷰를 보고 성능 개선을 위해 공부한 내용을 정리해본다.A modern JavaScript utility library delivering modularity, perfor

개인 공부를 위해 작성했습니다자바스크립트를 위한 <span style="color:리액트를 사용하는 많은 프로젝트에서 리덕스도 같이 사용하는데, 그 이유는컴포넌트 코드와 상태 관리 코드의 분리가 가능하고SSR시 데이터 전달이 간편하다리액트 컨텍스트보다 효율적인 렌

개인 공부를 위해 작성했습니다위코드 다닐 때 들어보긴 했지만 아직 안 써본..앞으로 많이 사용하게 될 axios에 대해 공부한 내용 정리해본다.<span style="color:>백엔드와 프론트엔드랑 통신을 쉽게 하기 위해 사용되는 라이브러리운영 환경에 따라 브라

useRef() 정리하기

특정 결과값을 재사용할 때 사용하는 useMemo, 특정 함수를 새로 만들지 않고 재사용하고 싶을 땐 useCallback, 컴포넌트 리렌더링 방지는 React.memo

Context API 로 상태 관리하기

컴포넌트의 상태값을 리덕스처럼 관리하기:

페이스북이 만든 상태관리 라이브러리 Recoil

프로젝트 전, axios와 react-query 사용해보기 연습!

infinite scroll에서 scroll이 특정 포지션을 지나갈 때, 아이템을 추가로 로드하기 위해 필요한 Intersection Observer API.

FEConf Korea의 영상을 보면서 기록하는, React 컴포넌트, 다시 생각하기!!