joycie416 님의 블로그

프로필 이미지를 수정할 때, 업로드한 이미지가 어떻게 보일지 궁금하다. 따라서 파일을 업로드하면 미리보기를 띄우기로 했다.  그러려면 JS의 `FileReader`가 필요하며, 사용할 메소드는 `readAsDataURL`, `onloadend`와 `result` 이다. `readAsDataURL`은 업로드한 파일은 컨텐츠를 읽어오는 역할을 한다. `onloadend`에는 파일을 읽는 행위가 종료되면 실행할 함수를 입력하면 된다. `onloadend`에 작성 한 함수 내부에 파일 경로 저장하는 내용이 필요한데, 이때 `result`를 통해 `readAsDataURL`의 결과로 URL로 데이터를 불러올 수 있으며, 해당 URL을 imgPath에 저장해 미리보기를 띄워주었다. 이 imgPath를 img 태그의..

Next.js와 TypeScript를 활용할 수 있도록 Riot에서 제공하는 API를 활용해서 챔피언, 아이템 정보를 제고하고 로테이션 정보를 제공하는 사이트를 만들었다. 사실 롤을 잘 몰라서 추가 기능을 많이 넣지는 못했지만 챔피언 스킨 이미지는 캐러셀로 모두 제공했다.  이전에 client component와 server component에 대해 이야기하면서 4가지 렌더링 방식에 대해 정리했다. 각 렌더링 방식을 활용하고 type을 다루어보려고 한다. 또한 api를 사용해 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 경험하고 라우트 핸들러를 사용해보았다. 1. 페이지 세팅하기Next.js의 App router를 사용하기로 했으므로 페이지를 폴더구조로 설정해주어야 한다.`/champions`,`/c..

우리는 외부에서 데이터를 가져와서 사용해야 하기 때문에 이를 위한 관리 도구가 필요하다. 이전에 다루었던 것처럼 이번에도 역시 TanStack Query(React Query)를 사용할 것이다. 참고로 Next.js에서는 `fetch`를 최적화해서 제공하기 때문에 `axios`를 사용하지 않고 `fetch`를 사용할 것이다. 세팅 : app route 사용, src 폴더 사용 1. `server-action.ts` 만들기먼저 server component를 만들었던 것처럼 파일 맨 상단에  `"use server"`를 추가하자. 그러면 해당 `server action` 파일에 비동기 함수를 모아 api처럼 활용할 수 있다. 이러한 `server-action.ts` 파일은 서버 측에서 비동기 함수를 실행할..

오늘은 어제 예고한대로 Generic과 Utility type에 대해 정리해보려고 한다. 1. Generic 제네릭제네릭은 지난번 게시글에서 잠깐 보고 지나쳤다.let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];let oneToSeven: Array = [1, 2, 3, 4, 5, 6, 7];let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];let array: Array = ["Apple", 1, 2, "Banana", "Mango", 3]; 이처럼 ``내부에 작성하는 방법을 generic이라고 한다. 이렇게 작성하면 마치 클래스나 함수에 parameter를 입력하는 것처럼 타입을 사용할 수..

React+vite에 typescript로 작성하려고 한다. Javascript와의 차이점과 typescript의 특징에 대해 약간 정리한 후 코드 예시를 살펴보려고 한다. 1. Typescript = Javasript + 정적 type 시스템먼저 타입 시스템이란 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집합이다. 타입이란 null, undefined, boolean, string, number 등을 의미한다. 동적 타입 언어는 프로그램을 실행한 이후에 변수, 함수의 타입이 결정되는 언어이며 JS는 동적 타입 언어이다. 또한 타입이 고정되지 않아서 같은 벼수에 여러 타입의 값을 자유롭게 할당 할 수 있다.let ex = '문자열'ex = 1 TS는 JS와 달리 정적 ..