Nellie's Blog

VirtualBox에서 작업하다 보면 호스트 키, 복사/붙여넣기 등 불편한 부분이 많아서, SSH를 통해 접속 프로그램(MobaXterm 등)으로 원격 접속해서 편하게 작업하려고 한다. ​1. VM에 SSH 설정접속 프로그램인 MobaXterm 사용을 위해 로컬 CentOS 7에 SSH 설정을 하려고 한다. which sshd 명령어를 사용해 현재 로컬 Rocky Linux에 SSH가 설치되어 있는지 확인한다.   경로가 /usr/sbin/sshd 에 있다고 나타났다.  1) port 설정  port 설정을 해주어야 한다. vi /etc/ssh/sshd_config #Port 22 라고 되어있는 부분을 주석을 풀어준다. 만약 22번 말고 다른 포트번호를 사용하고 싶다면 변경해주어야 한다! 2) 로그인 제..

앞 포스팅에서 Virtual Box 설치를 해보았다. ↓ Virtual Box 설치 포스팅 https://yeees.tistory.com/453 [Virtual Box] window10에 Virtual Box 설치회사에서 신규프로젝트를 시작하는데, 백엔드와 Kafka를 담당하기로 했다. 그래서 회사 서버에 Kafka를 설치하기 전에 가상머신에 먼저 설치를 해보려고 한다. 1. Virtual Box 설치하기 https://www.virtualbyeees.tistory.com 1. Locky Linux 다운로드 이제 이 곳에 우리 회사에서 사용 중인 CentOS와 유사한 (무료인) Locky Linux를 설치해볼 예정이다. 회사 서버에 바로 하기가 겁이 나기 때문에. ...  Locky Linux는 아래 공..

회사에서 신규프로젝트를 시작하는데, 백엔드와 Kafka를 담당하기로 했다. 그래서 회사 서버에 Kafka를 설치하기 전에 가상머신에 먼저 설치를 해보려고 한다. 1. Virtual Box 설치하기 https://www.virtualbox.org/ Oracle VM VirtualBox Welcome to VirtualBox.org! News Flash Notice March 21th, 2024Change of login server. Starting today, Oracle Single Sign On will ask for your account credentials at signon.oracle.com and the username and password are now have to be entered ..

1. OPEN API 신청 사용하고 싶은 오픈 API를 골라서 활용신청을 해준다. 나는 아래 사이트에서 영양정보를 제공하는 공공API를 사용하였다. https://www.data.go.kr/iim/api 활용신청 클릭 활용내용은 대충 '웹사이트 개발용' 이라고 적었다. 그러면 기다릴 필요도 없이 자동 승인이 되고, 인증키를 사용할 수 있게 된다. 참고문서의 .doc 파일을 보니 아주 자세히 요청을 어떻게 하는지 나와있다. 이렇게 해도 되지만, URL마지막 부분을 type=json으로 해주면 JSON으로 반환되어 편리하다. 아래처럼 호출해주었다. http://apis.data.go.kr/1470000/FoodNtrIrdntInfoService/getFoodNtrItdntList?ServiceKey=서비스키..

등록.vue 페이지 //🎈 1. 수정용으로 데이터를 받는 변수 선언 const dietDataPut = route.query // 여기서 라우팅하며 보낸 수정용 데이터를 받는다. //🎈 2. 사용자가 input박스에 숫자를 입력할 때, testFlag 에 따라서 수정인지, 등록인지 if 분기문을 탄다. async function changeDietData() { console.log('testFlag🧧', testFlag.value) console.log('dietDataPut :::: ', dietDataPut) // 등록 시 필요한 object 만들기 if (testFlag.value === 'CREATE') { console.log('selectedFoodInfo를 잘 받아오나 보자~~~~~등록시🍀..

아래와 같은 커스텀 달력 구현을 완료하였다. props, emit 을 사용하여 약간 복잡해보이는 로직이어서 조금 어려웠다. 개발은 환자의 일정 리스트의 개수를 달력에 보여주고, 클릭을 하면 해당 일정의 리스트의 상세내역을 보여준다. 주요 컴포넌트는 단 두개이다. list 컴포넌트(부모) / ExmpleFull(달력, 자식) 컴포넌트. 구현 과정 list 컴포넌트 : 리스트의 수를 가져와서 {날짜 : 상세데이터} 오브젝트로 만들어주고, 달력 컴포넌에 props로 해당 오브젝트를 넘겨주고, ExampleFull 컴포넌트 : 달력 컴포넌트에 해당 날짜의 상세데이터.length를 읽어서 표시해준다. 클릭 시에는 부모 컴포넌트에 emit으로 날짜를 넘겨주고, list 컴포넌트 : 부모 컴포넌트는 emit 으로 받..

https://github.com/richardtallent/vue-simple-calendar GitHub - richardtallent/vue-simple-calendar: Simple Vue component to show a month-grid calendar with events Simple Vue component to show a month-grid calendar with events - richardtallent/vue-simple-calendar github.com 1. 클론받고 2. 명령어로 라이브러리 설치 npm i --save vue-simple-calendar npm run dev 여기엔 캘린더 모양이 2가지가 있다. simple / full (컴포넌트 명은 ExampleSimp..

문제 상황 달력 컴포넌트(ExampleFull)에 날짜와 타입을 전달하여, 달력에 보여주고 싶었다. 26일자에 '입원'이라는 문구가 떠야하는데 아래와 같이 보였다. 기존의 일정 list 뷰 코드 {{ data?.patientName }}님 환자 등록번호 : {{ data?.patientId }} 기존의 달력 컴포넌트 뷰

notice.xml 이전/다음글의 idx 와 글 제목을 map으로 받았다. SELECT idx, title FROM tb_notice WHERE idx IN ( (SELECT idx FROM tb_notice WHERE idx #{idx} AND del_yn = 'N' ORDER BY idx DESC LIMIT 1 ), (SELECT idx FROM tb_notice WHERE idx ]]> #{idx} AND del_yn = 'N' ORDER BY idx LIMIT 1 ) ) NoticeDto.java @Data public class NoticeDto extends BaseDto { private Integer idx; private String type; private String title; pr..

vue 를 사용하여 플랫폼을 개발하며 하는 기록.. varlet이라는 프레임워크를 사용하였으며 vue 3버전을 사용하여 개발하였다. 간단히 리스트 / 검색기능 / 상세보기 기능을 구현했다. CSS 가 적용되지 않아 허접해보인다. servicesearch > list.vue {{ item.department }} {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item.contents }} -이미지url(임시) : {{ item.images?.[0]?.url }} servicesearch > [idx].vue -과 : {{ item.department2 }} -행위 : {{ item.act }} -제목 : {{ item.title }} -안내 내용 : {{ item..

index.tsx /* eslint-disable react-hooks/exhaustive-deps */ /*** * 매장 상세 (CEO) 페이지 */ import React, { useState, useEffect, useRef } from "react"; import { useRouter } from "next/router"; import Layout from "example/containers/Layout"; import ImageUploader, { ImageFile } from "../../../components/ImageUploader"; import { ImgModel, CodeModel } from "@apis/common"; import { getFormattedDate } from "..

리액트, NEXTJS로 카카오 로그인 구현을 해보았다. 진행한 카카오 로그인의 전체 흐름을 간단히 정리해보았다. 1. 맨 처음 사용자가 '카카오로그인' 눌렀을 시, 카카오 디벨로퍼 사이트에서 받은 REST API KEY 와 설정한 Redirect URI 로 카카오에 CODE 요청 → CODE 발급 2. 그 CODE 로 카카오에게 TOKEN 요청 → TOKEN 발급 (이 시점에 사용자와 앱이 연결됨!!) 3. 그 TOKEN으로 카카오에게 유저정보(ID가 담긴) 를 요청 → 유저정보(ID가 담긴) 발급 4. 그 유저정보를 백엔드에 회원가입 API로 전송 (TOKEN 값을 ID로 설정, 닉네임, 이름 등...) 5. 그 이후에 로그인 요청은 기존 TOKEN 검증처럼 똑같이 진행 리액트, NEXT.JS 로 카카..

nextjs에서 Quill Editor를 사용해서 글과 이미지를 등록해주었다. (여기서는 에디터에 대한 내용은 없다. 관리자 쪽에서 등록해주는 것을 보여주기만 한다. ) 글 내용이 아래와 같이 저장이 된다. 첫번째 공지사항입니다.2024년 3월 골프장이 오픈했습니다. 오픈 행사도 많으니 많은 관심 부탁드립니다 ^^ 이렇게 저장이 된 글과 img를 아래의 코드로 작성해주면 import React, { useState, useRef, useEffect } from "react"; import { useRouter } from "next/router"; import { format } from "date-fns"; import { getNoticeInfo, InfoModel } from "@apis/notic..

퍼블리싱으로 제공받은 CSS를 사용하여 리액트에서 하트를 누르면 단골상점으로 등록하는 작업을 진행했다. CSS 하트와 관련된 스타일이 8개가 있었다. /* 하트 지정 시 필요한 스타일 */ /* 1. 하트 옆 체크박스 숨기는 */ .like-check-box input[type=checkbox] { position: absolute; width: 0px; height: 0px; overflow: hidden; } /* 2. 하트 박스 전체가 아예 노출이 안되게 하는 스타일 */ .like-check-box input[type=checkbox] + label { position: relative; display: inline-block; border: 0.0625rem solid #e0e0e0; borde..

리액트 개발 중에 줄바꿈이 필요했다. 아래와 같이 입력을 했다.  1. 태그는 기본적으로 줄바꿈이 적용되어 저장된다. 이런식으로.. contents 가 바로 \n 으로 변환되어 로 저장된 것을 볼 수 있다. 화면을 보면, \n 으로 저장된 부분이 개행이 되지 않고 생략되어 출력된다.  줄바꿈을 적용해보자! 2. whiteSpace: "pre-wrap" 으로 줄바꿈하기 정말 간단하다. p 태그에 스타일 속성을 아래와 같이 넣기만 하면 된다.  {data?.contents} 화면에도 줄바꿈이 잘 적용되었다!

next.js 와 react.js 로 개발하며 적용한 부분이다. 아래와 같이 모바일 화면 안에서 예약 일시에 datepicker 를 사용하여 입력받고 싶었다. 기획 상으로 부터 요청 받은 적용 조건 사항은 아래와 같다. 원하는 달력 적용 조건 - 이전 달, 다음 달은 회색 처리하여 표시되도록 할 것 - 달력을 선택하기 전에 오늘 날짜가 표시되도록 할 것 - 오늘 이전으로는 선택하지 못하도록 할 것 - 한달 뒤는 선택하지 못하도록 할 것 타임피커 적용 조건 - 09~24시만 적용되도록 할 것 - 30분 단위로 선택하도록 할 것 리액트에서 제공하는 datepicker 라는 라이브러리를 사용하면 아주 편하게 적용할 수 있다. 설치 먼저 터미널에 아래 명령어를 입력해주고 설치해 준다. npm install re..

react 11.1.2 , next.js 17.0.2 로 개발한 게시판 화면이다. 1. list.tsx 문의 목록 게시판 import React, { useState, useEffect } from "react"; import Layout from "example/containers/Layout"; import { getAdminInquiryList, InfoModel, Api } from "../../../api/inquiryApi"; import { useRouter } from "next/router"; import DatePicker from "react-datepicker"; import { format } from "date-fns"; import "react-datepicker/dist/re..

10000개가 넘게 커밋목록에 뜬다 ;;; gitignore 설정을 해주었다 . 아래 사이트에서 'react', 'nextJS' 같이 원하는 키워드를 입력하고 '생성' 버튼을 누르면 적절한 ignore 형식을 만들어준다. https://www.toptal.com/developers/gitignore gitignore.io Create useful .gitignore files for your project www.toptal.com # Created by https://www.toptal.com/developers/gitignore/api/react,nextjs # Edit at https://www.toptal.com/developers/gitignore?templates=react,nextjs ###..

프론트 시작. 1. 클론 받기 1) 인텔리제이에서 프론트작업을 원래처럼 클론받기 2) VSCode에서 File → Open Folder → 인텔리제이에서 클론받았던 폴더 선택 2. yarn 설치 및 환경 변수 설정 터미널에서 npm install -g yarn → yarn install → $env:NODE_OPTIONS="--openssl-legacy-provider" 3. yarn dev 로 프로젝트 실행 터미널에서 yarn dev 입력 2번 과정에서 환경변수가 설정이 안되고 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다. 라는 에러만 내뱉었다 . yarn dev 로 실행을 해봐도, 이런 에러가 나고 실행이 되지 않았다. opensslErrorStack: [ 'error:03000..

react 를 설치 중에 node.js 버전 다운그레이드를 하면서 발생한 문제 해결 기록 .. $env:NODE_OPTIONS="--openssl-legacy-provider" 이 명령어를 치는데 계속 오류가 났다. yarn dev 도 실행했는데 Error: error:0308010C:digital envelope routines::unsupported 에러가 나서 , 구글링 해보니 node.js 버전을 다운그레이드해야한다고 했다. 현재는 버전이 20이라서 지원이 안되는 듯 하다.... 18버전을 다운로드 하려니까 지원이 안되는 듯 하다. 버전을 다운그레이드 하려면 nvm을 설치해야 한다고 한다 ..;; 그래서 nvm(node version manager) 를 설치한 후에 , https://github...

아이템 생성  기존처럼 pom.xml 로 작성했다가 , 아래와 같이 pom.xml 을 찾지 못하고 빌드를 실패했다.    서버에서 pom이 어디있는지 찾아보니,  /var/lib/jenkins/workspace/park-golf/parkGolf/pom.xml 이 경로에 있었다.  그래서 상대경로인 parkGolf/pom.xml 로 수정해주었다.  빌드 성공!!  빌드 콘솔 창을 보니, target 폴더가 생성이 되고, 그 안에 jar파일이 잘 떨어졌다. cd var/lib/jenkins/workspace/park-golf/parkGolf/targetjava -jar parkGolf-0.0.1-SNAPSHOT.jar 더보기java -jar 로 실행해보니, 로깅파일 권한이 없다는 에러가 나오면서 빌드가 실패..

이렇게 들어가서 포트 변경을 하고, vi /usr/lib/systemd/system/jenkins.service 다시 실행을 시켜봤는데, 아래와 같은 WARNING 이 뜨며, 액세스가 거부되었다는 메시지가 떴다. [root@localhost /]# systemctl status jenkins ● jenkins.service - Jenkins Continuous Integration Server Loaded: loaded (/usr/lib/systemd/system/jenkins.service; disabled; preset: disabled) Active: active (running) since Tue 2024-02-06 14:51:52 KST; 5min ago Main PID: 78498 (java)..

기본 기능 Ctrl + ,(콤마) 설정창 열기 Ctrl + `(백틱) 터미널 열기/닫기 Ctrl + B 왼쪽 탐색기 창 끄기/켜기 Ctrl + '+' / Ctrl + '-' 폰트 사이즈 조절 Ctrl + 1 or 2 좌측 또는 우측 화면으로 포커스 하기 Ctrl + PgUp / PgDn 열어놓은 탭 왔다갔다 하기 Ctrl + L 코드 한 라인 블록으로 묶기 Ctrl + D 같은 단어 하나씩 선택 (밑으로 하나씩 선택됨) Ctrl + .(점) 에러발생시 없는 모듈 자동으로 찾기 (import) Ctrl + K, Ctrl + F 소스코드 정렬 Ctrl + \ 파일 화면 창 분할 (오른쪽 분할) Ctrl + x 한줄 삭제 Ctrl + Shift + L 같은단어 전체 선택 Ctrl + Shift + [ / ] ..

김영한 스프링 MVC1 강의를 예전에 들었지만, 항상 헷갈리는 부분이 이 부분이다.. 한 눈에 파악하고 싶어서 한 장에 정리를 해보았다. 달달 외워야겠다.

회사에서 일주일간 첨부파일 업로드, 글과 이미지를 함께 저장하는 기능을 개발했다. 포스팅도 꼼꼼히 하려고 노력했다. https://yeees.tistory.com/427 파일 업로드 기능 개발 (공통 모듈 개발) 업무 중에 개발했던 파일 업로드 기능 구현 과정을 정리해보았다. 아래 순서로 진행하면 편하다. (자바8, 스프링부트2.7.16, MyBatis, MariaDB, DBeaver사용) 1. common패키지를 작성하여 파일 업로드 공통 yeees.tistory.com https://yeees.tistory.com/429 [JAVA] 글과 이미지를 함께 저장하기 (Jsoup을 사용하여 추출) 업무 중에 [공지사항] 화면의 글 작성 기능을 개발하며 정리한 글이다. (자바8, 스프링부트2.7.16, My..

첨부파일 다운로드 API 개발 중에 아래와 같은 오류가 발생했다. 오류 상황 포스트맨 요청 콘솔창 콘솔창을 보니, HttpMessageNotWritableException 이 발생했다. 2024-01-30 11:17:31.261 ERROR 50824 --- [nio-3000-exec-3] k.c.i.p.c.c.ControllerAdviceHandler : org.springframework.http.converter.HttpMessageNotWritableException 2024-01-30 11:17:31.261 ERROR 50824 --- [nio-3000-exec-3] k.c.i.p.c.c.ControllerAdviceHandler : No converter for [class kr.co.iabac..

며칠 코딩 안했다고,, 감이 떨어졌나보다. 대댓글 구현하는데 왜이렇게 자꾸 머리가 안돌아가고 멍한지 ㅜㅜ https://yeees.tistory.com/425 댓글/대댓글 기능 구현 2 depth 의 대댓글 기능을 구현했다. 무한 대댓글 구현을 계층형 쿼리로 구현해본 적은 있는데, 2 depth로 대댓글까지 구현은 처음이어서 조금 헤맸다. CommunityRplSvcImpl @Service public class CommunityRplSvcImpl yeees.tistory.com 앞으로 사용할 일이 많을 것 같으니 꼭 잘 숙지해놓기..! 리팩토링이 필요하지만,, 그건 내일 해야겠다.

https://yeees.tistory.com/423 [MyBatis] getter 메소드 자동 사용(?)Dto의 getter 메소드는 sql 문에서 사용될 수 있을까??? SELECT c.idx, c.member_idx, c.title, c.contents, c.crte_dt, c.del_yn FROM tb_community c c.del_yn = 'N' AND c.title LIKE '%${keyword}%' ORDER BY crte_dt DESC LIMIT #{pSize} OFFSET #{pIndexyeees.tistory.com 이 기능이 있는 줄 몰랐는데 신기한 기능이다. 조만간 마이바티스 기능에 대해 포스팅 해야겠다. 오늘은 회사 신규 프로젝트의 CRUD를 완료했다.

Dto의 getter 메소드는 sql 문에서 사용될 수 있을까??? SELECT c.idx, c.member_idx, c.title, c.contents, c.crte_dt, c.del_yn FROM tb_community c c.del_yn = 'N' AND c.title LIKE '%${keyword}%' ORDER BY crte_dt DESC LIMIT #{pSize} OFFSET #{pIndex} 이전 쿼리를 보며 새로운 쿼리를 작성하던 중 궁금증이 생겼다. LIMIT #{pSize} OFFSET #{pIndex} 이 부분이다. 포스트맨 요청은 이렇게 pSize, pNum 이렇게 넣어서 조회를 한다. 그런데, 쿼리에서는 ${pNum}이 아닌 ${pIndex}로 조회하고 있었다. Dto 는 아래와 ..

리눅스 명령어 정리 awk 텍스트 데이터를 조작하고 보고서를 생성하는데 사용되는 강력한 패턴 스캐너 및 처리기. bg 작업을 백그라운드에서 실행하도록 하는 명령어. bzip2 파일을 Bzip2 형식으로 압축하거나 해당 형식에서 압축을 해제하는데 사용되는 명령어. cat 파일의 내용을 화면에 출력하는 명령어. cd 디렉토리 변경을 위한 명령어. chgrp 파일이나 디렉토리의 소유 그룹을 변경하는 명령어. chmod 파일이나 디렉토리의 권한을 변경하는 명령어. chown 파일이나 디렉토리의 소유자나 소유 그룹을 변경하는 명령어. clock CMOS 시간을 조절하는 명령어. cp 파일을 복사하는 명령어. crontab 주기적으로 실행되는 작업을 설정하는데 사용되는 명령어. date 시스템의 현재 날짜와 시간을..