2024/05 6

API Param vs Query Parameter 개념과 차이

🤷‍♂️ 본론에 앞서최근에 새로운 조직에서 풀스택으로 프론트 & 백엔드 업무를 담당을 맡으면서 새로운 기술스택과 아키텍처 그리고 팀 컨벤션과 업무방식을 적응하면서 새로운 것에 대해서 많은 습득과 공부를 하고있습니다. 최근에 백엔드 REST API를 담당하면서 Param & Query Parameter에 대한 차이에 대해서 깊이 생각을 하게 되면서 어떠한 설계가 좋은 방식인지 아닌지 고민을 하게 되었습니다.  🤷‍♂️ Param & Query Parameter 사용 방법의 차이?API GET 메소드 종류API 요청에 GET 메소드를 컨트롤하기 위한 2가지 형태를 담고있다.ParamQuery  Param?주소에 포함된 변수의 값을 처리합니다.http://localhost:3000/blog/8763 주소에..

ITstudy 2024.05.21

Next JS에서 tailwind 적용 안될때 해결방법

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..

React 2024.05.17

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리

🤷‍♂️ Prisma 명령어 본론에 앞서 Prisma란?Nest JS 프레임워크와 Prisma ORM을 활용해서 프로젝트를 진행하면서 Prisma는 Node JS 기반에 프레임워크/라이브러리와 상호작용이 잘되며 Prisma + DB 연동으로 더 편하게 schema.prisma 하나의 파일로 모델, 스키마 관리를 하면서 많이 사용되며 알아두면 좋은 Prisma 명령어를 정리했다. Prisma와 상호작용이 좋은 Nest JS 알아보기 https://cometruedream.tistory.com/132 Nest.js - 개념 & 초기셋팅🤳 Nest.js 란? Nest.js는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크이다. JavaScript를 사용하고 TypeSc..

ITstudy 2024.05.09

NestJS Lifecycle (생명주기) 개념

🤷‍♂️ 본론에 앞서 Nest JS 개념?Nest JS는 Node JS 기반으로 한 서버 어플리케이션 프레임워크 입니다. 자바스크립트는 상당히 오랫동안 Express 기반으로 서버 어플리케이션 개발에서 압도적인 점유율을 차지한다.많이 사용하는 이유중에 빠르게 서버 구축과 API 구성할 수 있다는 장점이 있다. Express가 경량화된 프레임워크여서 핵심적인 기능과 빠르게 서버를 구성해서 API 구축하는데 큰 문제가 없지만 서비스 규모가 확장되고 볼륨이 커지는 프로젝트에서 불편함이 많다. 이런 문제를 해결하기 위해서 Nest JS 프레임워크가 등장하며 기업용 어플리케이션을 개발하고 내장하고 있는 플러그인을 통해서 쉽게 확장도 할 수 있다. OOP(객체 지향 프로그래밍), DI(의존성 주입), AOP(과점..

Nest.js 2024.05.07

리액트 Vite Proxy 활용한 CORS 오류 해결

🤷‍♂️ 본론에 앞서프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교https://cometruedream.tistory.com/224 프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교🐣모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일cometruedream.tistory.com 🤷‍♂️ 로컬 개발 환경 CORS 오류?프론트 개발을 하다 보면 로컬 환경에서 API CORS 오류가 빈번..

React 2024.05.03

React 폴더구조 FSD 기능 분활 설계 아키텍처

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다.  🤷‍♂️ FSD 아키텍처란?FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다.  프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유https://cometrued..

React 2024.05.02