본문 바로가기

분류 전체보기31

HTTP API, REST API, WEB API 차이점 HTT API, REST API,  WEB API의 차이점에 대해 알아보기 전에 API란 무엇인지 알아보자.API란?Application Programming Interface의 약자로,애플리케이션(응용프로그램)에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 즉, 애플리케이션이 어떤 프로그램이 제공하는 기능을 사용할 수 있게 만든 매개체다.컴퓨터와 인간을 연결시키는 사용자 인터페이스(UI)와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결한다.서버는 프로그램에게 자신이 제공하고자 하는 데이터나 기능을 제어할 수 있는 API로 만들면, 접근 권한이 있는 프로그래머나 프로그램이 API를 통해 서버에서 제공하는 데이터를 요청해서 사용할 수 있게.. 2024. 12. 3.
nuxt, nest, next 뭐가 다를까? Nuxt, Next, Nest는 각각 어떤 특징을 가지고 있고 어떻게 사용될 수 있는지 알아봅시다.Nuxt범용 애플리케이션을 위한 프레임워크로 Vue.js를 기반으로 한 프레임워크입니다.예를 들어, 블로그를 만들고자 할 경우, Nuxt를 사용하면 블로그의 모든 페이지가 서버에서 미리 렌더링 되어 사용자에게 빠르게 보일 수 있습니다. 또한, Nuxt는 정적 웹사이트도 지원하므로, 블로그의 모든 포스트를 정적으로 생성하여 호스팅 할 수 있습니다.이로 인해 페이지 로딩 속도가 빨라지고 SEO(검색 엔진 최적화)에도 유리한 점이 있습니다. NextNuxt와 유사한 기능을 제공하며 범용 애플리케이션을 위한 프레임워크로 React를 기반으로 한 프레임워크입니다.만약 전자상거래 웹사이트를 만들고자 한다면, Next를.. 2024. 11. 20.
Class 컴포넌트 vs Function 컴포넌트 React에선 컴포넌트를 Class와 Function으로 모두 만들 수 있다. Class는 React에서 제공하는 Component라는 클래스를 extends, 상속해서 만들 수 있고,Function는 간단하게 함수로 만들 수 있다. Class는 상태, 데이터를 담을 수 있는 state라는 오브젝트가 들어있으며 라이프사이클 관리를 위한 메소드가 존재한다. 그러나 Function에는 그런 기능이 없다. 하지만 리액트 16.8 버전부터 React Hook이 도입되면서 함수에서도 스테이트도 가지고, 라이프사이클 메소드도 사용할 수 있게 되었다.  Class는 라이프 사이클 관리를 위해서 메소드를 사용해야 하며, render() 메서드와 this의 사용이 필수적이기에 가독성 측면에서 불리하며 최근 React에서.. 2024. 11. 6.
RESTfull API란 무엇인가? RESTful API란 무엇인가?REST(Representational State Transfer) 아키텍처 스타일의 설계 원칙을 준수하는 API(Application Programming Interface)*이다. 즉, 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태 (정보)를 주고받는 모든 것을 의미한다.*아키텍처 스타일 설계원칙 : 소프트웨어 아키텍쳐에서 일반적으로 발생하는 문제점들에 대한 일반화되고 재사용 가능한 솔루션 원칙API란 무엇인가?API(Application Programming Interface)는 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 말한다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성한다.웹.. 2024. 11. 5.
FSD(Feature Sliced Design) 먼저 Layers, Slices, Segment 폴더로 구분하고 Depth를 3으로 제한한다.폴더와 파일이 많아지고 Depth가 많아지면 파일 import 할 때 ../../../ ……. 과 위치를 구분하기 힘들어진다.Layersapp전역설정. Provider, Router, Client같은 HOC가 slice 기준. 어플리케이션 전반적으로 적용되는 기능. 프로바이더, 라우터, 전역스타일, 전역 타입 선언 등providersstylestypespages주소 단위의 페이지. 각각의 주소별 페이지가 slice 기준widgetsUI 컴포넌트. entities와 feature를 의미있는 블럭으로 만든 레이어.. 어떻게 묶을지는 재사용 여부에 따라 정하면 됨.headerfooterfeature동사적 의미로, 동작.. 2024. 8. 6.
getStaticProps, getStaticPaths, getServerSideProps getStaticPropsstatic : 정적 사이트 생성, props : 컴포넌트의 인풋getStaticProps는 빌드 시 데이터를 패치하는 함수Next.js 코드에 getStaticProps 가 있다면 Next.js가 빌드시 알아서 함수를 실행하고, 그 props를 컴포넌트에 전달한다. 사용예제function BlogPost({ post }) { return ( {post.title} {post.content} )}export async function getStaticProps() { const res = await fetch('https://.../posts/1') const post = await res.json() return { prop.. 2024. 7. 16.
Next.js의 fetch와 react-query react-query가 제공하는 기능을 보면서 사실 대부분의 기능은 next.js에서 제공해 주는 확장된 fetch 함수로도 대체가 가능한데 굳이 react-query를 사용할 필요가 있을까?react query는 next.js에서 필요하지 않을수도 있다! 하지만 서버 컴포넌트가 아직 지원하지 못하는 사용 사례를 아주 유용하게 지원해 줄 수 있다!Next.js의 fetch와 react-query의 특징데이터 페칭 로직을 서버로 옮길 수 있다.DB와 더 가까이에서 무언가를 처리할 수 있다.번들 사이즈가 클라이언트에 영향을 주지 않는다.Next.js의 fetching 솔루션Next.js의 app router는 async 방식을 통해 데이터를 페칭 한다.Next.js 측에서 권장하는 방법은 다음과 같다.ser.. 2024. 6. 5.
React Query에 대해 알아보자 React Query란?React Query는 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. React Query의 장점MobX나 Redux를 사용하다 보니 보일러플레이트 형태의 코드가 많이 발생하는데, React Qeury를 비교적 코드의 양이 적고 구조가 단순하여 추후 유지 보수가 용이하다.*보일러 플레이트(BoilerPate)란? 최소한의 변경으로 여러 곳에서 재사용되지만, 반복적인 코드로 인해 많은 양의 코드를 양산하는 것.Caching을 통한 어플리케이션 속도 향상동일 데이터에 대한 중복 요청 제거오래된 데이터의 상태를 파악하여 업데이트Garbage Collection(GC)를 이용하여 서버 쪽 데이터 메모리 관리React Hooks.. 2024. 6. 5.
httpOnly Cookie 속성이 부여된 쿠키 접근 방법 HttpOnly Cookieset-cookie 설정 시, XSS 공격 방지를 위해 HttpOnly 속성을 부여한다. 이를 통해 클라이언트 스크립트가 쿠키에 접근하는 것을 방지할 수 있다. 하지만 서버 컴포넌트에서는 접근 가능하다.Next.js 13 이후 버전부터, app router의 모든 컴포넌트들이 기본적으로 서버 컴포넌트이기 때문에 접근이 가능하다! 접근 방법은 아래와 같다. //app/home/page.tsximport React from "react"import { cookies } from "next/headers"const page = () => { const cookieStore = cookies(); const token = cookieStore.get("accessToken")?.val.. 2024. 6. 5.

티스토리툴바