개발자 성장일기

11월 20일에 시작한 길벗 코딩 자율학습단이 4주간의 공부 끝에 한권의 책을 완독 할 수 있게 되었다. 이책을 끝낸 시점으로도 아직 많이 부족한 개발자를 희망하는 사람 중 한명이다. 하지만 프로그램 설치,설정 게시판 CRUD, 스프링 부트, REST API, JPA등 아무것도 모르든 내가 조금씩 이해하고 이것들이 최소한 어떤것을 지칭하는지를 알게 되었다는 것에서 조금은 발전한 것 같다. 4주간의 공부에서 배운것도 많고 앞으로 어떤 방향으로 공부해야할지도 깨달을 수 있었다. 그런 의미에서 이 책을 살지말지 또는 자율학습단에 지원할지를 고민하는 사람들을 위해 몇가지 내용을 적어볼까 한다. 이 책의 장점 1. 초보자의 입장에 맞춘 상세한 설명 스프링 부트를 입문하는 책답게 모든 내용을 상세하게 설명해 준다...

댓글 삭제하기 [삭제] 버튼 추가하기 [삭세] 버튼 클릭해 REST API 요청 보내기 querySelectorAll() 선택자로 지정한 모든 요소를 찾아 반환 .querySelectorAll("CSS_선택자_문법) forEach() 배열 또는 배열과 유사한 일련의 데이터 묶음(NodeList, Map, Set, String...)을 순회해 처리하는 메서드 매개 변수로 주어진 함수를 배열 속 각 요소에 적용해 처리 .forEach(function(){ //실행문 }); 백틱( ` ) 문자열 백틱( ` ) 문자열을 정의하는 방법으로는 키보드의 숫자 1 왼쪽에 있는 키를 눌러 입력 벡틱( `)을 사용하면 문자열 사이에 변수를 편리하게 삽입 가능 변수 삽입 문법은 ${} 사용 const x = "한우"; co..

모달 웹에서 새 창을 띄우는 팝업 창과 달리 같은 브라우저 내부에서 상위 레이어를 뜨우는 방식으로 사용하는 창 모달 창이 뜨면 기존 창은 비활성 사애가 됨 모달 창을 종료해야만 원래 화면으로 돌아갈 수 있음 댓글 수정하기(2단계) 모달 기능을 이용해 모달 창에 수정 폼 만들기 모달 트리거 버튼을 통해 기존 댓글을 가져와 수정 폼에 반영한 후 REST API 요청 보내기 트리거 데이터 전달 모달 트리거 버튼에 data-*속성을 이용하면 데이터를 모달로 전달 가능 모달 트리거 버튼에 수정할 댓글 정보를 data-*속성 값으로 저장 show.bs.modal 이벤트를 감지해 핸들러에서 모달 트리거 버튼을 변수화 버튼 변수(triggerBtn)를 이용해 data-*속성에 담긴 댓글 정보를 가져옴 수정 폼에 데이터..

댓글 등록하기 댓글 생성 뷰 페이지(_new.mustache)에 댓글 입력 폼 만들기 [댓글 작성] 버튼을 클릭해 REST API 요청 보내기 버튼 변수화 버튼 같은 문서 내 특정 요소를 변수로 받아 오려면 다음과 같이 querySelector() 메서드를 사용해 해당 요소를 선택한 후 변수에 저장 // 형식 자료형 변수명 = document.querySelector("#id_값); // 예시 nickname: document.querySelector("#new-comment-nickname"); 버튼 이벤트 감지 클릭, 마우스 오버 같이 웹 페이지에서 발생한 특정 이벤트는 addEventListener() 메서드를 사용해 감지 // 형식 , 이벤트가 감지되면 이벤트 처리 함수를 실행 요소명.addEve..

댓글의 레이아웃 댓글은 크게 기존 댓글을 보여 주는 영역(_list)과 새 댓글을 입력하는 영역(_new)으로 나뉨 댓글 뷰 파일의 구성 댓글 뷰 파일의 디렉터리는 3개의 구조로 구성(_comments.mustache 아래 _new.mustahe,_list.mustache로 구성) 댓글 영역을 보여주는 뷰 파일(_comments.mustache) 댓글 목록을 보여주는 뷰 파일(_list.mustache) 새 댓글을 작성하는 뷰 파일(_new.mustahe) {{#commentDtos}}{{/commentDtos}} 뷰페이지에서 모델에 등록된 데이터의 사용범위를 지정할때 사용하는 머스테치 문법 {{#모델명}}부터{{/모델명}}까지 범위안에서 "모델명"에 저장된 데이터를 사용할 수 있으며 데이터 수만큼 해당..

댓글 CRUD를 위한 REST API REST 컨트롤러, 서비스, DTO, 엔티티, 리파지터리가 필요 REST 컨트롤러 : 댓글 REST API를 위한 컨트롤러로 서비스와 협업, 클라이언트 요청을 받아 응답하며 뷰가 아닌 데이터를 반환 서비스 : REST 컨트롤러와 리파지터리의 사이에서 비즈니스 로직, 즉 처리 흐름을 담당하며 예외 상황이 발생했을 때 @Transactional로 변경된 데이터를 롤백 DTO : 사용자에게 보여 줄 댓글 정보를 담은 것. 단순히 클라이언트와 서버 간에 댓글 JSON 데이터 전송 엔티티 : DB 데이터를 담는 자바 객체로 엔티티를 기반으로 테이블 생성, 리파지터리가 DB속 데이터를 조회하거나 전달할 때 사용 리파지터리 : 엔티티를 관리하는 인터페이스로 데이터 CRUD 등의 ..

테스트 프로그램의 품질을 검증하는 것 의도대로 프로그램이 잘 작동하는지 확인하는 과정 테스트 코드 작성법 1. 예상 데이터 작성하기 2. 실제 데이터 획득하기 3. 예상 데이터와 실제 데이터 비교해 검증하기 테스트 케이스 다양한 경우에 대비해 성공 / 실패할 경우를 가정해 만드는 상황(데이터) test 디렉터리 위치 main > java > 프로젝트 > service > ArticleServiceTest @SpringBootTest 스프링 부트와 해당 클래스를 연동해 테스트할 때 사용하는 어노테이션 테스트 코드에서 스프링 부트가 관리하는 다양한 객체를 주입받을 수 있음 @Test 해당 메서드가 테스트를 위한 코드라고 선언하는 어노테이션 테스트 케이스의 트랜잭션 처리 태스트 시 데이터를 조회하는 것이 아닌..

서비스 컨트롤러와 리파지터리 사이에 위치하는 계층 서버의 핵심 기능(비즈니스 로직)을 처리하는 순서를 총괄 클라이언트가 요청을 보내면 컨트롤러가 이를 받아 서비스로 전달하고 서비스는 받은 요청을 순서에 따라 진행 처리에 필요한 데이터는 리파지터리가 DB에서 가져와 반환함 이전장들에서 컨트롤러가 하던 일을 서비스 + 컨트롤러로 역할을 나눈것 (복잡한 로직일 수록 컨트롤러만으로 하기 힘들어짐) 트랜잭션 모두 성공해야만 정상적으로 완료됨 쪼갤 수없는 업무 처리의 최소 단위 보통 서비스 단계에서 관리함 트랜잭션 과정 중 오류가 발생하면 모두 롤백시킴 롤백 트랜잭션 내부에서 실행에 실패하면 지금까지 수행한 것을 모두 폐기하고 진행 초기 단계로 되돌아가는 것 @Service 해당 어노테이션이 선언된 클래스는 서비스..

REST 컨트롤러와 일반 컨트롤러의 차이 REST 컨트롤러 => JSON or 텍스트와 같은 데이터 반환 일반 컨트롤러 => 뷰페이지(HTML) 반환 REST API : 기본 설정 @RestController 어노테이션 선언 @Slf4j 어노테이션 선언(로깅을 위해) @Autowired 어노테이션 선언(의존성 주입) REST API: GET 구현하기(조회) 모든 게시글 조회 @GetMapping()어노테이션을 통해 URL주소 받기 Article 묶을을 반환하기 때문에 List을 반환 타입으로 하는 메서드 생성 리파지터리.findAll() 메서드를 리턴 @GetMapping("/api/articles") public List index(){ return articleRepository.findAll(); ..

REST API REST는 HTTP URL로 서버의 자원(resource)을 명시하고 HTTP메서드(GET, POST, PATCH/PUT, DELETE)로 해당 자원에 대해 CRUD(생성, 조회, 수정, 삭제)하는 것을 말함 API는 클라이언트가 서버의 자원을 요청할 수 있도록 서버 측에서 제공하는 인터페이스 즉 REST API는 REST를 기반으로 API를 구현한 것 REST 컨트롤러 REST API로 설계된 URL 요청을 받아 처리하는 컨트롤러 일반 컨트롤러가 뷰 페이지를 반환한다면 REST 컨트롤러는 JSON이나 텍스트같은 데이터를 반환함 REST 컨트롤러의 특징 @RestController 어노테이션을 통해 선언 클라이언트의 데이터 조회, 생성, 수정. 삭제 요청을 HTTP 메서드에 맞게 각각 @..