Developer JS's It BLog

무주 반딧불 축제를 간 김에 전북 지역에 무주점에만 존재한다는 생맥주 무제한, 팥빙수 무제한 메뉴가 존재하는 명륜진사갈비에 갔습니다.  4,900원만 지불하면 생맥주를 무제한을 즐길 수 있는데요. 심지어 맥주도 켈리나 테라를 제공하고 있었습니다. 하지만 축제에 갔어야 했기때문에 맥주는 못 먹었어요. 나중에 전주에도 생기면 한 번 먹어봐야겠습니다.  이렇게 테이블마다 키오스크가 설치되어있어서 추가메뉴나 사이드, 주류 등을 직원을 부르지 않고, 시킬 수 있어요!  하이볼도 얼마전에 생겨서 이렇게 판매하고 있는 걸 볼 수 있습니다.  생맥주 무제한도 키오스크로 주문 할 수 있네요!  숯이 들어왔어요~! 무주의 기운때문인지 분명 같은 숯을 쓸텐데 전주 명륜진사갈비보다 화력이 세서 좋았습니다. 적당히 센 화력은 ..

급 부대찌개가 너무 먹고싶었습니다. 옛날에 자주 갔었던 놀부 부대찌개가 생각이 나서, 하가지구에 있는 놀부 부대찌개로 향했어요. 하가지구의 할리스 건물 2층에 있는 놀부 부대찌개의 메뉴는 이렇습니다. 어느새 보쌈도 판매하는 곳이 되었네요.  밑반찬으로 주신 오뎅볶음이에요. 오뎅볶음은 어디서나 배신을 하지 않는 것 같아요. 무난합니다. 오뎅볶음과 마찬가지로 배신하지 않는 콩나물 무침입니다.  잡채도 무난했어요.   당연히 샐러드도.. 음식의 주문은 각 테이블마다 배치된 키오스크를 통해 하면됩니다. 요즘은 물같은 것도 키오스크를 통해서 주문을 할 수 있어서 편리한 것 같아요. 집에 갈때도 좀 편해진 것 같구요.  대망의 부대찌개입니다. 허연 사골국물에, 하얀치즈와 노란치즈가 있고, 안에 햄사리들이 얼핏 보이..

친구따라 강남은 안가고,친구따라 포항에 갔어요. 친구가 대구에 살아서,친구도 볼 겸 대구에 갔는데대구 터미널에서 납치당해서포항 호미곳을 찍고, 오대양 물회에서물회를 먹어봤습니다.  포항 전통의 고추장 물회를 파는 곳이에요.사실 저는 물회라는 음식 자체를처음 먹어봤습니다. 애초에 주변에 회를 즐기는 사람이없어서 그런지 먹을 기회가 없었는데물회라는 음식을 먹어볼 수 있게 되었네요.  포항 오대양 물회의 메뉴판이에요.해산물을 자주 안먹어서 그런지저는 이 메뉴판에 써있는 가격으로도굉장히 충격을 많이 받았습니다. 물회 한접시에 2만 5천원이라니엄청 비싼거구나..라는 상각을 좀 했어요.  저기 톳인지 뭔지 모르겠는반찬 굉장히 맛있더라구요.  매운탕이에요.해산물을 잘 안먹어서매운탕도 먹을 기회가 별로 없었는데 사실 ..

요즘 웹 어플리케이션이든 모바일 어플리케이션이든 로그인, 회원가입 기능을 구현할 때 카카오, 구글, 페이스북 등으로 로그인을 하는 기능을 구현하는 것은 기본이 됐습니다. 그 중 카카오 로그인을 리액트와 자바 스프링부트 프로젝트에서 구현하는 방법이다. 가장 먼저 할 일은 카카오 디벨로퍼에서 앱을 생성하는 것이다.  https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com카카오 디벨로퍼에 로그인을 한 후, 상단의 네비게이션 바에서 내 어플리케이션을 누른 후,  애플리케이션 추가하기 버튼을 클릭하고 내 앱을 생..

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..