민희의 코딩일지

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 접두사가 붙은 메서드: 어떤 작업을 작동..

1- 반응형 웹이란? 다양한 디바이스에서 접속했을 때 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지이다. 2- 미디어 쿼리 viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능이다. @media screen and (max-width: 500px) { /* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 작성한다. */ } @media: 미디어 쿼리를 사용한다. screen: 미디어 타입이다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다. max-width: 500px: viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다. and: scree..

1- transition (전환효과) css 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어줄 수 있다. a. transition-property 어떤 property에 transition을 적용할 것 인지를 지정한다. transition-property: color, transform b. transition-duration transition에 걸리는 시간을 지정한다. transition-duration: 0.2s transition에 걸리는 시간을 지정한다. duration은 s 혹은 ms 단위로 지정이 가능하다. c. transition-timing-function transition의 속도 패턴을 지정한다. transition의 변화가 일정한 속도로 일어날 것..

1- background a. background-color 요소의 배경에 색상을 지정한다. background-color: #f12db0 | rgb(122,122,123); b. background-image 요소의 배경 이미지를 한 개, 혹은 여러개 지정한다. background-image: url("이미지 경로"); 이미지 중첩하기 background-image: url(”이미지 경로”), url(”이미지 경로”); 백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는 것도 가능하다. 앞에 있는 것이 가장 위에 깔리고, 뒤에 있는 것이 아래에 깔리게 된다. 그라데이션 배경 만들기 (linear-gradient, radial-gradient, conic-gradient) /* ..

소스코드: 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..