Jeong.io

이것저것 쓰는 개발블로그

[모던 리액트 Deep Dive] 서버 사이드 렌더링, 그리고 CSS는 어디에 주입되는가

들어가며 이번에는 서버 사이드 렌더링을 정리했습니다. SPA와 SSR을 비교하고, 리액트가 서버에서 HTML을 만들어내는 API들을 살펴봅니다. 그리고 뒷부분에서는 조금 다른 이야기로 이어집니다. SSR을 하려면 HTML만 보내서는 안 되고 CSS도 같이 실어보내야 하는데, 요즘 라이브러리들이 스타일을 대체 어디에 넣고 있는가에 대한 이야기입니다. SPA…

[모던 리액트 Deep Dive] 상태 관리의 역사, 그리고 리렌더링을 줄이는 다음 방법

들어가며 이번에는 상태 관리입니다. Flux에서 시작해 Redux, Context API, 훅 기반 라이브러리까지의 흐름을 정리하고, 마지막 번외에서는 조금 다른 이야기를 합니다. “리렌더링을 막는 지금의 방식이 근본적인 해결인가” 라는 질문입니다. 상태란 무엇인가 상태는 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값입니다. 웹 애플리케이션…

클로드 워크플로우 설정기 — 코드보다 지도를 먼저

들어가며 AI에게 코드를 맡겼을 때 결과가 마음에 들지 않는 경우, 원인을 따라가 보면 모델이 코드를 못 짜서인 경우는 생각보다 드물었습니다. 대부분은 제가 준 정보가 불완전했고, 그 사실을 저도 몰랐다는 쪽이었습니다. 요구사항을 다 말했다고 생각했는데 정작 중요한 전제를 빼먹었거나, 아예 고려조차 못 한 케이스가 구현 중반에 튀어나오는 식입니다. 그래서…

[모던 리액트 Deep Dive] 자바스크립트부터 리액트 파이버까지

들어가며 리액트를 몇 년째 쓰고 있지만, “왜 이렇게 동작하는가”를 설명해보라고 하면 막히는 순간이 꽤 있었습니다. 이번에 를 읽으면서 정리한 내용을 남겨봅니다. 리액트를 쓰기 위한 자바스크립트, JSX가 어디서 왔는지, 그리고 가상 DOM과 리액트 파이버까지의 이야기입니다. 리액트라는 선택 리액트는 현재 모던 웹 프레임워크 중 가장 수요가 많고, 가장 …

춘식이의 모험에서 시작한 Three.js, 그리고 남은 결론

들어가며 「춘식이의 모험」이라는 웹사이트를 보게 됐습니다. 브라우저에서 이 정도의 인터랙티브한 경험이 만들어진다는 게 놀라웠고, 대체 어떻게 구현한 건지 궁금해서 3D 웹을 공부해보기로 했습니다. 이 글은 그 공부의 기록입니다. WebGL이 어디서 왔는지부터 시작해서 Three.js의 핵심 개념을 정리하고, 직접 만들어본 결과물이 왜 그 사이트와 그렇게 …

[함수형 프로그래밍] 일급 추상과 함수형 도구, 그리고 이벤트 소싱까지

들어가며 지난 글에서는 암묵적 입출력을 걷어내 계산을 만들고, 그 계산들을 계층으로 쌓는 이야기를 했습니다. 이번에는 한 단계 더 올라갑니다. 일급 추상 — 함수 이름에 숨어 있는 것을 값으로 꺼내기 함수형 도구 — , , 가 왜 함수형의 대표 예시인가 CQRS와 이벤트 소싱 — 지금까지의 이야기가 아키텍처로 확장되는 지점 일급 추상 함수 이름에 인자가 …

[함수형 프로그래밍] 암묵적 입출력 걷어내기, 카피-온-라이트, 계층형 설계

들어가며 지난 글에서는 코드를 액션 / 계산 / 데이터로 나누는 것까지 정리했습니다. 그런데 “액션에서 계산을 빼내라”는 말은 방향만 알려줄 뿐, 실제로 어디를 잡고 뜯어내야 하는지는 알려주지 않습니다. 이번 글에서는 그 구체적인 방법을 정리합니다. 입력과 출력 — 무엇을 기준으로 액션과 계산이 갈리는가 더 나은 추상화 단계 선택하기 — 어디까지 쪼개야 …

[함수형 프로그래밍] 부수효과를 없애는 게 아니라, 잘 다루는 것

들어가며 함수형 프로그래밍은 이름만 들으면 꽤 학술적인 이야기처럼 들립니다. 순수함수, 부수효과, 불변성 같은 단어들이 먼저 튀어나오다 보니 “그래서 내 코드에 어떻게 적용하라는 거지?”에서 막히는 경우가 많습니다. 이번 글에서는 함수형 프로그래밍의 사전적 정의가 왜 실무에서 반쪽짜리인지, 그리고 그 대안으로 코드를 액션 / 계산 / 데이터로 나누는 방법…

[TIL]2024.02.06

일일 개발 회고 with 3F Facts : 한것 and design 라이브러리를 이용하여 UI 모듈 개발 HTTP 메서드 종류에 대한 공부 장고BE CSRF토큰을 사용하기 위해 리다이렉트로 리액트FE 포트로 변경시킴 타입스크립트 제네릭과 애니타입에 대한 공부 Findings : 느낀것 확실히 UI 라이브러리를 쓰면 코드량이 줄고, 일관성있게 개발이 가능…

[TIL]Nest.js 기초(1)

Node.js 프레임워크 Express의 아키텍처가 개발자들마다 천차만별인 개발경험을 보다 좋게 바꾸기 위해 개발된 프레임워크 Nest.js 특징 내부적으로 Express를 기본적으로 사용함 MVC 디자인 패턴(Controller, Service, Entity, Repository 등)을 기본으로 사용 Typescript 기본으로 적용 Java sprin…