본문 바로가기

전체 글

 (348)
[Next.js] Route handlers Route handlersapp 디렉토리(폴더) 내에서만 route.ts 또는 route.js 폴더를 생성해 사용할 수 있고, page.tsx의 API Routes와 같은 기능을 하기 때문에 같이 사용할 필요가 없습니다.더보기API Routes는 Pages Router 기반 프로젝트에서 서버 측 코드를 작성할 수 있게 해주는 기능입니다. 여기서 Pages Router는 Next.js 13 이전에 경로를 생성하는 주요 방법이었습니다. 지금까지 배워왔던 방식과는 조금 다르게 폴더가 아닌 파일로 라우팅을 했습니다. app폴더가 아닌 pages 폴더가 기준입니다.'/' : pages/index.tsx'/something' : pages/something.tsx'/api/user' : pages/api/user...
[TS] TS Doc Reference 1회독 - 3 Utility TypesConstructorParameters생성자 함수의 파라미터를 바탕으로 튜플 또는 배열 타입을 만들어 냅니다. 만약 Type에 함수가 들어가지 않는 경우에는 never 타입이 됩니다.class C { constructor(a: number, b: string) {}}type T = ConstructorParameters; // type: [a: number, b: string] ReturnType함수의 반환 타입을 가져올 수 있습니다. 단순한 제너릭 타입의 경우 unknown을 반환하고 any와 never은 any never을 다시 반환합니다.type T = RetrunType string>; // type: string InstanceType생성자 함수의 인스턴스 타입을 가져옵..
[TS] TS Doc Reference 1회독 - 2 Utility TypesPick지난 시간에 Record을 이용해 하나의 타입을 만들었다면, Pick을 사용하면 type에서 key 값에 해당하는 타입을 가져올 수 있습니다.interface Some { name: string; age: number; gender: boolean;}type Thing = Pick;const test: Thing = { name: '', gender: true }; OmitPick과 반대로 지정된 key를 제외한 나머지 타입을 가져올 수 있습니다.interface Some { name: string; age: number; gender: boolean;}type Thing = Omit;const test: Thing = { age: 29 }; Exclude단어 의..
[React.js] data-driven react last 기존 DOM 요소(div, a, etc)에 props를 넘겨줄 수 있는가?No! JSX로 작성된 기존 DOM 요소는 React가 실제 요소로 변경해서 사용하는데 기존 속성에 추가할 수 없기 때문입니다. 그렇기에 기존 DOM 요소에 props를 넘겨주고 싶다면, cusDiv와 같은 컴포넌트를 만들어서 사용해야 합니다.Render ArrayJSX 내부에 {}를 통해 JS 변수를 넣을 때 화면에 보이는 형태로 직접 렌더링 되는 데이터가 있습니다. React Element, 문자열, 숫자 그리고 배열입니다. 배열을 {[1,2,3,4]}로 넣게 되면 화면에는 1234로 마치 배열을 join 해서 나온 결과처럼 보입니다. 여기서 중요한 사실을 배열이 화면에 보이도록 렌더링이 된다는 것입니다. 이와 React Ele..
[TS] TS Doc Reference 1회독 Utility Types타입스크립트에서 제공되는 유틸리티 타입은 타입 변형 기능을 제공해 줍니다. Awaited: async 함수 내부 await 같은 연산 또는 Promise의 .then() 함수를 모델링하는 것 의미합니다. Promise를 재귀적으로 풀어내는 방식(recursively unwrap)에 초점이 있습니다.recursively unwrap은 기존 Promise 타입을 Awaited로 감싸면 Promise 타입을 풀어서 최종 결과 타입을 가져온다는 의미입니다.type p = Promise; // Promisetype A = Awaited>; // stringtype B = Awaited>>; // numbertype C = Awaited>; // number | boolean Partial단..
[React.js] data-driven react scrimba에서 학습을 진행하면 여러 장점도 있지만, 결제를 하지 않은 경우 계속되는 결제 요청이 짜증이 날 수 있습니다. 그런 경우 유튜브 영상을 통해 강의를 들어도 큰 문제는 없을 것 같습니다.그렇지만 영어로 진행되는 강의에 집중하고 있는 본인을 알고 싶다면 과제가 시작되기 전에 멈추고 스스로 과제를 진행하거나 과제를 넘기는 방법을 사용해 볼 수도 있을 것 같습니다. JS inside JSXJSX에서 JS를 사용하는 방법이 있습니다. {}(중괄호, curly braces)를 이용하면 데이터를 UI에 적용할 수 있습니다. 데이터뿐만 아니라 html 속성에 문자열이 아닌 어떤 값을 넣어줄 때에도 사용할 수 있습니다.export default function Test() { const data = 's..
[취업준비] 안양시 면접 정장 무료대여 with.안양청년옷장 last 대여무토벨라에 예약을 신청하고 확정까지 받고 원하는 시간대에 방문했습니다. 네이버 지도무토벨라map.naver.com 처음에 주소가 자세히 안 쓰여있어서 당황했지만, 아크로 타워 1층에 있어서 찾을 수 있었습니다.자세한 위치아크로 타워는 A동과 B동이 있습니다. 그중 A동 1층에 있습니다.헷갈릴 수 있기 때문에 스타벅스를 지나 아크로 타워로 들어가시면 무토벨라를 찾으실 수 있습니다.만약 못 찾으시면 가게에 전화를 하시는 게 빠를 수 있습니다. 들어가시면 예약한 이름을 물어보시는데 엉덩이 둘레로 바지를 맞춰주시고 사이즈를 물어봐주십니다. 재킷도 입어보고 사이즈를 물어봐 주십니다. 순식간에 맞춰주시고 끝이 납니다. 셔츠는 재킷 사이즈에 맞춰서 주시고, 옷이 들어있는 가방에 넥타이까지 있습니다. 혹시라도 까..
[취업준비] 안양시 면접 정장 무료대여 with.안양청년옷장 part.2 글을 올리면 신청자의 이름은 성**으로 이름이 가려져서 안 보입니다. 본인의 글을 찾는 방법을 알려드리겠습니다.1. 검색바에 제목이 아닌 '신청자'로 변경하고 우측에 본인의 이름을 검색합니다.2. 결과가 여러 개 나올 수 있습니다. 본인이 신청한 날짜를 찾거나 기억이 나지 않는 경우 비슷한 날짜의 글을 누르면 본인이 작성한 글로 들어갈 수 있습니다. 정장 대여를 신청하고 얼마 지나지 않아서 댓글로 쿠폰과 사용 방법에 대한 안내가 왔습니다.근무자들이 댓글을 남겨주는 방식인 것 같아 평일 근무 시간에 신청하는 게 가장 좋은 방법이라고 생각합니다.댓글에 쓰여있는 대로 3박 4일이기 때문에 면접 전 날로 무토벨라에 예약해 보겠습니다.예약 페이지에 청년옷장이라고 보입니다. 다른 예약 사이트처럼 예약을 진행하면 되..

티스토리툴바