Nellie's Blog

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 강의를 예전에 들었지만, 항상 헷갈리는 부분이 이 부분이다.. 한 눈에 파악하고 싶어서 한 장에 정리를 해보았다. 달달 외워야겠다.

첨부파일 다운로드 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..

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 시스템의 현재 날짜와 시간을..

신규 프로젝트에 젠킨스를 구축해보라는 팀장님의 명이 있어서 서버에 접속을 시도했다. git bash로만 리눅스 서버를 다루다가 회사 선임님께서 좋은 툴을 알려주셨다. MobaXterm 이라는 툴인데 더 편하다고 한다. 아래 사이트에서 무료다운로드 하면 된다. https://www.softonic.kr/download/moba/windows/post-download Download MobaXterm 23.1 - free - latest version STG Cache Audit Internet Explorer 캐시에서 사이트, URL, 쿠키 및 방문 기록 목록을 쉽게 볼 수 있습니다. www.softonic.kr 다운로드가 다 되면 창을 열고, 왼쪽 상단 Session 클릭 Bookmark settings..

WITH RECURSIVE cte_count AS ( -- Non-Recursive 문장( 첫번째 루프에서만 실행됨 ) SELECT 1 AS n UNION ALL -- Recursive 문장(읽어 올 때마다 행의 위치가 기억되어 다음번 읽어 올 때 다음 행으로 이동함) SELECT n + 1 AS num FROM cte_count WHERE n < 3 ) SELECT * FROM test; 메모리 상에 가상의 테이블을 저장한다. 반드시 UNION 사용해야한다. 반드시 비반복문(Non-Recursive)도 최소한 1개 요구된다. 처음 한번만 실행 SubQuery에서 바깥의 가상의 테이블을 참조하는 문장(반복문)이 반드시 필요하다. 반복되는 문장은 반드시 정지조건(Termination condition)이 ..

남궁성 저자의 자바의 정석을 보고 작성했다. 매번 찾아보는 것 보다 한 번 정리하고 두고 두고 보려고 만들어 보았다. 스트림의 중간연산 스트림의 최종연산

9. 갑상선장애 9-1. 갑상선 기능 저하증 1. 정의 갑상선에서 갑상선 호르몬이 잘 생성되지 않아 체내에 갑상선 호르몬 농도가 저하된 또는 결핍된 상태 2. 진단 채혈 검사를 통해 혈액 내 갑상선 호르몬 농도를 측정하여 진단할 수 있다. 갑상선 기능 저하증의 경우 갑상선 호르몬(T4 또는 T3)의 농도가 정상보다 낮게 측정된다. 3. 증상 갑상선 호르몬의 부족으로 에너지 대사가 떨어지므로 심장 박동수(맥박)나 체온 조절 등의 필수 기능도 떨어지며 그 외 대사 저하와 관련된 여러 가지 증상이 발생할 수 있다. 쉽게 피로하며 의욕이 없다. 기억력이 감퇴하고 집중력도 떨어진다. 몸이 붓고 식욕은 없는데도 체중이 증가한다. 추위를 잘 타고 땀이 잘 나지 않으며 피부는 건조하다. 목소리가 쉬고 말이 느려진다. ..

7. 대뇌혈관질환 대표적인 대뇌혈관질환 : 허혈성 뇌졸중(뇌경색), 출혈성 뇌졸중(뇌출혈) 7-1. 허혈성 뇌졸중(뇌경색) 1. 정의 뇌조직은 평상시에도 많은 양의 혈류를 공급받고 있다. 그런데 다양한 원인으로 인하여 뇌혈관에 폐색이 발생하여 뇌에 공급되는 혈액량이 감소하면 뇌조직이 기능을 제대로 하지 못하게 된다. 뇌혈류 감소가 일정 시간 이상 지속되면 뇌조직의 괴사가 시작된다. 뇌조직이 괴사되어 회복 불가능한 상태에 이르렀을 때 이를 뇌경색이라고 한다. 2. 진단 뇌 컴퓨터단층촬영(뇌 CT)이나 뇌 자기공명영상촬영(뇌 MRI) 등의 영상 검사를 통해 출혈성 뇌졸중과 감별하고, 뇌졸중의 위치, 크기 및 폐색된 혈관의 위치를 파악하여 확진한다. 3. 증상 갑작스럽게 발생하는 편측마비, 안면마비, 감각이상..

4. 악성신생물(암) 1. 정의 정상적으로 세포는 세포내 조절기능에 의해 분열하며 성장하고 죽어 없어지기도 하며 세포수의 균형을 유지한다. 그러나 여러가지 이유로 인해 세포의 유전자에 변화가 일어나면 비정상적으로 세포가 변하여 불완전하게 성숙하고, 과다하게 증식하게 되는데 이를 암(cancer)이라 정의할 수 있다. 2. 진단 의사의 진찰, 조직검사(생검), 세포검사, 내시경검사, 종양표지자검사, 영상진단검사, 핵의학검사 등으로 진단한다. 하나의 검사로 암이 확진되고 병기를 결정할 수 있는 방법은 아직까지 없기 때문에 암의 진단은 여러 검사를 복합적으로 실시하여 의사의 종합적 판단으로 결정된다. 생검 암은 바늘 생검 또는 수술을 통해서 종양 조각을 채취하고 의심 부위의 검체를 채취하는 것을 생검이라고 한..

만성질환(chronic disease) 정리 0. 목차 1. 만성질환 정의 및 분류 2. 만성질환 종류별 개요 1. 고혈압 2. 당뇨병 3. 만성폐쇄성폐질환(COPD) 4. 악성신생물(암) 5. 호흡기결핵 6. 심장질환 - 심부전증, 협심증, 심근경색증, 부정맥질환 7. 대뇌혈관질환 - 허혈성 뇌졸중(뇌경색), 출혈성 뇌졸중(뇌출혈) 8. 신경계질환 - 뇌전증, 치매, 파킨슨병 9. 갑상선장애 - 갑상선 기능 저하증, 갑상선 기능 항진증 10. 간질환 - 만성간염(B형, C형), 간경변증 11. 만성신부전 12. 정신 및 행동장애 - 우울증, 불안장애, 수면장애 1. 만성질환(chronic disease) 정의 및 분류 세계보건기구(WHO) 세계보건기구에서는 만성질환을 감염성 질환에 대비되는 개념으로 비..

0. 목차 1. 만성질환 정의 및 분류 2. 만성질환 종류별 개요 1. 고혈압 2. 당뇨병 3. 만성폐쇄성폐질환(COPD) 4. 악성신생물(암) 5. 호흡기결핵 6. 심장질환 - 심부전증, 협심증, 심근경색증, 부정맥질환 7. 대뇌혈관질환 - 허혈성 뇌졸중(뇌경색), 출혈성 뇌졸중(뇌출혈) 8. 신경계질환 - 뇌전증, 치매, 파킨슨병 9. 갑상선장애 - 갑상선 기능 저하증, 갑상선 기능 항진증 10. 간질환 - 만성간염(B형, C형), 간경변증 11. 만성신부전 12. 정신 및 행동장애 - 우울증, 불안장애, 수면장애 1. 만성질환(chronic disease) 정의 및 분류 세계보건기구(WHO) 세계보건기구에서는 만성질환을 감염성 질환에 대비되는 개념으로 비감염성질환(noncommunicable dis..

1. 의료폐기물이란? 같은 법 시행규칙 [별표3]에 해당하는 보건‧의료기관, 동물병원, 시험‧검사기관 등에서 배출되는 폐기물 중 인체에 감염 등 위해를 줄 우려가 있는 폐기물과 인체 조직 등 적출물, 실험 동물의 사체 등 보건‧환경보호상 특별한 관리가 필요하다고 인정되는 폐기물 2. 의료기관 등 배출자 의료폐기물을 처리하려는 자는「폐기물관리법」제17조제5항에 따라 폐기물처리계획서를 확인받아야하며, 확인필증은 배출자가 보관하여야 함 -「의료법」제3조제2항제3호마목의 종합병원은 관할 유역‧지방환경청에 제출, 그 밖의 기관은 관할 지자체에 제출 - 폐업, 업종변경 등으로 더 이상 의료폐기물을 배출하지 않게 되는 경우에는 폐기물처리계획서 확인필증을 승인기관에 반납하여야 함 아울러, 같은 법 제17조제6항에 따라..