개미의 개열시미 프로그래밍

웹을 구현할때 스스로 레이아웃을 구성하거나 css문법에 어려움을 겪던 중 추천 받은 유투브 영상을 보고 학습을 시작했다. https://www.youtube.com/watch?v=tHy498wdPaA&list=PL4UVBBIc6giKixok-bC7XVEx0ZFsngr5Z&index=1 [구현하고 싶은 페이지 화면] 이번 졸업프로젝트에서 위 이미지와 같이 포스기화면을 구현하면 좋을 것 같았고 이미 만들어놓은 페이지로는 부족하다고 생각했다. Brackets이라는 에디터를 설치해서 편하게 공부할 수 있었고 나중에 react로 구현할때에는 js안에 구현해야 하기 때문에 그 부분만 유의해주면 될 것 같았다. 일단 레이아웃은 이렇게 구성했고 header 부분에는 현재 결제 진행단계, SIDE_LEFT에는 인식된 결..

react강의 중에서 중요한 개념이라고 생각해서 포스팅하려 합니다. 먼저, redux를 쓰는 첫 번째 이유는 props 없이 모든 컴포넌트가 같은 state를 공유할 수 있게 해 줍니다. 상위 컴포넌트에서 깊은 곳에 위치한 하위 컴포넌트까지 props를 전달하는 것은 여간 귀찮은 일입니다. 하지만 redux를 활용한다면 복잡한 props 전송이 필요 없이 바로 정의한 state를 쓸 수 있습니다. 강의에서는 장바구니 페이지를 redux 활용하여 쉽게 구현했습니다. 그전에 redux관련 라이브러리를 설치합니다. [redux 라이브러리 설치] yarn add redux react-redux yarn이 설치되어있지 않다면 아래의 명령어로 설치하면 됩니다. npm install redux react-redux ..

react에서 페이지를 나누는 방법을 정리하려 합니다. 1. 먼저, 라우팅을 하기전에 터미널을 열고 설치를 진행합니다 yarn이 설치되있지 않다면 'npm install react-router-dom' 으로 설치를 합니다. 2. 설치 후 index.js파일로 가서 BrowserRouter를 import하고 ReactDom.render괄호 안에 컴포넌트를 태그로 감싸면 라우팅할 준비를 마치게 됩니다. 3. Route태그 임포트하기! 태그로 main과 detail페이지를 나누어 작성하면 됩니다. 주의할 점은 exact 속성을 넣어주지 않으면 /detail 페이지로 이동했을때도 main페이지의 내용이 나오기 때문에 exact 속성을 넣어주어야 합니다.

리액트를 공부하기 위해 고민하던 중 친한 형에게 공부 순서를 추천받았다. 1. 코딩애플 유튜브 무료 강의 8강 2. 생활코딩 40강 완강 이정도만 하면 리액트가 뭔지 감이 잡힐 거라고 했고 생활코딩의 마지막 부분에서 막히긴 했지만 어느 정도는 감이 잡힌 것? 같기도 하다. 코딩 애플 강사님이 유머도 있고 시원시원하게 가르치시기에 7만원 정도를 결제를 하고 무료 8강부터 쇼핑몰 프로젝트까지 이어지는 강의를 큰맘 먹고 구매했다.. 앞으로 리액트 강의를 들으면서 중요하거나 막히는 내용에 대해 기록하려고 한다!