Next.js에서 위지위그 에디터를 참조할 수 없었던 문제
·
Project/BLUE NOTE
Trouble" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스부모 컴포넌트import React, { useRef } from "react";import WysiwygEditor from "../wysiwygEditor";const CreatePost = () => { const editorRef = useRef(null); const printRefCurrent = () => { console.log(editorRef.current); } return ( Click );};export default CreatePost;자식 컴포넌트import dynamic from "next/dynamic";import React, { useI..
네이밍 컨벤션 이슈
·
Project/BLUE NOTE
Trouble" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스서버와 클라이언트를 혼자 개발하다보니 네이밍 컨벤션 이슈는 없을 것이라 생각했는데, 생각보다 꽤나 복잡하다.클라이언트와 서버의 네이밍컨벤션을 카멜케이스로 정했지만 url은 카멜케이스를 사용할 경우 예기치 못한 에러가 생길 수 있다고 해서 url은 스네이크 케이스를 사용하기고 했다. 그런데 쿼리를 사용할 때, 쿼리스트링을 그대로 사용하자니 카멜 케이스에 어긋나고, 스네이크 케이스를 카멜케이스로 일일히 변경해줘야 하는 번거로움이 생겼다. 그나마 변경하기 쉽게 맵객체를 만들었지만 한번에 속성 축약도 못하고 은근히 코드가 쌓여간다... (mongoDB의 문서 객체의 id도 _id 라는 Key로 되어있긴 하나... 문서 id만..
BLUE NOTE 소개
·
Project/BLUE NOTE
BLUE NOTE" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스재즈 뮤지션들을 위해 국내, 해외의 이슈들을 발행하고, 유저들간의 자유로운 커뮤니케이션, 홍보, 구인 ,구직 등을 위해 만든 커뮤니티. 클라이언트 구현 : https://github.com/Hyunsoo-k/BlueNote서버 구현: https://github.com/Hyunsoo-k/bluenote-server 파트, 기여도" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. 클라이언트: 100%2. 서버: 100%(1인 개발) 기술 스택" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스클라이언트1. 사이트 생성: next.js2. 데이터 패칭: tanstak-..
Vercel 배포 오류
·
Project/portfolio
Trouble " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 Vercel 배포 중 오류가 나서 살펴본 Deployment details 1. vercel로 정상적으로 배포중이었던 프로젝트가 아무런 커밋, 푸쉬가 없는 상태에서 갑자기 접속이 되지 않음2. 배포 Status는 Ready로 정상이었다3. 특이사항으론, 참여했던 프로젝트를 타 팀원이 vercel로 배포중인데, 해당 프로젝트도 접속이 되지 않음   Solution " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. 사이트 주소가 .vercel.app으로 끝나는 경우, 네임서버에서 접속이 차단되고 있었다2. 2024-05-12이후로 다시 접속이 되고있다3. 유료사용을 하거..
타이핑 애니메이션 이슈
·
Project/portfolio
Trouble " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스import React, { useState, useEffect } from "react";import styles from "./Index.module.css";const Home = () => { const myName = "Hyunsoo_Kim"; //length: 11 const [mainText, setMainText] = useState(""); useEffect(() => { let index = 0; const intervalId = setInterval(() => { if (myName.length > index) { setMainText((prevTex..
createPortal로 모달을 띄웠을 때의 이슈와 해결 방법.
·
Project/Synamon
Trouble" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. createPortal로 모달을 띄웠을 때, 백 드롭을 포함한 요소가 현재 레이아웃과 맞지 않아 가로스크롤이 생김 Solution" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 1. body 태그에 relative 속성을 설정한 후,  2. 띄울 모달을 absolute로 설정하고, createPortal의 목적지를 document.body로 하였다.  3. 이슈였던 가로 스크롤이 사라졌다. 이 방법은 body가 최소한 브라우저 화면 전체를 커버하고 있어야 가능하다. 주의해야 할 점은, 모달을 띄울 요소의 크기를 screen이 아니라 full로 해야한다는 것. screen은 현재 보이는..
Hyunsoo_Kim
'Project' 카테고리의 글 목록