Seongwon Lim

서론 이번 글에서는 오픈소스 OpenSSL 패키지를 이용하여 자체 인증서를 생성하고 해당 인증서를 리액트에 적용하여 HTTPS 환경으로 클라이언트를 실행하는 방법을 알아보고자 한다. OpenSSL 이란? OpenSSL은 오픈 소스로 개발된 암호 및 보안 라이브러리이다. OpenSSL은 다양한 암호화 알고리즘과 프로토콜을 구현하여 네트워크 통신 간 데이터를 보호하는데 사용된다. 다음 내용은 OpenSSL 에서 제공하는 기능 목록이다. 암호화 및 복호화: OpenSSL은 대표적인 대칭 및 비대칭 암호화 알고리즘을 제공하여, 데이터를 암(복)호화할수 있다. 대표적으로는 AES, RSA, DES, Triple DES 등의 알고리즘을 제공한다. 디지털 서명: OpenSSL은 디지털 서명을 생성하고 검증하는 기능을..

서론 이번 글에서는 오픈소스 라이브러리인 vis-network 라이브러리를 이용하여 네트워크 토폴로지는 그리는 방법에 대해서 알아본다. vis-network 라이브러리를 이용하면 각 데이터를 표현하는 노드(Node)와 노드 간 연결정보를 표현하는 엣지(Edge)를 화면상에 시각화 할 수 있으며, 모양/스타일/색상/크기 등을 자유롭게 커스터마이징 할 수 있다. 해당 라이브러리에 대한 자세한 내용은 아래 공식 문서를 참고하길 바란다. https://visjs.github.io/vis-network/docs/network/ vis.js - Network documentation. Returns: Array Nodes can be in clusters. Clusters can also be in clusters..

서론 MacOS 환경에서 리액트로 개발을 진행할 때 yarn을 이용하여 라이브러리를 설치하는 경우가 있다. 리액트는 npm 또는 yarn을 사용하여 대부분의 라이브러리를 설치하는데, 가끔씩 yarn을 사용하면 아래와 같은 에러가 발생하는 경우가 종종 있다. zsh: command not found: yarn yarn : 자바스크립트 패키지 매니저로 패키지 및 모듈의 설치를 돕고 의존성을 관리하며 사용중인 패키지 버전을 업데이트 하는 기능을 제공하는 툴이다. 따라서 이번 글에서는 yarn 사용 시 발생하는 위 에러를 해결하는 방법을 살펴보고자 한다. 해결 방법 1 homebrew를 이용하여 yarn을 설치한다. $ brew install yarn [Util] 맥북 Homebrew란? 설치 및 삭제 방법 알..

서론 작년 겨울 즈음에 React Router v6가 나오면서 라우터를 적용하는 방법이 기존의 라우터를 적용하는 방법과 조금 달라졌다. 그래서 이번 글에서는 리액트에서 제공하는 react-router-dom v6 버전 라이브러리를 이용하여 프로젝트 경로에 따라 다른 화면을 보여주는 기능을 구현해보고자 한다. 이번 글의 목차는 다음과 같다. 프로젝트 생성하기 react-router-dom 라이브러리 설치하기 화면 전환을 위한 서브 페이지 생성하기 라우터 적용하기 파라미터 적용하기 프로젝트 생성하기 npx create-react-app router-example router-example 자리에는 프로젝트명으로 정의할 문자열을 입력한다. 프로젝트가 생성되면 해당 프로젝트로 이동 후 프로젝트가 정상적으로 실행..

Next.js란 무엇일까? Next.js는 별다른 설정 없이도 SSR(Server side rendering)과 검색 엔진 최적화라고 불리는 SEO를 제공하는 리액트 프레임워크이다. Next.js를 쓰는 가장 큰 이유는 SSR 방식을 사용하기 때문이다. 서버 사이드 렌더링 방식을 사용함으로써 얻을 수 있는 이점은 다음과 같다. SEO (Search Engine Optimization)을 하는 것이 수월하다. CSR(Client side rendering)에 비해 페이지 로딩 속도가 빠르다. 다시 말해서 사용자가 페이지를 보는 데 걸리는 시간이 짧다. 물론 CSR에 비하면 서버 부하가 심하고, 페이지 이동 시 화면 깜빡거림 등의 단점도 존재하지만 장점이 매우 강력하기 때문에 최근에 많이 쓰이고 있는 프레임..

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은 함수형 컴포넌트에서 ..