개발자를 향해...

본 내용은 노마드코더 - ReactJS로 영화 웹 서비스 만들기 를 수강하며 작성되었습니다. 1. 준비하기 우선 node.js가 깔려 있는지 확인해보았다. node.js를 깔면 npm도 함께 깔린다고 한다. npx도 설치해야하며 설치하는 코드는 npm install npx -g 이다. 코드 에디터는 visual code로 한다. 마지막으로 git을 설치해야한다. git --version으로 버전을 확인해보았다. 이렇게 준비가 완료되었다. 2. ReacJS 어플리케이션 생성 리액트를 시작하기에 앞서 원래는 babel, webpack등 브라우저를 위해 필요한 것들을 따로 설치해주어야 했는데 이제는 create-react-app으로 한번에 가능하다. 해당 명령어로 react 앱을 만들 수 있다. 이 명령어로 ..

본 글은 강의- Minjun Kim님의 누구든지 하는 리액트를 수강하면 작성되었습니다. LifeCycle API 설명 일단 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있다. constructor constructor(props){ super(props); } 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 constructor가 호출된다. 자신이 가지고 있는 생성자 함수를 먼저 후출하고 이후에 하고싶은 작업을 실행한다. componentWillMount 새로운 버전에서는 없어진 함수이다. componentDidMount 이 함수는 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 외부 라이브러리 연동(D3, masonry, etc)이나 컴포넌트에서 필요한 데이터(Ajax, Gra..

수강한 강의- Minjun Kim님의 누구든지 하는 리액트 누구든지 하는 리액트 www.youtube.com Props와 State Props props는 부모 컨포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다. 컴포넌트 생성시 이를 불러와서 사용할 수 있다. 컴포넌트를 렌더링할 때 전달할 때 처럼 value가 하나의 props이다. 부모가 자식에게 넘겨주는 것이다. 만약 부모 컴포넌트에서 name값을 넣어주지 않으면 황유진의 자리에 '기본 이름'이라는 default값이 들어간다 이 코드는 아래처럼 컴포넌트 밖으로 뺄 수 있다. props 전달의 또다른 방식으로 함수형 컴포넌트는 단순히 props만 가져와 보여주기만 하는 경우 사용한다. 예시는 아래와 같다. 함수형 컴포넌트 방식은 import에서 더..

본 글은 강의- Minjun Kim님의 누구든지 하는 리액트를 수강하면 작성되었습니다. 누구든지 하는 리액트 #5 본격적인 리액트 코드 작성하기 ~ webpack - 코드를 의존하는 순서대로 잘 합쳐서 여러개의 파일로 결과물을 만들어냄 - 예를들어 자바스크립트 파일에서 png를 사용하겠다로 import를 하면 번들링 작업을 하게 되는데 이때 특정 확장자마다 어떤 작업을 하도록 처리해준다. 빌드시 사용 경로가 문자열로 들어온다 - 자바스크립트를 여러 브라우저에서 쓸 수 있게해줌 Babel - 자바스크립트 변환 도구이다. React class 사용법 React를 만들 때에는 'react'에서 React를 import해야한다. 컴포넌트는 함수로 만들거나 클래스로 만들어주어야한다. class App extend..