목록스터디 (75)
seunghyun Note
기간 : 2024.3.7 ~ 2024.3.13 요약 : 크롬 익스텐션 프로젝트 배포 (크롬 웹 스토어) 리액트 어렵지만 재밌다 이력서 광탈.... 스펙 + 이력서 관리 + 코테 열심히 해보자! 이번 주 목표 (해결) 백준 실버1 찍기 (22문제 해결) 리액트 챌린지 마무리 (전반적으로 해결했지만 react-query는 복습이 필요하다) 팀 프로젝트 배포 완료! (링크 : https://chromewebstore.google.com/detail/recomm%3C%3Cend/hiblbfbfgdpnhfhnajpbemjfijdbiihm) 이력서 수정 (많이 부족쓰.) 일일 스프린트 3/7 Thu [x] 코테 [x] 팀 회의 [x] 리액트 강의 + 챌린지 8 Fri [x] 코테 [x] 원티드 프리온 보딩 ..
Recoil & react-hook-form recoil 과 React-hook-form 을 이용한 간단한(?) to-do list를 복습해보려고 한다. 기본적인 파일구조 ├── App.tsx ➡️ 주요 애플리케이션 컴포넌트가 위치 ├── atoms.tsx ➡️ Recoil이나 다른 상태 관리 라이브러리를 사용할 때 상태들의 정의를 담당 ├── components │ ├── CreateTravel.tsx ➡️ 여행 항목을 생성하는 데 사용 │ ├── Travel.tsx ➡️ 여행 항목을 표시하고 해당 항목에 대한 작업을 수행 │ └── TravelList.tsx ➡️ 여행 항목들을 리스트 형태로 표시 └── index.tsx 일단 이 파일 구조를 이해하기 위해서는 원리를 그리면서 접근을 했다. (inte..
기존에 사용했던 제어 컴포넌트들의 반복되는 코드들과 유효성 검증을 한다면 코드가 점점 길어질 것이다. 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]..
현재 캡스톤 경진대회 고도화 작업을 하다가 다양한 오류를 접하고 있다. 크롬 익스텐션 개발을 하고 있는데 크롬 익스텐션... 정말 오류 많이 생긴다. html prettier에서는 작동하지만 크롬익스텐션에 넣었을 때 안되는 상황이 너무 많다. 이번에 생긴 오류는 CSP 오류였다. 문제가 생긴 곳은 바로 아래 toggleTable()이였다. 제출 오류가 발생하는 이유는 보안상의 이유로 인라인 핸들러의 실행을 제한한다고 한다. 따라서 의 요소에서 onclick의 속성들인 js코드들을 외부 JavaScript로 이동해야한다. button의 onclick 속성을 제거하고 id를 만들어 요소를 추가한다 제출 js 안에 toggleTable()함수를 호출한다. document.getElementById("submi..