2024-11-24
조건에 따라 스타일을 다르게 적용해 주고 싶다면?
2024-11-10
Controller-Service-Repository 그리고 DI
2024-10-27
함수는 여러가지 변수를 참조하며 그 역할을 수행합니다. 그런데 함수는 함수 밖의 변수를 어디까지 참조할 수 있을까요? 이 글에서는 스코프와 실행 컨텍스트의 관점에서 Closure와 this에 대해 알아봅니다.
2024-10-13
Discriminated Union을 유틸리티 타입과 함께 사용하다 Type Narrowing이 의도대로 동작하지 않은 경험이 있으신가요? 이런 현상은 왜 발생하는 걸까요? 이 글에서는 타입 분배가 무엇이고 일부 유틸리티 타입에서 타입 분배를 지원하지 않는 이유를 살펴봅니다.
2024-09-22
Remix 프레임워크로 만들어진 웹에서 API 서버와 JWT로 인증을 처리해야 한다면, 그 토큰은 어떻게 관리되어야 할까요? Remix Session을 활용해서 SSR, CSR 두 시점에서 인증이 필요한 API를 호출할 수 있게 하는 방법을 소개합니다.
2024-09-19
여러 영역에서 비슷한 용도로 사용되는 Jotai Atom을 관리하는 방법에 대해 알아봅니다
2024-08-07
기능 분할 설계를 실제 프로젝트에 적용한다면 어떻게 활용하는 것이 좋을까요? 레이어 간의 애매한 구분을 명확하게 해 줄 기준은 어떻게 세울 수 있을까요? 이 글에서는 FSD를 실제 프로젝트에서 활용하기 위한 방법을 고민해 봅니다.
2024-07-11
브라우저 상에서의 React와 비슷한 방식으로 테스트할 수 있게 해주는 act API 알아보기
2024-06-16
리액트가 훅을 통해 풀고자 하는 문제가 무엇인가에 대해 생각해보게 되는 책
2024-05-02
Next.js와 MDX를 사용하는 개발 블로그가 거쳐온 1년 반 동안의 여정을 공유합니다. MDX 관리를 위해 Contentlayer를 도입하고, 포스팅을 별도 리포지토리로 분리해서 관리하고, Pages Router를 App Router로 마이그레이션했던 과정에서의 고민들을 소개합니다.
2024-03-31
Testing Library를 활용해 리액트 컴포넌트를 TDD로 개발하는 방법을 소개합니다
2024-03-03
Testing Library를 사용해 React 컴포넌트를 테스트할 때, 렌더링된 요소를 잘 선택해 오기 위한 팁을 소개합니다.
2024-02-17
이해하기 좋은 기술 문서를 쓰려면 어떻게 해야 할까?
2024-02-04
2024-01-07
시각적 요소가 포함된 기능은 어떻게 테스트할 수 있을까요? 어떤 기능을 어떻게 테스트해 볼 수 있을지, 바텀시트 높이 조절 테스트 사례를 통해 소개합니다.
2023-12-24
2023-12-10
2023-10-29
2023-10-10
2023-10-09
DefinitelyTyped에 정의된 리액트 타입을 살펴봅니다
2023-10-01
2023-07-16
리스트 가상화 기법은 화면을 그리기 위해 필요한 최소한의 컨텐츠만 DOM에 남겨두는 최적화 기법이다. 가상화를 적용한 리스트와 일반 리스트의 성능 차이를 비교해보았다.
2023-07-02
GitHub 액션을 추가하기 전에 로컬에서 충분히 테스트해볼 수 있게 도와주는 act를 소개합니다
2023-06-17
Github Actions를 활용해, 내 블로그에 올라온 최신 글 목록을 자동으로 깃허브 프로필에 올려보자
2023-05-06
객체 구조와 알고리즘을 분리시키는 디자인 패턴
2023-04-23
객체들을 관리하기 위해서 주로 컬렉션을 사용한다. 컬렉션은 단순 리스트일 수도 있고, 스택, 트리, 그래프 등 복잡한 데이터 구조일 수도 있다. 컬렉션의 유형과 상관 없이 순회를 진행하기 위해 반복자 패턴을 사용한다.
2023-04-09
함수를 모킹하고, fake timer를 활용해 비동기 함수의 실행 시점을 제어해봅니다.
2023-03-26
용량이 큰 이미지는 다운로드 받는 시간도 오래 걸리기 때문에 웹 페이지가 전부 표시되기까지의 시간이 매우 길어지게 됩니다. CDN을 활용해 이미지의 용량을 줄이고, 레이지 로딩과 LQIP를 활용해 더 나은 사용자 경험을 제공하는 방법을 알아봅니다.
2023-03-12
클래스는 복잡한 로직을 다룰 때 많은 도움이 되지만, 오히려 프로젝트가 복잡해지는 원인이 되기도 합니다. 너무 많은 책임을 맡아 아주 복잡해진 클래스에서 진짜 책임을 찾아주는 방법을 소개합니다.
2023-02-26
글또에 참여하며, 글또에서 해보고 싶은 것에 대해 생각해봤습니다.
2023-02-10
Why Webpack? 웹팩 같은 모듈 번들러는 왜 필요할까?
2022-12-04
스터디 시작 시간을 알리는 디스코드 봇을 만들어보자
코드 몇 줄 넣었더니 사용자 통계가 나온다!
2022-11-27
React는 왜 Flux 패턴을 사용할까?
2022-11-12
Next.js로 정적 사이트 블로그를 만들고, 글은 mdx로 유연하게 작성할 수 있다.
2022-10-12
변수를 찾기 위한 규칙을 스코프라고 한다. 자바스크립트는 렉시컬 스코프를 만든다. / YOU DON'T KNOW JS - 스코프와 클로저
2022-10-09
2022-10-06
프로젝트를 시작하기 전에 기본 원칙을 정하는 것이 좋다. 요구사항을 정하거나 제약조건을 관리하고, 적당한 정도의 준비 기간을 가져야 한다. 이런 이슈를 정리해야만 성공적으로 프로젝트를 시작할 수 있다.
2022-05-27
우리는 우연에 맡기는 프로그래밍, 곧 행운과 어쩌다 오는 성공에 의존하는 프로그래밍을 하지 말아야 한다. 대신 의도적으로 프로그래밍(programming deliberately)해야 한다.
2022. 05. 21(토) 5장. 구부러지거나 부러지거나
2022-05-21
4장. 실용주의 편집증
2022-05-20
2022-05-19
요구사항이 바뀌더라도 쉽게 대응할 수 있는 시스템을 만들어야 한다. 그러기 위해서 반복을 만들지 말고, 직교하는 시스템을 만들어라.
2022-05-15
실용주의 프로그래머는 문제를 항상 더 큰 맥락에 두고 생각하고, 자신이 하는 모든 일에 책임을 진다
2022-05-14
실용주의 프로그래머 00
2022-05-13
프로젝트가 커지고 복잡해지다 보면 순수 React만으로는 부족해지는 순간이 온다.
2022-05-02
자바스크립트 웹 프레임워크 없이 웹 프론트엔드 애플리케이션을 개발하는 방법에 대해 알아보는 책이다. 렌더링, 이벤트 관리, HTTP 요청, 라우팅, 상태 관리 등을 프레임워크 없이 직접 구현해본다.
2022-04-29
직접 DOM을 제어하지 않아도 되고, 직접 DOM을 제어하는 것보다 성능 상에서 나을 수 있다
2022-04-21
객체는 애플리케이션의 기능을 구현하기 위해 협력한다. 객체는 어떤 역할을 가지고, 책임을 수행한다. 객체는 자율적으로 책임을 수행해야 하고, 협력적으로 협력에 참여해야 한다.
순환 의존성 때문에 일어나는 에러 해결하기
2022-03-28
에러처리/모듈/바벨&웹팩
2022-03-12
비동기 프로그래밍 / 이벤트 루프 / 콜백 / Promise / 제너레이터 / async await
이터러블이란?
클래스란?
클로저란?
실행 컨텍스트란?
this란? / 함수 호출 방식과 this 바인딩 / 일반 함수 호출 / 메서드 호출 / 생성자 함수 호출 / apply/call/bind
2022-02-13
UnityYAMLMerge로 유니티 씬을 편하게 머지하기
CORS 정책 / 동작 방식 / HTTP 요청-응답 흐름 / CORS 해결 방법
www.naver.com을 입력하면 생기는 일
Domain Name System - IP를 이름으로 바꿔주는 서비스 + 프로토콜
웹의 어플리케이션 레이어 프로토콜 → TCP(Transport Layer) 위에서 작동
TCP - 전송 제어 프로토콜(Transmission Control Protocol) → 인터넷 상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜
OSI(Open Systems Interconnection) - 개방형 시스템, 시스템 간의 상호연결성을 부여하는 표준국제표준화기구(ISO)에서 개발한 모델
strict mode / 빌트인 객체 / 전역 객체
상속이 필요한 이유 / __proto__ / 프로토타입의 생성 시점 / 객체 생성 방식에 따른 프로토타입의 결정 / 프로토타입 체인 / 프로토타입 교체 / 직접 상속
2022-02-07
생성자 함수로 객체 생성하기 / 객체 리터럴과 생성자 함수 비교 / 생성자 함수의 인스턴스 생성 과정 / 내부 메서드 / new 연산자
2022-02-04
전역 변수의 문제점 & 프로퍼티 어트리뷰트
2022-01-29
함수 (다양한 함수의 형태 / 일급 객체 / 함수가 가지는 프로퍼티) / 스코프 (렉시컬 스코프 / 함수 레벨 스코프)
2022-01-23
🤵 State와 Ref의 차이가 무엇인가요? 🙎 ??? 🤵 이런 상황에서 ref의 값이 변경된다면 다시 렌더링이 될까요?
2022-01-17
자바스크립트의 객체란? / 프로퍼티 / 원시 값과 객체 / 값에 의한 전달과 참조에 의한 전달
2022-01-16
객체 지향 프로그래밍이란? 코드의 모든 것을 객체(Object)로서 표현하고자 하는 프로그래밍 패러다임
리터럴과 표현식 / 표현식이 아닌 문 / 세미콜론 자동 삽입 / 데이터 타입 / 연산자 / 제어문
2022-01-13
변수란 무엇인가? / 변수 선언의 실행 시점과 변수 호이스팅 / var, const, let / 자바스크립트의 데이터 타입 종류
2022-01-09
HTML, CSS와 함께 웹을 구성하는 요소 중 하나, 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
The React Framework for Production
2022-01-01
React DOM은 새로 그리는 화면을 최소화하기 위해서 엘리먼트를 이전 엘리먼트와 비교해서 필요한 경우에만 DOM을 업데이트하며, Diffing Algorithm에 따라 변경 전, 후의 React 엘리먼트 트리를 비교하여 가장 효과적으로 UI를 갱신할 방법을 찾는다.
2021-12-27
JSX는 JavaScript를 확장한 문법으로, React에서 엘리먼트의 UI가 어떻게 생겨야 할 지를 나타내기 위해 사용된다.
라이트하우스는 웹앱 품질 측정도구이다. 웹앱의 성능, 접근성, SEO 등을 검사해주고, PWA 조건을 만족하는지도 검사해준다. 지금 진행하고 있는 프로젝트의 성능을 라이트하우스와 함께 개선해봤다.
2021-12-04
스토리북에서 antd를 쓰고 싶다면 preset을 추가해 주어야 합니다.
2021-11-10
antd 컬러를 우리 프로젝트 컬러로 바꿔주기
2021-11-09
파이썬으로 알고리즘을 풀어보면서 자주 찾아보게 되었던 내용을 정리했습니다.
2021-11-04
서버와 클라이언트의 도메인이 다를 때 쿠키를 설정하고 CORS 에러를 해결하기
2021-11-01
SSR을 사용하는 Next.js 프로젝트를 Netlify에 배포하는 플러그인
2021-10-27
Redux의 경우에는 스토어 하나를 만들기 위해서 작성해야 하는 코드가 너무 많고 복잡해서, 비교적 쉽고 간단한 MobX를 사용하기로 했다.
2021-10-26
import 시 상대경로를 사용하면 프로젝트가 복잡해질수록 가독성이 떨어진다. 좀 더 단순하고 편리하게 파일의 경로를 나타내기 위해서 절대경로를 사용한다.
어떤 도메인의 서브도메인에 접속했을 때 서버의 특정 포트에 실행되고 있는 어플리케이션으로 연결하는 방법에 대하여 정리합니다.
Nginx 라우팅을 했을 때, request의 host 이름을 라우팅된 호스트 이름이 아니라 원래의 이름을 알고 싶다면
