IT 공부

1. useReducer 2. useMemo 3. useCallback 1. useReducer import React, {useReducer} from 'react'; const reducer = (state, action) => { switch(action.type) { case 'CHANGE_ID': return{ ...state, user:{ ...state.user, userid:'jenny2' } } case 'CHANGE_NAME': return{ ...state, user:{ ...state.user, username: action.payload } } case 'ADD_LIST': return{ ...state, notice:[ ...state.notice, {idx:1, subject:..

1. Hook 개요 2. State Hook 사용하기 3. Effect Hook 사용하기 4. Context Hook 사용하기 1. Hook 개요 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle)을 "연동(hook into)"할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않는다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. (Hook은 React 16.8에 새로 추가된 기능이다.) Hook은 일반적인 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다. 최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할..

오늘은 React로 댓글 CRUD 기능을 구현해 보고자 한다. DB는 따로 연결하지 않고 임시 데이터를 이용하였다. 첫 번째 댓글은 원래 있던 댓글을 불러 온 것이고, 두 번째와 세 번째 댓글은 새로 작성한 것이다. 'X' 버튼을 클릭하면 삭제되고, 댓글의 내용을 클릭하면 수정할 수 있게 바뀐다. 전체 컴포넌트의 구성은 App 컴포넌트 하위에 Comment 컴포넌트가 있고, Comment 컴포넌트 하위에 CommentForm과 CommentList 컴포넌트들이 있다. CommentForm은 입력하는 공간이고, CommentList는 작성한 댓글이 나타나는 공간이다. 이제 세부적인 코드를 살펴보고자 한다. 아래는 App.jsx 파일의 코드이다. import React, {Component} from 're..

1. CSR (Client Side Rendering) 2. SSR (Server Side Rendering) React를 공부하다가 CSR과 SSR이라는 용어를 접하게 되었다. CSR은 Client Side Rendering의 약자이고, SSR은 Server Side Rendering의 약자라는 것에서 눈치를 챘겠지만, 둘의 차이는 페이지의 렌더를 누가 하느냐에 있다. 1. CSR (Client Side Rendering) CSR은 아래와 같은 과정을 거쳐 페이지를 렌더링한다. 서버에서 브라우저에게 response 한다. 브라우저는 JS를 다운받는다. React를 실행시킨다. 페이지가 나오면서 동시에 interact (ex. 클릭)를 할 수 있다. 2. SSR (Server Side Rendering)..

1. css 파일을 import하기 2. css.module 만들기 3. styled-components 패키지 사용 React에서 css를 적용시키는 3가지 방법을 소개해 보려고 한다. 1. css 파일을 import하기 import React, {Component} from 'react'; import './assets/a.css'; import './assets/b.css'; class App extends Component{ state = { value:'hello world~~123' }; render() { return( {this.state.value} ) } }; export default App; App 컴포넌트의 state의 value 값이 'hello world~~123'이라고 되어 ..

1. 구구단 게임 소개 2. 구구단 게임 구현 1. 구구단 게임 소개 위의 그림처럼 태그 안에 숫자를 입력하고 submit 버튼을 클릭하면 해당 숫자에 대한 구구단이 출력되도록 React로 구현해보고자 한다. 2. 구구단 게임 구현 import React, {Component} from 'react'; import GuguForm from './GuguForm'; import GuguList from './GuguList'; class GuguClass extends Component{ state = { value:null }; handleSubmit = e => { e.preventDefault(); this.setState({ ...this.state, value:parseInt(e.target.gu..

1. webpack 소개 2. webpack 사용 환경 구축 3. webpack.config.js 파일 구성 1. webpack 소개 자바스크립트(JS) 코드가 많아지면 하나의 파일로 관리하는데 한계가 있다. 하지만, 여러 개의 파일로 나누어서 브라우저에 렌더링한다면 그만큼 네트워크 비용이 생긴다는 단점이 있다. 뿐만 아니라 각 파일은 서로의 스코프를 침범하지 않아야 하는데, 잘못 작성할 경우 변수 충돌의 위험성도 존재한다. 웹팩(webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 그리고 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정..

1. 틱택토 게임 소개 2. 코드 구현 1. 틱택토 게임 소개 틱택토(tic-tac-toe)는 두 명이 번갈아가며 O와 X를 3x3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이번 글에서는 틱택토 게임을 진행할 수 있게 구현하고, 게임이 끝난 시점에서 승자를 결정하는 것과 다음 플레이어가 누구인지에 대해서도 나타내고자 한다. 2. 코드 구현 calculateWinner 함수는 게임 진행 중 승자가 발생하는 시점을 정한다. 승자가 되기 위해서는 lines라는 이중 배열의 원소 [0,1,2] 부터 [2,5,8] 까지 총 8가지 경우 중 하나를 상대방보다 먼저 만족시켜야 한다. Square 컴포넌트 3x3 판의 각각의 사각형에 해당한다. 태그를 클릭했을 때 this.pro..

1. props 2. state 오늘은 React의 props와 state에 대해서 알아보려고 한다. 아직 위의 그림만 보았을 때에는 props와 state가 무엇인지, 어떤 역할을 하는지 추측하기 어려울 수도 있다. 아래 개념 설명을 본 후 이해했다면, 나중에는 위 그림만 보고 '아, props와 state의 차이가 이거였지!' 라고 말하게 될 것이다. 1. props props는 properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해주어야 할 때 사용한다. 아래의 코드를 예로 들어서 설명하겠다. id가 root인 태그 안에 컴포넌트를 넣고, 그 안에 컴포넌트를 넣고자 한다. App 컴포넌트에서 Ele를 선언할 때 React.createElement()를 사용했는데, () 안에는 3개의 인자값..

1. 프레임워크 vs. 라이브러리 2. Front-end 프레임워크 등장 배경 3. React 소개 및 사용 방법 1. 프레임워크 vs. 라이브러리 프레임워크(framework)는 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것이다. 프레임워크는 뼈대나 기반구조를 뜻한다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발하면 된다. 오늘 소개할 React와 예전부터 사용해왔던 Node.js의 express는 모두 프레임워크에 속한다. 라이브러리(Library)는 특정 기능 수행을 위해 활용 가능한 도구 ..

1. MySQL 서버 타임존 설정 2. 로컬 타임존 설정 1. MySQL 서버 타임존 설정 아래의 명령어를 입력하여 현재 본인의 MySQL 서버 타임존을 확인한다. SELECT @@global.time_zone, @@session.time_zone, @@system_time_zone; @@global.time_zone과 @@session.time_zone의 값이 SYSTEM으로 설정되어 있는데, 이는 별도의 타임존 설정이 되어 있지 않고 @@system_time_zone을 따르겠다는 의미이다. 내 DB는 시스템 타임존이 KST(Korea Standard Time)로 되어 있어서 다른 설정을 하지 않아도 DB의 시간이 한국 시간대로 나온다. 아래의 명령어를 입력하면 현재 DB 시간을 알 수 있다. 나의 경..

1. Web Socket 통신의 이해 2. ws 모듈을 이용한 구현 1. Web Socket 통신의 이해 Web Socket을 사용하기 전에 이것이 어떤 기능을 하고, 왜 사용하는가에 대해서 먼저 생각해 보아야 한다. http는 네트워크를 통해 웹 브라우저가 웹 서버로부터 데이터를 가져오기 위한 통신 방법으로 사용된다. http 통신 이외에도 Web Socket 통신을 이용하여 데이터를 주고받을 수 있다. 그렇다면 http 통신만 사용해도 충분할 것 같은데 굳이 왜 Web Socket 통신도 쓰는걸까? http 통신은 클라이언트의 요청이 있을 때에만 서버가 응답하여 정보를 전송하고, 곧바로 연결을 끊는 방식이다. 즉, 클라이언트가 요청을 보내고 서버가 응답하는 단방향통신 (stateless : 연결상태유..