Nellie's Blog

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