민희의 코딩일지

1- useContext란? React 에서 데이터의 흐름은 위 → 아래 (부모 → 자식)로 Props 를 통해 전달한다. Props 를 사용하여 데이터를 전달할 때는 부모 컴포넌트가 자식 컴포넌트 태그에 일일이 Props 를 넣어 단계별로 전달해줘야 한다. (Prop Drilling: 가장 아랫단에 있는 컴포넌트만 데이터가 필요해도 전달하는 과정에서 데이터는 중간 컴포넌트를 거쳐야 한다. Main 컴포넌트는 데이터가 필요없는데도 Profile 컴포넌트에 데이터를 전달하기 위해서 데이터를 Props 로 받은 뒤 다시 Props 로 넘겨주어야 한다.) 부모 컴포넌트 (App) 자식 컴포넌트 (Header) 앱 내부에서 수많은 컴포넌트들이 공통적으로 필요한 전역적인 데이터가 있을 때 Props 를 이용해서 ..

1- React Hooks란? React Hooks란 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능이다. React Hooks 는 Class Component로 사용된 React에서 느낀 불편함과 문제점을 개선하기 위해 개발되었다. 1. 이전방식 (Class Component) import React, { Component } from 'react' export default class Hello extends Component { render () { return ( hello my friends! ) } } 더 많은 기능 제공 더 긴 코드 양 더 복잡한 코드 더딘 성능 2. React Hooks (Functional Component) import Re..

React 생명주기란? 컴포넌트의 생성, 업데이트, 제거 과정을 뜻한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. → 컴포넌트의 라이플사이클 메서드를 사용한다. 라이플사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 기능을 처리할 수 있다. LifeCycle Method 라이플사이클 메서드 종류는 총 9가지이다. will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행 Did 접두사가 붙은 메서드: 어떤 작업을 작동..

소스코드: https://github.com/heehminh/23-React-JS-ToDo GitHub - heehminh/23-React-JS-ToDo Contribute to heehminh/23-React-JS-ToDo development by creating an account on GitHub. github.com 만들고자 하는 앱의 UI: 1- 할 일 목록 타이틀 만들기 App.js import React, {Component} from "react"; import "./App.css"; export default class App extends Component { // 클래스형 컴포넌트 안에서는 render 안에 UI를 작성 render() { return( 할 일 목록 ) } } App..

1- CRA로 실행된 리액트의 기본 구조 이름이 수정되면 안되는 파일들 public/index.html → 페이지 템플릿 src/index.js → 자바스크립트 시작점 public/ 여기안에 쓰인 파일들은 오직 public/index.html 만 쓰일 수 있다. src/ 여기안에 JS 파일과 CSS 파일을 넣으면 된다. Webpack은 여기에 있는 파일만 본다. 그래서 이 폴더 이외에 넣는것은 webpack에 의해 처리되지 않는다. (대부분 리액트 소스 코드들은 이곳에 작성한다.) package.json 해당 프로젝트에 대한 정보들이 들어있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있다. package.json에 명시된 라이브러리를 한번에 다운받으려면 npm insta..

1- 리액트는 프레임워크가 아닌 라이브러리이다! React 는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. Angular, vue는 프레임워크이며 React는 라이브러리이다. 라이브러리와 프레임워크 프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크는 라이브러리를 포함하고 개발자가 작성한 소스 코드를 호출한다. 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출한다. 호출관계: 프레임워크 → 소스코드 → 라이브러리 리액트는 전적으로 UI를 렌더링하는 데 관여한다. 그러나 웹 앱을 만들기위해서는 UI를 제외한 다른 요소들도 라우팅(페이지전환), 상태관리, 테스팅 또한 관리해야 한다. 라우팅: react-r..

필자는 그동안 Rest-API만 사용해봤는데 Graphql-API란 존재를 알게된 후 백엔드에서 다르게 생성해줘야 하는지와 Graphql-API의 개념과 사용법에 대해 궁금해 포스팅을 작성한다. 1. HTTP 통신 HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이다. (참고) FTP: 파일, SMTP: 간단한 메일 HTTP 라는 길로 요청 request 와 응답 response 2가지를 서로 주고 받을 수 있다. - 200: 성공 - 4xx: 프론트엔드 에러 - 5xx: 백엔드 에러응답 상태코드자주 볼 수 있는 응답 상태코드 HTTP 상태 코드 - HTTP | MDN 백엔드는 응답할 때 응답 상태코드를 함께 보내준다. 응답 상태코드는 100~599 까지의 숫자로 구성되어 있다. 2. API API..