Jeong.io

이것저것 쓰는 개발블로그

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

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

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

들어가며 지난 글에서는 암묵적 입출력을 걷어내 계산을 만들고, 그 계산들을 계층으로 쌓는 이야기를 했습니다. 이번에는 한 단계 더 올라갑니다. 일급 추상 — 함수 이름에 숨어 있는 것을 값으로 꺼내기 함수형 도구 — , , 가 왜 함수형의 대표 예시인가 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…

내 웹페이지가 로딩될때 일어나는 일 (1)

드디어 개발을 끝냈다. 만약 제가 정말 단순한 웹페이지를 개발했다고 가정해보겠습니다. 정말 간단하게 버튼을 누르면 숫자가 증가하고, 감소하는 카운트 페이지 입니다. html과 css 그리고 조금의 자바스크립트 코드로 이루어진 아주 단촐한 페이지입니다. 그렇다면 이 페이지를 열었을때 일어나는 일에 대하여 모두 알고계신가요? 이 html파일을 열었을때 일어나…

WEBPACK

모듈과 번들러를 아시나요? 모듈이란 프로그램을 구성하는 구성요소로 관련된 데이터와 함수를 묶은 가장 작은 단위를 말합니다. 함수의 기능별로 모듈을 만들면 유지보수가 쉬워지고 더 좋은 프로그래밍 개발이 가능합니다. 번들링이란 모듈의 의존성 관계를 파악하여, 그룹화시켜주는 작업으로서 모듈들을 묶어 용량도 줄이고 더 사용하기 쉽게 만들어주는 작업을 뜻합니다. …

바벨.js

babel.js Babel is a JavaScript compiler. 바벨 공식 홈페이지에서 바벨을 소개하는 문구입니다. 저 문구처럼 바벨은 상위버전에 자바스크립트(이하 ECMAscript)를 하위버전으로 컴파일링 혹은 트랜스 파일링 해주는 도구입니다. 자바스크립트는 리빙 스탠다드로 매년 새로운 표준이 나오며, 신규 문법들이 추가되고 있습니다. 일반적…

비동기, async와 await

자바스크립트 비동기가 이러우지는 방식 프로미스와 콜백지옥, 덴 캐치ㅏ외 어싱크 어웨이트 어싱크 어웨이트 코드까보기 코루틴과 비동기 자바스크립트 비동기가 실행되는 방식 자바스크립트는 싱글스레드라 stack을 하나만 가지고 있음에도 불구하고 어떻게 비동기처리를 하는지 알아보겠습니다. 동기 자바스크립트는 싱글스레드이기 때문에 하나의 실행컨텍스트 스택을 가집니다…