얄루의 개발일기🥑

💻본 포스팅은 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 김영한'님의 강의를 듣고 작성되었습니다. https://inf.run/As6W 스프링 DB 1편 - 데이터 접근 핵심 원리 - 인프런 | 강의 백엔드 개발에 필요한 DB 데이터 접근 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 DB 접근 기술의 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., - 강의 www.inflearn.com 목차 1. JDBC 등장 배경 다시 정리 2. JDBC 개발 등록, 조회, 수정, 삭제 3. close() 1. JDBC 등장 배경 다시 정리 JDBC 표준 인터페이스를 구현해서 데이터베이스마다 다른 커넥션 연결, SQL 전달, 결과 응답에 대한 각 다른 것을 통일 시켰..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. UserEntity 구현 2. UserRepository 구현 3. UserService 구현 4. UserDTO 5. UserController 구현 스프링 시큐리티를 사용해서 인증과 인가를 구현하는 방법과 사용자 관리를 하는 방법을 실제 구현을 통해 알아보도록 하자. 1. UserEntity 구현 package com.example.demo.model; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.hi..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. Basic 인증 2. Bearer 인증 3. JSON 웹 토큰 0. 인증과 인가 인증 당신이 누구인가에 관한 문제이다. 신원 확인과 관련된 사항을 생각하면 된다. 인가 당신이 사용할 수 있는 것에 관한 문제이다. 신원이 확인된 사람이 어디까지 사용할 수 있는지를 생각하면 된다. 1. Basic 인증 HTTP는 무상태를 유지한다 했다. 이런 경우 로그인 상태를 유지하는 것을 빼면 무상태 유지를 하는 것이 맞다. 이 무상태 유지를 하는 가장 간단한 방법은 HTTP 요청에 아이디, 비밀번호를 같이 보내는 것이다. 이런 방법을 Basic 인증이라고 한다. Basic 인증의 문제점 ..

💻본 포스팅은 '스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 김영한'님의 강의를 듣고 작성되었습니다. https://inf.run/As6W 스프링 DB 1편 - 데이터 접근 핵심 원리 - 인프런 | 강의 백엔드 개발에 필요한 DB 데이터 접근 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 DB 접근 기술의 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., - 강의 www.inflearn.com 목차 1. JDBC의 등장 배경 2. JDBC와 최신 데이터 접근 기술 1. JDBC의 등장 배경 클라이언트가 애플리케이션 서버를 통해서 데이터를 전달, 저장, 조회 할 때 애플리케이션 서버는 다음과 같이 동작한다. 애플리케이션 서버 동작 커넥션 연결(TCP/IP로 커넥..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. componentDidMount( ) 2. CORS 3. fetch componentDidMount 렌더링이란? 컴포넌트의 상태가 변하면 ReactDOM은 이를 감지하고 변경 부분의 HTML을 바꿔준다. HTML이 업데이트되면 우리는 변경된 결과를 눈으로 확인할 수 있다. 이를 렌더링이라고 한다. 즉 변경된 부분을 우리가 확인하는 것을 '렌더링'이라고 생각하면 된다. 마운팅이란? render() 함수를 불러 자신의 DOM 트리를 구성하는 과정을 마운팅이라고 한다. componentDidMount()는? 마운팅 과정에서 생성자, render() 함수를 부른다. 마운팅을 마친 ..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 삭제 2. 수정 1. 삭제 삭제 기능은 각 리스트 아이템의 오른쪽에 삭제 아이콘을 추가해주어야 한다.(UI 부분) 그 뒤 삭제 버튼을 누르면 아이템이 삭제되는 기능을 추가한다.(이벤트 핸들러 사용 부분) 삭제 아이콘 추가 import React from "react"; import {ListItem, ListItemText, InputBase, Checkbox, ListItemSecondaryAction, IconButton} from '@material-ui/core'; import DeleteOutline from '@material-ui/icons/DeleteOutli..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. 컴포넌트 2. Props와 state 3. material ui를 이용한 디자인 4. 이벤트 핸들러 1. 컴포넌트 Todo 컴포넌트 checkbox와 label을 렌더링하는 컴포넌트 import React from 'react' class Todo extends React.Component { render() { return ( Todo 컴포넌트 만들기 ); } } export default Todo; App컴포넌트에서 Todo 컴포넌트 사용 import React from "react"; class Todo extends React.Component { render() {..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. React.js 2. React 컴포넌트 1. React.js spa 리액트, 앵글러, 뷰는 대중적 SPA 라이브러리/프레임워크다. SPA는 싱글 페이지 애플리케이션의 약자로 한 번 웹페이지를 로딩하면 사용자가 임의로 새로 고침을 하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다. spa의 경우 서버에게 새 HTML을 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션을 싱글 페이지 애플리케이션이라고 하며 이 렌더링 과정을 클라이언트-사이드 렌더링이라고 한다. render() 함수가 동적으로 HTML 엘리먼트를 우리 눈에..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. CRA 버전 오류 해결 방안 https://velog.io/@soonmac/%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-You-are-running-create-react-app-5.0.0-which-is-behind-the-latest-release-5.0.1 [오류해결] You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). Create React App의 글로벌(전역) 설치를 더 이상 지원하지 않을 때 전역 설치를 제거한 후 다시 설치하면 됨 velog.io n..

본 포스팅은 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101 - 김다정'님의 책을 보고 작성되었습니다. 목차 1. Logger 설정 2. HTTP POST를 이용하는 Create REST API 개발 3. HTTP GET를 이용하는 Get REST API 개발 4. HTTP UPDATE를 이용하는 Update REST API 개발 5. HTTP DELETE를 이용하는 DeleteREST API 개발 1. Logger 설정 기존의 출력문을 사용해서 로그를 남길 수 있지만 이 방법은 제한적이다. 그렇기에 우리는 @Slf4j 애노테이션을 사용해 용도에 따라 로그 정보를 남겨주는 방식을 사용할 것이다. 로깅은 웹 서비스에 반드시 필요하며 로깅 없이 디버깅하는 것은 코와 입을 막고 숨을 쉬는 것..