Seongwon Lim

미들웨어(MiddleWare)? 미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어, 네트워크를 통해서 연결된 여러 개의 컴퓨터에 있는 많은 프로세스들에게 어떤 서비스를 사용할 수 있도록 연결해 주는 소프트웨어를 말한다. 쉽게 생각하면 미들웨어는 클라이언트로부터 요청이 오고, 해당 요청을 다시 응답으로 보내기 위해 목적에 맞게 작성된 함수들의 연속이라고 생각할 수 있다. app.use() 를 통해서 미들웨어를 정의할 수 있다. 미들웨어는 본인의 함수가 끝나면 next()를 통해서 다음 함수를 호출해야 한다. 미들웨어의 특징 각 미들웨어에 정의된 코드를 실행한다. 다음 미들웨어를 순차적으로 실행한다. res.send() 등의 메서드를 이용하여 클라이언트와 서버간..

Styled Components? styled-components는 CSS in JS를 기반으로 구현된 라이브러리이며, CSS in JS의미는 Javascript 안에 CSS를 작성하는 것이다. styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리이다. 이번 포스팅 글에서는 styled-components 사용 예제를 간단하게 다루고자 한다. 먼저, styled-components를 다루기 전에 태그에 스타일을 입히는 기존 방법을 살펴보자. function App() { return ( Hello World! ); } export default App; const styles = { divContainer: { backgroundColor..

들어가며 이번 글에서는 React Hook의 개념과 제공하는 기능들을 간단하게 살펴본다. 따라서 리액트 개발 환경이 구성된 이후를 다루기 때문에 환경 구축이 안 된 분들은 여기를 참고하여 개발에 필요한 세팅을 먼저 하는 것을 권장한다. React Hooks? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. React Hook은 함수형 컴포넌트를 사용하는 것으로 기존 클래스형 컴포넌트가 가지고 있던 단점들을 보완하고자 등장하게 되었다. 클래스형 컴포넌트의 한계 클래스의 문법의 진입장벽 축소의 어려움 re-load 신뢰성 문제 최신 기술의 적용의 비효율성 React Hook은 함수형 컴포넌트에서 ..

서론 이번 글은 도커를 이용해서 Node.js 서버를 배포하는 예제를 다루고자 한다. 따라서 도커 및 노드가 설치되어 있다는 가정하에 진행되는 글이므로 설치를 하지 않은 분들은 먼저 도커와 노드 설치를 하는 것을 권장한다. Node.js 설치하기 : https://nodejs.org/ko/download/ Docker 설치하기(MacOS) : https://docs.docker.com/desktop/mac/install/ Docker 설치하기(Windows) : https://docs.docker.com/desktop/windows/install/ 개발 환경 세팅하기 먼저 Node.js 서버 코드를 간단하게 구축한다. npm init npm install express --save 필자는 nodejs-d..