📍개요 포럼 관련 정보를 저장할 데이터베이스와 이미지 저장용 스토리지를 사용하기 위해, 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 프로퍼티를..

📍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 덕분..

프로젝트 이름 : 아카데미아 프로젝트 소개 : 원포인트 공부모임을 만드는 플랫폼 If you can't explain it simply, you don't understand it well enough. 아인슈타인은, 쉽게 설명할 수 없다면, 그것을 잘 이해한 것이 아니다라고 말했다. 내가 잘 아는지 확인하는 방법, 또는 잘 배우는 방법은, 남에게 쉽게 설명하는 것이다. 이를 통해 아카데미아에서 공부할 모임 또는 배우는 모임을 찾을 수 있다 기술 스택 Next.js Styled-components yarn berry를 써보자! (빌드 시간이 매우 빠르고 node_modules를 사용하지 않는다고 해서!)

📍참고 https://nickjanetakis.com/blog/learning-a-new-web-framework-with-question-driven-development Learning a New Web Framework with Question Driven Development When I'm learning a new language or web framework, I often go at it from a problem / solution angle and use error driven development. nickjanetakis.com 📍요약 ✅새로운 프레임워크나 라이브러리를 빠르게 배우려면, 관련 서적을 미리 읽는 것보다 직접 코드를 작성해보는 것이 더 중요하다 📍상세 내용 ✅QDD (Q..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍소프트웨어 테스트란? 예전에는 개발자는 개발만 담당하고, 테스트는 별도의 테스트팀이 맡았으나, 최근에는 개발자가 자동화된 테스트를 이용해 소프트웨어 테스트까지 맡는 것이 보편화됨 ✅자동화된 테스트의 이점 1. 컴퓨터가 실행하므로 사람보다 빠름 2. 정해진 스크립트에 따라 일관성있게 동작하므로 human error를 줄일 수 있다 3. 개발중에 빠른 피드백을 받을 수 있다 (TDD) ⭐개발 생산성 향상 가능! 📍소프트웨어 테스트 종류 1. Unit Test (유닛 테스트) - 가장 low-level 테스트 - 가장 작은 범위를 테스트 - 개별 함수, 메서드, 클래스, 컴포넌트 등의 동작을 테스트 2. Integration Test..

원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금) 📍의존성 특정 모듈이 동작하기 위해 다른 모듈을 필요로 하는 것 📍의존성 역전 원칙 - 유연성이 극대화된 시스템을 만들기 위한 원칙- 즉, 소스코드의 의존성이 추상에 의존하며, 구체에 의존하지 않는 것을 의미 📍추상과 구체 추상- 구체적인 구현 방법이 포함되어 있지 않은 형태- 구현해야 할 일, 이루어져야 하는 결과를 정의하는 것 구체- 해당 동작을 실질적으로 수행하기 위해 해야 하는 일련의 동작과 흐름 어플리케이션이 구체에 의존하게 되면, 구체가 변할 때마다 어플리케이션이 변화해야 하는 상황이 되어버림- 구체는 변화가 잦으므로, 가급적 구체에 의존하는 것을 최소화해야함 📍구체에 의존하는 예시 fetch("todos", { hea..