분류 전체보기
-
[2차 스터디] 4주차 회고록 - 로그인 / 회원가입카테고리 없음 2024. 3. 23. 18:15
[새롭게 알게 된 내용] React-hook-form의 기본 개념 및 활용 transform, transition을 통한 애니메이션 효과 modal 및 input에 대한 처리 [느낀 점] 전체적으로 완성도 있게 한 주를 마무리 하지 못한 것이 아쉽다 Input에 대한 처리도 많이 부족했고 라이브러리를 사용하는 방법에 대해서도 다른 사람들에 비해서 좀 이해도가 부족했다고 생각이 들었다. 앞으로 계속 구현을 해야하는 내용이고, 기본적으로 사용 방법을 숙지하고 있으면 좋을 내용이기에 꼭 복습하고 다른 사람들과의 코드와 내 실수를 비교해볼 예정이다. 비제어 컴포넌트를 활용해서 input의 리랜더링을 최대한 억제하려고 노력을 하였는데 react-hook-form에서 구현된 내용이 기본적으로 이러한 내용을 담고 있..
-
[Zustand] Zustand란?프로그래밍 2024. 3. 23. 13:52
개요 1. Zustand의 특징 2. 다른 라이브러리와 비교 3. 사용 방법 ✅ Zustand 우리는 Client state를 관리하기 위해서 상태 관리 라이브러리를 사용해야하는데 현재 update가 활발하게 이루어지고 있으며 사용량도 꾸준히 증가하고 있는 Zustand에 대해서 알아보겠습니다. (Jotai를 개발한 회사에서 만들었다고 한다.) 📦 Zustand의 개발 이유 React에서 일어나는 3가지 문제점에 대한 해결책을 제시하기 위해 제작되었다고 한다. Zombie children: 하위 컴포넌트인 "A"에서 실행하던 어떠한 일이 끝나기 전 상위 컴포넌트가 unmount되었을 시에 A가 작업을 끝낸 후 화면세엇 사라져도 메모리를 지속적으로 잡아먹는 문제 React concurrnecy: 우선순위를..
-
[구름 트레이닝] 막대 도형알고리즘 2024. 3. 20. 12:48
❓문제 설명 2줄로 구성된 input을 CL을 통해서 받는다 첫번째는 막대의 개수고 두번째는 높이인데 " "로구분된 문자열임 막대를 다 붙여서 하나의 도형이 생기는데 이 도형의 둘레를 구하는 것임 ✅ 문제 해결 막대를 통합적으로 보지말고 하나씩 나눠서 합쳤을 때 몇을 빼는지에 초점을 맞춤 한 변의 길이는 무조건 1로 고정이기에 막대 하나의 둘레를 구하는 공식은 (한변 * 2) + 2이다 그리고 막대가 서로 맞닿는 부분에 대해서만 각 막대의 둘레에서 빼주면 되니깐 Math.min()를 통해서 작은 수를 구하고 *2해줘서 빼줄 것임 이걸 다 반복문으로 돌려서 총합 만들어서 뺄 것임 const readline = require('readline'); (async () => { let rl = readline...
-
[CS Study] 프론트엔드 테스트 코드란?네트워크/CS Study 2024. 3. 19. 14:36
개요 1. 왜 해야할까? 2. 테스트 코드 종류 3. Jest and React Testing Library ✅ 왜 해야할까? 프론트엔드 개발 환경의 발전에 따라 요구하는 애플리케이션 수준이 복잡해지고 다양한 방법론과 도구들이 등장하게 되었다. 이 중에서 효율적으로 테스트를 할 수 있는 방법과, 테스트를 해야하는 이유 및 개념에 대해서 알아보도록 하자. 📦 테스트란? "프로그램을 실행하여 오류와 결함을 검출하고 애플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차"로써 발생 가능한 결함을 예방하고 개발 과정에서 생기는 변경 사항으로 인해 새로운 결함이 생기는지 확인하여 자신감 있게 리팩토링 및 코드 개선을 할 수 있으며, 자동화를 통해 휴먼 에러의 가능성도 낮출 수 있다. 빠르고 신회할 수 있는 테스트..