-
201. Tailwindcss with Vite, ReactDevelopment/FrontEnd 2025. 5. 19. 14:34
1. Vite란? 2. Tailwindcss 라이브러리 설치 & 프로젝트 생성[tailwind 4.1.6 기준 설치 - (VITE 필수)]*) npm은 이미 설치는 기본. (설치 가이드 참조할 것.) 1) react 기본 페이지 라우터 설치 -> npm install react-router-dom (설치 필수) 2) vite용 프로젝트 생성 및 초기셋업 -> npm create vite@latest [프로젝트명] -- --template react -> cd [프로젝트 폴더] && npm install 3) tailwindcss 라이브러리 설치(VITE용)npm install react-router-domnpm install tailwindcss @tailwindcss/vite 4) p..
-
001. VSCode - 환경 설치 & 구성개발환경 (IDE) & 환경설정/Spring 설치 & 구성 2025. 4. 30. 23:30
1. Java Extension Pack 설치 (당연히 JAVA JDK 17 / 21 별도 설치는 필수)→ Java 개발에 필요한 도구 다 들어 있음 2. Spring Boot ExtensionPack 설치이거 하나만 설치하면, Spring Boot Tools, Spring Boot Dashboard, Spring Initiallizer 3종 세트로 깔림. (참고) 3. Gradle 설치 (빌드 자동화 도구) https://gradle.org/releases/ Gradle | ReleasesFind binaries and reference documentation for current and past versions of Gradle.gradle.org최신 버전 -> binary-only 클릭하여 압축파..
-
001. Node.js & Npm 기본 활용 방법Development/FrontEnd 2025. 4. 30. 11:29
1. Node.js 란? 2. Npm 이란? 3. node 기본 구문 4. npm 기본 구문1) 패키지 설치 확인 npm list -g --depth=0 : npm list --depth=0 : npm list [패키지명] npm ls [패키지명] : 해당 패키지 설치 경로 출력*) TIP혹시, 설치 후 해당 라이브러리 동작에 문제가 있다면, 위처럼CRA가 정한 버전이랑 다른 경우이니 명시된 버전으로 지정하여 설치하자. 예) npm install -D tailwindcss@3.4.17 2) 패키지 신규 설치 및 실행 npm install -D [패키지명]... : 해당 패키지를 현재 시스템의 의존도 체크하여 설치 npx [패키지명] init : 해당 패키지 초기..
-
101. React - 초기 설치, 구성 [with tailwindcss]Development/FrontEnd 2025. 4. 30. 11:21
1. 설치&구성 방법1) npm 설치 (node.js 설치 시 자동으로 설치됨)[window]공식사이트에서 설치 후 환경변수 등록 후 아래 확인 설치 확인 : npm -v [mac]brew install nvmvi ~/.zshrc (아래 내용 삽입 후 저장)export NVM_DIR="$HOME/.nvm"source "$(brew --prefix nvm)/nvm.sh"nvm install --ltsnvm use --lts-> 최신 node.js 버전이 설치되고 적용된다. 2) React 초기 구성 생성[CRA 이용한 기본 구성]npx create-react-app [프로젝트이름]cd [프로젝트이름]npm start -> (디폴트로 127.0.0.1:3000 구동됨.) [VITE 이용한 구성]npm ..
-
000. 프론트엔드 개발 흐름Development/FrontEnd 2025. 4. 28. 11:30
* JAVASCRIPT, React, Vue.js... [프론트엔드] ClientSideScript 언어이다. 주로 브라우저(사용자)측에서 동적으로 페이지를 렌더링할 때 사용됨. * JSP, PHP, Thymeleaf... [백엔드] ServerSideScript 언어이다. 주로 WAS 서버측에서 동적으로 페이지를 렌더링해서 페이지를 사용자 측으로 던져줄 때 사용. CSR/SSR은 실시간 처리라는 개념은 동일하지만실행되는 기준(위치)이 다르다. 1. 클라이언트 사이드 스크립트 언어 발전순서old Javascript -> JQuery / Ajax -> ES6 -> React / Vue.js / Angular 2. ES6 vs ..
-
001. JPA란?Development/Spring JPA 2025. 4. 14. 16:37
1. JPA 개념 이해Java Persistence API → 자바 진영에서 만든 표준 ORM(객체 관계 매핑) 명세야. (인터페이스의 모음)직접 사용하는 구현체는 Hibernate가 가장 유명함. (Spring 기본 구현체)아래 예시처럼 테이블을 객체처럼 접근 가능User user = entityManager.find(User.class, id); 2. ORM(Object Relational Mapping)이란?객체지향 프로그래밍의 객체 ↔ 관계형 데이터베이스의 테이블 자동 매핑즉, User 객체가 DB의 user 테이블과 자동으로 연결돼서, SQL 없이 조작 가능@Entitypublic class User { @Id @GeneratedValue private Long id; ..
-
099. Spring JPA 에러Development/Spring JPA 2025. 4. 14. 15:13
1. MySQL 인증 시, Public Key Retrieval not allowed 본인 mysql 패스워드 해쉬 방식이 caching_sha2_password 라면> application.properties에 "&allowPublicKeyRetrieval=true" 추가spring.datasource.url=jdbc:mysql://218.233.220.216:43030/myapp?serverTimezone=UTC&useSSL=false&allowPublicKeyRetrieval=true 2. org.springframework.dao.DataIntegrityViolationException: could not execute statement [Column 'age' cannot be null]..
-
002. Gradle 기본 에러개발환경 (IDE) & 환경설정/Build Tools - Gradle 2025. 4. 14. 14:59
1. JAVA 또는 Jnit 호환성 충돌 시, 해결방법 #(자주 발생되는 초기 에러)1) gradle-wrapper.properties 확인 > distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip -> 8.x 이상이어야만 JAVA-21 JVM과 호환이 됩니다. (=> ./gradlew wrapper --gradle-version 8.13 : 빌드 확인) 2) build.gradle 아래 내용 확인testImplementation 'org.springframework.boot:spring-boot-starter-test' -> Junit 5.x는 gradle-8.x에서 기본 포함하고 있으므로 굳이..