seunghyun Note

기존에 사용했던 제어 컴포넌트들의 반복되는 코드들과 유효성 검증을 한다면 코드가 점점 길어질 것이다. react에서 컴포넌트 리랜더링이 발생하는 조건 중 하나는 state가 변했을 때이다. 폼에서는 모든 값이 state로 연결되어 있으면 하나의 값이 변할 때 마다 여러개의 자식 컴포넌트들에서 무수히 많은 리랜더링이 발생한다. (즉 불필요한 렌더링이 반복된다) react-hook-form install npm i react-hook-form useForm() 을 사용해서 회원가입 form 만들기 const { register, watch } = useForm(); useForm() 안에는 여러가지 옵션들이 있다. register : register function은 많은 요청들을 해결해주고 handler ..

개인적으로 공부할 것들이 많은 react의 개념들을 정리해보려고 한다. 오늘은 recoil! 공식문서와 블로그를 참고했다. https://recoiljs.org/ko/docs/introduction/getting-started Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org start Recoil make react app npx create-react-app my-app install npm install recoil Recoil Root recoil상태를 사용하는 컴포넌트는 부모에 RecoilRoot가 필요하다. import React from "react"; import { RecoilRoot } from "recoil"; import { RecoilRo..

기간 : 2024.2.29 ~ 2024.3.6 요약 : 크롬 익스텐션 프로젝트 고도화 끝! 어색한 타입스크립트 다이어트 시작 이번 주 목표 (해결) 백준 실버 2 찍기 타입스크립트 강의 밀리지 않기 팀 프로젝트 기획 완성 리액트 마스터 todo 강의 듣기 일일 스프린트 29 Thu [x] 코테3문제 [x] 프로젝트 세팅 [x] 리엑트 챌린지 [x] 리엑트 마스터 강의 3/1 Fri [x] 코테 3문제 [x] UI figma 수정 [x] 타입스크립트 챌린지 2 Sat [x] 코테 5문제 [x] 크롬 익스텐션 고도화 UI 세팅 및 정리 3 Sun [x] 크롬 익스텐션 고도화 마무리 [x] 크롬 익스텐션 배포하기 (web) [x] 서버, aws DB 배포하기 4 Mon [x] 코테 3문제 [x]..

Project Conception & Initiation ✏️ Contents 기획 주제 Stack & tool 아이디어 스피치 요구 사항 정의서 user flow DB UI 설계 목차의 순서로 기획 기획 주제 선정 (24020X~ 24020X) 프로젝트 주제 : 프라이빗한 개인 서재와 서로 어떤 책을 읽고 느꼈는지 공유하는 웹 사이트 팀명 : IF (mbti I와 F의 모임) 서비스 : e-book service(e-book 구현), 책 등록 및 관리, 책 리뷰 공유, (+e-book 음성지원) Stack & tool (추후에 변경) 프론트: React JS, styled-component, react-query, recoil, js, axios UI : Figma,excalidraw 백엔트: Java..

링크 : https://www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net 문제 풀이 1. Set을 통한 배열 중복 제거 arr = [...new Set(arr)]; 2. sort를 할 때 길이가 같을 때, 다를 때 구분 arr.sort((a, b) => { if (a.length !== b.length) return a.length - b.length; return a > b ? 1 : -1; }); const input = ( process.pla..

현재 캡스톤 경진대회 고도화 작업을 하다가 다양한 오류를 접하고 있다. 크롬 익스텐션 개발을 하고 있는데 크롬 익스텐션... 정말 오류 많이 생긴다. html prettier에서는 작동하지만 크롬익스텐션에 넣었을 때 안되는 상황이 너무 많다. 이번에 생긴 오류는 CSP 오류였다. 문제가 생긴 곳은 바로 아래 toggleTable()이였다. 제출 오류가 발생하는 이유는 보안상의 이유로 인라인 핸들러의 실행을 제한한다고 한다. 따라서 의 요소에서 onclick의 속성들인 js코드들을 외부 JavaScript로 이동해야한다. button의 onclick 속성을 제거하고 id를 만들어 요소를 추가한다 제출 js 안에 toggleTable()함수를 호출한다. document.getElementById("submi..