Seongwon Lim

Trouble Shooting : ERR_SSL_KEY_USAGE_INCOMPATIBLE 이전 포스팅에서 OpenSSL을 통해 HTTPS 리액트 환경을 구축하는 방법을 알아보았다. [React] OpenSSL을 이용한 HTTPS 환경 구축하기 [React] OpenSSL을 이용한 HTTPS 환경 구축하기 서론 이번 글에서는 오픈소스 OpenSSL 패키지를 이용하여 자체 인증서를 생성하고 해당 인증서를 리액트에 적용하여 HTTPS 환경으로 클라이언트를 실행하는 방법을 알아보고자 한다. OpenSSL 이란? Op limsw.tistory.com 하지만 위 절차대로 하면, 로컬호스트 서버에서는 HTTPS 경로로 잘 접속이 되지만, 노트북, 데스크탑PC 등 원격에서 브라우저로 접속을 시도하면 다음과 같은 에러가..

서론 이번 글에서는 오픈소스 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은 함수형 컴포넌트에서 ..