NPM: Git과 Tarball로 의존성 관리7개월 전4분회사 디자인 시스템을 수정하며 개발해야 했으나, 정식 배포는 너무 오래 걸렸습니다. 동료 팁으로 Git/Tarball로 직접 설치하는 법을 알게 되었습니다. 프라이빗/베타 버전 관리에 매우 효율적이겠습니다.
자바스크립트를 원래 자리에 되돌려 놓기9개월 전4분장고 풀스택에서 Next.js로 전환했다가 다시 장고로 복귀한 경험을 다룬 글. 리액트 서버 컴포넌트(RSC)의 한계와 Vite, 섬 아키텍처를 활용한 현대적 풀스택 개발 방식을 설명합니다.
setInterval 대신 setTimeout 쓰기2023. 08. 07.4분setInterval은 지정한 간격마다 무조건 실행되어 정확한 타이밍을 보장하지 않고, 실행 시간이 길어지면 문제가 발생할 수 있다. 따라서 setTimeout을 사용하여 콜백 실행 후 남은 시간만큼 간격을 조절하는 방식이 더 안정적이며, 실행 시간이 예측 어려운 경우 일관된 간격으로 실행되도록 개선할 수 있다.
Svelte의 상태 관리2023. 06. 20.9분이 글은 바닐라 JavaScript로 프론트엔드를 개발하다가 복잡성에 직면하여 Svelte를 적용하고 얻은 경험에 대해 이야기합니다. Svelte의 상태 관리 및 리액티브 선언, 전역 스토어 및 구독 스토어 등의 기능에 대해 다루고 있습니다. 이를 통해 Svelte가 UI 관리를 효율적으로 할 수 있는 방법을 제공한다는 점을 이야기 합니다.
[JavaScript] badland의 상태 관리2022. 01. 20.11분필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …
자바스크립트의 복사2022. 01. 03.13분자바스크립트에는 2가지 복사가 있다. 깊은 복사와 얕은 복사다. 이 개념을 이해하려면 자바스크립트의 원시 값(number, string, boolean, undefined, null, symbol)은 변수에 '값'이 저장되고 객체 값은 변수에 '참조 값'이 저장된다는 것을 알아야 한다. 원시 값 변수를 다른 변수에 대입할 경우 다른 변수는 동일한 값으로 저장되지만 객체 값 변수를 다른 변수에 대입할 경우 …
자바스크립트 한글 음절 분리 / 음소 병합2021. 04. 28.13분회사의 랜딩 홈페이지 제작 중, 한 글자씩 나타나는 애니메이션을 구현하려고 했으나 음소 단위로 변경되어야 했다. 이를 위해 자바스크립트 오픈소스 라이브러리를 찾아 사용하였고, 해당 라이브러리를 사용하는 코드를 발견하여 이를 이해하고 활용하였다. 코드는 글자를 분리하는 함수와 분리된 글자를 병합하는 함수로 구성되어 있으며, 초성, 중성, 종성 등의 인덱스를 계산하여 정확한 값을 반환하도록 구현되어 있다. 이후 초성과 종성이 없는 경우를 처리하는 조건문을 추가하여 정확한 결과를 얻을 수 있었다.
GitHub Action으로 Next.js 정적 배포하는 방법2021. 04. 27.3분Next.js를 이용해 정적 페이지를 개발하고 깃허브 페이지에 호스팅하는 방법을 소개한 글입니다. out 디렉터리에 빌드된 페이지를 생성하기 위해 next build와 next export 명령어를 사용하며, 호스팅을 위해 git subtree push와 같은 일련의 작업을 수행해야 합니다. 이 작업을 자동화하기 위해 GitHub Action을 이용할 수 있으며, 해당 방법을 소개하고 있습니다.
React Native Flexbox와 친해지기2020. 05. 07.8분React Native에선 Flexbox라는 형식으로 레이아웃 개발을 진행한다. 최신 웹 브라우저에서도 이 레이아웃이 작동하여 CSS 최신 방법론으로 알려져 있다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 적용할 수 있다. 아래 내용은 대부분 공식문서인 "Layout with Flexbox #"을 인용하였다. Flex flex will define how your items are going to “fill” over the available …
React Native 개발환경 구축2020. 05. 07.4분들어가며 난 무언가를 시작하기전에 이게 왜 필요한지 어디에 활용되는지 반드시 파악하고 진행하는 편이다. 몇몇 자료를 찾아봤지만 아래의 글에서 무엇인가 깊고 진한 전문가의 향기가 났다. 여하지간 아래 글을 참고하여 RN의 특성을 파악하였다. [RN] React-Native의 장단점은? Expo Web(React Native for web) 튜토리얼 내용을 정리해보면 RN의 장점은 다음과 같이 추려진다. React를 알고 있다면 …
Electron 시작하기 (With React)2020. 04. 24.17분일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 크로미움을 내장하고 있는 것으로 보인다. 프레임워크 구성 main.js 메인 프로세스 데스크톱 앱의 백엔드 역할을 수행 앱 자체의 총괄적인 부분(Node.js와 거의 동일) 업데이트 제어 OS GUI …
JavaScript 기본 문법 정리2020. 03. 23.28분자바스크립트의 변수, 연산자, 조건문, 함수, 배열 등의 기본적인 문법을 설명하고, 각각의 예시와 함께 사용 방법을 소개하였다. 최신 자바스크립트에서 추가된 let과 const, 화살표 함수 등도 다루었다. 배열과 관련된 메소드에 대해서도 설명하였다.
React로 Hello World 출력2020. 01. 05.2분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에 아래와 같은 내용을 …
![[JavaScript] badland의 상태 관리](/resources/media/images/title/2022/1/21/baealex/1_Z5zBqApg.png.minify.png)
