Developer JS's It BLog

SPA 프로젝트의 빌드 결과물을 Spring Boot의 static 폴더로 이동해왔다면, 이제 스프링부트 프로젝트에서 프론트 엔드 요청을 SPA 프로젝트의 html파일로 연결해줘야한다. 여기서는 React프로젝트를 이용해서 SPA를 만들었기 때문에 React의 빌드 결과물을 가지고 연결할 것이다. 이렇게 보면 resources 하위에 React의 빌드 결과 파일들이 자리잡고 있는 것을 볼 수 있다. 이제 Spring Boot의 컨트롤러와 Web Config 파일에서 해당 index.html 파일로 연결되게 설정만 해주면 된다. 가장 먼저 해야할 일은 Controller를 생성하는 것이다.  @Controllerpublic class SPAController { @RequestMapping({"/"}..

깃허브에 처음 프로젝트를 올리는 방법입니다. 프로젝트를 처음 생성한 후 버전 관리를 하기 위한 방법으로 여러가지 git을 이용합니다. 여기서는 github에 나의 프로젝트를 올리는 방법에 대해서 알아보도록 하겠습니다.  먼저 나의 깃허브에 접속해서 New라는 버튼을 클릭해서 새로운 repository를 생성해주도록 합니다.   repository name을 작성해주고, 다른 사람들이 볼 수 있는 repository를 생성할 거면, Public으로 내가 선택한 사람들과 나만 볼 repository면 Private를 선택해서 생성해줍니다. 그리고 가장 마지막의 create repository 버튼을 클릭해주면, repository를 생성하게 됩니다.  그럼 이런 페이지를 볼 수 있는데요. 아주 쉽게 새로운 ..

스프링 부트의 resources 폴더 안으로 React 프로젝트를 빌드하는 것은 정말로 쉽습니다.  먼저 스프링 부트의 프로젝트 안의 frontend라는 폴더 안으로 React 프로젝트를 생성했습니다.  이 폴더 안을 보면 package.json이라는 파일이 있는데 이 파일을 열어보면,  이렇게 scripts라는 설정 밑으로 명령어들을 설정해 놓은 부분이 있습니다. 이 부분의 build 부분이 초기 세팅과 같다면 아마 vite build 라고만 적혀있을 것입니다. 이것을 만약 저와 폴더구조가 같다면 위의 명령어를 그대로 붙여 넣으면 됩니다. 명령의 흐름은 이와 같습니다. 먼저 리액트 프로젝트를 build합니다. 그리고 resources 의 static 폴더를 강제로 지우고, static 폴더를 생성하는데..

리액트란 무엇인가!리액트란 프론트 엔드에서 사용하는 자바스크립트 라이브러리다. 리액트의 최종적인 결과는 결국 웹 브라우저가 읽을 수 있는 html, css, js 등의 파일로 웹 어플리케이션을 웹 브라우저에 그려주는 것이 최종 목표이다. 개발자들은 프론트 엔드의 UI를 컴포넌트로 작성해서 읽기 쉬운 가독성과 재사용성을 높여주고, 한 페이지씩 웹 서버에서 다운로드를 받는 것이 아닌 한 페이지 안에서 여러페이지를 다시 렌더링해서 UI를 업데이트하는 형식의 SPA를 지향하는 라이브러리입니다. 결국, html, css, js 파일이기 때문에 리액트 라이브러리로 빌드한 파일들을 스프링 부트의 resources 폴더에 집어넣은 후, 스프링 부트 어플리케이션을 배포 서버에 올려두면, 클라이언트는 리액트로 작성된 프론..

URL 경로에는 "/" 라던지 "=" 이라던지 "%" 등 여러가지 특수문자가 들어가게 된다. 물론 객체화해서 서버로 보내는 방법도 있다. 하지만 HTTP의 DELETE 메서드로 보낸다면, 어떤 서버는 body 값을 알아서 받아주기도 하지만, SpringBoot의 경우 DELETE 메서드에 body를 포함해서 받으려면 특정한 설정을 해줘야 한다. 그래서 클라이언트 측에서 해당 URL값을 인코딩 처리해서 서버로 보내줘서, 특수문자로 인한 에러가 발생하지 않도로 해줘야 한다. 그래서 이미 JavaScript를 만드시는 훌륭한 분들이 간단하게 함수 하나로 해당 URL값을 서버에서 받을 수 있는 인코딩을 쉽게 할 수 있도록 해놓았다. 우리는 그 함수를 사용하기만 하면 쉽게 서버로 전송할 때 에러가 생기지 않게 할..

외부 사이트로 이동을 하는 여러 버튼들이 있습니다. html 문서에서 서로 다른 페이지로 이동하게 하는 버튼은 필수적인 요소라고 볼 수 있습니다. 그래서 외부 사이트를 여는 여러 함수들도 존재합니다. html의 a 태그도 외부 링크를 할 수 있는 하나의 방법입니다. 이번에 제가 사용한 함수는 window.open인데, 자바스크립트의 내장함수입니다. window.open(url, target, features); url에는 열고자 하는 웹 페이지의 URL을 넣고, target은 새롭게 여는 창을 어디에 열 것인지를 지정하는 속성입니다. _blank는 새 탭이나 새 창에서 열고, _self는 같은 창에서 열고, _parent는 부모 프레임, _top은 최상위 프레임에서 여는 속성입니다. 그리고 마지막으로 f..

첫 여름 캠핑을 시도했다.원래 더운 것, 벌레, 등등 여름은우리와 맞지 않는 것들을 많이 가지고 있어서특히 이런 맞지 않는 것들로부터텐트는 우리를 지켜주지 않기 때문에여름 캠핑은 하지 않았었다. 하지만 그런 우리가 용기내어 여름 캠핑을도전할 수 밖에 없었던 이유.'물놀이' 때문에 여름 캠핑에 도전했다.우리가 자주가는 청암산 오토 캠핑장은여름에 놀이터에서 물놀이를 할 수 있기에더 쉽게 도전할 수 있었다.  생각보다 물이 많이 더러웠지만그래도 이렇게 놀 수 있는게 어디냐는 생각에처음 도전 했지만, 그 생각을 비웃듯우리가 좋아하지 않는 것들은우리를 아주 힘들게 했다. 뜨거운 햇빛은 세팅을 할 때와세팅을 풀 때 우리를 괴롭혔고,밤새 모기는 우리를 잠을 잘 수 없게 만들었다. 이번 캠핑에서 돌아오면서캠핑카를 사지..

이제까지는 figma를 개발 용도로 사용할 때, 회사에서 사용하는 계정으로 만든 프로젝트에 같이 참여하는 사람으로 등록해서 사용했기 때문에 figma의 유료 개발자 모드로 변경해서 요소의 간격을 비교적 쉽게 찾아서 사용할 수 있었다. 그런데, 나 혼자 디자인도 개발도 하려고 하면서 figma 무료 프로젝트를 생성해서 사용하니, 이게 무슨일이야? 개발자 모드를 켤 수 없었다. 그러니 요소간의 간격을 원래 사용하던 방식대로 찾을 수 없는 것이 아닌가?  그래서 그 다음으로 찾아낸 방법이 어짜피 유로로 사용하는 adobe의 프로그램인 XD라는 프로그램을 이용해서 디자인을 하고, 간격을 찾아볼까 했는데 이것이 figma와 유사한 것이 아닌가! 어떻게 할까 고민하는 중에 옆에 계신 디자이너분에게 물으니 alt 버..

생각 중독 독립출판물로 출간된 후 독자들의 폭발적 지지와 입소문만으로 아마존 종합 베스트셀러에 오른 후 전 세계 36개국에 판권 수출된 글로벌 화제작 『생각 중독』이 드디어 한국에 출간됐다. 저자는 ‘생각 과잉’을 우리도 모르는 사이 삶을 서서히 망가뜨리는 현대 사회의 문제적 유행병으로 규정하며, 그 심각성을 인식하고 당장 생각의 패턴을 바꿈으로써 그 독성에서 벗어날 것을 촉구한다. 과거를 되새김질하며 끝없이 후회하는 사람, 아주 작은 일에도 거대한 걱정으로 내닫는 사람, 밀려드는 업무에 압도돼 정작 미루기만 하는 사람, 자기 말 한마디가 관계를 해칠까 두려워하는 사람…. 모두 ‘생각 감옥’에 갇힌 사람들이다. 이곳에 갇힌 사람들은 불안감에 시달리다 부정적 사고 패턴으로 현실을 잘못 인식하고 결국 지독한..

JPA를 이용해서 개발을 하다보면, 복잡한 검색조건, 단순히 검색조건이 한 두개만 늘어나도 상당히 코드의 가독성이 확 떨어지는 경우가 생깁니다. 그런 상황에서 동적쿼리라는 말이 들리고, Specification이라는 인터페이스도 들리게 됩니다. Specification이란 무엇인지 한 번 알아보도록 하겠습니다. Specification이란, Spring Data JPA에서 제공하는 API중에 하나입니다. 복잡한 검색 조건, 다양한 조합의 필터링 로직을 쉽게 구현할 수 있는 API입니다. 특히 검색이나 필터링 조건이 많은 REST API를 개발할 때 매우 유용한 API입니다. 왜 써야 하는가? 테이블에서 필드에서 조건이 맞는 데이터를 가져온다고 생각해봅시다. 그럼 JPA로 간단하게 인터페이스의 method..