React의 폴더 구조
·
Project 댕린이집
1️⃣ 폴더 구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json └── README.md node_modules npm install을 하여 현재 프로젝트에 설치된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않습니다. public index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더입니다. src 리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다. .gitignore 깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일입니다..
React
·
Project 댕린이집
React 란? React는 웹 프레임워크로, 자바스크립트 라이브러리 입니다. facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다. 싱글 페이지 애플리케이션이나 모방리 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는 웹/앱의 View를 개발할수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다. React를 쓰는 이유? 가상 DOM을 사용하여 실제 DOM의 변경사항을 최소화합니다. 이를 통해 빠른 성능을 유지하면서도 효율적인 UI 업데이트를 가능하게 합니다. 컴포넌트 기반의 아키텍처를 채택하여 UI를 재사용 가능한 작은 단위로 분할하고 관리할 수 있게 합니다. 이로 인해 코드의 유지보수가 용이해지고, 개발 효율성이 향상됩니다. 단방향 데이터 흐름을 ..
VSCODE에서 node.js를 통해 React를 불러오기
·
Project 댕린이집
1️⃣ node js 설치 https://nodejs.org/ 다운받은 파일을 실행 → Next → Install → Finish 설치 후 터미널 또는 cmd창에 node -v 을 작성하면 설치 버전을 확인할 수 있다. node -v : Node.js의 현재 버전을 출력 ^C : 실행 중인 작업을 취소 또는 종료 clear : 명령어 히스토리 지우기 2️⃣ Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web a..
CORS
·
Project 댕린이집
CORS ( Cross-Origin Resource Sharing ) 1️⃣ CORS 란? 웹 브라우저에서 다른 출처(origin)의 리소스를 요청할 수 있도록 하는 권한 체제이다. 대부분의 클라이언트 사이드 렌더링에서는 두 개의 다른 서버가 운영이 되는데, 하나는 프론트엔드 서버로, 주로 리액트와 같은 클라이언트 사이드 렌더링 프레임워크를 사용하여 사용자 인터페이스를 렌더링한다. 또 다른 하나는 백엔드 서버로, 주로 스프링과 같은 서버 사이드 프레임워크를 사용하여 데이터 처리, 인증 및 다른 비즈니스 로직을 처리한다. 리액트 어플리케이션에서 API 호출을 할 때, 프론트엔드 서버와 백엔드 서버는 서로 다른 주소와 포트에서 실행될 수도 있다. 따라서 요청을 처리하기 전에 사용자가 실제로 그들 자신임을 확..
ERD 설계
·
Project 댕린이집
1️⃣ 노션에 정리했던 각 테이블과 설명 지난 팀 프로젝트를 통해 DB 설계의 중요성을 몸소 체감했기 때문에 이번에는 정말로 철저하게 DB 설계를 진행하고 싶었습니다. 먼저 노션을 활용하여 각 테이블과 필요한 컬럼을 보기 좋게 정리하는 과정을 가졌습니다. 노션은 수정하기도 편리해서 여러 번 수정하며 고민해보는 시간을 많이 가졌습니다! 2️⃣ 2차 설계 노션에 정리해둔 문서와 지난 번 게시글에 올렸었던 1차 설계본을 기반으로 이번엔 MySQL을 사용해 2차 설계를 했습니다. 수정, 보완된 점이 몇 개 있는데요, 각 테이블의 PK 데이터타입을 INT & AI로 수정 AI는 Auto Increment의 줄임말으로서 자동 증가된다는 뜻입니다. 새로운 레코드가 추가될 때마다 자동으로 증가하여 고유한 값이 부여되므..
Repository & Service 초기 작성
·
Project 댕린이집
1️⃣ Repository @Repository Spring에서 이 인터페이스를 빈으로 등록하려는 것을 나타낸다. UserRepository Interface JpaRepository를 확장한다. UserEntity : 이 리포지토리가 관리하는 entity를 의미한다. Long : 해당 entity의 기본 키 PK의 타입을 의미한다. JpaRepository Spring Data JPA의 일반적인 리포지토리 인터페이스 이다. 여러 JPA 관련 CRUD 메서드를 제공한다. JpaRepository 인터페이스를 상속받는 인터페이스를 정의하면, 해당 인터페이스를 구현하는 클래스는 JPA에서 제공하는 메서드들을 사용할 수 있다. 즉, JpaRepository를 사용하면 복잡한 JDBC 코드를 작성하지 않아도 간..
Entity 수정
·
Project 댕린이집
1️⃣ PK·FK는 not null 설정 삭제 2️⃣ comment table 수정 ( 실수 ) comment table에 PK로 잘못지정되어있던 boardId를 PK 지정 취소함 그러므로 복합기본키 필요없음 ⇒ 코드 수정함 @Column(name = "boardId") private Long boardId; 3️⃣ 이미지 첨부 방법 변경 수정 전 : BLOB 데이터 타입을 위해 @LOB 어노테이션을 사용했었다. 수정 후 : URL과 확장자를 사용 하는 방법으로 수정 서버에 이미지를 저장하고 ⇒ 저장한 경로를 데이터베이스에 저장한다. 실제로 이미지를 가져올 때 데이터베이스에 있는 이미지 경로를 서버에서 찾아 이미지를 뿌려준다. 그래서 데이터타입을 BLOB으로 할 필요가 없다. 경로와 확장자 컬럼을 사용하..
Entity 작성
·
Project 댕린이집
1️⃣ Entity 란? JPA를 사용해 데이터베이스의 테이블과 매핑되는 자바 클래스 이를 통해 데이터베이스와의 상호작용을 객체 지향적인 방식으로 처리할 수 있음 기본 생성자 필수 👉 JPA의 구현체 ( hibernate ) 가 지원하는 다양한 기능을 사용하기 위함 2️⃣ Hibernate entity 매핑하기 @Entity(name = "YourEntityName") : 객체와 테이블 매핑 클래스가 엔터티임을 나타내며 데이터베이스 테이블에 매핑된 영속성 클래스임을 나타낸다. @Entity가 붙은 클래스는 JPA가 관리하는 것으로, 엔티티라고 불린다. 속성 Name : JPA에서 사용할 엔티티 이름을 지정 @Id : 기본 키 매핑 엔티티 클래스의 주요 키(primary key)를 나타내기 위해 사용. 엔..
Controller 기본 설정
·
Project 댕린이집
1️⃣ @RestController @RestController는 Spring Framework에서 제공하는 어노테이션 중 하나로, RESTful 웹 서비스의 엔드포인트를 처리하는 컨트롤러 클래스를 정의할 때 사용된다. @Controller와 @ResponseBody를 합친 역할을 수행하며, JSON 또는 XML 형식의 데이터를 반환할 때 주로 사용 된다. 일반적인 View 렌더링이 아닌 직접 데이터를 HTTP 응답의 본문으로 반환하는 RESTful API를 개발할 때 주로 선택 된다. @Controller 란? Spring Framework에서 제공하는 어노테이션 중 하나로, 웹 애플리케이션에서 사용자의 요청을 처리하는 컨트롤러 클래스를 정의할 때 사용된다. 이 어노테이션은 주로 View를 반환할 때 ..
DAY25 시뮬레이션, 조건문, 수학
·
프로그래머스/0단계
1️⃣ 문자열 밀기 문제 설명 문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0
xoo | 수진