본문 바로가기

전체 글518

[TypeScript] 타입스크립트란? 기초 원리와 설치 방법 TypeScript 기초 TypeScript란? 누가 TypeScript를 만들었을까? TypeScript와 JavaScript의 차이점 TypeScript의 장점 TypeScript의 작동 원리 TypeScript 설치 및 환경 구축 tsconfig.json 세팅 TypeScript 코드를 JavaScript 코드로 컴파일 하는 방법 TypeScript란? 타입스크립트는 타입 정의가 추가된 자바스크립트이다. 물론 Javascript도 number, string 등 타입이 있지만, 타입을 고정해 둘 수가 없다. 심지어, number로 선언한 변수에 string 타입의 값도 할당할 수 있다. 이는 미리 파악하기 힘든 런타임 에러를 발생시킬 가능성이 높다. 예를 들어, 사용자가 숫자를 입력할 거라고 생각하고.. 2023. 8. 3.
[Next.js 13] async 서버 컴포넌트 JSX/Promise 반환 에러 해결 방법 # Async 서버 컴포넌트 Promise 반환 이슈 Next.js13에서 Data Fetching 등을 위해 async 함수 형태의 Server Component 를 사용하면 아래와 같은 에러가 뜰 때가 있다. 'ServerComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, keyts(2786) # 원인 Next.js 13의 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환한다. React .. 2023. 5. 12.
[Typescript] @ts-ignore vs. @ts-expect-error 차이, 사용법(타입 에러 무시) # Typescript 의 에러 무시 방법 Typescript 사용시, 의도적으로 에러를 무시해야하는 경우가 있다. 타입스크립트 자체의 이슈 때문일 수도 있고, 개발자가 의도적으로 에러 발생을 무시해야하는 경우가 있을 수도 있다. 이럴 땐, 아래의 2가지 주석 중 하나를 에러가 발생하는 코드 위에 추가해주면 된다. // @ts-ignore // @ts-expect-error Typescript의 붉은 에러 경고가 깔끔하게 사라진다. # // @ts-expect-error 와 // @ts-ignore 의 차이점 위 두가지 주석은 미묘한 차이가 있다. 이 차이를 인식하고 필요할 때 적절하게 사용해주면 된다. 1. // @ts-expect-error - 코드에 에러가 있으면 => 해당 코드의 에러를 무시한다... 2023. 5. 9.
[Typescript] 설치 및 초기 세팅 방법(node.js 환경) # Typescript 설치 및 세팅 방법 개요 - 타입스트립트는 node.js 관점에서는 npm module 중 하나일 뿐이다. - 따라서 `npm` 으로 typescript 모듈을 설치하고, `tsc` 명령어로 ts파일을 js파일로 컴파일하면 된다. # 설치 및 세팅 방법 1. node.js 설치 (3가지 방법이 있음) - 방법1(초보자 추천): node.js 홈페이지를 통해 설치한다. - 방법2: n 으로 설치(버전 업그레이드에 용이) - 방법3: nvm (버전 스위칭에 용이) 2. package.json 파일 생성 (프로젝트 루트 경로 터미널에서) - `npm init -y` : 디폴트 세팅으로 package.json파일을 생성해준다. (나중에 수정 가능) 3. typescript 모듈 설치 (.. 2023. 5. 8.
[JavaScript] if 조건문 효율적으로 가독성 있게 쓰는 방법 # if 조건문 헬(Hell)에 빠지는 이유 자바스크립트에서 if 조건문을 쓸 때, 효율성/가독성이 떨어지고, 추가/수정이 어려워지는 이유는 대체로 2가지이다. 한번에 너무 많은 요소를 비교한다. 중첩(nested)조건이 많아진다. 1-1. 한번에 너무 많은 요소를 비교하는 경우 - 사례 예를 들어, 음식 종류를 비교하는 조건문을 보자. if(food === "pizza" && food === "pasta" && food === "burger" && food === "steak"){ return "Western food"; }else{ return "Asia food"; } - 가독성이 떨어진다 : 음식 종류가 10개 쯤 된다면 더욱 읽기 힘들 것이다. - 비효율적이다 : 동일한 코드(food === ".. 2023. 5. 7.
[React] 리액트 사이드 이펙트(Side-effect) 의미, 종류(feat. 순수함수) # 리액트 Side-effect의 의미와 종류 사이드 이펙트(Side-effect)란 React 자체에서는 제공하지 않는 모든 것을 말한다. 예를 들어, 아래의 작업들은 Side-effect 이다. fetch() 메서드 등을 통해 HTTP 통신을 시도하는 것 Local Storage 등에 데이터를 저장하는 것 DOM을 직접 조작하는 것 : ex) document.querySelector('.클래스명').add EventListener(...) setTimeout, setInterval 등의 타이밍 함수를 사용하는 것 위의 작업들은 브라우저의 Web API 등을 사용하는 것으로, React 자체의 기능은 아니다. React 입장에서는 자기가 제공하는 것 이외의 것(Side)으로 영향(Effect)을 미친.. 2023. 5. 6.
백종원 유튜브(배고파) - 홍콩 맛집 리스트(최신 업데이트) 백종원 유튜브 [배고파] 맛집 리스트&지도 배고파 전체 맛집 리스트&지도입니다. (계속해서 최신 정보로 업데이트 됩니다) 1. 백종원 유튜브 '배고파' 맛집 리스트 백종원 대표님 유튜브에 나온 홍콩 딤섬, 국수 등의 맛집 리스트를 도표로 정리하였습니다. (포스팅 하단) 2. '배고파' 맛집 지도 먹방맵 맛집 지도 사이트에서 식당 위치, 추천 메뉴, 유튜브 영상까지 한번에 확인할 수 있습니다. https://www.mukbangmap.com/list/hk/bjw 먹방맵 지도에 들어가시면, 님아 그 시장을 가오 맛집도 같이 볼 수 있습니다 2023.10월 이후의 맛집 정보는 먹방맵 사이트에서 확인해주세요 https://www.mukbangmap.com/ 나라 가게 이름 추천 메뉴 위치(구글 지도 링크) 홍콩.. 2023. 5. 5.
[VS Code] 중첩된 서브 폴더가 1개인 경우, 안 펼쳐지는 현상 해결 # VS Code에서 서브 폴더 1개 일 때, 안 펼쳐지는 현상 Visual Studio Code에서 디렉터리 구조상, 부모 폴더의 자식 폴더가 단 1개만 있을 경우, 아래와 같이 서브 폴더가 펼쳐지지 않고 상위폴더/하위폴더 상태로 표시될 수 있다. 별거 아닐 수 있지만, 디렉터리 구조 파악이 한 눈에 안 들어오고, 폴더를 잘못 선택하게 될 수도 있다. # 해결 방법 1. Settings 진입 2. Compact Folders 검색 3. Compact Folders 의 체크 해제 완벽하게 해결 되었다. 이제 서브 폴더가 1개만 있어도, 모든 디렉토리가 펼쳐져서 노출되는 것이 디폴트가 된다. 2023. 5. 2.
[홍석천이원일] 줄서는 맛집 리스트 + 맛집 지도 사이트(최신 기준) [홍석천이원일] 줄서는 맛집 리스트 + 맛집 지도 사이트 홍석천, 이원일 셰프님이 찾아다니시는 전국의 줄서는 맛집 앞 리스트를 정리하여 공유합니다. 요즘 핫플레이스 맛집들이 많이 소개되는 것 같습니다. 1) 한눈에 볼수 있는 맛집 지도사이트와 2) 도표 리스트를 모두 공유 합니다. 1. 맛집 지도 사이트 - 먹방맵 홍석천-이원일의 줄서는 맛집을 지도에서 한눈에 볼 수 있습니다! https://www.mukbangmap.com/list/kr/hsclwi 2. 전체 맛집 리스트 홍석천-이원일 줄서는 맛집 전체 리스트입니다. 먹방맵 지도로 보시면 더욱 편리합니다. 2023.10월 이후의 맛집 정보는 먹방맵 사이트에서 확인해주세요 https://www.mukbangmap.com/ 도시 지역 줄서는 맛집 추천 메.. 2023. 3. 4.

티스토리툴바