CASSIE'S BLOG

FE 1차 Project 해설 강의 자료 💡 OVERVIEW 클론 프로젝트 해설 프로젝트 의도 피드백 다음 프로젝트 전 준비사항 💡 LECTURE 프로젝트 의도 우리가 실제 서비스에서 사용하는 동작을 동일하게 구현할 수 있는가 간단한 동작들처럼 보이지만, 실제 구현은 간단하지 않은 경우도 많다. 어떤 기능을 보고 이 기능을 구현하는데 얼마나 걸릴지 일정을 올바르게 산출할 수 있는가 실제 현업에서는 없는 서비스를 새로 만들어야 하는데 그 일정을 미리 예측해서 동료에게 전달해야 한다. 피드백 코드베이스 관련 Git 브랜치 전략에 맞게 커밋, 푸시, PR을 작성하고 리뷰를 통해 코드를 병합했는가? 디렉토리 구조를 MECE하게 잘 구분하였는가? Contexts Hooks Components 리액트 관련 리액트 ..

RESTful API는 Representational State Transfer(REST) 아키텍처 스타일을 따르는 API를 말합니다. REST는 자원을 표현하고 상태를 전달하기 위한 아키텍처 스타일로, 분산 시스템을 위한 경량 프로토콜인 HTTP를 기반으로 합니다. RESTful API의 주요 특징은 다음과 같습니다: 자원(Resource): 모든 것을 리소스로 표현합니다. 각 리소스는 고유한 식별자를 가지며, URI(Uniform Resource Identifier)로 식별됩니다. 예를 들어, /users, /products 등이 리소스의 URI가 될 수 있습니다. 행위(Verb): HTTP 메소드(GET, POST, PUT, DELETE 등)를 사용하여 리소스에 대한 행위를 정의합니다. 각각의 메소..

Express는 Node.js에서 서버를 만들 때 사용하는 대표적인 프레임워크입니다. 이번 토픽에서는 Express로 직접 API 서버를 만들고 데이터베이스를 구축해 볼 건데요. Express 애플리케이션은 Node.js 기반의 웹 애플리케이션을 개발하기 위한 웹 프레임워크로서, 다양한 역할을 수행합니다. 주요 역할은 다음과 같습니다: 웹 서버 역할: Express는 HTTP 서버를 만들고 관리하는 역할을 합니다. 클라이언트로부터의 HTTP 요청을 받아들이고, 적절한 처리를 수행한 후 응답을 반환합니다. 라우팅(Routing): Express는 라우팅을 지원하여 특정 URI에 대한 요청을 어떻게 처리할지를 정의할 수 있습니다. 특정 경로로 들어오는 요청은 해당 경로에 대응되는 핸들러 함수에 의해 처리됩니..

-서버 및 데이터베이스 셋업 -서버 컴포넌트 데이터 페칭하기 -렌더링 -데이터 페칭 Next.js 프레임워크가 서버에서도 동작하고 간단한 api 로직도 만들수가 있고 여기서 데이터베이스도 설치할 수 있는데 이걸 간단하게 실습해보기 -prisma 라는 도구 설치하기 (prisma 는 백엔드까지 같이 개발할 수 있는 도구다) -prisma 공식 문서에 다 셋팅 코드 있다. import {prisma} from “@db”; @디렉토리 @ 기호는 일반적으로 파일 경로에서 특정한 디렉토리를 나타내기 위해 사용됩니다. 예를 들어, @db는 프로젝트 내의 "db" 디렉토리를 가리킬 수 있습니다. 이것은 주로 모듈 경로를 지정하는데 사용되며, 프로젝트 구조나 설정에 따라 다를 수 있습니다.

이건 전역의 경우임. Dedupe tree형태로 다시 복제한다고함 Next.js 공식 문서에 적혀있음

리액트: : 사용자인터페이스를 잘 다루기 위한 툴 Next.js는 자바의 Spring 같은거다. ✅ 클라이언트사이드 렌더링 클라이언트사이드 렌더링에서는 브라우저에서 업데이트가 일어나게되면 데이터만 fetching을 받아서 클라이언트에서 다시 그리는 로직들을 제공을 한다. 매번 html파일을 불러오지않고 처음에만 html 파일을 불러온다. ✅https://nextjs.org/docs Docs | Next.js Welcome to the Next.js Documentation. nextjs.org SSR은 매 번 HTML파일을 불러온다. ✅pages/api TypeScript는 필수인데, Next.js는 Optional 넥스트js에 집중하려고 next.js 사용안한다고 함 이번에 next.js는 13버전부터..