recent
-
[React-Hook-Form] FormData 관리하기
개요1. 왜 사용해야하는가?2. 주요 함수 간단 정리3. React-Hook-Form 사용법? ✅ Why? 📦 제어 vs 비제어 컴포넌트→ 제어 컴포넌트React에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻하며, 일반적으로 state를 통해서 input값을 받아올 때의 상태를 말한다.실시간으로 값이 동기화되므로 값의 변화에 따라서 리랜더링이발생한다.사용자의 입력 폼이 늘어날수록 랜더링되는 요소가 늘어나 불필요한 연산이 발생한다.유지보수에 힘들고 유효성 검사까지 진행한다면 코드가 매우 길어져 가독성이 나빠진다.const [value, setValue] = useState(""); setValue(e.target.value)}/> → 비제어 컴포넌트React에 의해 값이 제어되지 않는 엘리먼트를 뜻하며,..
-
[Jest] Vite + Typescript + pnpm 환경에서 Jest
개요 설치하기 자주사용하는 Matcher 1. 설치하기 Jest 패키지 설치) pnpm add -D @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer package.json 수정) "scripts":{ ... "test": "jest" } 실행문구임 이거 추가해줘서 터미널에서 쳐야함 Jest 설정파일 추가) // jest.config.ts export default { testEnvironment: "jsdom", transform: { "^.+\\.tsx?$": "ts-jest", }, mo..
list
-
[Mac] 움짤만들기(동영상 -> 이미지로 변환)블로그 정리용 2025.03.19 11:31
개발 도중 블로그를 작성하다보면 이미지로는 표현하지 못할 실행하는 UI를 보여줘야 이해하기 빠른 경우가 많다. 하지만 5 ~ 7초 내외 간단한 영상을 동영상으로 도중에 집어넣는다면 보기에도 그렇게 좋지 못하다는 느낌이 들기에 Mac의 Keynote를 활용해서 동영상을 이미지로 만드는 간단한 방식을 소개하려 한다. 📌 출처: T-story 블로그 1️⃣ 화면 녹화먼저 이미지로 변환할 동영상이 필요한데 Mac의 화면녹화(cmd + shift + 5)를 활용해서 원하는 동영상 파일을 만든다.이렇게 만들게 된 영상 파일을 keyNote를 통해서 이미지로 변환할 예정이다. 2️⃣ Keynote 활용keynote를 통해 새 프레젠테이션을 열어서 원하는 동영상을 keynote에 끌어넣는다.keynote의 슬라이..
-
[코드 팩토리의 플러터 프로그래밍] 3일차카테고리 없음 2025.03.06 14:43
📋 목표- Dart 인프런 강의 완강- Chapter 05 플러터 입문하기 1️⃣ 비동기 프로그래밍(AP)과 3.0 업데이트 문법📦 비동기 프로그래밍(Async Programing)CPU를 최대한의 효율로 사용할 수 있는 프로그래밍으로 Thread에 대한 간단한 개념작업을 수행할 때 가장 작은 수행 단위 하나의 작업(Thread)가 수행되는 동안에 CPU는 다른 작업을 수행할 수 없다(동기적 처리 방식) 이러한 방식으로 보았을 때 어떠한 작업에서 서버 요청하는 부분이 있다면 이 요청의 response를 받기 전까지 CPU는 다른 작업을 수행할 수 없다(가장 기본적인 처리방식) 이러한 방식은 실제로 그닥 유용하지 않기에 비동기 프로그래밍을 통해서 이러한 문제의 해결을 할 수 있다. 그리고 Dart언어는..
-
[코드 팩토리의 플러터 프로그래밍] 2일차코드팩토리의 플러터 프로그래밍 2025.03.05 15:11
📋 목표- 코드팩토리 Dart 언어 입문 강의 2~3강 수강- 후기 및 이후 목표 1️⃣ 객체지향 프로그래밍(OOP)과 함수형 프로그래밍(FP)객체 지향과 관련된 내용은 옛날에 Javascript에서 객체지향 과 관련된 내용을 공부할 때 접한 적이 있고 함수형 프로그램이은 Javascript의 거의 기본이라서 어떤 내용인지 유추가 될 것 같다. javascript와 관련이 깊은 Dart인만큼 호이스팅의 개념을 가지고 있는지 앞선 화살표 함수가 Javascript와 얼마나 유사한지는 좀 궁금하다. 📦 객체 지향 프로그래밍 (OOP)처음 설명하는 부분을 듣고 있자니 정처기 준비하면서 배웠던 디자인 패턴 중 팩토리 메서드와 유사한 부분이 있는 것 같다.Object를 상속받기에 OOP라고 불림 생성자를 통해..
-
[코드팩토리의 플러터 프로그래밍] 1일차코드팩토리의 플러터 프로그래밍 2025.03.04 20:51
📋 목표 - 플러터 환경세팅- 다트 언어 공부하기- 후기 및 이후 목표 1️⃣ 플러터 환경 세팅기존에 웹 개발에서 사용하던 세팅과 플러터의 세팅 과정에서 어떤 차이점이 있고 어떤 것을 활용하는지 알아보자.- MacOS를 기준으로 환경 세팅을 시작하였으며 Flutter SDK, Xcode, 안드로이드 스튜디오, Homebrew, JAVA v.17 5가지에 대한 세팅을 하였다. 세팅 과정에서 터미널에 명려어를 입력(CLI)하는 방식이 많았으며, 특히나 PATH 변수에 위치를 등록하는 과정에서 조금씩 헤메는 부분이 있었지만 정상적으로 잘 설치를 하였다. 교재에 나와있는대로 따라가기만 해도 충분한 것 같다. 2️⃣ 다트 언어 공부하기책에 나와있는 내용도 있지만 인프런에 5시간짜리 강의가 있어 이 강의를 보면서..
-
[Baekjoon] 약수와 소수와 배수코딩테스트 문제 정리 2025.02.27 15:01
단계별 풀이 중 9단계인 약수, 소수, 배수에 대한 알고리즘 풀이 과정에서 느낀 점 및 내 풀이 결과를 나타내었다. 해당문제: https://www.acmicpc.net/step/10🌈 파이썬 코드📦 5086 1번 문제문제 풀기 전 내 생각일단 입력부분에서 0 0이 오면 반복문을 종료하는 구문을 짜야겠고만. break와 같은 탈출문구? 를 넣으면 될 듯 factor인지 multiple인지 neither인지를 출력하는 함수를 만드는 게 목표def solution(): # 연산의 횟수가 정확히 정해지지 않았으므로 while while True: a, b = map(int, input().split()) # 탈출 구문 if a + b == 0: ..