NPM: Git과 Tarball로 의존성 관리2025년 11월 16일4분회사 디자인 시스템을 수정하며 개발해야 했으나, 정식 배포는 너무 오래 걸렸습니다. 동료 팁으로 Git/Tarball로 직접 설치하는 법을 알게 되었습니다. 프라이빗/베타 버전 관리에 매우 효율적이겠습니다.
자바스크립트를 원래 자리에 되돌려 놓기2025년 9월 4일7분장고 풀스택에서 Next.js로 전환했다가 다시 장고로 복귀한 경험을 다룬 글. 리액트 서버 컴포넌트(RSC)의 한계와 Vite, 섬 아키텍처를 활용한 현대적 풀스택 개발 방식을 설명합니다.
setInterval 대신 setTimeout 쓰기2023년 8월 8일4분setInterval은 지정한 간격마다 무조건 실행되어 정확한 타이밍을 보장하지 않고, 실행 시간이 길어지면 문제가 발생할 수 있다. 따라서 setTimeout을 사용하여 콜백 실행 후 남은 시간만큼 간격을 조절하는 방식이 더 안정적이며, 실행 시간이 예측 어려운 경우 일관된 간격으로 실행되도록 개선할 수 있다.
Svelte의 상태 관리2023년 6월 21일9분이 글은 바닐라 JavaScript로 프론트엔드를 개발하다가 복잡성에 직면하여 Svelte를 적용하고 얻은 경험에 대해 이야기합니다. Svelte의 상태 관리 및 리액티브 선언, 전역 스토어 및 구독 스토어 등의 기능에 대해 다루고 있습니다. 이를 통해 Svelte가 UI 관리를 효율적으로 할 수 있는 방법을 제공한다는 점을 이야기 합니다.
[JavaScript] badland의 상태 관리2022년 1월 21일11분필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …
자바스크립트의 복사2022년 1월 3일13분자바스크립트에는 2가지 복사가 있다. 깊은 복사와 얕은 복사다. 이 개념을 이해하려면 자바스크립트의 원시 값(number, string, boolean, undefined, null, symbol)은 변수에 '값'이 저장되고 객체 값은 변수에 '참조 값'이 저장된다는 것을 알아야 한다. 원시 값 변수를 다른 변수에 대입할 경우 다른 변수는 동일한 값으로 저장되지만 객체 값 변수를 다른 변수에 대입할 경우 …
자바스크립트 한글 음절 분리 / 음소 병합2021년 4월 28일13분회사의 랜딩 홈페이지 제작 중, 한 글자씩 나타나는 애니메이션을 구현하려고 했으나 음소 단위로 변경되어야 했다. 이를 위해 자바스크립트 오픈소스 라이브러리를 찾아 사용하였고, 해당 라이브러리를 사용하는 코드를 발견하여 이를 이해하고 활용하였다. 코드는 글자를 분리하는 함수와 분리된 글자를 병합하는 함수로 구성되어 있으며, 초성, 중성, 종성 등의 인덱스를 계산하여 정확한 값을 반환하도록 구현되어 있다. 이후 초성과 종성이 없는 경우를 처리하는 조건문을 추가하여 정확한 결과를 얻을 수 있었다.
GitHub Action으로 Next.js 정적 배포하는 방법2021년 4월 27일3분Next.js를 이용해 정적 페이지를 개발하고 깃허브 페이지에 호스팅하는 방법을 소개한 글입니다. out 디렉터리에 빌드된 페이지를 생성하기 위해 next build와 next export 명령어를 사용하며, 호스팅을 위해 git subtree push와 같은 일련의 작업을 수행해야 합니다. 이 작업을 자동화하기 위해 GitHub Action을 이용할 수 있으며, 해당 방법을 소개하고 있습니다.
React Native Flexbox와 친해지기2020년 5월 7일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년 5월 7일4분들어가며 난 무언가를 시작하기전에 이게 왜 필요한지 어디에 활용되는지 반드시 파악하고 진행하는 편이다. 몇몇 자료를 찾아봤지만 아래의 글에서 무엇인가 깊고 진한 전문가의 향기가 났다. 여하지간 아래 글을 참고하여 RN의 특성을 파악하였다. [RN] React-Native의 장단점은? Expo Web(React Native for web) 튜토리얼 내용을 정리해보면 RN의 장점은 다음과 같이 추려진다. React를 알고 있다면 …
Electron 시작하기 (With React)2020년 4월 24일17분일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 크로미움을 내장하고 있는 것으로 보인다. 프레임워크 구성 main.js 메인 프로세스 데스크톱 앱의 백엔드 역할을 수행 앱 자체의 총괄적인 부분(Node.js와 거의 동일) 업데이트 제어 OS GUI …
JavaScript 기본 문법 정리2020년 3월 23일28분자바스크립트의 변수, 연산자, 조건문, 함수, 배열 등의 기본적인 문법을 설명하고, 각각의 예시와 함께 사용 방법을 소개하였다. 최신 자바스크립트에서 추가된 let과 const, 화살표 함수 등도 다루었다. 배열과 관련된 메소드에 대해서도 설명하였다.
React로 Hello World 출력2020년 1월 5일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에 아래와 같은 내용을 …
[11.5] React 공부2019년 11월 5일7분기초 폼 React.DOM.render { <h1>Hello, World!</h1> document.getElementById('root') } render는 react의 정수이다. 위에 코드를 살펴보면 H1태그를 작성하였고 root이라는 ID를 가진 element를 불러왔다. react는 h1태그와 같은 html을 rootID를 가진 element에 render해준다. 따라서 화면엔 Hello World가 출력된다. 그리고 이러한 문법을 JSX라고 한다. JSX const element = <h1>Hello World!</h1> JSX는 위 코드와 같이 변수에도 …
[11.1]Javascript 공부2019년 11월 1일8분IIFE js에서 자주사용되는 코딩패턴 중 하나이다. JS에서의 함수 function foo() { alert("Hello World"); } foo(); IIFE를 적용하지 않은 코드 foo 라는 함수를 1-3째 줄에 선언하고 5번째 줄에서 foo();를 통해 호출해내는 일반 개발자들이라면 자연스럽게 떠올릴 만한함수의 선언과 호출 과정이다. var msg = "Hello World"; var foo = function () { alert(msg); …
[알고리즘] 하노이의 탑 Javascript로 풀어보기2019년 10월 31일1분하노이의 탑 풀어보았다. 소스코드 function Hanoi(plate, departure, dropBy, destination) { if (plate === 1) { document.getElementById('responseDiv').innerHTML = `${plate}을 ${departure}에서 ${destination}로 이동` } else if (plate > 1) { Hanoi(plate - 1, 'A', 'B', 'C'); document.getElementById('responseDiv').innerHTML = `${plate - 1}을 ${departure}에서 ${destination}로 이동` Hanoi(plate - 1, 'C', 'A', 'B'); } } …
JavaScript ES201n 공부2019년 10월 29일5분글에 앞서 본 글은 ZeroCho님의 ECMAScript 텍스트 강좌를 인용했습니다. ES6 JavaScript의 ES시리즈란 JavaScript의 버전을 말한다. 최신 Javascript는 var부터 모든것들이 바뀌고 편의성이 개선되었다고 한다. const, let var을 대체하는 이 두 가지는 함수의 스코프를 따르는것이 아닌 블록 스코프를 따른다. var은 어느곳에서 선언해도 최상단으로 끌어올려지는 '호이스팅'이라는 개념때문에 개발자가 예기치 못한 상황을 많이 맞이하였지만, …
[10.18]JavaScript Design pattern(모듈, 싱글톤, 생성자)2019년 10월 18일2분모듈 패턴 var newScope = (function () { 구문 }) (); 함수를 선언하자마자 실행시키는 패턴. IIFE라고도 함. 싱글턴 패턴 var singleton = (function() { var instance; var a = 'hello'; function initiate() { return { a: a, b: function() { alert(a); } }; } return { getInstance: function() { if …
[10.18]JavaScript 정리2019년 10월 18일5분실행 컨텍스트 자바스크립트가 왜 그렇게 동작하는지를 알려줌 처음 코드를 생성하는 순간 전역컨텍스트가 생김 함수 컨텍스트는 함수를 호출할 때마다 하나씩 생긴다. 컨택스트 생성 시 컨텍스트 안에 변수객체 scope chain, this 가 생성된다. 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들은 변수 객체 안에서 값을 찾고 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 …
[10.15] javascript 정리2019년 10월 17일7분window 객체 : window 객체는 Document의 상위객체이다. 주요 객체 : screen, location, history, document 주요 메소드 : parseInt, isNaN 전역객체이기에 생략이 가능하다 예) window.parseInt() => parseInt() window.close() : 창을 닫는다 window.open() : 창을 연다 window.encodeURI(), window.decodeURI() : 주소에 한글이 들어가면 %ECE%EE%EAEGAEAGASE%같은 한글이 이상한 글자로 바뀌는데 encode는 한글 -> 외계어 decode는 …
[JavaScript] ProtoType에 대한 이해2019년 10월 7일3분객체지향 클래스는 객체지향 프로그래밍이 기반인 언어에서 필수적인 역할을 한다. 클래스는 코드의 재사용성을 높여주고, 가독성을 올려준다. 필자는 저번주 내내 BlackJack 구현에 메달렸었다. 제일 자신있는 언어인 Java로 객체지향을 상기시키면서 React의 Component, Javascript에서의 ProtoType을 통한 객체지향에 대비했다. 객체지향을 이용한 BlackJack 하나, 객체지향을 이용하지 않고 통으로 코딩한 BlackJack 하나를 구현했는데 처음에는 통으로 코딩하는것이 쉬웠지만 …
![[JavaScript] badland의 상태 관리](/resources/media/images/title/2022/1/21/baealex/1_Z5zBqApg.png.minify.png)
![[알고리즘] 하노이의 탑 Javascript로 풀어보기](/resources/media/images/title/2019/10/31/yoyounn18/12_12_59.jpg.minify.jpg)
![[JavaScript] ProtoType에 대한 이해](/resources/media/images/title/2019/10/7/yoyounn18/12_53_30.png.minify.png)