web/Frontend10 [React] NextJS 로 프로젝트 생성하기(1) 회사에서 프로토 타입으로 어드민 페이지를 생성해야 할 일이 생겨 해보는겸~ 정리도 같이 한다! 1. 일단 npx로 nextJS 프로젝트를 세팅하자npx create-next-app@latest {프로젝트명} --typescript 2. 옵션들을 설정해주자 Would you like to use ESLint? … Yes ESLint 사용 여부이다. ESLint는 Lint 도구인데 코딩컨벤션을 설정하고 이에 어긋나게 코딩을 하면 피드백을 해준다. 나도 모르게 안티패턴으로 작성하는 상황을 피하고자 ESLint를 사용하는 옵션을 선택했다. 시도 때도 없이 빨간 밑줄이 나타나는 것이 싫다면 No를 선택해도 상관없다. Would you like to use Tailwind CSS? … Yes Tailwind C.. 2025. 6. 4. [React] VS Code를 사용하여 세팅하기 원래 나는 jsp... jquery 시절 자바스크립트로 프론트엔드(?) 개발을 했었다... (아주 구석기시대ㅋㅋ)그러다 Frontent Framework가 급부상 하면서 예전 프로젝트에서 Vue를 한번 찍먹(?)으로 맛보게 되었고,지금 회사에선 React로 개발해보고자 하는 니즈가 있어 정리해본다. 2개 차이가 궁금하다면 아래글 참조https://ssmyefrin.tistory.com/96 React VS Vue요즘(?)에도 인지 모르겠지만 프론트엔드 개발의 양대 산맥 React 와 Vue!!! 일단 나는 Vue만 써본사람으로써 React는 어떨때 써야 더 매력적인지 알아보다 정리하게 된다. Vue와 React의 가장 큰 차이는ssmyefrin.tistory.com ✔ 우선작업NodeJS 설치가 필수.. 2025. 4. 23. React VS Vue 뭘 써야 할까 요즘(?)에도 인지 모르겠지만 프론트엔드 개발의 양대 산맥 React 와 Vue!!! 일단 나는 Vue만 써본사람으로써 React는 어떨때 써야 더 매력적인지 알아보다 정리하게 된다. Vue와 React의 가장 큰 차이는 Vue는 "프레임워크",React는 "라이브러리" 라는 점이다. 그말은 즉슨, 리액트는 자유도가 높고 뷰는 기능이 정해져있어 따라야 한다는 의미다. React는 자바스크립트 문법을 쓰고 싶은대로 사용이 가능하지만 Vue는 제공해주는 문법에 한해서만 구현이 가능하다. 둘 다 컴포넌트 기반의 아키텍처이며 빠르고 가볍다. ⚛️ Vue (프레임워크)"여기서부터 여기까지 이렇게 짜세요~" 하고 틀이 다 정해져 있음템플릿 문법 (HTML에 가깝게), 디자이너 출신도 배우기 쉬움양방향 바인딩 (v.. 2025. 4. 23. SPA 와 SSR vs CSR 프론트엔드쪽을 공부하다가 헷갈리는 개념을 정리해 보았다. ✔️ SPA(Single Page Application) SPA 란 말 그대로 한개의 페이지를 가진 어플리케이션이다. 왜 SPA 로 개발하느냐고 묻는다면, 사용자 친화적 초기 렌더링 후 데이터만 받아오기 때문에, 상대적으로 서버 요청이 적음 Virtual Dom(가상 돔) 프론트 엔드와 백엔드 분리로 개발업무 분업화 및 협업이 용이 개발이 상대적으로 효율적 페이지 전환 시에 서버로부터 새로운 페이지를 받아오지 않고, 클라이언트 측에서 필요한 데이터만 동적으로 로드하여 화면을 갱신 정도를 말할 수 있겠다. 기본적으로 SPA 는 클라이언트 사이드 렌더링이지만 그렇다고 SPA == CSR 은 아니다. 이제 아래에서 SPA 에서의 SSR 과 CSR 에 대.. 2024. 2. 13. 이전 1 2 3 다음