baealex's 자바스크립트

배진오

@baealex

·

창작을 좋아하는 개발자입니다.

카테고리

[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

자바스크립트

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

최근 회사의 랜딩 홈페이지를 제작하는 중인데 한 글자씩 나타나는 애니메이션이 포함되어 있다. 안타깝게도 음절 단위가 아닌 음소 단위로 변경되는 것이 보여야 하는 것으로 보인다. 처음에는 직접 하드코딩 하려고 했었지만 치다보니 이건 좀 아닌것 같다는 생각이 들었다. const ANIMATED_TEXT = [ 'ㄱ', '그', '그ㄹ', '그래' ]; 그래서 음절을 분리하고 하나씩 조합해서 …

2021년 04월 28일 · 13 min read

자바스크립트

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

Next필자는 Nextjs를 자주 애용하는데 리액트의 개발 환경을 매우 간단하게 구축할 수 있고 간단한 것에 비해 상당히 합리적인 개발환경을 가지고 있다고 생각하기 때문이다. 또한 SSR까지 손쉽게 가능하니 좋아하지 않을 수가 없다. 현재까지는 동적으로 렌더링이 필요한 경우에만 사용했기에 도커에 올려서 사용해 왔다. 그러다 최근에는 정적 페이지도 Nextjs를 이용해서 개발하고 싶어졌는데 방법을 찾아보니 …

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

자바스크립트

프론트엔드

JavaScript 기본 문법 정리

이전에 노트에 기록했던 내용을 블로그로 옮겨놓으려고 한다. 매우 기본적인 문법만 들어있다. 1. 변수자바스크립트에는 변수형(int, double, string)이 존재하지 않는다. var 이라는 가변형 변수만 존재하여 초기화 할때 형태에 따라서 알아서 할당된다. var i; var x = 123; var y = "123"; var z = false; var w = null; 덧붙히자면 var의 유효 …

2020년 03월 23일 · 28 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

프로그래밍

자바스크립트

프론트엔드