배진오
@baealex
baejino.com
·
창작을 좋아하는 개발자입니다.

카테고리

[JavaScript] badland의 상태 관리

필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …

2022년 01월 21일 · 11 min read

자바스크립트
프론트엔드

자바스크립트의 복사

자바스크립트에는 2가지 복사가 있다. 깊은 복사와 얕은 복사다. 이 개념을 이해하려면 자바스크립트의 원시 값(number, string, boolean, undefined, null, symbol)은 변수에 '값'이 저장되고 객체 값은 변수에 '참조 값'이 저장된다는 것을 알아야 한다. 원시 값 변수를 다른 변수에 대입할 경우 다른 변수는 동일한 값으로 저장되지만 객체 값 변수를 다른 변수에 대입할 경우 …

2022년 01월 03일 · 13 min read

자바스크립트

자바스크립트 한글 음절 분리 / 음소 병합

회사의 랜딩 홈페이지 제작 중, 한 글자씩 나타나는 애니메이션을 구현하려고 했으나 음소 단위로 변경되어야 했다. 이를 위해 자바스크립트 오픈소스 라이브러리를 찾아 사용하였고, 해당 라이브러리를 사용하는 코드를 발견하여 이를 이해하고 활용하였다. 코드는 글자를 분리하는 함수와 분리된 글자를 병합하는 함수로 구성되어 있으며, 초성, 중성, 종성 등의 인덱스를 계산하여 정확한 값을 반환하도록 구현되어 있다. 이후 초성과 종성이 없는 경우를 처리하는 조건문을 추가하여 정확한 결과를 얻을 수 있었다.

2021년 04월 28일 · 13 min read

자바스크립트
한글

GitHub Action으로 Next.js 배포하는 방법

Next.js를 이용해 정적 페이지를 개발하고 깃허브 페이지에 호스팅하는 방법을 소개한 글입니다. out 디렉터리에 빌드된 페이지를 생성하기 위해 next build와 next export 명령어를 사용하며, 호스팅을 위해 git subtree push와 같은 일련의 작업을 수행해야 합니다. 이 작업을 자동화하기 위해 GitHub Action을 이용할 수 있으며, 해당 방법을 소개하고 있습니다.

2021년 04월 27일 · 3 min read

자바스크립트
리액트
깃허브

React Native Flexbox와 친해지기

React Native에선 Flexbox라는 형식으로 레이아웃 개발을 진행한다. 최신 웹 브라우저에서도 이 레이아웃이 작동하여 CSS 최신 방법론으로 알려져 있다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 적용할 수 있다. 아래 내용은 대부분 공식문서인 "Layout with Flexbox #"을 인용하였다. Flex flex will define how your items are going to “fill” over the available …

2020년 05월 07일 · 8 min read

자바스크립트
리액트
앱

React Native 개발환경 구축

들어가며 난 무언가를 시작하기전에 이게 왜 필요한지 어디에 활용되는지 반드시 파악하고 진행하는 편이다. 몇몇 자료를 찾아봤지만 아래의 글에서 무엇인가 깊고 진한 전문가의 향기가 났다. 여하지간 아래 글을 참고하여 RN의 특성을 파악하였다. [RN] React-Native의 장단점은? Expo Web(React Native for web) 튜토리얼 내용을 정리해보면 RN의 장점은 다음과 같이 추려진다. React를 알고 있다면 …

2020년 05월 07일 · 4 min read

자바스크립트
리액트
앱

Electron 시작하기 (With React)

일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 크로미움을 내장하고 있는 것으로 보인다. 프레임워크 구성 main.js 메인 프로세스 데스크톱 앱의 백엔드 역할을 수행 앱 자체의 총괄적인 부분(Node.js와 거의 동일) 업데이트 제어 OS GUI …

2020년 04월 24일 · 17 min read

자바스크립트
리액트
프론트엔드
일렉트론

React로 Hello World 출력

Hello, React React로 Hello World를 출력해보자. 기본적인 설치 방법과 사용 방법을 기록하기 위해서 작성한다. How to install npm install -g create-react-app How to make application create-react-app hello-world 위 명령어를 이용하여 애플리케이션을 생성할 수 있다. 생성된 디렉터리 아래 src 내부의 모든 파일을 지운 뒤 index.js와 index.css를 생성하고 index.js에 아래와 같은 내용을 …

2020년 01월 05일 · 2 min read

프로그래밍
자바스크립트
리액트
프론트엔드