개발자 성장일기

댓글 삭제하기 [삭제] 버튼 추가하기 [삭세] 버튼 클릭해 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-*속성에 담긴 댓글 정보를 가져옴 수정 폼에 데이터..

문제 https://www.acmicpc.net/problem/11655 11655번: ROT13 첫째 줄에 알파벳 대문자, 소문자, 공백, 숫자로만 이루어진 문자열 S가 주어진다. S의 길이는 100을 넘지 않는다. www.acmicpc.net 해설 알파벳이 26개인것을 인지하고 문제를 보면 "문장" -> "암호화1번한 문장" -> "다시한번 암호화 한 문장(2번암호화)"라는 조건을 통해 뭔가 1대1대응이 되는 규칙이 있다는 것을 파악 한 후 아스키 코드상에서 13을 더한 값과 대칭되는 것을 파악 그 후 알파벳에 해당하는 아스키 코드 값에서는 13만큼 더한 값을 ret(결과)에 저장 그 외에는 그대로 ret에 저장 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1..

댓글 등록하기 댓글 생성 뷰 페이지(_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 등의 ..

일대다 관겨 / 다대일 관계 한 엔티티의 하나의 데이터가 다른 엔디디의 여러 대이터와 연관될 때 이를 일대다 관계라함 한 엔티티의 여러 데이터가 다른 엔티티의 한 데이터와 연관될 때 다대일 관계라고함 대표키와 외래키 엔티티에서 자신을 대표하는 값 => 대표키 다른 엔티티를 참조할 수 있도록 다른 엔티티의 대표키를 가리키는 값 => 외래키 다대일 관계 설정 두 엔티티를 다대이 관계로 설정하려면 대표키와 외래키를 연결해야함 자식 엔티팅에 외래키를 만들어 부모 엔티티의 대표키 값을 갖도록 해야함 @ManyToOne 다대일 관계를 나타내는 어노테이션 @JoinColum 해당 엔티티에 외래키를 생성하는 어노테이션 name 속성으로 매핑할 외래키 이름을 지정할 수 잇음 JpaRepository ListCrudRep..

문제 https://www.acmicpc.net/problem/1159 1159번: 농구 경기 상근이는 농구의 세계에서 점차 영향력을 넓혀가고 있다. 처음에 그는 농구 경기를 좋아하는 사람이었다. 농구에 대한 열정은 그를 막을 수 없었고, 결국 상근이는 농구장을 청소하는 일을 시작 www.acmicpc.net 해설 문자열의 첫 알파벳만 중요하기 때문에 아스키 코드를 이용하여 문자열의 첫 알파벳에 해당하는 정수값으로 변환 알파벳이 몇번 나왔는지 확인할 cnt배열에 해당 정수값 +1 cnt함수 중 5이상인 값이 있으면 해당 값을 문자열로 변환 후 출력 5이상인 값이 하나도 없을경우 "PREDAJA"출력 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22..

문제 https://www.acmicpc.net/problem/10988 10988번: 팰린드롬인지 확인하기 첫째 줄에 단어가 주어진다. 단어의 길이는 1보다 크거나 같고, 100보다 작거나 같으며, 알파벳 소문자로만 이루어져 있다. www.acmicpc.net 해설 중간을 기준으로 양쪽의 값이 같아야 함으로 한 값은 0부터 한값은 끝부터 시작 0부터 시작한 변수는 늘어나도록 끝부터 시작한 변수는 줄어들도록 함 값이 같지 않은 부분이 나오면 0을 출력 끝까지 나오지 않으면 1을 출력하도록 함 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #include using namespace std; string a; int len; int main(){ cin >> a; l..

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