개발일기

공인 인증서를 업로드 하는 서버(가칭, certManager)를 구축해야 하는 상황이 생겼다. 이 서버는 다른 서버들로 인증서들을 밀어 넣어주는 역할을 하는데, 문제는 어느 타이밍에 어떻게 서버들에 밀어 넣어줄 지를 판단하고 실제 밀어넣는 작업을 하는 부분이였다. 이러한 작업을 스레드를 만들어 수행할 수 있도록 하면 어떻겠냐는 의견을 들으며, '갑자기 쓰레드가 왜? ' 라는 생각을 하게 되었다. 해당 의견을 낸 사람은 서버 = 스레드 = 프로세스를 같은 개념 선상에서 말하였다고 하는데, 갑자기 OS 과목 때 배웠던 스레드, 프로세스를 다시한번 짚어 보면 좋을 것 같아 글을 작성하게 되었다. 이 글에서는 스레드, 프로세스 각각의 개념과 특징, 차이, 메모리를 어떻게 사용하는지에 대해 정리한다. 참고 아티클..

노드 프로젝트를 구동하던 중 위와 같이 라이브러리 버젼 충돌이 일어나곤 한다. 이럴 경우, --force 옵션을 주어 install을 하면 프로젝트가 설치가 된다. 하지만 위와 같은 방법은 임시 해결책일 뿐, 왜 버전 충돌이 나는지 확인해서 수정하자. (24.1.8) 추후 위 상황에 대한 원인과 해결방법을 작성해 놓을 예정이다.

회고라는 것을 처음 작성해 본다. 회사에서 프로젝트 내 스프린트가 끝날 때마다 회고를 하긴 했지만, 목적없는..? 관례적인 회고로 느껴질 뿐 건설적인 회고는 부족한 듯 느껴졌다. 올 한 해동안에는 주마다 회고를 작성하며 더 나은 개발자, 더 지혜로운 사회인이 되고 싶다. 무작정 회고글을 작성하고 있지만, 앞으로는 회고 방법과 좋은 회고글들을 참조하여 내 회고글에도 적용하려 한다. 24년 달려가 보자고! * 개발 개발 관점에서 궁금했던 포인트나 얻었던 인사이트 들이 있을까? 개발을 할 때, 관심사의 분리, 단일 책임 원칙 같은 개념에 대해 이야기했었다. 상속 받은 자식 클래스들은 specialized 한 클래스들, 그리고 데이터를 직접적으로 가공하는 곳은 데이터와 연관된 모듈, 클래스들이 되어야 한다는 것..

Next.js 공식 홈페이지의 Rendering 파트를 읽다가 프로젝트를 하면서 줄 곧 발목 잡던 내용에 대한 부분이 있어 캡처해서 올리게 되었다. 클라이언트 컴포넌트 안에 데이터를 fetching 하는 서버 컴포넌트를 두었을 경우 클라이언트 컴포넌트에서 async-await를 사용할 수 없다고 하는 에러가 나왔었다. 그렇다면, 서버 컴포넌트는 무조건 클라이언트 컴포넌트 내부에서 렌더될 수 없을까...? 에 대한 내용이 바로 아래 내용에 자세히 적혀있다. 결론적으론 클라이언트의 props로 서버 컴포넌트를 내려주었을 경우에는 클라이언트 컴포넌트에서 서버 컴포넌트를 렌더할 수 있음을 알려주고 있다. 찬찬히 공식 홈페이지에 있는 내용을 전부 훑어 봐야할 것 같다.

CH1 타입스크립트 소개 2009년 브라우저에서 가장 안정적으로 동작하는 표준인 ES5가 나옴 이러한 ES5 표준을 기반으로 한 Node.js플랫폼 등장 이를 통해 자바스크립트가 단지 브라우저만을 위한 언어가 아닌 서버 프로그래밍이 가능한 언어로서 영역을 확장 ES6(ES2015)가 나오면서 Node.js가 채택해 사용하는 CommonJS 방식과 AMD(Asynchronous Module Definition) 방식의 근간이 되는 모듈 시스템이 추가되었다. AMD 방식처럼 모듈 로더에 의해 런타임 시에 모듈을 비동기로 호출할 수도 있게 되었다. 이 외에도 화살표 함수, 클래스, 개선된 객체 리터럴, 템플릿 문자열, 심볼(symbol), 프로미스(promise), 제너레이터, for of, 디스트럭처링, 프..

create-next-app으로 프로젝트를 만들고 로컬 서버를 구동하던 중 아래와 같은 에러를 만났다. 이 이슈는 npm version이 맞지 않아 발생한 이슈(나는 14.x대였음)로 공홈에서도 아래와 같이 명시적으로 표기하고 있다. 공홈의 내용을 자세히 읽는 습관을 갖아야 겠다.

"중복된" 컴포넌트 작성이 아닌, 컴포넌트 내 "점점 늘어나는 조건 처리" 없이 하나의 컴포넌트로 여러 layout들을 관리하며 동시에 코드의 가독성을 확보하고 원활한 유지 보수를 할 수 있는 컴포넌트를 설계하기 위한 내용입니다. 디자인 시안을 전달 받고 컴포넌트를 설계하는 과정 중, 아래와 같은 디자인 시안을 마주하게 되었습니다. 아래의 디자인 샘플들은 거의 유사한(혹은 동일한) 모델을 기반으로 화면을 구성하는데, 화면 내 표시되는 곳에 따라 레이아웃의 세밀한 차이가 있습니다. cf) 컴포넌트 예시 구현 초기 단계에서는 이러한 컴포넌트를 구현하기 위해 아래와 같은 생각을 하였습니다. '하나의 컴포넌트 내에서 어떤 화면인지를 알려주는 props를 넘겨 if-else 와 같이 조건을 구분하여 화면을 렌더링..

5.1.1. 산술 연산자 지수 연산자(exponentiation operator) ES7에서 제공하는 기능으로 ** 라는 연산자로 사용된다. Math.pow를 대체해 사용할 수 있다 10 ** 2 ⇒ 100 / 10 ** 3 ⇒ 1000 5.1.2. 비교, 논리, 조건 연산자 == 와 != 연산자 대신 ===과 !== 사용하기를 권장 위 연산자를 사용해야 자바스크립트로 컴파일하고 나서도 타입 안전성을 보장할 수 있기 때문 5.2.1. 객체 디스트럭처링 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는 데 유용 let { id, country = 88 } = { id: "happy" }; console.log(id, country); // happy, 88 디스트럭처링 할당 시 할당할 객체..

4.1.1. if문 사용 시 타입 제약 참과 거짓을 판단할 수 있는 불리언(boolean) 타입 truthy: 아래 falsy한 상황 이외의 모든 상황 falsy: undefined null 0 “”(null string) NaN 조건 연산자 || && ?? let x; x ??= 5; console.log(x); // 5 x ??= 10; console.log(x); // 5 (이미 x에 값이 할당되어 있으므로, 10이 할당되지 않습니다.) 4.1.2. switch 문과 폴스루 switch default 절 없이 case 절로 커버하면 되지 않나? default 절이 없을 경우, 예상 치 못한 case에 마주할 때, 오류가 발생할 수 있다. fall-through(폴스루) break 문을 생략하여, 다..

아래의 내용은 "타입스크립트 퀵스타트"의 CH14(프로젝트 구성과 번들링)를 요약 및 관련 설명을 추가한 내용입니다. 번들링 여러 리소스(파일)를 합치는 과정 타입스크립트 파일을 tsc와 —out 옵션을 통해 타입스크립트 파일을 하나의 파일로 번들링 할 수 있다. 그러나 위 방법으로는 타입스크립트 파일에 대해서만 번들링을 할 수 있다. 이러한 한계를 극복하기 위해 웹팩(webpack)과 같은 번들러를 이용 개별 파일에서 호출한 모듈을 적절한 순서로 배치 흩어져 있는 라이브러리와 사용자 코드를 합쳐 최적화된 배포 파일을 생성해 낸다. 번들러를 이용하여 이미지, css, js와 같은 파일을 모아서 배포 가능한 단위로 합친다. 번들러는 트랜스 파일처럼 `ES6->ES5` 로 변환해주지는 않는다. 여러 군데 흩..