전체 글

( 23. 07. 04 추가 수정 ) Recoil 0.7.6 버전 이후로 환경변수를 추가하면, Duplicate atom key 이슈를 해결할 수 있습니다. .env* 파일에 아래 환경 변수를 추가해주시면 해결됩니다 ! RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false (아래 부분으로도 해결가능하겠지만, Deprecated된 해결방법이라고 보시면 됩니다.) Next.js 개발환경에서 Recoil을 사용하다 보면 Next.js 서버에 다음과 같은 에러가 콘솔로 찍히는 것을 볼 수 있습니다. Duplicate atom key "KEY 이름". This is a FATAL ERROR in production. But it is safe to ignore this warni..

프로젝트를 만들고 개발을 진행하다 보면, 파일이 점진적으로 늘어나면서, 폴더 구조를 어떻게 잡아야 하는 지에 대한 고민이 생기곤 합니다. 작은 프로젝트면 폴더 구조를 바로바로 바꿀 수도 있지만, 규모가 어느 정도 커지면 폴더 구조를 변경하기 어렵게 됩니다. 여러 프로젝트를 진행하면서, 저는 나름대로 폴더 구조를 다음과 같이 구성해야 겠다고 결정을 했습니다. 아래는 VSCODE 에디터에 캡쳐한 사진입니다. - apis - components - constants - containers - fixtures - hooks - interfaces - pages - public - slices - styles - utils apis API 들을 모아 놓은 폴더입니다. 타입스크립트를 사용한다면, *.ts 형태의 ..

리눅스 환경에서 빈(꺼져 있는) TCP 포트를 찾고 싶을 때가 있습니다. 예를 들어, 포트 두 개를 이용해서 프론트 서버를 관리하는 환경을 갖춥니다. 하나는 라이브로 서버를 띄워 놓고, 나머지 한 개 포트는 꺼둡니다. 새로운 버전으로 배포해야 하는 상황이 생길 때, 빈 포트에 배포하고 이 포트가 도메인을 가리키도록 바꿉니다. 이렇게 포트 두 개를 스위칭하면서 라이브 서비스를 관리할 수 있습니다. 더 구체적으로 설명하면, 3001번 포트에 프론트 서버를 띄우고 있는 상태인데, 새로운 버전으로 배포를 해야 하는 상황입니다. 3002번 포트에 배포한 다음, 도메인을 가리키도록 합니다. 그리고 3001번 포트의 프로세스를 종료시키면 됩니다 :) CI-CD 환경을 쉘 스크립트를 이용해서 구축할 때도 이와 같은 방..

17,970위 에서 13,928위로 상승 ㅎㅎ 몇 문제를 풀어야 10,000위 권 안에 들어갈까요? ㅋㅋㅋ [프로그래머스] Lv. 1 - 1페이지 문제 ALL CLEAR 프로그래머스 Lv. 1 1페이지 문제 ALL Clear 아직 갈 길이 머네요... ㅎㅎ cheolsker.tistory.com

1.  2차원 배열을 순회하는 함수// 반복문 이용function traverse2dArray(arr, ROW, COLUMN) { for (let i = 0; i { let row = ""; rowArray.forEach((column) => { row += column + " "; }); console.log(row); });} 2가지 버전을 구현해봤습니다.하나는 반복문을 이용해서 2차원 배열을 순회하고,다른 하나는 forEach를 이용해서 2차원 배열을 순회합니다.   2.  초기값을 이용하기2-1.  배열에 초기값 전달이번 포스팅에서는 4X3 2차원 배열을 만들어보도록 하겠습니다.const arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9..

프로그래머스 Lv. 1 1페이지 문제 ALL Clear 아직 갈 길이 머네요... ㅎㅎ

Next.js 애플리케이션은 Node.js 기반의 서버에서 동작하며, SSR을 제공해주는 SPA이기도 합니다. Next.js 서버는 프론트엔드 환경을 제공해주는 서버입니다. 기본적인 시나리오는 다음과 같습니다. Next.js 서버 > 서버가 실행중이고 대기중인 상태이다. 클라이언트 > 서버에 페이지를 요청한다. Next.js 서버 > 첫 페이지 요청 시, pre-rendering된 HTML을 전달한다. HTML과 더불어 자바스크립트 번들 파일을 전달한다. 클라이언트 > 브라우저에서 HTML을 해석해서 페이지를 렌더링한다. 자바스크립트 파일이 로드되기 전까지는 페이지만 보여지고, 사용자는 인터렉션할 수 없다. 클라이언트 > 첫 페이지를 렌더링한 상태에서, 사용자가 두 번째 페이지로 이동한다. 클라이언트 ..

타입스크립트 컴파일러에게 컴파일 과정에 해당 모듈을 추가하도록 처리하는 문법입니다. XML 형태의 지시어를 파일의 상단에 위치시켜야 하며, 삼중 슬래시 지시어 선언 이전에 다른 코드가 있으면 주석으로 인식됩니다. 주로 타입 선언(*.d.ts)을 관리할 때 사용하는 것으로 보입니다. /// 위와 같은 형태로 선언할 수 있으며, ...위치에는 프로퍼티 이름과 값이 들어가는데 그 종류에 따라 다르게 동작합니다. // test_types.d.ts /// // test.d.ts declare let a: number; declare let b: string; declare let c: boolean; 트리플 슬래시 지시어는 ts 파일 상단에 위치해야 합니다. // test_types.d.ts declare let..

모두의 부동산 유튜브 채널을 구독하고 영상을 보다가, 절대로 전세 살지 마라 시리즈를 보라고 추천을 해줘서 보게 되었습니다. 결론적으로는 "꿀잼"이었던 영상들이었습니다 ㅎㅎㅎ 팩폭 날리시는 부분이 많이 인상적이었습니다 ㅎㅎㅎ 4-5년 전에 올라왔던 영상들이었는데, 광교 쪽이었나... 영상 속에서 어떤 아파트들을 예시로 설명하는 부분이 있었습니다. 사람들이 당시에 "아파트 가격이 높다", "매수 시기가 아니다" 라고 하는데, 지금 그 아파트들을 시세로 확인하니까 그 때보다 가격이 더 올랐네요... 저는 개인적으로는 전세 사는 것이 나쁘진 않다라고 생각을 하고 있었는데, 영상을 통해서 전세가 등장하게 되었고, 집주인들에게 전세가 어떻게 활용되고 있는지 많이 알게 된 것 같습니다. 전세의 특징 - 2년 (또는..