React

React를 사용하는 이유 3세대 웹 요즘 웹은 예전처럼 단순하지 않다. 다양한 기능, 사용자의 눈길을 사로잡는 디자인, 다양한 기기에 따른 반응형의 구현, 그리고 넘쳐나는 데이터들에 맞는 웹을 만들다 보니, 이전보다 훨씬 동적이고 복잡해졌다. 따라서 웹을 개발할 때

React를 사용하면 화면을 컴포넌트 단위로 구분해서 구현한다. Nav, Main, Footer로 나뉘어져 있을 것이고, 또 Main은 프로필 컴포넌트, 제품 설명 컴포넌트를 가지고 있을 것이다. 따라서 부모 컴포넌트 아래에 자식 컴포넌트가 속해 있는 구조가 되고, 부

React를 사용하여 인스타그램 클론코딩을 하던 중, 콘솔창에 다음과 같은 에러가 뜨는 것을 발견하였다.정확히 어떤 부분에서 오류가 났는지도 파악하기 어렵고, 오류는 나지만 기능적인 부분에서 딱히 작동이 안되는 부분이 없어서 무시했다. 기능을 다 구현하고 나서 코드 리

만들어두었던 인스타그램 Login 페이지를 이용하여, 백엔드로 Request를 보내서 회원가입과 로그인을 하는 연습을 했다.어떤 방식으로 통신이 이루어졌는지 간단한 흐름을 정리해보자.아이디와 패스워드를 입력하고 버튼을 클릭했을 때, 서버로 아이디와 패스워드 값을 전송하

이마트 피코크 사이트를 만들면서 상품 리스트 불러오기, 장바구니, 상품 좋아요 누르기 등 다양한 기능들을 구현하고 있다. 내가 맡았던 카테고리별 상품 리스트 불러오기 페이지를 개발하던 중, 막히는 부분이 생겼다.KOREAN에 마우스를 올려놓으면 한국 음식 리스트를 불러

React를 사용하다 보면 상위 컴포넌트로부터 데이터를 잘 전달받았는지, 현재 어떤 데이터를 가지고 있는지 등을 확인 하기 위해서 console.log를 자주 쓰게 된다.componentDidMount에서 받아온 state값을 로그로 찍는다고 했을 때, 바로 값이 받아

PEACOCK 프로젝트를 하면서 상품 리뷰 기능을 구현해야 했었다.상품 리뷰를 처음에는 3개만 보여주고, 더보기를 누를때 마다 3개씩 더 보여주는 방식이었다. 내가 맡은 기능은 아니었지만, 팀원이 이 부분을 어떻게 구현해야할지 고민해서 같이 고민해보다가 Paginati

Routing은 다른 URL에 따라 다른 화면을 보여주는 것이다.저번 인스타그램 클론 프로젝트에서 react-router-DOM이라는 라이브러리를 사용하여 라우팅을 구현했었다. 로그인에서 메인으로 넘어가는 부분만 라우팅 해주면 됐었고, 페이지 주소가 바뀔 상황은 없었기

이번주에 React Hook을 배웠다.여태까지 클래스형 컴포넌트를 사용했는데, hook을 이용하면 함수형을 사용할 수 있었다. 사실 왜 굳이 함수형을 써야 되는지도 잘 몰랐고, 이미 class형에 많이 익숙해져 있던 상태라 예제만 보고는 코드가 쉽게 눈에 들어오지 않았