recent
-
React controlled Form vs uncontrolled Form
React-hook-form을 공부하던 와중 옛날에 끝까지 분석하지 못한 article이 있어서 이를 분석하고 좀 더 나은 방법 및 form을 다루는 방식을 좀 더 세세하게 알아보자고 생각이 들어서 옛 글을 업데이트 하려고 함 출처: A Better Guide To Forms in React 이 글의 시작은 여러 모범 사례들과 Server Component에 대한 내용을 언급하면서 대부분의 양식은 오래된 리소스라고 하면서 React에서 Controlled 방식과 Uncontrolled 방식으로 form을 다루는 방식의 차이점을 설명하면서 시작된다. 1️⃣ React controlled Form vs uncontrolled Form📦 React에서 Controlled 방식은 State를 이용한 방식이다..
-
[실습] Zustand와 createPortal을 활용한 Modal
개요1. 배경 요인2. 이전 코드 및 문제점3. 개선된 코드, 느낀점 및 나의 노력 📖 배경 요인프로젝트를 진행하면서 createPortal을 통해서 상위 CSS에 영향을 받지 않는 Modal을 구현하고자 createPortal과 Zustand를 통해서 alertModal을 구현하였다. 그리고 이를 예시 삼아서 Modal기능을 하는 다른 여러 컴포넌트들을 부가적으로 만들게 되었는데, 각자가 본인의 Modal과 Portal을 생성해서 구현하다보니 중복된 로직과 비슷한 구조를 가지는 부분이 많아져서 이를 동적으로 작동할 수 있는 하나의 모듈화된 컴포넌트로 생성하고자 하였다. 또한 SOLID원칙에서 OCP(Open-Close Principle)를 만족하여 확장에 유연해 효율적이고 견고하며 유지보수가 용이한 ..
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: ..