최신의 데이터를 보여줘야 하는 애플리케이션에서의 데이터 캐싱
·
고민해보기
개발환경" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스1. Next.js2. tanstack-query 주제" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스tanstack-query는 데이터 캐싱을 위한 기능을 제공하며, 이를 통해 같은 요청을 다시 보내지 않아도 캐싱되어 있는 데이터를 사용할 수 있다. 하지만 유저들이 사용할 수 있는 게시판 등, 서버에 추가되는 데이터를 즉각적으로 보여주어야 하는 상황에서 캐싱된 데이터를 사용한다면 서버에 업데이트 된 데이터를 확인할 수 없다. 그렇다면 각 마운트마다 서버에 데이터를 요청해야 하는데, 데이터를 캐싱해야하는 이유가 있는가 처음 글을 작성할 시의 생각" data-ke-type="html">HTML 삽입..
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..
prototype
·
JavaScript
prototype" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스객체간의 상속을 구현하는 개념function MakeFunc(name) { this.name = name; // this는 생성될 객체를 가르킨다.}MakeFunc.prototype.greeting = function () { console.log(`hello ${this.name}`) };const newFunc = new MakeFunc("Kim");위 코드를 전제로 프로토타입을 한번 알아보자.생성자 함수 MakeFunc을 만든다. (화살표 함수는 this 바인딩이 없다.). 생성자 함수엔 prototype 이라는 객체가 기본적으로 내장되어 있다. 이 prototype 객체에 greeting 메서드를 추가했다..
네이밍 컨벤션 이슈
·
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-..
bcrypt
·
node.js/bcrypt
bycrypt" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스비밀번호를 hash하거나 hash를 검증하는 라이브러리Hash란? 문자열을 되돌릴 수 없는 방식으로 암호화하는 방법. 출력값으로 해시화 이전의 값을 알아낼 수 없다. 설치" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스npm install bycrypt hash" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스const bcrypt = require("bcrypt");const { User } = require("../model/user.js");app.post("/sign_up", async (req, res) => { const { email, password ..
jsonwebtoken
·
node.js/Json Web Token
jsonwebtoken" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스Node.js 환경에서 JWT를 생성하고 검증하는 라이브러리 설치" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스npm install jsonwebtoken 토큰 생성" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스jwt.sign(payload, secretKey, [options])const user = { email: "user1@gamil.com", nickname: "user1"}const option = { expiresIn: "1h"}jwt.sign(user, secreyKey, option)1. option 인자에는 만료시간(express..
mongoose
·
node.js/mongoose
mongoose" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스node.js 환경에서 mongoDB를 다루는 라이브러리 설치, 프로젝트 세팅" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스npm install expressnpm install mongoosenpm insatll dotenv // 환경변수를 관리해주는 라이브러리npm install nodemon --save-dev// package.json{ "dependencies": { "dotenv": "^16.4.5", "express": "^4.19.2", "mongoose": "^8.5.1" }, "devDependencies": { "nodemon": "^3.1...
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..
IntersectionObserver
·
JavaScript
IntersectionObserver">IntersectionObserver요소와 뷰포트의 관계를 감지하는 객체를 생성  window.onload = () => { const io = new IntersectionObserver((entries) => {}, { root: null, rootMargin: "0px 0px 0px 0px", threshold: 0, });};1. IntersectionObserver 생성자 함수의 첫번째 매개변수는 감지할 요소들이 들어있는 배열을..
Image
·
next.js
HTML 삽입 미리보기할 수 없는 소스 next.js에서 제공하는 이미지 최적화 컴포너트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 import Image from "next/image" const Product = () => { return( ) } 1. Image 컴포넌트는 width, height 말고도 fill 이라는 속성으로 크기를 지정할 수 있다. fill은 포지셔닝이 된 부모요소를 기준으로 크기가 정해진다 2. src 속성은 public 폴더를 기준으로 상대 경로를 적는다 public 폴더 외부에 있는 이미지 파일을 사용할 때 1. next.config 파일의 nextConfig 객체에 Image 프로퍼티를 수정하거나 추가한다
Hyunsoo_Kim
export { /*공부한 것들*/ };
상단으로

티스토리툴바