지난 시간까지는 TodoEditor 컴포넌트를 활용하여 할 일을 추가하는 단계까지 구현해 보았다. 지난번에 만들었던 컴포넌트를 이용하여 이번에는 할 일 리스트를 렌더링하고 수정하며, 마지막으로 삭제하는 단계까지 구현하여 할 일 관리 앱을 완성하여 본다.1. Read: 할 일 리스트 렌더링하기 먼저, TodoList 컴포넌트의 기능이면서 CRUD의 두 번째 요소인 Read 기능을 만들어보자. Read 기능을 이용하여 배열에 저장한 여러 할 일 아이템을 반복하여 렌더링할 수 있다. [ 배열을 리스트로 렌더링 ]App 컴포넌트의 State 변수 todo는 배열 형태로 여러 개의 할 일 아이템을 저장한다. 따라서 배열 todo를 TodoList 컴포넌트에 Props로 다음과 같이 전달한다.(...)functio..

24-25/React.js 2 2025. 1. 3. 11:33

🌟키워드:  npm 패키지, 컨트롤러, 관계, Passport 모듈, multer 패키지    1. 프로젝트 구조 갖추기 npm initnpm i sequelize mysql2 sequelize-clinpx sepuelize initnpm init을 호출하면 package.json을 생성함npm i를 호출하면 node_modules 폴더와 package-lock.json이 생성됨npm sequelize init를 호출하면 config, migrations, models, seeders 폴더가 생성됨추가로 필요한 npm 패키지들을 설치하고 app.js를 작성  2.  컨트롤러exports.renderProfile = (req, res) => { res.render('profile', { title: '..

24-25/Node.js 2 2025. 1. 3. 11:21

1. JPQL- JPA Query Language으로 JPA에서 사용할 수 있는 쿼리를 의미한다. - SQL문과의 차이점은 SQL은 테이블이나 칼럼의 이름을 사용하지만 JPQL은 매핑된 엔티티의 이름과 필드를 사용한다.    2. 쿼리 메서드 2.1. 쿼리 메서드 생성- 쿼리 메서드는 동작을 결정하는 주제(Subject)와 검색 및 정렬 조건 지정하는 영역인 서술어(Predicate)로 구분한다. - 리포지토리는 JpaRepository를 상속받는 것만으로도 다양한 CRUD 메서드를 제공 하지만 기본 메서드들은 식별자 기반    으로 생성되므로 쿼리 메서드와 같이 별도의 메서드를 정의해서 사용한다. - 쿼리 주제 : ‘find…By’, ‘exists…By’, ‘get…By’와 같은 키워드- 서술어의 시작..

24-25/Spring 2 2025. 1. 3. 10:00

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

24-25/Spring 1 2025. 1. 3. 10:00

📌 이번 장에서는 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 등의 기능이 있는 SNS 서비스를 만든다.9.1. 프로젝트 구조 갖추기다음과 같이 앱명인 'nodebird'라는 이름으로 폴더를 만들고 package.json을 생성한다.시퀄라이즈도 설치한다.$ npm init$ npm i sequelize mysql2 sequelize-cli$ npx sequelize init 다음과 같이 폴더의 구조를 갖춘다.nodebird> config> migrations> models> node_modules> passport> public> routes> seeders> views.envapp.js{ } package-lock.json{ } package.json 그다음, 필요한 npm 패키지를..

24-25/Node.js 1 2025. 1. 3. 10:00

저번 할 일 관리 앱 만들기- 할 일 추가하기에 이어서 이번에는 할 일 리스트를 렌더링, 수정, 삭제 하는 법에 대해 알아보도록 하겠다. 1. Read: 할 일 리스트 렌더링하기 Read 기능을 이용하면 배열에 저장한 할 일 아이템을 여러 개 반복해서 페이지에 렌더링할 수 있다. 배열 todo를 TodoList 컴포넌트에 Props로 전달한다.TodoList />TodoList todo={todo}/>  TodoList 컴포넌트에서는 App에서 Props로 전달된 todo를 리스트로 렌더링해야 한다. 이때 배열 메서드 map을 이용해서 HTML이나 컴포넌트를 순회하면서 매 요소를 반복하며 렌더링할 수 있다.  아래는 배열 메서드 map을 이용해서 HTML 요소를 반복해 렌더링한 코드이다. 을 삭제하고 m..

24-25/React.js 1 2025. 1. 3. 10:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 이번 정기 콘텐츠는 Team 오아시스의 OWASP Top 10에 대한 이야기인데요,  OWASP가 발표하는 웹 어플리케이션 취약점에 대해 알아봅시다!

Corner 코너 2025. 1. 2. 14:42

S.E.O● 작성자루나 ● 게임명S.E.O ● 게임 소개장르 : 3D 스텔스 어드벤처시점 : 3인칭 or 1인칭 플랫폼 : PC엔진 : Unity ● 게임 시놉시스공포 특집 촬영을 위해 선택된 폐허 한 곳을 답사하러 온 주인공.답사를 시작한 지 얼마 지나지 않아 발을 헛디뎌 기절하고 만다.눈을 뜬 순간, 폐허 주위에 가득한 로봇들.이곳은 사람의 손길은 끊긴채 로봇에 의해 지배된 건물이었다.다행히 로봇은 어둠에 약하며 알 수 없는 이유로 폐허를 벗어나지 못한다는 사실을 확인했다.과연 주인공은 로봇의 감시를 뚫고 이 위험한 폐허에서 탈출할 수 있을까? ● 레퍼런스Little Nightmares, Hello Neighbor ● 게임 설명해당 게임은 주위 로봇을 피해 열쇠를 획득하고 탈출을 목표로 하는 게임이다..

24-25/Untiy 2024. 12. 31. 20:15

테스트 코드를 작성하는 이유 개발 과정에서 문제를 미리 발견할 수 있다리팩토링의 리스크가 줄어든다애플리케이션을 가동해서 직접 테스트하는 것보다 테스트를 빠르게 진행할 수 있다하나의 명세 문서로서의 기능을 수행한다몇 가지 프레임워크에 맞춰 테스트 코드를 작성하면 좋은 코드를 생산할 수 있다코드가 작성된 목적을 명확하게 표현할 수 있으며, 불필요한 내용이 추가되는 것을 방지한다. 테스트  기준은 여러 기준으로 분류할 수 있고ㅡ 테스트 대상 범위를 기준으로 구분하면 크게 단위 테스트, 통합 테스트로 구분된다.   테스트 코드를 작성하는 방법 Given-When-Then 패턴불필요하게 코드가 길어지므로 간단한 테스트로 여겨지는 단위 테스트에서는 잘 사용하지 않는다.명세 문서의 역할을 수행한다는 측면에서 많은 도..

24-25/Spring 2 2024. 12. 27. 10:00

1. 프로젝트 준비하기 첫 번째 프로젝트 카운터 앱에 이어서 두 번째 프로젝트로 할 일 관리 앱을 만들자.이 프로젝트에서는 요구사항 분석, UI, 기능 구현의 흐름을 이해하는 것이 목표다.또한, CRUD 기능 구현이란 무엇인지 이해해 보자.   [ 요구사항 분석 ]  프로젝트1 카운터앱을 준비할 때와 마찬가지로 앱의 요구사항을 분석하고, 이를 토대로 필요한 기능을 하나씩 구현해 보자.  아래는 할 일 관리 앱을 최종적으로 구현한 모습이다. 이처럼 할 일 관리 앱에는 다음과 같은 기능이 있다!오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일을 작성하는 입력 폼버튼 클릭 시 할 일 아이템을 생성하는 추가 기능생성한 아이템을 페이지 하단에 표시하는 리스트원하는 할 일만 추출할 수 있는 리스트할 일을 마쳤는..

24-25/React.js 2 2024. 12. 27. 10:00

🌟키워드: 몽고디비, 컴퍼스, 데이터베이스, CRUD, 몽구스  1. 몽고디비- mongoDB : 자바스크립트 문법 사용- NoSQL vs SQLmongoDB는 NoSQL의 대표적인 데이터베이스 NoSQL:- 고정된 테이블이 없다. 컬럼을 따로 정의하지 않고 그냥 users 컬렉션을 만들고 끝이다. users컬렉션에는 어떠한 데이터든 들어갈 수 있다.- JOIN 기능이 없으며, 하나의 쿼리로 여러 테이블을 합치는 작업이 항상 가능하지는 않다. 동시에 쿼리를 수행하는 경우 쿼리가 섞여 예상치 못한 결과를 낼 가능성이 있다.→ But, 몽고디비는 확장성과 가용성 때문에 사용한다. → 데이터의 일관성을 보장해주는 대신 데이터를 빠르게 넣을 수 있고, 쉽게 여러 서버에 데이터를 분산할 수 있다.Example)..

24-25/Node.js 2 2024. 12. 27. 10:00

7. 테스트 코드 작성하기스프링부트 애플리케이션을 개발하면서 테스트 코드를 통해 우리가 개발한 코드를 어떻게 테스트할 수 있는지 알아보겠습니다.  📌 테스트 코드작성한 코드나 비즈니스 로직 자체를 테스트하기 위해 작성한 코드 7.1 테스트 코드를 작성하는 이유- 개발 과정에서 문제를 미리 발견할 수 있다.- 리팩토링의 리스크가 줄어든다.- 애플리케이션을 가동해서 직접 테스트하는 것보다 테스트를 빠르게 진행할 수 있다.- 하나의 명세 문서로서의 기능을 수행한다.- 몇 가지 프레임워크에 맞춰 테스트 코드를 작성하면 좋은 코드를 생산할 수 있다.- 코드가 작성된 목적을 명확하게 표현할 수 있으며, 불필요한 내용이 추가되는 것을 방지한다. 7.2 단위 테스트와 통합 테스트테스트 대상 범위를 기준으로 테스트 방..

24-25/Spring 3 2024. 12. 27. 10:00