Nellie's Blog

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

기본 기능 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 + [ / ] ..

1. nodeJS 설치 https://nodejs.org/en/download Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vue 개발환경 다운로드 npm install -g @vue/cli 를 입력하여 vue 개발환경을 빠르게 다운로드 받는다. 3. 확장자 설치 1. Vetur 2. HTML CSS Support 3. Vue 3 Snippets 4. vue 프로젝트 생성 vue create [프로젝트명] https://haenny.tistory.com/247 [VueJS] VSCode 에서 VueJS 시작하기 - ① 설치 및 세팅 방법 [VueJS] VSCod..

샘플 1 {{name}} 이름 {{job}} 샘플 2 Hello, Vue.js Hi {{main_content2}} {{today_weather}} 오늘의 날씨보기 오늘의 운세 {{today_lucky}} {{book.title}} {{book.author}}

이 전에 프로젝트를 진행하면서 HiChart를 써 본 경험이 있다. 찾아보니, 아파치 이차트 라는 아파치 소프트웨어에서 지원하는 좋은 차트 라이브러리도 있어서 정리를 해보려고 한다. ECharts 개념 아파치 이차트(Apache ECharts)는 아파치 소프트웨어 재단(Apache Software Foundation, ASF)에서 지원하는 자바스크립트(JavaScript) 오픈 소스 시각화 라이브러리입니다. ECharts 특징 및 장점 1. 무료 및 오픈소스인 Apache 라이센스이기 때문에, 프로젝트 사용에 자유로우며 안정성과 신뢰성, 긴 호환성을 보장한다. (가장 큰 특징 및 장점) 2. 버전업/릴리즈 주기가 상당히 빠르다. v5.0.0, v5.0.1, v5.0.2 - 버전업 주기가 한달 미만이다. ..

스크립트에서 화면으로 렌더링 하는 과정에서 에러가 발생한 듯하다.. 에러메시지:  Uncaught SyntaxError: missing ) after argument list (at (색인):125:50)  BoardController @GetMapping public String getAllBoards2(@ModelAttribute("params") final SearchDto params, Model model) { PagingResponse response = boardService.findAllBoards(params); model.addAttribute("boards", response); model.addAttribute("params", para..

board.jsp 코드 페이징 제외한 기능이 되는 상태이다.  로그아웃 마이페이지 게시판 --%> 님 안녕하세요!--%>--%> 글 작성 제목 작성자 작성일 ${board.title} ${board.nickname} ${board.createdAt} ..

컨트롤러 @RequiredArgsConstructor @Controller @Slf4j @CrossOrigin public class HomeController { private final UserService userService; // 1. 회원가입 화면 @GetMapping("/register") public String signupForm() { return "register"; } // 2. 회원가입 @PostMapping("/register") @ResponseBody public void signup(@RequestBody UserDto userDto) { System.out.println("TEST"); System.out.printf("testDto == " + userDto.getEma..

HTTP Request HTTP Request Message는 공백(blank line)을 제외하고 3가지 부분으로 나누어진다. Start Line Headers Body Start Line HTTP Request Message의 시작 라인 HTTP request의 start line 3가지 부분으로 구성 HTTP method Request target HTTP version GET /test.html HTTP/1.1 [HTTP Method] [Request target] [HTTP version] HTTP method는 요청의 의도를 담고 있는 GET, POST, PUT, DELETE 등이 있다. Request target은 HTTP Request가 전송되는 목표 주소이다. HTTP version은 v..

제이쿼리(jQuery) 선택자 선택자명 설명 $("tag") tag라는 이름의 모든 태그 요소를 선택 $(".class") class라는 클래스명의 모든 클래스 요소를 선택 $("#id") id라는 아이디명의 아이디요소를 선택(한페이지에 1개만 가능) $("div li") div에 있는 li모두 선택 $("div > p") div의 p태그라는 직계자식을 선택 $(this) 현재선택중인 요소를 가리킴 ※ 선택자 태그 입력 시 홑따옴표(') 또는 쌍따옴표("") 모두 입력가능 $('') 또는 $("") 제이쿼리(jQuery) 메소드 모음 분류 메소드 설명 일반노드찾기 $(선택자).length 찾은개수 구하기 $(선택자).eq(index) n번째 노드 접근하기 $(선택자).get(index) $(선택자)[in..

- 자바스크립트를 사용하기앞서, Visual Studio Code 와 Node.js 를 설치해준다! - Node.js 란 ? "Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser" Node.js를 정의하는 문장. 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기. 이 번역기가 이전에는 웹브라우저에만 있었지만, 우리 컴퓨터에 Node.js만 설치해주면 웹브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하..