GET리소스를 조회/읽기만 하는 작업데이터를 변경하지 않음 (읽기 전용)URL에 데이터가 노출됨캐시 가능 예) 게시글 목록 조회, 특정 사용자 정보 조회POST새로운 리소스 생성서버에 데이터를 제출요청 본문에 데이터를 담아 전송멱등성이 없음 (같은 요청을 여러번 하면 여러개가 생성됨) 예) 새 게시글 작성, 회원가입PUT리소스를 수정하거나 없으면 생성전체 리소스를 교체/업데이트멱등성이 있음 (같은 요청을 여러번 해도 결과가 동일) 예) 게시글 전체 내용 수정PATCH리소스의 일부분만 수정PUT과 달리 일부 필드만 업데이트 가능멱등성이 없을 수 있음 예) 게시글의 제목만 수정, 사용자의 이메일만 변경

UML 다이어그램이란?UML 다이어그램은 프로그램을 만들기 전에 설계도를 그리는 표준화된 방법입니다. 마치 건축가가 건물을 짓기 전에 설계도를 그리는 것처럼, 개발자도 프로그램의 설계도를 그립니다.  오늘 알아볼 다이어그램은 객체와 와이어프레임입니다. 객체- 프로그램의 구조를 보여주는 가장 기본적인 다이어그램- 각 요소들의 특징과 관계를 표현합니다 예시 사진&코드@startumlobject Londonobject Washingtonobject Berlinobject NewYorkmap CapitalCity { UK *-> London USA *--> Washington Germany *---> Berlin}NewYork --> CapitalCity::USA@enduml와이어프레임- 웹사이트나 앱의 화면 ..

포스팅 미리 보기metadata로 웹사이트 title 바꾸는 법dummyjson을 활용해보기신기술 suspense 사용해보기(feat. 동적라우팅)next에서 로딩 화면 간편하게 만들기 아래의 설명보다 좀 더 자세한 설명을 원한다면 공식문서를 참고하는 것이 좋다!   metadata로 웹사이트 title 바꾸는 법 본격적인 내용에 들어가기에 앞서 아주 간단하게 몸풀기하고 들어가도록 하겠다. 몸풀기로 준비한 것은 metadata라는 것으로 웹사이트 title을 바꾸는 법이다. //layout.tsx//정적인 페이지 사용시 쓸 수 있는 코드export const metadata = { title: 'Thank you next!', description: '넥스트야 고마워',}  나는 layouy.tsx안..

Tailwindcss에 대해 이야기는 너무나 많이 들었지만 제대로 배워보는 것은 이번이 처음이었기에 정리를 해보겠다.   Tailwindcss가 뭐예요?테일윈드를 이해하기 위해서는 일단 중요한 개념 중 하나인 Utility-First Fundamentals를 이해해야한다. 이 개념은 제한된 기본 유틸리티 집합으로 복잡한 구성요소를 구축하는 것이라 해석할 수 있다.    위의 사진과 같이 Tailwindcss에는 제한된 기본 유틸리티를 제공한다. 따라서 제한된 기본 유틸리티를 사용해서 스타일링을 하는 것이 테일윈드의 핵심이라고 볼 수 있다.    보통 CSS 코드를 작성하면 이러한 모습으로 작성하게 될텐데 만약 CSS 대신 Tailwindcss를 쓴다면 아래 코드와 비슷한 짜임새가 나올 것 ..

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 번들링, 컴파일 등과 같이 리액트에 필요한 도구를 추상화하고 자동으로 구성한다. 리액트에는 없는 서버 사이드 렌더링, 정적 사이트 생성, 증분 정적 재생성과 같은 다양하고 풍부한 기능을 제공하여 동적이며 빠른 리액트 어플리케이션을 구축하는 데 도움을 준다. 아래의 내용을 좀 더 자세하게 알고싶다면 공식문서를 참고해보도록 하자  자동설치npx create-next-app@latest //자동 설치수동설치npm install next@latest react@latest react-dom@latest//수동 설치package.json 파일에 접속하여 "scripts": { "dev": "next dev", "build": ..

Context API:1. React에 이미 들어있는 기능이다. 따로 설치할 필요가 없다.2. 여러 컴포넌트에서 같은 데이터를 쓸 때 유용하다. 마치 큰 그릇에 데이터를 담아두고 필요한 컴포넌트가 꺼내 쓰는 것과 비슷하다.3. 간단한 전역 상태 관리에 좋다. 예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것들을 관리하기에 적합하다.4. 사용하기 쉽지만, 데이터가 자주 바뀌는 경우엔 성능이 느려질 수 있다.Redux:1. 별도로 설치해야 하는 라이브러리다. React 밖에서도 쓸 수 있다.2. 복잡한 데이터를 다루는 데 더 적합하다. 여러 가지 데이터가 서로 연관되어 있고 자주 바뀌는 경우에 유용하다.3. 개발할 때 도움되는 도구들이 많다. 예를 들어, 데이터가 어떻게 변하는지 쉽게 볼 수 있는 도구..

Redux를 사용하는 이유:1. 복잡한 상태 관리가 쉬워진다. 여러 페이지나 부품(컴포넌트)에서 같이 사용하는 정보를 한 곳에서 관리할 수 있어 편리하다.2. 상태 변화를 예측하기 쉽다. Redux는 정해진 규칙에 따라 상태를 변경하므로, 어떤 변화가 일어날지 미리 알 수 있다.3. 문제 해결이 쉽다. Redux에서 제공하는 개발 도구를 사용하면 상태가 어떻게 변했는지 쉽게 확인할 수 있어 오류를 빨리 찾을 수 있다.4. 다양한 기능 추가가 가능하다. Redux는 미들웨어라는 기능을 통해 비동기 작업이나 로그 기록 같은 추가 기능을 쉽게 넣을 수 있다.Redux의 단점:1. 새로운 개념을 배워야 한다. Redux를 사용하려면 '액션', '리듀서', '스토어' 같은 새로운 용어와 개념을 이해해야 한다.2...

.목차비동기 처리의 개념JS에서 비동기작업을 다루는 방법 세가지Promise (객체)Promise 객체란Promise 상태 3가지Promise 사용 문법과 기본예제4. Asysnc/await (키워드)Asysnc/await 의 역할Async/await의 기본 문법 및 기본 예제 비동기 처리의 개념동기(synchronous)는 요청과 응답이 동시에 이루어진다는 것을 의미한다. 그러나 각 작업의 처리 속도가 다를 수 있기에, 앞선 요청을 모두 처리할 때까지 기다려야 하는 동기 방식 대신 비동기(asynchronous) 방식이 필요하다. 비동기는 요청을 기다리지 않고 그 동안 다른 일을 처리할 수 있게 해준다. 더 자세히 말하자면, 요청한 내용에 대해 나중에 응답하겠다는 약속(Promise)을 해놓고 그 동안..