본문 바로가기

programming study

 (889)
[프로그래머스] 폰켓몬 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(nums) { const pickableNumber = nums.length / 2; const ponketMonSet = new Set(nums); return Math.min(pickableNumber, ponketMonSet.size); } Reference 프로그래머스
[프로그래머스] 최댓값과 최솟값 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드(나의 풀이) function solution(s) { const numberArray = s.split(' '); return `${Math.min(...numberArray)} ${Math.max(...numberArray)}`; } Reference 프로그래머스
Hook 규칙, Custom Hook 1. Hook 규칙 최상위에서만 Hook을 호출 반복문, 조건문, 중첩된 함수에서 Hook 호출하지 말 것 조건문을 Hook내부에 사용하는 것은 가능(useEffect) 이 규칙을 따라야 동일한 순서로 Hook 호출되는 것이 보장 React 함수 내에서만 Hook을 호출 JavaScript 내에서 호출하지 말 것 규칙을 지켜야하는 이유 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있음 2. Custom Hook 컴포넌트 로직을 함수로 뽑아 재사용 공통의 로직을 뽑아내 새로운 함수를 만드는 것으로 작동 방식과 순서에는 변화가 없음 관습적으로 use prefix를 붙일 것 같은 Hook을 사용하는 컴포넌트들은 state를 공유하지 않음 서로 독립된 state를 받음 기존의 Hook과 동일하게..
Effect Hook 사용하기(2) 1. Clean-up Effects vs. non-clean-up Effects side effect를 실행 하고 나서 후처리가 필요한 경우가 있음 Clean-up이 필요한 경우 외부 데이터를 구독하는 경우 addEventListener를 지정한 경우 why? 메모리 누수 방지를 위해 Clean-up이 필요하지 않은 경우 API 호출 DOM 수동 조작 로깅 effect에서 함수를 반환하는 이유 effect를 위한 추가적인 정리 메커니즘 effect의 추가와 제거 로직을 가까이 묶을 수 있음 React가 effect를 정리(Clean-up)하는 시점 컴포넌트가 마운트 해제되는 때에 정리(Clean-up) 실행 Clean-up Effects 예시 event listener를 Clean-up Class Com..
Effect Hook 사용하기(1) 1. useEffect의 역할 함수 컴포넌트에서 side effect를 수행 side effect 데이터 가져오기(API 호출) 구독 설정하기 수동으로 React 컴포넌트 DOM을 수정 정리(Clean-up)가 필요한 것, 필요하지 않은 것 두 종류가 있음 useEffect는 class 생명주기의 componentDidMount + componentDidUpdate + componentWillUnmoun를 합친 것으로 보아도 됨 React Component가 렌더링되기 전에는 side effect를 실행하지 않음 why? 이 시점은 이른 시기로서 React가 DOM을 업데이트하고 난 이후에 실행해야 함 2. useEffect가 하는 일 React에게 컴포넌트가 렌더링된 이후에 어떤 일을 수행해야하는 지를..
React Hook Form(2) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. watch 등록한 input의 변화를 감지하고 해당 값을 반환할 수 있음 첫 번째 파라미터는 register로 등록한 input name 2. handleSubmit 입력한 input data들의 유효성 검사가 성공하면 form data를 받음 첫번째 인자 valid 함수 form 데이터가 유효할 때만 호출되는 함수 두번째 인자 form 데이터가 유효하지 않을 때 호출되는 함수 예시 // form datas의 interface를 전달받게 되므로 타입 지정 const onValid = (data: IOrderForm) => { // submit 되기 전의 data validation을 정의 if (data..
브라우저 호환성 1. 슬라이더 이미지가...! 2021년 12월 어느날, 서비스 중인 회사 웹 페이지의 슬라이더의 UI가 깨지는 이슈가 인입되었다. 진행중인 프로모션 이미지를 보여주는 슬라이더였는데, 슬라이더를 구성할 모든 이미지가 쭉 나열되어버리는 것이었다. 2. 상황 재현 해당 이슈의 상황 재현은 다행히도 어렵지 않았다. Safari에서만 재현이 되었고 Chrome에서는 정상적으로 슬라이더가 정상적으로 보였다. 즉 브라우저 호환성 이슈였다. 3. 원인 파악 각 브라우저에서 지원하는 CSS Property는 차이가 있다. 그러므로 슬라이더에 적용된 Property 중 Chrome에서는 지원하지만 Safari에서는 지원하지 않는 것을 찾아내야 했다. 의심되는 Property는 overflow였다. 보여지지 않아야할 요소..
React Hook Form(1) 본 내용은 Nomad Coders - React JS 마스터클래스 강의를 토대로 작성하였습니다. 1. React Hook Form? React에서 Form을 간단하게 다룰 수 있게 하는 라이브러리 많은 input 요소를 효율적으로 관리할 수 있음 Validation 지원 2. useForm form을 사용하기 위한 함수들을 return하는 hook register: input을 등록 watch handleSubmit formState setError setValue 예시 TypeScript와 함께 사용할 때는 제네릭으로 form data의 interface를 전달해야 함 import React from "react"; import { useForm } from "react-hook-form"; ​ // ..

티스토리툴바