React

오늘은 wecode에서의 React 첫번째 수업이다. 수업을 듣기전에는 생활코딩을 통해 예습하였다. 첫번째 수업을 통해서 아래의 학습목표를 달성할 수 있다. 수업이 끝나고 나서 늘 자문자답하면서 오늘의 수업을 잘 소화했는지 체크해봐야 겠다. 🚀 학습 목표 어떠한

이번 한주도 어떻게 지나갔는지 모르겠다. 개인적으로 이번주는 앉아서 공부하는 시간보다는 질문과 답변, 더불어 멘붕의 연속이었다.(물론 그 시간들이 너무 큰 도움의 통로가 되었던 것 같아서 또 감사할 일이다.) 본 TIL은 금주 css에서 만들었던 내용을 React를 깔

우선 원하는 디렉토리로 이동 후 CRA 프로젝트 설치한다.npx create-react-app westagram-project( terminal로 현재 경로 확인하고 최상단으로 위치 이동! 그렇지않으면 아무것도 없는 전체폴더에 그냥 다운 받아지게되어서 CRA적용이 되

routes를 통해 이동하는 방법은 크게 두가지가 있다.공통적으로 CRA 설치 (npx create-react-app 파일명)React router 설치 (npm install reac-router-dom —save)Sass 설치 (npm install node-sa

해당 수업을 통해 성취해야 할 학습목표를 잠시 살펴보도록 하자.Array.map() 함수를 통해 컴포넌트를 재사용 할 수 있다.Mock data를 만들어 백엔드 API 미완성 상태에서도 차질없이 개발할 수 있다.componentDidMount 메소드에서 fetch 함수

리액트onClick ={클릭될 때 실행 할 함수}{}안에는 {1+1}같은 표현식이 바로 들어가면 안된다! 그 수식이 바로 들어가기 위해서는 함수를 사용하여야 한다.또한 만약 함수를 따로 만들어서 넣기 귀찮다면 arrowfunction을 직접 넣어버려도 된다.onClic

 State값 수정 테크닉! 리액트 대원칙! -> immutable data! 따라서 state는 직접 건들지 않는다. spread를 사용하게 되면 값을 공유하게 되는 것이 아니라 서로독립적인 값을 가지는 복사가 일어나게 된다.spread를 사용하게 되면 원래 갖고

이미지를 올릴때에 사용되는 형태는 간단하다.이렇게 하면 알아서 상단에 보이는 것과 같이 Choose Files가 뜨고, 파일을 선택하면 No file chosen대신, 파일의 이름이 뜨게 된다.다만, 우리는 저 형태의 디자인이 아니라 다른 디자인으로 하고 싶을때 여기

앞서 input type=file 을 사용하고 해당 버튼이 아닌 customize 한 이미지 버튼을 구현하여 ref로 접근, customize 버튼을 클릭하여 이미지가 올라가는 것 까지 성공하였다.이제 하고 싶은 것은 셀렉한 파일의 name과 size를 보여주는 것!거

이전에 개인적으로 했던 프로젝트를 보다가 react-roter가 v5로 되어 있어서 v6로 고치는 작업을 하였다.추가적으로 오랜만에 포스팅도 할겸, V5에서 V6로 어떤 부분이 어떻게 바뀌었는지 살펴보도록 하자.V5 에서 Switch 용도 Switch - Route로