보안 용어 이해 인증 인증(authentication): 사용자가 누구인지를 확인하는 단계 가장 대표적인 인증의예가 "로그인" 데이터베이스에 등록된 아이디와 패스워드를 사용자가 입력한 아이디와 비밀번호와 비교해 일치 여부 확인 로그인에 성공하면 애플리케이션 서버는 응답으로 사용자에게 토큰(token)을 전달 로그인에 실패한 사용자는 토큰을 전달받지 못해 원하는 리소 스에 접근할 수 없음 인가 인가(authorization): 인증을 통해 검증된 사용자가 애플리케이션 내부의 리소스에 접 근할 때 사용자가 해당 리소스에 접근할 권리가 있는지를 확인하는 과정 예) 로그 인한 사용자가 특정 게시판에 접근해서 글을 보려고 하는 경우 게시판 접근 등급을 확인해 접근을 허가 하거나 거부하는 것 일반적으로 사용자가 인..

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

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

JPA JPA ORM(Object-Relational-Mapping) 으로 객체와 테이블을 매핑해주는 인터페이스모음 기존의 반복 코드를 줄이고, 기본적인 쿼리문도 직접 만들어서 실행해 코드를 간결하게 작성함 SQL과 데이터 중심의 설계에서 객체 중심의 설계로 패러다임을 전환하여 개발 생산성을 크게 높임 ORM(Object-Relational-Mapping) 우리가 일반 적으로 알고 있는 애플리케이션 Class와 RDB(Relational DataBase)의 테이블을 매핑(연결)한다는 뜻이며, 기술적으로는 어플리케이션의 객체를 RDB 테이블에 자동으로 영속화 해주는 것이라고 보면된다. JPA 사용을 위한 설정 1. build.gradle 파일에 아래와 같은 라이브러리를 추가 implementation 'o..

I. 라우팅이란? 라우팅: 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 다음과 같은 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. 리액트 라우터(React Router) : 리액트의 라우팅 관련 라이브러리 중 가장 오래되고 가장 많..

지난 포스트에서 추가되는 데이터가 적어서 컴포넌트를 관리하는데 불편하지않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지게 됩니다. 이때 사용되는 것이 컴포넌트 성능 최적화입니다. 실습은 다음과 같은 순서로 진행됩니다. 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle 과 onRemove 가 새로워지는 현상 방지하기 react-virtualized 를 사용한 렌더링 최적화 이번 실습을 위해서는 일정관리 웹서버가 필요합니다. https://daradarav.tistory.com/64 의 주소를 참고하여 실습을 진행한 후 이 포스트를 봐주시길 바랍니다. [React] 10. 일정 관리 웹 애플리케이션 만들기 ..

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 📌 프로젝트 준비하기 📚 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass c..

리액트 컴포넌트를 스타일링할 때는 다양한 방법이 있습니다. 자신이 필요하거나 회사가 원하는 방식으로 만들면 됩니다. 이번 포스트에서 알아볼 스타일링 방식은 다음과 같습니다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기(prev-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS를 더욱 쉽게 작성할 수 있음 CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 고유의 이름을 지정하는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시킴, 해당 스타일이 적용된 컴포넌트를 스타일을 작성함과 동시에 만듦 이번 실습은 다음과 같은 순서로 진행합니다. 프로젝트 준비하기..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 상태 관리를 할 수 있는 더영헌 기능을 제공합니다. 이번 실습은 다음과 같이 진행됩니다. 리액트 내장 Hooks 사용하기 커스텀 Hooks 만들기 실습을 위해 create-react-app을 사용하여 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 📌 useState useState는 가장 기본적인 Hook으로, 함수 컴포넌트에서 가변적 상태를 지니도록 합니다. 3장을 복습하며(https://daradarav.tistory.com/14) useState를 사용하는 카운터를 만들어봅시다. src 디렉터리에 Counter.js 파일을 만들어 다음의 코드를 작성합니다. // Counetr..

모든 리액트 컴포넌트는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전, 준비 과정에서 시작하여 페이지가 사라질 때 끝납니다. 컴포넌트의 라이프사이클 메서드를 사용하는 경우는 다음과 같습니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하는 경우 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우 불필요한 업데이트를 방지해야하는 경우 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능합니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 📌 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 ..