전체 글 (85) 썸네일형 리스트형 2024.3.12 기록 (nextJS에서 외부 이미지 링크를 사용 할 때) 외부 이미지를 사용 할 경우 발생하는 에러인데 외부링크의 도메인을 가져와야 하기 때문이다. 해결법은 생각보다 간단하다. next.config.mjs 파일 내부에 nextConfig 객체 내부에 images 객체를 생성, 도메인과 reactStrictMode를 true로 해준다. 배열 내부에는 hostname을 문자열로 입력해준다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: ["img.freepik.com"], }, reactStrictMode: true, }; export default nextConfig; 이렇게 작성하여 해결 할 수 있었다. 2024.3.11 기록 (Next.JS의 렌더링) NEXT JS 렌더링 방식에는 SSG, ISR, SSR, CSR 네 가지를 지원한다. 이 방식을 정확히 익혀두어 필요에 맞는 렌더링 방식을 채택할 수 있다. 1. SSG( Static site Generation ) : 빌드 시점에서 받아온 데이터를 적용시킨다. * 별도의 세팅이 없다면 기본값이다! 2. ISR( Incremental Static Regeneration ): fetch 한 데이터의 만료시기를 지정한다. 단위는 초(s) 3. SSR ( Server Side Rendering ) : 데이터를 캐싱하지 않는다. 즉, 매번 새로운 데이터를 받아온다. 4. CSR( Client Side Rendering ) : 'use client' 를 사용해 기존의 리액트 방식의 랜더링을 지원한다. 2024.3.8 기록 ( react-query의 useMutation을 커스텀훅으로) 어제 있었던 문제 커스텀 훅을 만들던 중, 재사용성을 높이기 위해서 타입을 지정해주는 과정에서 오류를 뿜어냈다. 문제는, TodoList의 타입인 Todo에는 4개의 타입이 존재했는데, 생성, 삭제에서는 각각 Todo와 id만 존재하면 되었기에 충돌이 일어나지 않았다. 문제는 update였는데, 여기서는 id와 isDone이라는 2개의 개별속성을 요구했고, title과 content는 필요하지 않은 상황이었다. 데이터 타입을 가져오기 위해서는 axios통신을 거치는 서비스 로직에서의 수정이 함께 필요했다. 기존에 id와 isDone을 각각 string, boolean으로 지정해주었을 때, 문제가 발생했고 이를 해결해주기 위해 UpdateTodoType을 설정해주고, 그것을 각각 서비스로직과 커스텀훅에서 .. 2024.3.7 기록 (react-query 커스텀 훅과 타입) 이번에 react-query에서 useMutation 을 이용해서 커스텀훅을 제작하는 과정에서 문제가 발생했다. CRUD중에서 CUD 를 하나의 커스텀 훅에서 만들었기 때문에 발생한 문제이다. 받아오는 axiosApi 가 총 3개 C U D 과정이었다. 각각 Type, id, boolean 값을 받았기 때문에, 문제가 있었고, data또한 별도의 타입을 선언해주어야 할 만큼 여러가지 타입이 존재했다. any를 사용하지 않고 매개변수로 각각의 함수를 받고 useMutation을 통해 각각의 역할을 지닌 커스텀훅을 제작하기로 했다 매번 재사용성이 높은 커스텀훅을 제작한다는 것에 목적을 두는데, 이번에는 확실한 역할을 나누어 제작해봐야겠다. 2024.3.6 기록 (타입스크립트를 리액트에서 사용해보기) 실행해보기 $ ts-node 터미널에서 ts파일을 실행 할 수 있다. 비동기로 사용하기 type Character = {id : number; age: number; Role : string}; async function getCharacter() : Promise{ const res = await fetch ( 데이터.json); if (!res.ok) { throw new Error(); } return res.json(); } getCharacter().then((res) => console.log(res)); 비동기 함수는 선언부에 Promise Promise로 감싸주게 되면 올바르게 실행이 된다. useState에서 ts를 사용하는 방법 useState(); //이렇게 직접 입력하는 방법과 us.. 2024.3.5 기록 ( 타입스크립트의 유틸리티 타입 ) 유틸리티 타입이란, 공통 타입 변환을 용이하게 하기 위한 기능들이고 전역에서 사용이 가능하다. 우선은 5가지의 유틸리티 타입을 정리해보았다. 많은 유틸리티 타입들의 정보가 있는 곳은 다음과 같다. Documentation - Utility Types Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 1. Partial 타입 T의 모든 속성을 선택적으로 만든다. 일부 속성만 제공하는 객체 interface Character { name : string; age : number; } const updateData = (character : Character, fields : Pa.. 2024.3.4 기록 (타입스크립트의 시작) 타입스크립트 이번 주차부터 타입스크립트를 시작하는 주간이다. 기존의 React를 학습해왔던 배경을 JavaScript에서 TypeScript로 변경하는 부분이 지금 맡게 된 시작이다. 그래서, 기초적인 이론을 정리해보고자 한다. 1. 자바스크립트와의 차이점. 자바스크립트는 동적언어(인터프리터 언어)이다. 그에 반해 타입스크립트는 정적언어(컴파일 언어)이다. 정적 언어에는 타입스크립트 외에 C, C#, C++, Java가 존재한다! 정적언어는 기계어로 변환이 필요하지만, 동적언어는 필요하지않다. 동적 언어는 기계어로의 변환이 왜 필요가 없을까? node.js와 chrome에서는 v8엔진이 코드를 해석하고 실행하며 firefox에서는 spiderMonkey가 코드를 해석하고 실행한다. 그럼 동적 언어의 단점.. 2024.2.29 기록 ( 프로젝트 마무리 ) 이번 프로젝트에서는 PM 역할을 맡아서 진행했다. 그리고 그 역할은 팀원의 역량을 충분히 고려해서 하고 싶은 것들을 맘껏 할 수 있게 환경을 만들어주는 역할이라고 생각한다. 이번 프로젝트에는 PR(Pull Request)에 대한 이야기가 제법 많았다. 단순히 PR을 git push의 대용이 아닌 서로가 리뷰를 나누는 부분이 많이 필요하다는 생각이 들었다. 자연스럽게 PR을 하기 쉬운 환경을 만들어야한다는 것 또한 중요하다는 것을 피부로 느꼈다. 정말로 기분좋았던 2주가 끝이났다. 다음 주 부터는 타입스크립트로 들어가게 된다. 많이 기대가 되는 시간이다. 이전 1 2 3 4 5 ··· 11 다음 목록 더보기
