📍개요 1. 이미지 경로 문자열을 상태로 관리하기 2. input element 로 이미지 입력받을 때 주의할 점 3. 입력받은 이미지 미리보기 기능 📍코드 ✅이미지 경로 문자열을 저장할 상태를 만든다 => imgSrc ✅input element에서 type="file", accept="image/*" 로 설정하면, 파일 중에서 이미지 파일만 입력받게 설정할 수 있다 // test.tsx import { useState } from "react"; import Image from "next/image"; export default function TestPage() { const [imgSrc, setImgSrc] = useState( // /public 내의 기본 이미지 경로 "/images/defau..

📍개요 포럼 관련 정보를 저장할 데이터베이스와 이미지 저장용 스토리지를 사용하기 위해, strapi 앱을 만들고 aws s3와 연동한다 📍strapi 는? - strapi의 뜻은 bootstrap your API 에서 유래했다 - 오픈소스 Headless CMS 로서 직접 백엔드를 구성하는 것 대신 스트래피를 선택할 수 있다 📍strapi 시작하기 yarn 또는 npx create 를 사용하여 CLI를 통해 strapi 패키지를 자동으로 설치해주는 앱을 시작할 수 있다 yarn create strapi-app my-project or npx create-strapi-app@latest my-project 이후 CLI에서 quickstart를 사용할지 물어본다 - quickstart를 사용하면 DB가 SQ..

📍Q8. 특정 URL에서만 특정 컴포넌트를 렌더링하려면? ✅Next.js의 useRouter 훅을 사용 - React 훅이므로 컴포넌트 내부에서만 사용 가능! - 사용 전에 아래 처럼 선언 필요 import { useRouter } from 'next/router' function ActiveLink({ children, href }) { const router = useRouter(); // 선언 const style = { marginRight: 10, color: router.asPath === href ? 'red' : 'black', }; // ... } router 객체의 pathname, asPath, route 프로퍼티를 이용하면 현재 페이지의 파라미터를 받을 수 있다 query 프로퍼티를..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅필수가 아닌 의존성을 분리할 때는 구조적 타이핑을 사용하면 됩니다 ✅공개한 라이브러리를 사용하는 자바스크립트 사용자가 @types 의존성을 갖지 않게 해야 합니다. 그리고 Node.js를 사용하지 않는 개발자(TypeScript 사용자)가 Node.js 관련된 의존성을 갖지 않게 해야 합니다. 📍CSV 파일을 파싱하는 라이브러리를 만들고 있다고 가정하면.. 로컬 시스템의 csv 파일을 읽기 위해 Buffer 타입이 필요하다 Buffet 타입은 @types/node 에 정의되어 있으므로 해당 타입 선언을 라이브러리에 포함하게 된다 // @types/node 설치 필요 function parseCSV(contents: string | Buffe..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅오버로딩 타입보다 조건부 타입을 사용하는 것이 좋습니다. 조건부 타입은 추가적인 오버로딩없이 유니온 타입을 지원할 수 있습니다. 📍오버로딩 타입 // 함수 시그니처 function double(x: number | string): number | string; // 유니온 타입 // 함수 오버로딩 function double(x: any) { return x + x; } // 매개변수가 number인데, string 이 반환되는 경우도 있을 수 있다! const num = double(12); // string | number const str = double('x'); // string | number 매개변수가 number인데, stri..

📍이슈를 만들고 사용하는 이유 프로젝트에서 어떤 작업(버그 수정 or 기능 추가 등)을 시작하려면, 구성원과의 소통에 다음과 같은 것들이 필요할 것이다 - 작업의 필요성 : 왜 이 작업이 필요한지.. - 작업 상세 : 어떤 파일을 수정하거나 생성하게 되는지.. 이를 이슈로 만들고 팀의 이슈 템플릿에서 포맷을 미리 지정할 수 있다 ⭐또한 커밋과 이슈를 연동할 수도 있다 (이슈 넘버를 활용) 📍이슈 템플릿 사용 방법 1. 레포 세팅 > 제너럴 > 이슈 템플릿 - 디폴트 설정 가능 : placeholder, 라벨, 담당자 - 개요, 상세, 기타 등을 정리 - 이슈 제목은 그냥 feat: ~ 이렇게 해도 될듯 2. 커밋 시 이슈 넘버 붙이기 - 커밋 메시지 뒤에 #이슈 번호 붙이면 됨 - 예시 : feat: 새..

📍Q5. Next.js 에서 폰트를 적용하려면? 폰트를 포함하는 global styles를 적용할 root 컴포넌트가 필요하다.. Next.js 에서는 _app 컴포넌트가 root 컴포넌트가 되며 여기에 글로벌 스타일을 추가할 수 있다 pages/_app.tsx를 만든다 import type { AppProps } from 'next/app' export default function MyApp({ Component, pageProps }: AppProps) { return } styled-components의 createGlobalStyle API 로 글로벌 스타일을 만든 뒤, 컴포넌트 형태로 import 하여 추가해야 하는데, 이왕이면 Layout 컴포넌트로 감싸는게 좋을 것 같다. 그런데 theme..

📍Q1. Yarn Berry로 프로젝트를 시작하려면? 일반적인 Yarn은 클래식 (1.X) Yarn Berry 는 2.X 버전 이상을 말한다 - Node.js 18.15.0 - Yarn 3.5.0 기준 yarn init -2 생성된 프로젝트 구조가 꽤 달라서 당황.. Yarn Berry의 핵심인 zero-install 및 plug-n-play 에 대해서 나중에 알아봐야겠다 zero-install 덕분에 - 커밋, 푸쉬하는데 시간이 오래 걸림 ㅠㅠ - zero-install 기능을 해제하려면 .yarn/cache 를 .gitignore에 추가하면 됨. 단 이는 node_modules 처럼 초기에 yarn install 필요 (현재는 !가 붙어서 gitignore의 부정 상태) ⭐zero-install 덕분..