🌟9장 키워드🌟 컨트롤러 라우터와 미들웨어 Passport 카카오 로그인 multer 📍 MySQL과 Passport를 이용해 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 기능이 있는 SNS 서비스를 제작 9.1 프로젝트 구조 갖추기 $ npm init $ npm i sequelize mysql2 sequelize-cli $ npx sequelize init package.json 생성 후 시퀄라이즈를 설치 📌 컨트롤러 exports.renderProfile = (req, res) => { res.render('profile', { title: '내 정보 - NodeBird' }); }; exports.renderJoin = (req, res) => { res.render('join',..

23-24/Node.js 2 2023. 12. 1. 10:00

RDBMS를 사용할 때는 테이블 하나만 사용해서 애플리케이션의 모든 기능을 구현하기란 불가능합니다. 대체로 설계가 복잡해지면 각 도메인에 맞는 테이블을 설계하고 연관관계를 설정해서 조인(Join) 등 의 기능을 활용합니다. JPA를 사용하는 애플리케이션에서도 테이블의 연관관계를 엔터티 간의 연관관계로 표현할 수 있습니다. 다만 객체와 테이블의 성질이 달라 정확한 연관관계를 표현할 수는 없습니다. 이번 장에서는 JPA에서 이러한 제약을 보완하면서 연관관계를 매핑하고 사용하는 방법을 알아보겠습니다. 9.1 연관관계 매핑 종류와 방향 연관관계를 맺는 두 엔티티 간에 생성할 수 있는 연관관계의 종류는 다음과 같습니다. One To One : 일대일 One To Many : 일대다 Many To One : 다대일..

23-24/Spring 2 2023. 12. 1. 10:00

프로젝트 준비하기 요구사항 분석하기 오늘의 날짜를 요일, 월, 일, 연도 순으로 표시한다. → Header To do를 작성하는 입력 폼이 있고, 추가 버튼을 클릭하면 할 일 아이템 생성한다. → TodoEditor 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일 추출 가능하다. → TodoList 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 토글 하는 체크박스, 아이템 이름, 등록 날짜, 삭제 버튼으로 구성한다. → TodoItem *토글: 디지털 신호가 1 또는 0을 되풀이하는 상태 (이 일을 마쳤는지 아닌지) 리액트 앱 만들기 폴더 만들기 → CORNERSTUDY/week910 npx create-react-app . 불필요한 파일과 코드 삭제하기..

23-24/React.js 3 2023. 12. 1. 10:00

9. 연관관계 매핑 9.1 연관관계 매핑 종류와 방향 9.1.1 연관관계를 맺는 두 엔티티 간에 생성할 수 있는 연관관계의 종류 One To One : 일대일 One To Many : 일대다 Many To One: 다대일 Many To Many: 다대다 공급 업체 입장에서 보면 한 가게에 납품하는 상품이 여러 개 있을 수 있으므로 상품 엔티티와는 일대다 관계 상품 입장에서 보면 하나의 공급업체에 속하게 되므로 다대일 관계 어떤 엔티티를 중심으로 연관 엔티티를 보느냐에 따라 연관관계의 상태가 달라짐 데이터베이스에서는 두 테이블의 연관관계를 설정하면 "외래키"를 통해 서로 조인해서 참조하는 구조로 생성 JPA를 사용하는 객체지향 모델에서는 엔티티 간 참조 방향을 설정 데이터베이스와 관계를 일치시키기 위해 양..

23-24/Spring 3 2023. 12. 1. 10:00

1. 프로젝트 준비하기 기능 오늘의 날짜를 요일, 월, 일, 연도순으로 표시한다. 할 일(Todo)을 작성하는 입력 폼이 있고, 버튼을 클릭하면 할 일 아이템을 생성한다. [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출할 수 있다. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 그리고 버튼으로 이루어져 있다. [할 일 관리] 앱의 UI 요소의 컴포넌트 Header: 오늘의 날짜를 표시 형식에 맞게 보여 준다. TodoEditor: 새로운 할 일 아이템을 등록한다. TodoList: 검색어에 맞게 필터링된 할 일 리스트를 렌더링한다. (만약 검색 폼이 공백이면 필터링하지 않는다.) ..

23-24/React.js 2 2023. 12. 1. 10:00

프로젝트 준비하기 요구사항 분석하기 [할 일 관리] 앱의 기능들 오늘의 날짜를 요일, 월, 일, 연도순으로 표시합니다. 할일 (Todo)을 작성하는 입력 폼이 있고 버튼 클릭시 할 일 아이템 생성합니다. 생성한 아이템을 페이지 하단에 리스트로 표시하며 키워드 검색으로 원하는 할 일만 추출할 수 있습니다. 리스트로 표시하는 낱낱의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스, 아이템 이름, 등록 날짜, 버튼으로 이루어져 있습니다. [할 일 관리] 앱의 UI 요소를 컴포넌트 단위로 나누기 Header :오늘의 날짜를 표시 형식에 맞게 보여 줍니다. TodoEditor : 새로운 할 일 아이템을 등록 TodoList : 검색어에 맞게 필터링된 할 일 리스트를 렌더링하며 검색 폼이 공백이면 필터링하지..

23-24/React.js 1 2023. 12. 1. 10:00

1. NoSQL(Not only SQL) - SQL을 사용하지 않는 데이터베이스이다. - NoSQL에는 고정된 테이블이 없다. - NoSQL에는 대표적으로 몽고디비가 있다. 1) 몽고디비의 특징 - 자유로운 데이터 입력이 가능하다. - 컬렉션 간 JOIN을 미지원한다. - 확장성, 가용성이 뛰어나다 2. 데이터베이스 및 컬렉션 생성하기 - nodejs라는 이름의 데이터베이스와 MySQL 테이블에 상응하는 컬렉션을 만들기 1) 데이터베이스 생성 - 데이터베이스를 만드는 명령어는 use [데이터베이스명]이다. use nodejs - 컬렉션은 따로 생성할 필요가 없다. 다큐먼트를 넣는 순간 컬렉션도 자동으로 생성된다. - 직접 컬렉션을 생성하는 명령어 > db.createCollection('users') {..

23-24/Node.js 1 2023. 12. 1. 10:00

이번 스터디 정리글에서는 Spring Data JPA에 대해서 다뤄 보려고 한다. 8.1 프로젝트 생성 이전 6장에서 학습한 코드를 가져와서 사용할 예정이며 JPA의 기능에 대해 살펴 보기 위해 spring initializer 등을 통해 프로젝트를 생성해 준다. 8.2 JPQL JPQL은 JPA Query Language로 JPA에서 사용하는 쿼리이다. JPQL는 SQL과 상당히 유사하지만 SQL과 다른 점은 테이블과 칼럼을 사용하는 대신 엔티티 객체에 대한 이름과 필드의 이름을 사용한다는 점이다. SELECT p FROM Product p WHERE p.number = ?1; Product는 엔티티 타입이다. p.number는 엔티티 속성이다. 8.3 쿼리 메서드 살펴보기 리포지토리는 기본적으로 Jp..

23-24/Spring 1 2023. 11. 24. 13:06

0. Hooks 함수형 컴포넌트: state 사용 불가 / Lifecycle에 따른 기능 구현 불가 / Hooks 클래스 컴포넌트: 생성자에서 state를 정의 / setState() 함수를 통해 state 업데이트 / Lifecycle methods 제공 Hooks: 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. (실습을 진행하기 위해 Create React App으로 새로운 앱을 생성한다.) 1. useState 가장 기본적인 Hook, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용한다. 1. useState 이용해서 숫자..

23-24/React.js 2 2023. 11. 24. 10:00

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. useState 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 위의 코드에서는 0을 넣어 주었는데, 이는 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출..

23-24/React.js 1 2023. 11. 24. 10:00

MySQL 시작하기 PS C:\Program Files\MySQL\MySQL Server 8.2\bin> 경로로 이동 책의 경우 콘솔에 mysql -h localhost -u root -p를 입력하라 하였으나 ./mysql -h localhost -u root -p를 입력해야 제대로 로그인이 됐다. - mysql -h 뒤에는 접속할 주소 - -u 뒤에는 사용자 이름 -p는 비밀번호를 사용하겠다는 뜻 프롬프트가 mysql>로 바뀌었다면 접속된 것이고, 다시 콘솔로 돌아가려면 exit 명령어를 입력한다. 데이터베이스 생성하기 데이터베이스를 생성하는 명령어이며 가급적 예약어는 대문자로 쓰는 것이 좋다, 데이터베이스와 스키마는 같은 개념이다. CREATE SCHEMA [데이터베이스명] CREATE SCHEMA ..

23-24/Node.js 1 2023. 11. 24. 10:00

Spring Data JPA JPQL JPQL이란 JPA Query Language의 줄임말, JPA에서 사용할 수 있는 쿼리. 문법은 SQL과 매우 비슷하다. SQL과의 차이점은 SQL에서는 테이블이나 컬럼의 이름을 사용하는 것과 달리 JPQL은 다음과 같이 엔티티 객체를 대상으로 수행하는 쿼리이기에 매핑된 엔티티의 이름과 필드의 이름을 사용한다는 것이다. SELECT p FROM Product(엔티티 타입) p WHERE p.number(엔티티 속성) = ?1; 쿼리 메서드 리포지토리는 JpaRepository를 상속받는 것만으로도 다양한 CRUD 메서드 제공. 하지만 이러한 기본 메서드들은 식별자 기반으로 생성되기에 별도의 메서드를 정의하는 경우가 많음. 이때 간단한 쿼리문 작성을 위해 사용되는 것..

23-24/Spring 3 2023. 11. 24. 10:00