Read: 할 일 리스트 렌더링 하기 Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 페이지에 렌더링 할 수 있다. 배열을 리스트로 렌더링하기 배열 todo를 TodoList 컴포넌트에 Props로 전달한다. (...) function App() { (...) return ( ); } export default App; map을 이용한 HTML 반복하기 TodoList 컴포넌트에서 배열 메서드 map을 이용해 HTML 요소를 반복해 렌더링 한다. import TodoItem from "./TodoItem"; import "./TodoList.css"; const TodoList = ({ todo }) => { // Props를 구조 분해 할당한다. return ( Todo List ..

23-24/React.js 2 2023. 12. 23. 01:13

애플리케이션의 비즈니스 로직이 올바르게 동작하려면 데이터를 사전 검증하는 작업이 필요합니다. 이것을 유효성 검사 또는 데이터 검증이라고 부릅니다. 10장에서는 이 같은 유효성 검사 방법을 알아보겠습니다. 10.1 일반적인 애플리케이션 유효성 검사의 문제점 계층별 유효성 검사는 검증 로직이 각 클래스별로 분산되어 있어 관리가 어렵습니다. 검증 로직에 중복이 많을 수 있습니다. 검증해야 할 값이 많다면 코드가 길어집니다. 이런 다양한 문제로 코드가 복잡해지고 가독성이 떨어집니다. 이 같은 문제를 해결하기 위해 자바 진영에서는 2009년부터 Bean Validation이라는 데이터 유효성 검사 프레임워크를 제공합니다. Bean Validation은 어노테이션을 통해 다양한 데이터를 검증하는 기능을 제공합니다...

23-24/Spring 2 2023. 12. 23. 01:12

10.1 일반적인 애플리케이션 유효성 검사의 문제점 계층별로 진행하는 유효성 검사는 검사 로직이 각 클래스별로 분산되어 있어 관리가 어려움 검증 로직에 중복이 많아 여러 곳에 유사한 기능의 코드가 존재할 수 있음 만약 검증해야 할 값이 많다면 코드가 길어짐 => 코드가 복잡해지고 가독성이 떨어짐 위와 같은 문제 해결을 위해 'Bean Validation'이라는 데이터 유효성 검사 프레임워크를 제공하기 시작함 10.2 Hibernate Validator Hibernate Validator란? : Bean Validation 명세의 구현체 Hibernate Validator는 JSR-303명세의 구현체로서 도메인 모델에서 어노테이션을 통한 필드값 검증을 가능하도록 함 10.3 스프링 부트에서의 유효성 검사 ..

23-24/Spring 3 2023. 12. 22. 22:16

Read : 할 일 리스트 렌더링하기 CRUD의 두 번째 요소인 Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 페이지에 렌더링 가능하다. 배열을 리스트로 렌더링하기 1. App컴포넌트의 state변수 todo에 저장된 할 일 아이템들을 Props로 TodoList 컴포넌트에 전달한다. //App.js (...) function App() { const [todo, setTodo] = useState(mockTodo); (...) return ( ** ); } export default App; 2. TodoList 컴포넌트에서 todo를 리스트로 렌더링한다. 📌 리액트에서 배열 데이터를 렌더링하는 법 => 배열 메서드 map을 이용하면 HTML 또는 컴포넌트를 순회하면서 매 요소를..

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

10. 유효성 검사와 예외처리 10-1. 개요 애플리케이션의 비즈니스 로직이 올바르게 동작하려면 데이터를 사전 검증하는 작업이 필요하다. 이것을 유효성 검사 또는 데이터 검증이라 부른다. 유효성 검사의 예로는 여러 계층에서 들어오는 데이터에 대해 의도대로 값이 들어오는지 체크하는 과정이 있다. 이 같은 유효성 검사(validation)는 프로그래밍에서 매우 중요한 부분이며, 자바에서 가장 신경 써야 하는 것 중 하나로 NullPointException 예외가 있다. 일반적인 애플리케이션 유효성 검사의 문제점 일반적으로 사용되는 데이터 검증 로직에는 몇 가지 문제점이 있다. 계층별로 진행하는 유효성 검사는 검증 로직이 각 클래스별로 분산돼 있어 관리하기가 어렵다. 그리고 검증 로직에 의외로 중복이 많아 여..

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

프로젝트 구조 갖추기 - 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 등의 기능이 있는 SNS 서비스를 만들어 본다. - npm init 명령어를 콘솔에서 호출하거나, 직접 package.json을 작성한다. - scripts 부분에 start 속성으로 "nodemon app"을 작성한다. $ npm i sequelize mysql2 sequelize-cli $ npx sequelize init - 콘솔에 다음을 입력하여 MySQL을 사용한다. - views 폴더, routes 폴더, public 폴더 passport 폴더를 만든다. - app.js와 .env 파일을 만든다. $ npm i express cookie-parser express-session morgan multer do..

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

​ 🌟10장 키워드🌟 라우터 JWT 토큰 서버 시크릿키 10장 웹 API 서버 만들기 10.1 API 서버 이해하기 API: Application Programming Interface. 다른 애플리케이션에서 현재 프로그램의 기능 사용 가능하게 하는 접점 웹 API: 다른 웹 사버스의 기능을 사용하거나 자원을 가져올 수 있는 창구. 제한: 사용자의 인증 유무, 가져간 횟수 등을 기준으로 제한을 둘 수 있음. 웹 API 서버: 서버에 API를 올려서 URL을 통해서 접근할 수 있게 만든 것. 크롤링: 웹사이트가 자체적으로 제공하는 API가 없거나, 이용에 제한에 있을 때 사용하는 방법. 웹 사이트의 정보를 일정 주기로 수집해 자체적으로 가공하는 기술. 하지만 웹사이트에서 직접 제공하는 API는 아님. 법적..

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

Read: 할 일 리스트 렌더링하기 배열을 리스트로 렌더링하기 App 컴포넌트의 State 변수 todo에는 배열 형태로 여러 개의 할 일 아이템이 저장되어 있습니다. 배열 todo를 TodoList 컴포넌트에 Props로 전달합니다. (...) function App() { (...) return ( ); } export default App; TodoList 컴포넌트에서는 App에서 Props로 전달된 todo를 리스트로 렌더링해야 합니다. 리액트에서 배열 데이터를 렌더링할 때는 배열 메서드 map을 주로 이용합니다. map을 이용하면 HTML 또는 컴포넌트를 순회하면서 매 요소를 반복하여 렌더링합니다. map을 이용한 HTML 반복 TodoList 컴포넌트에서 배열 메서드 map을 이용해 HTML ..

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

연관관계 매핑 종류와 방향 연관관계를 맺는 두 엔티티 간에 생성할 수 있는 연관관게의 종류는 총 4가지다. One To One: 일대일(1:1) One To Many: 일대다(1:N) Many To One: 다대일(N:1) Many To Many: 다대다(N:M) 데이터베이스: 외래키를 통해 서로 조인, 참조 JPA: 엔티티 간 참조 방향 설정 가능 데이터베이스와 관계를 일치시키기 위해 양방향으로 설정해도 무관하지만, 비즈니스 로직의 관점에서는 단방향 관계만 설정해도 해결되는 경우가 많다. 연관관계가 설정되면 다른 테이블의 기본값을 외래키로 갖게 됩니다. 이때 쓰이는 것이 주인(Owner)라는 개념이다. 일반적으로 외래키를 가진 테이블이 그 관계의 주인이 된다. 주인은 외래키를 사용 가능하나 상대 엔티티..

23-24/Spring 1 2023. 12. 20. 23:58

🌟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