프로그래머의 뇌 - 2. 신속한 코드 분석
·
✒️Notes/📕공부기록
프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 2. 신속한 코드 분석 📍요약 ✅STM - 저장공간 : 7개 전후 => 크기 제한을 극복하기 위해 LTM과 협업 - 정보는 STM 전 감각 기억 공간을 거쳐서 일부만 STM에 전달됨 ✅청크 - 새로운 정보를 읽을 때, 우리 두뇌는 그 정보를 청크라는 몇 개의 묶음으로 나눔 ✅코드를 읽을 때 인지 과정 - LTM에서 인출할 지식이 없으면, 키워드같은 정보에 의존해야 해서 STM의 공간이 빠르게 소진됨 - LTM에 관련 지식이 많으면, STM에 저장하는 대신, LTM에서 "자바스크립트에서의 for loop" 같은 방식으로 기억을 인출하므로 STM 공간을 절약 ✅코드를 더 잘 읽는 방법 - 디자인 ..
프로그래머의 뇌 - 1. 코딩 중 겪는 혼란에 대한 이해
·
✒️Notes/📕공부기록
프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 📍요약 ✅코드를 읽을 때 혼란이 생기는 이유 3가지 - 지식(LTM) 부족 - 정보(STM) 부족 - 두뇌의 처리 능력(Working Memory) 부족 => 코드 읽을 때 3가지 인지 과정이 모두 발생 ✅인지 과정 1. LTM에서 정보 인출 (키워드의 의미 => 프로그래밍 언어를 알고 있는지) 2. STM에 정보 일시 저장 (메서드나 변수의 이름 => projectName 변수는 프로젝트명을 가리키는 변수... ) 3. Working Memory에서 코드를 읽고 처리 (for loop 의 시작 인덱스가 맞나 틀리나.. ) => 이 3가지 인지 과정은 동시에 발생하며 상호 보완적 작용 예) 처..
QDD 1-4. Strapi Headless CMS 및 Cloudinary로 백엔드 구성하기
·
✒️Notes/🎥활동
📍개요 포럼 관련 정보를 저장할 데이터베이스와 이미지 저장용 스토리지를 사용하기 위해, 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..
QDD 1-3. useRouter, API Routes, getStaticProps, getStaticPaths
·
✒️Notes/🎥활동
📍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 프로퍼티를..
QDD 1-2. Next.js pages 기능 & Styled-components 규칙
·
✒️Notes/🎥활동
📍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..
QDD 1-1. Yarn Berry & Next.js 설치, ESLint & Prettier 설치
·
✒️Notes/🎥활동
📍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 덕분..