본문 바로가기
반응형

분류 전체보기1065

[Spring Boot] : thymelef, 타임리프 간단 사용법 타임리프를 사용하기 위해서는 html 코드에 아래 코드를 적용시켜 줘야 한다. 위 코드를 적용하지 않아도 된다는 말도 있다고 하는데 그냥 적용시켜 사용하는 것을 추천한다고 한다. href="../css/bootstrap.min.css" 이런 html 코드를 타임리프를 통해 아래와 같이 변경해 줄 수 있다. th:href="@{/css/bootstrap.min.css}" 이렇게 되면 페이지에서 소스 보기를 했을 때 ..경로가 없이 동적인 페이지를 완성시켜 나갈 수 있게 된다. 타임리프에서 URL 링크를 사용할 때는 @{..}를 사용한다고 한다. 이 URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다. 타임리프의 핵심은 th: 가 붙은 부분은 서버사이드에서 랜더링 되고, 기존 것을 대체한다는 .. 2022. 2. 2.
[질문 노트] : domain, repository, vo, dto의 차이점 강의를 듣다 보면 domain, vo, repository, dao가 자주 나오고 내가 사용했던 DTO 또한 자주 나온다. 비슷한 개념 같은데 헷갈리는 부분에 대해서 찾아봤다. 우선 vo는 2가지 의미로 사용된다고 한다. 단순히 데이터 값을 전달하기 위한 용도로 사용되는 객체 이 경우 DTO라고도 부른다. DTO가 데이터를 전송하는 목적으로 사용하는 객체이기 때문이다. 도메인 주도 설계에서 이야기하는 값 객체(Value Object) vo라고 하면 이 의미로 생각하면 된다. repository와 dao는 거의 같다고 봐도 무방하고 깊게 보자면 repository는 엔티티 객체를 보관하는 저장소, dao는 데이터에 접근하도록 DB 접근 관련 로직을 모아둔 객체이다. 하지만 개념 차이일 뿐이고 실무에서는 비.. 2022. 2. 2.
[질문 노트] : Spring Boot 프로젝트 폴더 구조는 어떻게 만드는 게 좋을까? project controller dto service mapper 프로젝트를 진행하기 전에 학교에서는 위에 패키지 구조 처럼 controller, service, mapper, dto, util을 다 나누어서 진행했다. 하지만 Git Hub를 찾아보면 폴더 구조가 내가 배우고 있는 부분하고 많이 다른 것을 확인할 수 있었는데 왜 그렇게 하는지 궁금했다. project member AController BController service ASerivce BService 팀 프로젝트를 할 떄 다른 사람에게 물어보니 단위를 작게 나눌 수록 좋다고 해서 위와 같이 나누는 것도 고민을 해 봤다. 그에 관한 내용을 찾아보니 딱 정해진 내용은 없다고 한다. 제일 좋은 방법은 프로젝트의 상황과 규모에 따라서 거기에 .. 2022. 2. 2.
[JavaScript 30일 챌린지] : 6일차 constendpoint= ''; constcities= []; fetch(endpoint) .then(blob => blob.json()) .then(data =>cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { const regex = newRegExp(wordToMatch, 'gi'); return place.city.match(regex) || place.state.match(regex) }); } function numberWithCommas(x) { return x.toString().replace(/\\B(>=(\\d{3})+(?!\\d))/g, ','); } fun.. 2022. 2. 2.
[Spring Boot] : 요구사항에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성하기 private Long id; private String itemName; private Integer price; private Integer quantity; 저번 강의에서 진행했던 요구사항 분석에 맞춰 상품 도메인을 개발하고 테스트 코드를 작성해 확인하는 코드를 진행한다. 우선 Item 클래스를 만들어 주었다. 여기서 int가 아닌 Integer를 사용한 이유는 null을 사용해야 하는데 int는 null을 허용하지 않아 Integer를 사용했다. 또한, 어노테이션을 @Data로 주로 사용했었는데 이 어노테이션 안에는 다른 기능들이 들어있어서 @Getter, @Setter를 사용하는 것이 좋다고 한다. 또, 여기서 생성자를 따로 만들어 id에 관한 생성자는 포함시키지 않은 생성자도 만들어 줬는데 작.. 2022. 2. 2.
[TIL] : 98 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 JS 챌린지 오늘도 했다. 사실 이해하면서 코드를 치는 것 같지가 않다. 일단 꾸준하게 훈련을 한다는 것에 의미를 두고 아무래도 노마드코더 기초 강의를 먼저 듣고 와야 할 것 같다. 그래도 나중에 기능이 필요할 때 참고하면서 사용할 순 있을 것 같아 다행이다. 2022.02.01 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 5일차 Spring Boot 인프런 강의 진도를 나가기 시작했다. 저번 주차의 정리와 복습을 간단히 하고 새로운 프로젝트 생성과 앞으로 무엇을 할 것인지 요구사항 분석을 해 보는 시간을 가졌다. 2022.02.01 - [Framework/Sprin.. 2022. 2. 1.
[Spring Boot] : 프로젝트 생성 및 요구사항 분석 https://start.spring.io/ 위 사이트에서 Spring 프로젝트를 생성해 주었다. 이번 강의 섹션에서는 요구사항 분석을 통해 상품을 관리할 수 있는 서비스를 만들어 본다. 상품 도메인 모델은 상품ID, 상품명, 가격, 수량이고 상품 관리 기능은 상품 목록, 상품 상세, 상품 등록, 상품 수정이 있다. 상품 상세는 자세히 볼 수 있는 페이지, 등록은 상품을 등록하고 목록은 등록한 상품들이 보여지는 페이지이다. 강사님이 현업에서 일 하는 방법에 대해 설명해 주셨다. 요구사항이 정리되면 디자이너, 웹 퍼블리셔, 백엔드 개발자가 일은 나눠 진행하고 디자이너가 요구사항에 맞게 디자인하고 웹 퍼블리셔는 HTML, CSS를 만들어 개발자에게 제공한다. 백엔드 개발자는 웹 퍼블리셔를 통해 HTML 화면.. 2022. 2. 1.
[JavaScript 30일 챌린지] : 5일차 .panel > *:first-child { transform: translateY(-100%); } .panel.open-active > *:first-child { transform: translateY(0); } .panel > *:last-child { transform: translateY(100%); } .panel.open-active > *:last-child { transform: translateY(0); } const panels = document.querySelectorAll('.panel'); function toggleOpen() { console.log('Hello'); this.classList.toggle('open'); } function toggleActive(e) {.. 2022. 2. 1.
[TIL] : 97 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 4일차를 진행했고 완료했다. 오늘은 화면단으로 보는 게 아니라 콘솔을 찍어서 데이터별로 따로 분류해서 보는 형식의 JS였다. 파이썬으로 이렇게 사용하던데 JS로도 비슷하게 사용할 수 있었다. 2022.01.31 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 4일차 2022. 1. 31.
[JavaScript 30일 챌린지] : 4일차 // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventors => (inventors.year >= 1500 && inventors.year `${inventors.first} ${inventors.last}`); con.. 2022. 1. 31.
[TIL] : 96 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 이번주에 휴식을 조금 갖기로 했지만 30일 챌린지는 지켜야하기 때문에 간단하게 JS 공부를 마쳤다. 미해결한 부분이 있지만 일단 핵심 기능은 작동하는 것을 확인했다. 2022.01.30 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 3일차 2022. 1. 30.
[JavaScript 30일 챌린지] : 3일차 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } CSS에 이런 코드를 주고 JavaScript에 이렇게 코드를 적어줬다. 불러온 그림의 크기를 조절할 수 있고 블러를 설정할 수 있는데 아직 베이스 컬러를 해결하지 못 했다. 완료 코드를 작동시켜도 베이스 컬러 조절이 안 되는데 방법은 따로 찾아봐야 할 것 같다. 2022. 1. 30.
[TIL] : 95 일일 배움을 위한 Today I Learned ! JavaScript 30일 챌린지 JS 30일 챌린지 중 2일차를 달성했다. JS로 시계를 움직이게 만들어 주었는데 오류가 많이 떠서 열심히 찾아서 진행했다. 2022.01.29 - [Project/JavaScript 30일 챌린지] - [JavaScript 30일 챌린지] : 2일차 2022. 1. 29.
[JavaScript 30일 챌린지] : 2일차 .hand { width: 50%; height: 6px; background: black; position: absolute; top: 50%; transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); CSS에 transform-origin: 100%부터 넣어줬다. 화면에서 시계가 움직이도록 설정해 주는 프로젝트였다. 각각 초, 분, 시간을 구하고 값을 넣어주어 동작시켰다. 2022. 1. 29.
[TIL] : 94 일일 배움을 위한 Today I Learned ! 알고리즘 프로그래머스 문제를 오늘도 한 문제 풀었다. 어제 풀어본 문제도 다시 풀어봤다. 2022.01.28 - [Algorithm/프로그래머스] - [프로그래머스] : 최대공약수와 최소공배수 파이썬 풀이 SpringBoot 김영한님 스프링 부트 강의를 오늘 세션 마무리하려고 한다. 강의를 듣고 코딩을 하고 난 뒤에 노션에 다시 보면서 복습 정리를 하고 블로그에 복사 붙여넣기로 올리고 있다. 오늘은 HTTP 응답과 요청에 대해 공부하고 있는 중이다. 2022.01.28 - [Framework/Spring Boot] - [Spring Boot] : HTTP, API 메시지 바디에 직접 입력해 HTTP 응답하기 2022.01.28 - [Framework/Sp.. 2022. 1. 28.
[Spring Boot] : 요청 매핑 핸들러 어뎁터 구조 [출처]springmvc1 강의 자료/178페이지 강의에서 제공하는 그림에서 HTTP 메시지 컨버터의 위치가 보이지 않는다. 이 부분에 대해서 진도를 나갔다. 강사님이 모든 비밀은 @RequestMapping을 처리하는 핸들러 어댑터인 RequestMappingHandlerAdapter에 있다고 했다. RequestMappingHandlerAdapter 동작 방식이다. RequestMapping(핸들러 어댑터)가 ArgumentResolver에게 필요한 객체를 가져와 달라고 요청하고 ArgumentResolver는 객체를 가져다 준다. 이렇게 객체를 다 만들고 RequestMapping은 핸들러(컨트롤러)를 호출하게 되고 호출을 하면서 핸들러가 필요로하는 파라미터를 ArgumentResolver가 전달해.. 2022. 1. 28.
[Spring Boot] : HTTP 메시지 컨버터 뷰 템플릿을 통해 HTML을 생성해서 응답하는 게 아니라, HTTP API 처럼 JSON 데이터를 HTTP 메시지 바디에서 직접 읽거나 쓰는 경우 HTTP 메시지 컨버터를 사용하면 편하다고 한다. 강의에서 HTTP 메시지 컨버터를 자세하기 알아보기 전에 @ResponseBody에 대해서 간단하게 설명을 해 주었다. 내용은 아래와 같다. @ResponseBody를 사용하면 HTTP의 Body에 문자 내용을 직접 반환한다. 즉, ViewResolver 대신에 HttpMessageConverter가 동작하게 되는 것이다. HTTP 메시지 컨버터는 인터페이스로 되어 있다. HTTP 메시지 컨버터는 HTTP 요청, HTTP 응답 둘 다 사용된다. HttpMessageConverter 인터페이스에 들어가 보면 ca.. 2022. 1. 28.
[Spring Boot] : HTTP, API 메시지 바디에 직접 입력해 HTTP 응답하기 HTTP API를 제공하는 경우 데이터를 전달해야 하므로 JSON 형식으로 데이터를 전달한다. @Slf4j @RestController 먼저 컨트롤러는 @RestController를 사용했다. @RestController를 사용하면 해당 컨트롤러에 모두 @ResponseBody가 적용이 되며 이름 그대로 Rest API(HTTP API)를 만들 때 사용되는 컨트롤러이다. 즉, @RestController를 사용하면 안에 @ResponseBody가 적용되어 있어서 따로 선언을 하지 않아도 된다. @GetMapping("/response-body-string-v1") public void responseBodyV1(HttpServletResponse response) throws IOException { r.. 2022. 1. 28.
[JavaScript 30일 챌린지] : 1일차 function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) return; audio.currentTime = 0; audio.play(); key.classList.toggle('playing'); //key.classList.add('playing'); //key.classList.remove('playing'); }; function removeTransition(e) { if(e.propertyName !== 'transform') return; .. 2022. 1. 28.
[프로그래머스] : 최대공약수와 최소공배수 파이썬 풀이 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다. 문제 설명 두 수는 1이상 1000000이하의 자연수입니다. 제한 사항 nmreturn 312[3, 12] 25[1, 10] 입출력 예 입출력 예 #1 위의 설명과 같습니다. 입출력 예 #2 자연수 2와 5의 최대공약수는 1, 최소공배수는 10이므로 [1, 10]을 리턴해야 합니다. 입출력 예 설명 def gcd(a, b): if a 2022. 1. 28.
[TIL] : 93 일일 배움을 위한 Today I Learned ! JavaScript 자바스크립트로 간단한 계산 시스템을 만들어 봤다. 기초부터 천천히 따라하는 중이다. 2022.01.27 - [프로그래밍언어/JavaScript] - [JavaScript] : 자바스크립트를 활용한 간단한 계산 시스템 프로그래머스 파이썬으로 알고리즘 문제 한 문제를 풀었다. 추가로 어제 풀어본 내용도 다시 풀어보았다. 2022.01.27 - [Algorithm/프로그래머스] - [프로그래머스] : 콜라츠 추측 파이썬 풀이 및 해설 2022. 1. 27.
반응형