프로그래밍/React (4) 썸네일형 리스트형 react-route-dom 이 v6으로 업데이트 되면서 달라진점 강의를 들으며 react-route-dom 을 실습하고 있는데 에러가 너무 많이 떠서 검색하다가 v5에서 v6으로 변경이 된 다음 여러개가 바뀌었다고 한다. 아래 주소에 가보면 v6의 달라진 점을 볼 수 있다. 위 링크에서 소스코드를 가져왔는데 위가 v5, 밑이 v6로 달라진 점을 파악할 수 있다. https://github.com/remix-run/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links GitHub - remix-run/react-router: Declarative routing for React Declarative .. Mac React 컴포넌트와 props 와 state에 대해 알아보자 컴포넌트 컴포넌트는 합성을 이용해서 여러개로 쪼개진 조각들을 합성하여 UI를 재사용 가능하게한다. UI를 띄우기 위해 화면에 컴포넌트는 Mounting 하고 Updating 하고 Unmounting 하는 프로세스가 진행이 되는데 개발자는 이런 life cycle 을 이해하고 재정의해서 컴포넌트를 제어한다. props 컴포넌트는 props와 state로 속성이 나누어져 있다. props는 properties의 줄임말로 props은 컴포넌트의 mounting, updating 의 프로세스가 진행이 될 때 값이 할당되어 컴포넌트에 전달이 된다. 컴포넌트 내부에서 값을 변경할 수 없게 설계되어있다. state state는 props와는 다르게 컴포넌트 내부에서 선언하고 내부에서 값을 변경 할 수 있다. 동적인 .. MAC react 노드 서버와 리액트 프론트 서버 같이 키기 npm install concurrently --save concurrently 를 이용해서 노드 서버와 리액트 서버를 같이 킬 수 있다. 먼저 터미널에서 위에 명령어를 실행해준다. 그 다음 기본 폴더의 package.json(프론트에 있는 package.json아님) 로 가서 script 항목에 추가한다. "dev": "concurrently \"npm run backend\" \"npm run start --prefix frontend\"" npm run dev 명령어로 두개의 명령어를 실행하는데 하나는 npm run backend 고 하나는 npm run start 이다. 다만 npm run start는 frontend 폴더 안에 있기 때문에 --prefix를 넣어준다. VS Code에서 리액트를 쓸 때 확장 프로그램 마켓플레이스에서 다운받아야 할 것들 오늘은 VS Code 안에서 리액트를 이용 할 때 마켓플레이스에서 다운받아야 할 툴들에 대해서 적어보겠다. 오늘부터 리액트를 제대로 공부하고자 하여 VS코드를 오랜만에 열어서 작업하였다. 1. Babel ES6/ES7 바벨은 무엇인가? 자바스크림트 컴파일러라도고 불리는데 자바스크립트 트랜스파일러이다. 트랜프라일은 다른 실행 환경에서도 실행될 수 있도록 소스코드의 형태만 바꾸는 것을 의미한다. ES6, Type Script, JSX 로 만든 코드를 변환할 때 많이 이용되는데 리액트는 JSX를 이용하기 때문에 개발을 할 때 원문코드가 브라우저에서 실행이 되지 않을 수 있다. 그래서 웹팩과 바벨을 이용해서 프로젝트를 빌드한다. 2. Beautify 포매터, 코드를 정리해준다. Prettier 보다 좀 더 사용.. 이전 1 다음
