RECENT ARTICLES
-
[리액트 디자인 패턴] Compound Component Pattern (합성 컴포넌트 패턴) 알아보기Frontend 2022.07.24 20:10
이 글은 Compound Pattern과 관련된 글의 한글 번역입니다. 원문 링크: https://www.patterns.dev/posts/compound-pattern/ Compound Pattern Create multiple components that work together to perform a single task www.patterns.dev Compound Pattern 어플리케이션에서 우리는 종종 서로에게 속한 컴포넌트를 가지게 된다. 이 컴포넌트들은 공통의 상태를 통해 서로에게 의존되어 있고, 로직을 함께 공유한다. 여러분은 종종 select, dropdown 컴포넌트 또는 메뉴 아이템들에서 이러한 형태를 볼 수 있다. Compound component pattern은 task를 수행..
-
[Next.js Learn 문서 번역 #6] How Next.js Works - Client & Server 렌더링 방식, CDN과 EdgeFrontend 2022.07.04 00:00
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/client-and-server https://nextjs.org/learn/foundations/how-nextjs-works/rendering https://nextjs.org/learn/foundations/how-nextjs-works/cdns-and-edge Client and Server 웹 어플리케이션 맥락에서 client는 어플리케이션 코드를 위해 서버에 요청을 보내는 유저 디바이스의 브라우저를 지칭한다. 요청을 보내고 나면 서버로부터 받은 응답을 유저가 상호작용할 수 있는 인터페이스로 전환한다. Server는 어플리케..
-
[Next.js Learn 문서 번역 #5] How Next.js Works - Compiling, Minifying, Bundling, Code Splitting이란?Frontend 2022.07.03 23:35
(잘못해서 게시물을 삭제해버려서 다시 업로드합니다.) Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/compiling https://nextjs.org/learn/foundations/how-nextjs-works/minifying https://nextjs.org/learn/foundations/how-nextjs-works/bundling https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting https://nextjs.org/lear..
-
[Next.js Learn 문서 번역 #4] How Next.js Works - Development와 Production 환경 (Next.js는 어떻게 동작하는가)Frontend 2022.06.12 14:13
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works https://nextjs.org/learn/foundations/how-nextjs-works/development-and-production How Next.js Works 좀 더 상급의 Next.js 피쳐에 대해 공부하기 전에, Next.js가 어떻게 동작하는지 기본을 이해하면 더 도움이 될 것이다. 강좌 초반에 리액트가 어플리케이션을 빌드하고 구조화하는데 있어서 얼마나 상대적으로 자율성이 있는지에 대해서 얘기했었다 (리액트로 어플리케이션을 구축하는데 정말 여러가지 방법이 존재한다.) Next.js는 어플리케이션을 구조화할 때 ..
-
[Next.js Learn 문서 번역 #3] From JavaScript to React (React의 Components, Props, State 소개)Frontend 2022.06.05 17:47
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/react-core-concepts https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state ..
-
[Next.js Learn 문서 번역 #2] From JavaScript to React (React와 JSX)Frontend 2022.05.29 23:36
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react From JavaScript to React (JavaScript에서 React까지) #2 여러분의 프로젝트에 리액트를 사용하기 위해서는 unpkg.com이라고 불리는 외부 웹사이트로부터 두 개의 리액트 스크립트를 로드할 수 있다. react는 리액트 코어 라이브러리이다. react-dom은 리액트를 DOM과 함께 사용할 수 있도록 만들어주는 DOM에 특화된 method를 제공해준다. const app = document.getElementById('app'); 순수 자바..
FRONTEND
-
[리액트 디자인 패턴] Compound Component Pattern (합성 컴포넌트 패턴) 알아보기
이 글은 Compound Pattern과 관련된 글의 한글 번역입니다. 원문 링크: https://www.patterns.dev/posts/compound-pattern/ Compound Pattern Create multiple components that work together to perform a single task www.patterns.dev Compound Pattern 어플리케이션에서 우리는 종종 서로에게 속한 컴포넌트를 가지게 된다. 이 컴포넌트들은 공통의 상태를 통해 서로에게 의존되어 있고, 로직을 함께 공유한다. 여러분은 종종 select, dropdown 컴포넌트 또는 메뉴 아이템들에서 이러한 형태를 볼 수 있다. Compound component pattern은 task를 수행..
-
[Next.js Learn 문서 번역 #6] How Next.js Works - Client & Server 렌더링 방식, CDN과 Edge
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/client-and-server https://nextjs.org/learn/foundations/how-nextjs-works/rendering https://nextjs.org/learn/foundations/how-nextjs-works/cdns-and-edge Client and Server 웹 어플리케이션 맥락에서 client는 어플리케이션 코드를 위해 서버에 요청을 보내는 유저 디바이스의 브라우저를 지칭한다. 요청을 보내고 나면 서버로부터 받은 응답을 유저가 상호작용할 수 있는 인터페이스로 전환한다. Server는 어플리케..
-
[Next.js Learn 문서 번역 #5] How Next.js Works - Compiling, Minifying, Bundling, Code Splitting이란?
(잘못해서 게시물을 삭제해버려서 다시 업로드합니다.) Next.js 공식 문서에 상단 Learn 버튼 누르면 나오는 튜토리얼 문서인데 좋은 내용인 것 같아서 시리즈로 번역해서 올리려고 한다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works/compiling https://nextjs.org/learn/foundations/how-nextjs-works/minifying https://nextjs.org/learn/foundations/how-nextjs-works/bundling https://nextjs.org/learn/foundations/how-nextjs-works/code-splitting https://nextjs.org/lear..
-
[Next.js Learn 문서 번역 #4] How Next.js Works - Development와 Production 환경 (Next.js는 어떻게 동작하는가)
Next.js Learn 문서 일부분에 대한 한글 번역입니다. [원문 링크] https://nextjs.org/learn/foundations/how-nextjs-works https://nextjs.org/learn/foundations/how-nextjs-works/development-and-production How Next.js Works 좀 더 상급의 Next.js 피쳐에 대해 공부하기 전에, Next.js가 어떻게 동작하는지 기본을 이해하면 더 도움이 될 것이다. 강좌 초반에 리액트가 어플리케이션을 빌드하고 구조화하는데 있어서 얼마나 상대적으로 자율성이 있는지에 대해서 얘기했었다 (리액트로 어플리케이션을 구축하는데 정말 여러가지 방법이 존재한다.) Next.js는 어플리케이션을 구조화할 때 ..
BACKEND
-
[Node.js] 웹 소켓으로 실시간 랜덤 채팅 구현 중 메시지 중복 버그 해결과정 (WebSocket Random Chat - clients rendering duplicate message)
정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅을 구현했는데 처음에 이런 저런 버그들로 엄청 고생했어서 만들고 나니까 너무 뿌듯하다ㅜㅜ 실시간으로 소통하는 채팅을 만들기 위해 웹 소켓(WebSocket)을 사용하여 구현하였다. MDN 문서를 보면 웹 소켓은 클라이언트(브라우저)와 서버 사이에서 상호 작용 가능한 통신 세션을 설정할 수 있게 하는 기술이라고 되어있다. 그래서 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능하다고 되어있다. 여기서 폴링(Poling)이란 ..
-
[Node.js] Express와 jwt 토큰(Json Web Token)을 이용한 회원가입 / 로그인 구현하기 [2]
지난 번에 Express와 MongoDB로 간단하게 백엔드 서버를 만들었으니 이제 그걸 이용해서 프론트엔드 구현을 마저 해보려고 한다. client/src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter as Router } from 'react-router-dom'; import { CookiesProvider } from 'react-cookie'; ReactDOM.render( , docume..