본문 바로가기

코딩공부/학습요약8

Next.js13 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드 분석 Next.js - next-start code #!/usr/bin/env node import arg from 'next/dist/compiled/arg/index.js' import { startServer } from '../server/lib/start-server' import { getPort, printAndExit } from '../server/lib/utils' import isError from '../lib/is-error' import { getProjectDir } from '../lib/get-project-dir' import { CliCommand } from '../lib/commands' import { resolve } from 'path' import { PHASE_P.. 2023. 6. 28.
Prisma 사용/공부 요약 👩‍💻 Prisma를 공부하게 된 계기 이번에 Next.js 13버전으로 Airbnb 클론 프로젝트를 시작하게 되었다. 개인적으로 에어비앤비는 전세계적으로 많은 사람들이 많이 사용하는 웹서비스라 한번쯤 그 기능들을 내 나름대로 구현해 보고 싶었다. 하지만 에어비앤비를 프론트엔드로만 적용하기엔 백엔드 부재가 심하다 생각해서 망상만 하다가 이번에 Next.js로 만들기로 결정한 김에 풀스택을 찍먹해보기로 했다. 결정 한 후에 ORM을 찾던 중 스키마를 통해 데이터베이스를 간단히 조작할 수 있다는 Prisma를 알게 되었고 이번 프로젝트에 적용해보기로 결정했다. 📝 Prisma의 개념과 특징 소개 공식 문서를 확인하면 Prisma는 Node.js, TypeScript, Rust, Go 등 다양한 언어와 프레임.. 2023. 4. 27.
RESTful API란? 🤔 RESTful API란? 📝 정의 RESTful API는 Representational State Transfer의 약자로, 웹 상의 자원을 HTTP 프로토콜을 이용하여 전송하는 것을 의미한다. RESTful API는 일관적인 인터페이스를 제공하며, 서버와 클라이언트 간의 통신을 가능하게 해준다. ❓ 사용하는 이유 RESTful API는 다음과 같은 이유로 많이 사용된다. HTTP 프로토콜을 이용하여 간단하게 자원을 전송할 수 있다. 서버와 클라이언트 간의 인터페이스를 일관적으로 제공한다. 클라이언트와 서버가 독립적으로 개발될 수 있다. 캐싱 처리가 용이하여 서버의 부하를 줄일 수 있다. 😎 적용방법 RESTful API를 적용하기 위해서는 다음과 같은 요소들을 고려해야 한다. ✅ HTTP 메소드 R.. 2023. 4. 21.
[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항) 🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느려지거나 멈추는 경우가 발생할 수 있다. 이러한 문제를 해결하기 위해서는 브라우저 렌더링 원리와 성능 최적화 방법을 이해하면 도움이 될 수 있다 판단해 시간을 내어 찾아보았다. 🤔 브라우저 렌더링 원리란 무엇인가 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 원리는 크게 렌더링 엔진, 렌더 트리, 레이아웃, 그리고 페인팅으로 구성된다. .. 2023. 4. 11.