전체 글

[React] React.js 강좌 15. useMemo

1. Memoization useMemo에 대해 설명하기에 앞서, memoization에 대한 선행 지식이 필요한데요. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 2. React 랜더링 구조 일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성이 됩니다. function MyComponent(props) { // 어떤 로직 (JavaScript) return; /* 어떤 화면 (JSX) */ } 이렇게 작성된 컴포넌트 함수는 React 앱에서 랜더링(ren..

[React] React.js 강좌 14. useEffect

1. UseEffect useEffect는 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 Hook 함수입니다. 2. 마운트 / 언마운트 사용 src/UserList import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({us..

[React] React.js 강좌 13. useState

1. useState란? 리액트의 Hooks 기능 중 하나인 useState는 함수형 컴포넌트를 사용하는데 있어서 가장 많이 사용되는 컴포넌트 입니다. 컴포넌트에서 동적으로 변화되는 값을 state(상태)라고 부릅니다. 이 상태를 관리하기 위해 사용되는것이 useState라고하는 Hook입니다. 가장 유명한 버튼을 누르면 숫자가 바뀌는 카운터 예제를 보겠습니다. src/Counter.js import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const ..

[React] Async & Await란?

1. Async & Await란? React에서 비동기 처리를 할때 Promise를 사용하지만 Promise의 단점을 보완하기 위해 ES7에서 async와 await라는 키워드가 추가 되었습니다. 위 키워드를 사용하면 비동기 코드를 마치 동기 코드 처럼 보이게 작성할 수가 있게 되었습니다. 2. Async 함수 async function() { return "id" } const users = async() => { return "id" } // 결과는 같습니다. 비동기 함수를 만들기 위해서는 단순하게 함수 앞에 async를 붙여서 일반 함수를 async 함수로 만들면 됩니다. 사실 위 함수를 실행시키게 되면 단순히 일반 함수처럼 값을 반환하는 것이 아니라 async()가 Fulfiled Promise를..

[React] Promise란?

1. Promise란? React에서 Promise는 비동기 처리에 활용되는 객체입니다. Promise는 주로 웹 서비스를 구현할 떄 원활한 데이터 통신을 위해 활용됩니다. 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용됩니다. 즉, Promise 객체는 비동기 로직을 마치 동기처럼 사용할 수 있는 기능을 가집니다. 예를 들어 비동기 로직인 A, B, C 로직이 있다고 했을때 이를 Promise를 사용하지 않고 실행시키면 먼저 로직이 끝나는 순서로 출력이 되지만, Promise를 사용하면 A, B, C 순서대로 출력을 시킬 수 있습니다. 2. Promise의 상태 Promise의 상태는 아래의 3가지 상태와 같습니다. Pending(대..

[CSS] display : grid 정리

1. 개요 CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. flex와 grid의 차이점은 flex : 한 방향 레이아웃 시스템 (1차원) grid : 두 방향(가로-세로) 레이아웃 ..

[GraphQL] GraphQL이란?

1. 개요 GraphQL은 페이스북에서 쿼리 언어로, 애플리케이션 프로그래밍 인터페이스(API)를 위한 쿼리 언어로, 클라이언트에게 요청한 만큼의 데이터를 제공하는데 우선순위를 둡니다. 이런 GraphQL은 선언형 데이터 fetching 언어라고 부르는데, 개발자는 무슨 데이터가 필요한 지에 대해서만 요구사항을 작성하면 되고, 어떻게 가져올지는 신경쓰지 않아도 됩니다. sql이 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져온다면, gql은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것에 특화되어 있습니다. 그래서 보통 gql의 문장은 주로 클라이언트 시스템에서 작성하고 호출합니다. Rest API가 url, method와 같은 다양한 조합으로 생기는 다양한 endpoint가 존재한다..

[CSS] display : flex 정리(flexbox)

flexbox(flex) 1. 개요 일반적으로 웹페이지의 레이아웃은 css의 display, float, position 등과 같은 속성을 사용해 구현하는데, 이러한 속성을 사용할 경우 레이아웃을 표현하는 것은 굉장히 복잡해집니다. 이러한 복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것이 css3에 추가된 flexbox입니다. flexbox를 사용할 경우 요소의 크기와 순서를 유연하게 배치할 수 있습니다. 2. 특징 flexbox는 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산 시킬 수가 있습니다. 이러한 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다. .flex_container{..

[Nginx] Nginx 개념 및 nginx.conf 설정

Nginx 개념 및 nginx.conf 설정 1. 개념 nginx는 apache와 같은 웹서버 중에 하나인데, 가벼우면서 여러 요청을 한 번에 처리할 수 있는 장점을 가진 웹서버입니다. apache보다 동작이 단순하고 전달자 역할만 하기 때문에 동시접속에 특화되어 있다는 특징이 있습니다. 만약 동시접속자가 700명 이상이라면 서버를 증설하거나, nginx환경을 권장한다고 할 정도로 성능이 좋고 다중 접속에 특화되어있다는 것을 알 수 있습니다! 이 nginx는 구동 방식이 Event Driven(비동기처리방식)인데, 이것은 요청이 들어오면 어떤 동작을 해야하는지만 알려주고 다른 요청을 처리하는 방식입니다. 그러다보니 CPU와 관계없이 모든 입출력들을 전부 Event Listener로 전달하기 때문에 흐름이..

[Project] Docker Nginx Express React 연동하기

1. 개요 docker에 docker-compose를 사용해 nginx와 express-react 컨테이너를 생성하는 방법을 정리해보겠습니다! 먼저, docker가 설치가 되어있다는 가정하에 진행합니다 사용된 파일들의 디렉터리 구조는 위와 같습니다. backend에 express, frontend에 react, nginx는 proxy 서버로 워크플로우가 구성되어있습니다. 순차적으로 따라하시면서 frontend와 backend를 구성하는데 어떤 식으로 구성을 하는지 잘 유의하시면서 보시면 될 것 같습니다. 이 워크 플로우 구조를 구현하는데 굉장히 애를 많이 먹었어요ㅠㅠ 막상 복습하면서 만드니까 뚝딱 만드는데 nginx와 express간의 프록시 문제도 있었고… react와 express 간의 문제도 있었고..