Formik 이쁘게 사용하기

목차Formik이란?Formik과 React-Hook-Form하지만 난 Formik을 쓴다.그렇다면 어떻게 해야 할까?  Formik이란?formik은 React 애플리케이션에서 폼 상태 관리를 쉽게 도와주는 라이브러리이다.복잡한 폼 입력, 검증, 폼의 제출 처리를 위한 로직을 간단하게 구현할 수 있도록 설계되어 있다.최근에 개발자들은 React-Hook-Form과 비교하여 사용 중이다.  Formik과 React-Hook-FormFormik과 React-Hook-Form(이하 'RHF')의 큰 차이점은 상태를 이용하여 관리하는가? 아닌가?로 나뉘는 것 같다.Formik은 React의 State를 통해서 관리하고, RHF은 'uncontrolled components'를 사용하여 성능을 최적화한다. 그렇..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 6. 17.
• textsms

웹페이지 성능 최적화 - 웹사이트 로딩시간을 6.3초에서 0.6초로 줄이기

목차 1. 문제 2. 분석 및 해결 3. 결과 문제 프론트엔드 개발에서 사용자 경험은 매우 중요하다. 이를 향상시키기 위해서 'Lighthouse'라는 도구를 활용할 수 있다. 이 도구는 현재 구현 중인 웹사이트를 분석하여 개선이 필요한 부분을 알려주고, 어떤 점을 개선해야 할지 알려준다. (성능 참.. 처참하다...) 결론을 먼저 보여주자면 단순히 숫자로 보면 성능점수가 2배로 증가했다. 다른 것보다 LCP가 6.3초에서 0.6초로 끌어올렸다. 분석 및 해결 사실 앞의 문제와 결론을 보면 약간의 어그로성이 있다..^^ 누군가는 나랑 비슷한 상황이 있을 것 같아서, 이런 방법을 초기에 생각하지 못해서 도움이 될까 블로그에 작성했다. 환경 Next v13.5.6 tailwind S3 - 이미지 관리 위에 ..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 4. 19.
• textsms

V8 엔진 메모리 구조 - 힙(Heap)과 스택(Stack)

자바스크립트는 싱글 스레드이기 때문에 V8은 자바스크립트 하나의 컨텍스트당 한 개의 프로세스를 사용한다. 만약 서비스 워커를 사용한다면 워커 또한 각각 새로운 V8 프로세스를 생성한다. 실행 중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되고 이를 Resident Set이라고 한다. V8 프로세스(Resident Set) 하나는 크게 하나의 힙 메모리와 스택 메모리로 나뉜다. 스택(Stack) 메모리 스택 메모리는 함수 호출과 실행 컨텍스트, 그리고 원시타입의 변수 값을 저장하는 데 사용된다. 실행 컨텍스트와 함수 호출 함수 호출 시 생성되는 실행 컨텍스트를 순서대로 저장하는 구조이다. 실행 컨텍스트는 해당 함수의 변수, 매개변수, 반환 주소 및 기타 실행에 필요한 정보를 포함한다. 함수..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 3. 11.
• textsms

Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정

1. Mockoon이란? Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출처 : https://mockoon.com/) Mockoon을 사용하는 이유 문제 발생 시작은 개발을 진행하면서 일반적인 플로우는 아래와 같을 것이다. (2~3번이 바뀔 수 있고, 같이 진행될 수 있지만...) 하고 싶은 말은 백엔드가 만들어져야 프론트엔드가 확실하게 만들어진다. 이다. 현재 우리 팀은 프론트엔드는 백엔드가 작업을 할 때 퍼블리싱을 하고, json파일을 만들어서 필요한 데이터를 임시로 만들어서 작업을 한 후 백엔드가 완료가 되면 프론트에서 API를 연결하여 실제 백..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 3. 3.
• textsms

TypeScript - Utility Types

1. keyof interface User{ id:number name:string age:number gender:"M" | "F" } type UserKey = keyof User // "id" | "name" | "age" | "gender" const uk:UserKey = "id" const uk2:UserKey = "score" // 오류 발생 keyof를 이용해서 객체 타입의 모든 키를 문자열 또는 숫자 리터럴 유티온 타입으로 추출할 수 있게 해 준다. keyof 예시 1 객체의 키를 매개변수로 받는 함수를 정의할 때, 해당 객체 타입의 keyof를 이용하여 타입 안전성을 보장할 수 있다. interface Person { name: string age: number } type Person..

• format_list_bulleted TypeScript
• · 2024. 2. 23.
• textsms

TypeScript - Generic

제네릭을 이용하면 class, function, interface를 다양한 타입으로 재사용할 수 있다. 선언할 때 파라미터만 적어두고 사용할 때 타입을 지정해 주는 방법이다. 기본적인 제네릭 사용 방법 function getSize(arr : number[]) :number { return arr.length } const arr1 = [1,2,3] getSize(arr1) // 3 const arr2 = ["1","2","3"] getSize(arr2) // 3 동일한 형태로 만들었지만 매개변수가 number이냐, string이냐 에 따라서 에러가 생기는 부분이 있을 것이다. 이걸 빠르게 해결하기 위해선 유니온을 이용한 방법 function getSize (arr: number[] | string []..

• format_list_bulleted TypeScript
• · 2024. 2. 22.
• textsms