카운터 앱 만들기 요구사항 분석하기 현재의 카운트를 표시: 따라서 이 영역의 이름을 뷰어(Viewer) 라고 하겠습니다. 카운트를 늘리거나 줄일 수 있는 6개의 버튼: 카운트를 제어하는 영역이라는 의미에서 컨트롤러(Controller)라고 이름 붙이겠습니다. 컴포넌트 단위로 생각하기 리액트에서 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요합니다. 앞에서 살 펴본 Viewer, Controller 영역을 일종의 컴포넌트라고 생각하는 겁니다. [카운 터] 앱에는 3개의 컴포넌트가 있습니다. App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트: 현재의 카운트를 표시함 Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공함 “하나의 컴포넌트는 단..

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

1. 이벤트 처리하기 이벤트 : 웹 페이지에서 일어나는 사용자의 행위이다. ex) 버튼 클릭, 페이지 스크롤, 새로고침 등 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이다. ex) 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시 function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } return ( 클릭하세요 ); } export default Body; 이벤트 핸들러 표기에서 HTML은 onclick이지만 리액트는 카멜 케이스 문법에 따라 onClick으로 표기한다. Props로 전달할 값을 지정할 때처럼 onClick={} 문법으로 이벤트 핸들러를 설정한다. 이벤트 핸들러를 설정할 때는 함수 호출의 결괏..

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

🌟6장 키워드🌟 웹 서버 프레임워크 익스프레스 미들웨어 라우터와 에러 핸들러 start속성 익스프레스 : npm에 있는 웹 서버 프레임워크로, 서버 제작과정에서 겪는 불편함 (4장 참고, 불편한 코드 보기와 확장성) 해소와 편의 기능 추가를 위해 만들어졌다. 특징 : http 모듈의 요청과 응답 객체에 추가 기능들을 부여. : 기존 메서드 + 편리한 메서드 추가 : 코드 분리하기 쉽게 만들어 관리 용이 : if문을 이용한 요청 메서드와 주소구별 X : 많은 사람이 사용하기에 버그가 적고, 기능 추가나 유지 보수가 활발함 익스프레스 외의 웹 프레임 워크 : koa, hapi (사용량이 익스프레스에 비해 적음) 6.1. 익스프레스 프로젝트 시작하기 익스프레스 프로젝트 실습 과정에 대해 설명한다. 실습을 진행..

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

데이터베이스 연동 프로젝트 생성 버전: 2.5.6 groupId: com.springboot name: jpa artifactId:jpa -라이브러리 설정 Developer Tools: Lombok, Spring Configuration Processor Web: Spring Web SQL: Spring Data JPA, MariaDB Driver -위와 같은 과정이 끝나면 Swagger 의존성을 pom.xml에 추가 작성해놓았던 소스코드(config/SwaggerConfiguration.java)와 리소스 파일(logback-spring.xml)을 가져옴 *SwaggerConfiguration 파일을 그대로 복사하면 api() 메서드 내의 basePackage가 일치하지 않아 오류가 남 ->아래와 같이..

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

저번 주차에 이어 데이터베이스 사용에 대해 알아보겠습니다. 6.6 데이터베이스 연동 5장과 동일하게 프로젝트를 생성합니다. ArtifactId와 name은 'jpa'로 설정하고, 라이브러리는 사진과 같이 Lombok, Spring Web, Spring Data JPA, MariaDB Driver, Spring Configuration Processor를 선택하여 받아줍니다. 또한 5.6절에서 진행했던 Swagger 설정을 해줍니다. // jpa/pom.xml ... io.springfox springfox-swagger2 2.9.2 io.springfox springfox-swagger-ui 2.9.2 ... // config/SwaggerCofiguration.java @Configuration @En..

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

엔티티 설계 Spring Data JPA를 사용하면 데이터베이스에 테이블을 생성하기 위해 직접 쿼리를 작성할 필요가 없다. 이 기능을 가능하게 하는 것이 엔티티이다. JPA에서 엔티티는 데이터베이스의 테이블에 대응하는 클래스이다. 엔티티에는 데이터베이스에 쓰일 테이블과 칼럼을 정의한다. 엔티티에 어노테이션을 사용하면 테이블 간 연관관계를 정의할 수 있다. 아래 테이블은 코드로 간단하게 엔티티 클래스로 구현할 수 있다. data.entity 패키지를 생성하고 그 안에 Product엔티티 클래스를 생성한다. package com.springboot.jpa.data.entity; import javax.persistence.*; import java.time.LocalDateTime; @Entity @Tabl..

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

4장 http 모듈로 서버 만들기 4.1 요청과 응답 이해하기 - 클라이언트에서 서버로 요청을 보내고, 서버에서는 요청의 내용을 읽고 처리한 뒤 클라이언트에 응답을 보낸다. - 서버 : 요청을 받는 부분과 응답을 보내는 부분이 있다. -> 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해두어야 한다. 1) 이벤트 리스너를 가진 노드 서버 const http = require('http'); http.createServer((req, res) => { // 여기에 어떻게 응답할지 적는다. }); - http 서버가 있어야 웹 브라우저의 요청을 처리할 수 있으므로 http 모듈을 사용한다. - http 모듈에는 createServer 메서드가 있다. - 메서드의 인수로는 콜백..

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

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위를 말한다. 이벤트의 예로 버튼 클릭, 페이지 스크롤, 새로고침 등이 있다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링은 이벤트가 발생했을 때 특정 코드가 동작하도록 만드는 작업이다. 다음은 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시하도록 만든 이벤트 핸들링의 예시이다. // Body.js function Body() { function handleOnclick(){ //함수 handleOnClick 선언 alert("버튼을 클릭하셨군요!"); // 경고 대화상자 표시하도록 함 } return ( //버튼 생성하고 클릭시 이벤트를 처리하는 이벤트 핸들러 함수 handleOnClick 호출함 클릭하세요 ); } export defaul..

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

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위로 버튼 클릭, 페이지 스크롤, 새로고침 등의 행위에 해당합니다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업 이벤트 핸들러 : 이벤트를 처리하는 함수 ex. 리액트 사용하지 않고 HTML과 자바스크립트만으로 이벤트를 핸들링 Click Me! 함수 handleOnClick ⇒ 이벤트를 처리하는 함수로 이벤트 핸들러입니다. 리액트의 이벤트 핸들러 ex. Body 컴포넌트에 버튼 하나 만들고 버튼을 클릭하는 이벤트가 발생하면 실행되는 이벤트 핸들러를 만듭니다. function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } // 함수..

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

1. 컴포넌트 리액트 앱 만들기 문서(Documents) 폴더 아래에 chapter5 폴더를 만든 다음 비주얼 스튜디오 코드에서 생성한 폴더를 연다. 단축키 +를 눌러 터미널을 열고, 다음 명령어로 새로운 리액트 앱을 만든다. npx create-react-app . 사용하지 않는 파일 삭제하기: 혼동을 피하고자 src 폴더에서 실습에 사용하지 않을 파일 일부를 제거한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js 이 파일들은 Create React App이 자동으로 생성한 파일들로 테스트 코드를 작성하거나 리액트 앱의 성능을 살필 때 사용한다. 진행할 실습에서는 사용하지 않으므로 삭제한다. 사용하지 않을 코드 삭제하기: C..

23-24/React.js 2 2023. 11. 3. 17:35

데이터 베이스 연동 마리아 DB 설치 애플리케이션은 데이터를 주고 받는 것이 주 목적 정상적으로 로직이 동작하기 위해서는 데이터베이스(DB)가 반드시 필요하고, 그 중 가장 널리 사용되는 마리아 DB를 사용할 예정 마리아 DB 다운로드 페이지(https://mariadb.org/download) 에서 다운 가능 해당 사진과 같이 버전을 10.6.5로 맞추는 것이 좋음. Display older releases를 체크하면 이전 버전을 선택할 수 있음 Next를 눌러 설치를 진행 해당 화면이 나오면 root 계정의 비밀번호를 생성 실무에서는 보안상 root 패스워드는 사용하지 않지만, 실습에서는 사용 문자 인코딩 방법을 UTF-8을 기본값으로 설정하기 위해 아래도 체크 서버 이름과 포트 번호를 설정 포트 번..

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

🌟5장 키워드🌟 npm npx package.json 패키지 버전 x.x.x 1. npm 알아보기 Node Package Manager npm에 업로드된 노드 모듈을 패키지라고 부른다. NPM 대체자 yarn : 페이스북에서 개발, React 또는 React Native 등 페이스북 진영의 프레임워크 사용 시 볼 수 있음 pnpm : npm의 성능을 개선한 패키지 매니저 2. package.json으로 패키지 관리하기 설치한 패키지의 버전을 관리하는 파일 노드 프로젝트를 시작하기 전, 폴더 내부에 무조건 package.json을 만들고 시작 package.json을 만드는 초기화 명령어 npm init package.json 파일 구조 { "name": "npmtest", "version": "0.0.1..

23-24/Node.js 2 2023. 11. 3. 10:01