본문 바로가기

web63

[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.
[SpringBoot] KeyCloak 으로 인증서버 만들기(1) 현 회사에서 기능설계 아키텍처 및 표준화설계를 하면서 내부 서버에 SSO 인증 서비스를 만들고자 정리해보는 글이다. 1. 먼저 Keycloak을 설치하자.https://ssmyefrin.tistory.com/98 [Docker] 도커로 Keycloak 설치하기(windows)✔ Keycloak ?Keycloak은 Red Hat에서 개발한 오픈 소스 싱글 사인온(SSO) 및 ID 관리 플랫폼으로, 사용자 인증 및 권한 부여를 처리하는 솔루션이다. Keycloak은 다양한 기능을 제공하여 개발자가 보안 및ssmyefrin.tistory.com 2. http://localhost:8080/ 로 접속해보자.아래와 같은 화면에서 Administration Console로 접속후 아까 docker 실행시 설정했.. 2025. 5. 29.
[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.