Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 React에서 기존 데이터에서 더보기 버튼 클릭 후 새로 불러온 데이터 합치는 방법에 대해 알아보겠습니다. 공지사항 목록 조회 기능을 구현하던 도중 리스트가 많아질 수 있을 것 같아 더보기 버튼 UI를 추가하기로 결정했습니다. 참고로 API는 스프링부트의 Pageable 를 사용했습니다. 즉 기존 데이터에서 더보기 버튼 UI를 클릭할 때마다 page 가 +1 씩 증가하면서 새로 불러온 데이터를 화면에 보여줘야 했습니다. How to implement 아래와 같이 NoticeList 컴포넌트가 있다고 가정해봅시다. fetchNotice라는 함수를 불러올 때마다, 기존 데이터에 새로 불려진 데이터를 추가해줘야 합니다. 하지만 위 코드에서는 새로 불려진 데이터만을 setN..

Intro 안녕하세요. 이번 시간에는 Springboot 스프링부트 JPA에서 프로젝션 하는 방법에 대해 알아보겠습니다. Projection? 먼저 들어가기에 앞서 간단하게 프로젝션에 대한 의미를 살펴볼게요. 프로젝션은 엔티티의 속성이 많을 때 일부 데이터만 가져오는 방법을 의미합니다. 더 자세한 내용이 궁금하시면 일전에 제가 정리해놓은 포스팅 참고 바랍니다 :) [MongoDB] 프로젝션 (Projection) 이란? projection query 사용법 How to do 아래의 User domain 객체를 참고하여 설명해보겠습니다. @Document(collection = "user") class User( val userId: String?, val userName: String?, val user..

Intro 안녕하세요. 스프링부트에서 Api 테스트를 하기 위해 postman 을 사용하던 도중 다음의 애러가 발생했습니다. 415 Unsupported MediaType 참고로, 저는 컨트롤러 단에서 @PostMapping과 @RequestBody 어노테이션을 사용했고, Put 요청으로 아래 내용을 전달해 업데이트를 시켜줘야 했습니다. { "isOwner": true, "isStaff": false, } Why? 지원하지 않는 미디어 타입이라는 의미입니다. 소스 자체에 문제가 있는 줄 알고, 열심히 구글링 했지만 문제는 따로 있었습니다. How to solve the problem 처음 테스트를 위해 Postman > Body 탭 > raw를 선택 후 해당 json 파일을 넣어 요청을 해줬는데요, 알고..

Intro 안녕하세요. Springboot + kotlin 개발 환경에서 gradle 설정의 "jar.enabled = true" 이 동작하지 않는 오류가 발생하였습니다. 일반 Springboot + Java 개발 환경에서는 다음의 설정이 잘 작동하는데, 코틀린에서는 작동하지 않더라고요. How to solve the problem 구글링 후, 아래의 코드를 찾아 적용해봤더니 정상적으로 작동하였습니다. 이 외에도 여러 방법이 있는 것 같으니 포스팅 하단 사이트를 참고해주시면 좋을 것 같습니다. tasks.withType { archiveBaseName.set("octo-mobile-api") } https://github.com/spring-projects/spring-boot/issues/10238

Intro 안녕하세요. 인텔리제이 터미널에서 gradlew 빌드를 하려던 도중 아래와 같은 오류가 발생했습니다. Why? 저는 아래와 같은 명령어를 사용하였는데요, 구글링을 하다가 처음에는 권한 문제인 줄 알고 권한을 바꿔봤습니다. 하지만 계속 같은 오류가 발생했습니다. 그래서 더 구글링을 해봤고, 제가 바보같은 실수를 하고 있었음을 깨달았습니다. gradlew build How to solve the problem 바로 명령어 앞에 ./ 를 붙여주지 않았기 때문입니다. 😅 리눅스/맥과 윈도우 명령어 사용법이 다르니 아래 내용 참고 부탁드립니다. Linux / MacOS ./gradlew Windows .\gradlew https://stackoverflow.com/questions/41700798/gr..

Intro 안녕하세요. Springboot 를 사용하던 도중 Http Status 415 error 에러가 발생하였습니다. 415 Unsupported Media Type Why? 기존 컨트롤러에서 매개변수를 받기 위해 @RequestParam 어노테이션을 사용했습니다. 매개변수 5개를 받고 있던 터라 상당히 복잡해 보여 해당 매개변수들을 하나의 Dto Req 객체로 바꿔주었습니다. 이후 코드 실행을 했는데, 다음과 같은 에러가 발생했습니다. Springboot 를 잘 몰라서, 해맸지만 저희에겐 구글님이 있습니다. 🤧 !! 구글링 후, 제가 사용한 어노테이션이 잘못 되었다는 것을 알게 되었습니다. @RequestParam 는 단일 데이터를 받기 위해서 사용하기 때문에, 다음과 같이 여러 매개변수가 들어..

Intro 안녕하세요. 이번 시간에는 Moment.js 라이브러리에서 AM/PM가 아닌 오전/오후로 표시하는 방법에 대해 알아보도록 하겠습니다. 참고로, Moment.js는 날짜 및 시간 데이터를 쉽게 다룰 수 있도록 도와주는 라이브러리 중 하나입니다. How to solve the problem 제 경우, 날짜 데이터를 "오후 10:00" 로 표시해야 했습니다. 하지만 "10:00 PM"으로 나오더군요. 구글링을 해본 결과 다음의 해결책을 찾았습니다. 바로 moment/local/ko 를 임포트 해주는 것! import 'moment/locale/ko' 위 코드를 임포트 해준 이후, 화면을 살펴보니 10:00 PM 이 아닌 오후 10:00 로 잘 표시가 되고 있었습니다.

1. How to Get Help pass 2. Join Our Community! done 3. Course Resourse pass 4. Let's Build an App! 어떻게 리액트를 빨리 배웠을까라는 질문을 많이 받습니다. 이 질문에 답할 수 있는 대답은 딱 한가지입니다. You have to write code and you have to work on projects 5. Critical Questions 1. What's React All about? 리액트는 (1) HTML을 보여주거나 (2) 사용자가 무언가를 할 때, HTML이 변한다. 6. A Few More Critical Questions 2. How does a React app start up? 1. All of your p..

Intro react-datepicker 라이브러리를 사용하던 도중, 끝날짜가 시작 날짜를 선택할 수 없도록 날짜를 제외해야 했습니다. How to solve the problem 구글링 후 아래와 같은 답변을 찾았습니다. DatePicker 속성의 minDate를 사용하여 제외할 날짜를 넣어주면 됩니다. https://stackoverflow.com/questions/50626937/react-datepicker-exclude-past-dates

Intro react-datepicker 라이브러리를 사용하던 도중 CSS 가 적용 안되는 에러가 발생했습니다. 참고로 저는 타입스크립트도 적용해야 했기 때문에 라이브러리 설치는 아래와 같이 진행하였습니다. yarn add react-datepicker yarn add @types/react-datepicker react-datepicker 공식 홈페이지에 있는 Default 예제를 코드에 넣어 실행하자, css가 전혀 적용되지 않는 상태로 화면에 뜨더군요. () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; Why? 바로 구글링을 해봤습니다. 저와 비슷한 에러를 겪으신 분들..