첸첸's devlog

1️⃣ 로그인 form - login() 함수 실행 자동 로그인 아이디 저장 비밀번호 기억 로그인 /* login() 함수 실행*/ 2️⃣ javascript //쿠키 저장 함수 function setCookie(name, value, expiredays) { var todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";" } //쿠키 불러오기 함수 function getCookie(name) { var search = name + "="; if (..

import logo from './logo.svg'; import './App.css'; import { useState, useMemo } from 'react'; function App() { const [list, setList] = useState([1, 2, 3, 4]); const [str, setStr] = useState('합계'); const getAddResult = () => { let sum = 0; list.forEach((i) => (sum = sum + i)); console.log(sum); return sum; }; //list가 변경 되었을 때만 getAddResult()가 실행 될 수 있게 기억 const addResult = useMemo(() => getAddRes..

프로젝트를 진행하면서, 한페이지에서 여러개의 에디터를 사용해야하는 경우, 심지어 그걸 동적으로 생성해야하는 경우가 생겼다. 다음에디터, 네이버 스마트에디터, 썸머노트 중에 후보를 고르다, 썸머노트는 클래스로 관리를 할 수 있어서 가장 편할 것 같아서 사용하려고 했는데, 썸머노트는 표 삽입 기능이 너무나 약하다. 셀의 크기 변경 같은게 안되고, 혹시나 방법이 있을까 열심히 구글링 한 결과, 썸머노트 측에서 아직 업데이트 예정이 없다는 것을 보고, 눈물을 머금고....다른 에디터를 찾았다. 다음 에디터와 네이버 스마트 에디터 둘 다 업데이트가 더 이상 안되지만, 다음에디터는 가이드 조차 제대로 찾기가 힘들어서 네이버 에디터를 사용하기로 했다. 스마트에디터 기본 사용법 기본 사용법은 간단하다. 1️⃣ 에디터 ..

nextJs 공부를 하면서 처음 만난 에러, 아주 간단한 에러이고 명확한 에러인데, 원인을 찾을 수 없었다. 나는 분명 자식을 태그 안에 태그 하나만 뒀는데? 그래서 검색을 해보니 ✨태그 안에서 띄어쓰기가 되어있으면, 이 띄어쓰기도 자식으로 인식✨한다는 것이다. 그래도 내 코드엔 띄어쓰기가 없는데..? 하고 보니! 주석을 쓴다고 띄어쓰기가 하나 되어있었다. 아래에서 주석 {/* join() 은 한 배열을 다른 한 문자열로 바꾸는 방법*/} 를 보면 옆의 태그와 한칸 떨어져있는 것을 볼 수 있다. Link와 주석 사이에 띄어쓰기를 없애니 정상작동했다😅 import Link from "next/link" import { useRouter } from "next/router"; import styles fro..

useRef란? 리액트를 사용하다 보면 focus라던지, 스크롤 설정이라던지 DOM에 직접적으로 접근 해야하는 경우가 생긴다. 그럴 때 사용하는것이 useRef이다. 기본 사용법 1️⃣ useRef()를 사용하여 객체를 만든다. import React, { useRef } from 'react'; const exampleRef = useRef(); 2️⃣ 접근하고자 하는 DOM에 ref 값으로 만들어준 객체 값을 넣어준다. import React, { useRef } from 'react'; const exampleRef = useRef(); const example = () => { return ( ); } export default example; 3️⃣ DOM활용하기 : ref객체의 .current..

리액트에서 기본적으로 다른 components에서 데이터를 전달 받을 때 props를 사용을 한다. 이 props는 자신의 바로 위에 있는 컴포넌트로부터 직접 전달 받아야 한다는 한계가 있다. 부모와 자식의 계층이 한단계 일 때는 크게 상관이 없지만, depth가 깊어지면 자신이 사용하지도 않는 데이터를 전달해줘야하는 경우가 생긴다. 이 때문에 생긴게 useContext API이다. https://ko.reactjs.org/docs/context.html#reactcreatecontext Context – React A JavaScript library for building user interfaces ko.reactjs.org 만약 아래의 사진의 dep2안에 "첸첸의 블로그"라는 문구를 넣으려면 어떻..

리액트를 처음 배우면서 useState는 어렵지 않게 이해 할 수 있었는데, useEffect는 공식문서를 봐도 정확히 이해가 가지 않았다. 그래서 정리해본다.useEffect는 한마디로 말하면 "랜더링이 될 때마다 실행 된다" 이다. 기본형 button 누르면 count의 값이 1씩 증가하는 코드이다. import React, {useEffect, useState} from 'react'; function App() { const [count, setCount] = useState(0); useEffect(()=> { console.log(count); }) const increment = () => { setCount(count+1); } return ( button ); } export defaul..