양자놀이터

경제적 자유에 대한 일기 같은 글을 써봅니다. 우연한 기회로 라이프 해킹 스쿨에서 진행하는 창업형 인간 되기 5일 선행 수업에 참여하게 됐습니다. 5일 동안의 수업을 리뷰해야하는데 막상하려니 괜한 짓을 했나 싶습니다.1. 창업할 생각인가?약 6-7년 전쯤, 스타트업이라는 말이 한국을 휘몰아쳤다고 해도 과언이 아닐 정도로 창업을 육성하는 기조가 강했던 시기가 있었습니다. 여기저기 신생 스타트업들의 투자 상황이 기사로 쏟아졌습니다. 정부에서 대대적으로 육성 프로그램을 만들고 홍보해서 남녀노소 불문하고 누구나 창업? 아니면 창업 간접 경험? 을 할 수 있게 해 주었습니다. 저 또한 그 열기에 합세하여 기존에 몸담고 있던 스타트업에서 빠져나와 혼자만의 창업에 도전했었던 경험이 있었습니다. IT업에 종사하고 있었..

styled-components는 컴포넌트 간의 분리와 재사용성을 높여주며, 스타일의 일관성을 유지하는 데 도움이 됩니다. 부모 컴포넌트에서 상속받은 props의 상태가 여러 상황일 때, 효율적인 사용방법을 알아보겠습니다. 물론 저는 Next.js와 Typescript 사용을 기본으로 합니다. 1. 재사용할 Button 컴포넌트 만들기import Link from 'next/link'; import styled from 'styled-components'; const Button = ({ size, href, children }: ButtonStyledType)) => { const { size, href, children } = props; return ( {children} ); }; export d..

이미지 최적화에 도움이 되는 next/image 기본 사용법을 알아보겠습니다. 기본 사용법이고, 실제 최적화에 해당하는 내용은 추후 포스팅하겠습니다.1. public 폴더 생성Next.js에서 public 폴더에 저장된 파일들은 정적 파일(static files)로 취급됩니다. 이러한 파일들은 서버에서 직접 제공되어 클라이언트(브라우저)에서 접근할 수 있어야 합니다. 하지만 Next.js는 기본적으로 파일 시스템 라우팅(File System Routing)을 사용하여 페이지를 서빙하며, 이는 정적 파일을 자동으로 처리하지 않습니다. 따라서 public 폴더 안에 있는 이미지 파일은 기본적으로 브라우저에서 접근할 수 없는 상태입니다. 정적 파일을 제공하려면 Next.js의 내장된 기능을 사용해야 합니다. ..

Next.js는 일반적인 리액트의 페이지 기반 라우팅과 다르게 파일 기반 시스템으로 되어있어, vscode 같은 통합개발환경에서 개발을 위해 폴더와 파일을 만들면 그 구조가 자연스럽게 라우팅에 활용되도록 해줍니다. 정적 라우팅과 동적 라우팅을 활용하는 방법을 알아보겠습니다.1. 정적 라우팅정적 라우팅은 라우트가 빌드 타임에 결정되는 것을 의미합니다. 이 경우, 각 페이지에 대한 라우트가 사전에 정의되어 있으며, 사용자가 해당 페이지를 요청하면 라우팅이 발생합니다. 아래는 정적 라우팅 구조의 예시.- pages - index.js - about.js - contact.js위의 예시에서는 index.js, about.js, contact.js 파일이 각각 /, /about, /contact 경로로 이동됩니다..