![]()
[ 목차 ] JS에서의 typeof 연산자 TS에서의 typeof 연산자 JS에서의 typeof 연산자 자바스크립트에서도 typeof 연산자가 존재합니다. 어떤 값의 type을 string 형태로 반환하는 연산자입니다. const a = typeof 1; // "number" const b = typeof "str"; // "string" const c = typeof false; // "boolean" const d = typeof {}; // "object" const e = typeof []; // "object" const f = typeof function () {}; // "function" const g = typeof null; // "object" -> 주의! const h = typeo..
![]()
[ 목차 ] Introduction 제네릭 맛보기 제네릭 종류 - 함수, 인터페이스, 클래스 제네릭 제약 조건 (constraints) 제네릭 디폴트 파라미터 Introduction 타입스크립트에서 제네릭은 빠질 수 없는 개념이 되었습니다. 유틸함수도 제네릭을 사용하고 있고, API 인터페이스를 작성하거나 함수를 사용할 때도 많이 사용하고 있습니다. 제네릭에 대해서 타입을 위한 함수와 같다는 표현을 사용하는 것도 보았는데요. 제네릭은 타입에 대한 중복을 제거해줄 수 있기 때문에 이런 표현을 사용한 것 같습니다. 제네릭 맛보기 타입스크립트에서 제네릭은 함수, 인터페이스, 클래스 등에 사용할 수 있습니다. 가장 일반적인 방법은 함수에 제네릭을 사용하는 것일 겁니다. function age(value: num..
![]()
React-Query는 useInfiniteQuery hook을 제공합니다. 문서에도 해당 hook에 대한 API 명세와 사용 방법이 소개되고 있는데요. 공식 문서의 설명이 조금 부족해서 그런지는 모르겠는데, 이해가 되지 않는 부분이 있었고 삽질도 하였습니다. 페이지네이션을 구현한 코드를 정리하였습니다. 비동기 통신 라이브러리로는 axios를 사용하였습니다. // 페이징을 구현한 컴포넌트 import axios from "axios"; import { useInfiniteQuery } from "react-query"; interface PostData { body: string; id: number; title: string; userId: number; } function Test1() { const..
![]()
( 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년 (또는..
![]()
목차 1. 스코프 체인 2. 정적 스코프 (렉시컬 스코프) 3. 참고 1. 스코프 체인 스코프 체인이란, 식별자(변수 또는 함수)를 검색하는 과정을 의미합니다. 검색하는 과정에서 식별자를 찾지 못하면, 상위 스코프(또는 외부 스코프)에서 해당 식별자를 찾으려고 합니다. 식별자를 찾지 못하면 에러를 발생시키는데요. 하위 스코프에서 상위 스코프로 이동하면서 식별자를 찾는 과정이 꼬리에 꼬리를 무는 형태이기 때문에 체인이란 용어를 사용하는 듯합니다. let sky = 'global sky'; function printSky1() { console.log(sky); } function printSky2() { let sky = 'local sky'; console.log(sky); } printSky1(); /..
![]()
목차 1. 함수 선언문 2. 함수 표현식 3. 함수 프로퍼티 4. 참고 1. 함수 선언문 function isHoliday(work) { if (work) { return false; } return true; } 많이 사용하는 함수 선언 방식 중 하나입니다. 주요 특징으로는 다음과 같은 것들이 있습니다. 함수를 참조하는 식별자가 생성됩니다. 함수 호이스팅이 발생합니다. 함수(함수 객체) 프로퍼티를 가지고 있다. 함수 호이스팅이란, 호이스팅(hoisting)이란 말처럼 함수가 위로 끌어 올려지는 것을 말하는데요. 자바스크립트에서 런타임 이전에 함수를 미리 생성하기 때문에, 함수가 선언된 스코프에서 언제든지 실행할 수 있습니다. 함수 선언 전에 함수를 실행할 수 있습니다. isHoliday(false); ..
![]()
1. 채권 현재 한국은행 기준금리가 2.25%이고, 한국 국채는 2년물은 3.058%, 3년물은 3.08%, 10년물은 3.125%입니다. 정기예금 금리는 3~4%에 진입했네요. 그런데, 자산가들은 채권을 매입하고 있는 것 같습니다. 채권은 돈을 빌려주는 대신 상환일에 원금 + 이자를 받습니다. 예금과 비슷하게 원금 + 이자를 받지만, 차이점은 원금보장이 안될 수도 있다는 것입니다. 국가 또는 회사에 돈을 빌려줬는데, 채무 대상이 디폴트할 수 있기 때문입니다. 그렇지만, 금리 하락기가 되면 이전에 사둔 채권이 좋은 투자가 될 수 있는데요. 이는 시중은행보다 더 좋은 이자를 받을 수 있고, 그에 따라 채권의 가치가 올라가 가격이 상승하기 때문에 매매차익을 볼 수 있습니다. 하지만 채권을 매입할 때, 채무 ..
![]()
create-next-app을 이용해서 새로운 Next.js 프로젝트를 만들고, 개발을 진행했습니다. 프로젝트에서는 Emotion.js를 사용하고 있는데요. 개발을 잘 진행하고 있다가, 다음과 같은 문제가 발생했습니다. 다음과 같은 코드를 보시면, HTML 요소를 스타일링 해줄 때, 다음과 같이 CSS 선택자를 이용하는데요. ...생략 하이 div p { color: red; font-weight: bold; } Component Selector(컴포넌트 선택자)란 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링을 하는 것을 의미합니다. import styled from '@emotion/styled'; const Child = styled.div` color: red;..
![]()
const arr = [1, 2, 3, 4, 5]; // 1부터 5까지 출력 for(let idx=0; i { console.log(value); }); forEach 메소드는 콜백 함수를 받는데요. 첫번째 파라미터로부터 배열의 값을 차례대로 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱스를 차례대로 출력 arr.forEach((value, index) => { console.log(value); // 배열의 값 console.log(index); // 배열의 인덱스 }); 콜백 함수는 여러 개의 파라미터를 받는데요. 두번째 파라미터로부터는 배열의 인덱스 값을 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱..
![]()
보통 슬라이 더(또는 스와이퍼)를 구현할 때, 화면에 한 개의 슬라이드가 보이는 형태로 많이 구현합니다. 슬라이드를 넘기면, 다음 슬라이드가 나오는 형태입니다. 그런데, 요구사항이 화면에 여러 개의 슬라이드를 보여달라고 하면 어떻게 할까요? 예를 들어, 375px 사이즈의 모바일 화면에 200px 크기의 카드 형태를 하나는 다 보이도록, 하나는 일부만 보이도록 해줘야 합니다. 말이 잘 이해가 안되실 수도 있는데, 아래 그림과 같은 형태입니다. 위와 같이 Swiper에 옵션을 제공해서 인라인 형태의 슬라이드를 구현할 수 있습니다. 중요한 것은 styled 컴포넌트에 있는데요! .swiper-slide 클래스 선택자에 width 값을 auto, !important를 적용해야 합니다. 그렇지 않으면, Swi..
![]()
[ 업무 ] => 관심 있는 것들을 찾아봐도 좋을 것 같습니다. 크롤링 툴 (puppeteer) [ 루틴 ] - 매일성경 QT 읽기 - 매경 이코노미 2160호 구독 [ 프로그래밍 ] - 프로그래머스 1문제 알고리즘 문제 풀기 => 폰켓몬 풀기 [ 블로그 ] - 티스토리 블로그 1개 작성 => 이 주간회고 포스팅
