📌 전체 게시글 목록

Tailwind CSS 사용해보기Tailwind CSS(opens in a new tab) 란 ?Next.js와 매우 잘 어울리는 유틸리티 우선 CSS 프레임워크입니다.장점유틸리티 우선 프레임워크: Tailwind CSS는 유틸리티 클래스를 사용하여 빠르고 효율적인 스타일링을 가능하게 하며, 프로젝트 전반에 걸쳐 일관된 스타일을 유지하면서도 쉽게 디자인할 수 있습니다.맞춤화 가능: Tailwind CSS는 모든 디자인 시스템에 맞게 확장 및 맞춤설정이 가능해, 다양한 프로젝트에 유연하게 적용할 수 있습니다.다양한 프레임워크와 통합: Next.js, Nuxt.js, Vue.js 등과 잘 통합되며, PostCSS를 지원하여 자동 접두어 지정과 같은 기능을 활성화할 수 있습니다.자바스크립트 코드와 분리: Ta..

1. 프리렌더링(Pre-rendering)프리렌더링은 서버가 페이지를 사용자가 요청하기 전에 미리 렌더링해서 준비해두는 방식입니다. 페이지를 미리 생성하여 캐싱해 두는 것이 특징입니다.특징정적 생성: 빌드할 때 렌더링서버사이드 렌더링: 리퀘스트가 들어오면 렌더링장점: 빠른 로딩 속도 (페이지가 미리 준비되어 있음), SEO에 유리프리 렌더링을 사용하면 프리페치보다 표시 시간이 빨리지고 더 많은 리소스를 필요로 하는 대신 사용자 경험이 향상됩니다.단점: 동적인 컨텐츠에 대해 적용하기 어렵고, 미리 준비된 페이지만 제공 가능프리렌더링이 적합한 경우자주 변경되지 않는 콘텐츠: 예를 들어 블로그, 포트폴리오 사이트 등 자주 업데이트되지 않는 콘텐츠가 많을 때.ex) 블로그, 포트폴리오 사이트SEO가 중요한 페이..

CSR과 SSR 비교 및 CSR의 단점 보완 방법우선 SPA와 MPA에 대해서 알아보자1. SPA와 MPA의 기본 개념1️⃣ SPA (Single Page Application)하나의 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 화면이 깜빡이지 않고, 새로운 페이지를 요청할 때 서버로부터 필요한 데이터만 전달받아 렌더링합니다.즉, CSR(Client-Side Rendering) 방식을 사용합니다.2️⃣ MPA (Multi Page Application)전통적인 웹 애플리케이션 방식입니다. 페이지 전환 시마다 서버에서 새로운 HTML을 받아와 전체 페이지를 새로 렌더링합니다. 이때 페이지가 깜빡일 수 있으며, SSR(Server-Side Rendering) 방식을 사용합니다.2. CSR(Clie..

public 폴더정적 파일: public 폴더는 정적 파일(이미지, 폰트, 아이콘 등)을 저장하는 곳입니다. 이 폴더에 있는 파일은 / 경로로 접근할 수 있습니다.용도: 정적 파일을 저장하는 폴더로, 웹 애플리케이션의 리소스를 관리합니다.예시: public/images/logo.png 파일은 /images/logo.png로 접근할 수 있습니다._app.js 파일커스텀 App 컴포넌트: _app.js 파일은 Next.js 애플리케이션의 전체 레이아웃과 상태 관리를 위한 진입점입니다. 모든 페이지에서 공통으로 사용할 컴포넌트를 설정할 수 있습니다.용도: 각 페이지에서 공통적으로 적용할 설정을 정의합니다.상태 관리: 전역 스타일이나 레이아웃, 컨텍스트 제공 등을 설정할 수 있어, 페이지 전환 시 일관된 UI를..

2일 차는 팀원끼리 역할 분배를 페이지 단위로 하였습니다. 소규모 프로젝트라 기능 단위로 나누기 보단 페이지 단위로 나누어서 작업하기로 하였습니다. 😊/post 관련 롤링페이퍼 보여지는 페이지(1) - 정준영 [팀장]초기 css 세팅, 랜딩 페이지 - 김미소/post 관련 롤링페이퍼 보여지는 페이지(1) - 김예지/post 관련 롤링페이퍼 작성하는 페이지 - 김원  🌟 모두 화이팅 !! 🌟

코드잇 부트캠프를 참여하며 9주 차에 다 달았다. 이번엔 약 2주간의 기초 프로젝트를 진행하였다. part2에서 만난 팀원들과 3주간의 리액트 공부를 하며 정신없는 시간을 보냈다. 이젠 함께 프로젝트를 진행해 보자! 🦄 프로젝트 소개이 프로젝트는 롤링 페이퍼 웹 애플리케이션을 구현하는 팀 프로젝트입니다.React를 사용하여 동적인 웹 애플리케이션을 개발하며, Vite를 통해 빠르고 효율적인 개발 환경을 제공합니다. 🗺️ 진행 과정1. 프로젝트 생성 및 클론팀장이 Rolling 프로젝트를 깃허브에 생성한 후, 팀원들이 fork 해서 작업하였다. 2. 코드 컨벤션 정하기문자열을 처리할 때는 큰따옴표를 사용하도록 합니다.문장이 종료될 때는 세미콜론을 붙여줍니다.🐫 함수명, 변수명은 카멜케이스로 작성합니다..