<zinny/>

next14 + tailwind 사용중 가로 프로그레스 바 const [_step, setStep] = useState(0); // 단계가 지날때마다 애니메이션 되도록 const isRunAnimation = useMemo(() => { if (step !== _step) { setStep(step); return true; } else { return false; } }, [step]); 컴포넌트르로 만들어서 사용하기 위해서 useState부분을 props로 받아서 사용 중! 세로 프로그레스바

next14 + tailwind 사용중 {photos.map((image) => ( ))}

웹 개발에서 스타일링 초기화는 일관된 디자인을 구현하는데 중요한 요소입니다. 이를 위해 리셋 CSS와 노멀라이즈 CSS는 두 가지 대표적인 방법으로 사용됩니다. 하지만 이 두 방법은 어떻게 다를까요? 이번 글에서는 리셋 CSS와 노멀라이즈 CSS의 주요 차이점을 알아보겠습니다. 리셋 CSS: 기존 스타일 제거, 완전 초기화 리셋 CSS는 기본적으로 브라우저의 기본 스타일을 제거하고 모든 스타일을 초기화하는 방법입니다. HTML 요소의 여백, 패딩, 폰트 크기 등을 모두 제거하여 브라우저 간에 동일한 기본 스타일을 설정합니다. 이 방식은 브라우저별로 제공되는 기본 스타일을 완전히 무시하고, 개발자가 스타일을 완전히 제어할 수 있게 합니다. 하지만 이로 인해 일부 기본적인 시각적 요소도 사라질 수 있으며, ..

chapter 10-11 일급 함수 함수 이름에 암묵적 인자가 있는 코드의 특징 함수 구현이 거의 똑같은 함수 함수 이름이 구현의 차이를 만들고 있는 함수 리팩터링 해보기 : 암묵적 인자를 드러내기 함수 이름에 있는 암묵적 인자를 확인합니다. 명시적 인자를 추가합니다. 함수 본문에 하드 코딩된 값을 새로운 인자로 바꿉니다. 함수를 호출하는 곳을 고칩니다. //기존 setPriceByName 함수를 어떤 필드 값이든 사용 할 수 있도록 변경 function setFieldByName(cart, name, field, value){ //field : 명시적 인자 추가, value : 기존 인자는 더 일반적인 이름으로 변경 const item = cart[name]; const newItem = objectS..

chapter 8-9 계층형 설계 소프트웨어 설계 : 코드를 만들고, 테스트하고, 유지보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는 것 계층형 설계 : 소프트웨어를 계증을 구성하는 기술, 각 계층에 있는 함수는 바로 아래 계층에 있는 함수를 이용해 정의합니다. tip : 같은 계층에 있는 함수는 같은 목적을 가져야 합니다. 계층형 설계 패턴 직접구현 추상화 벽 작은 인터페이스 편리한 계층 직접구현 직접 구현한 코드는 한 단계의 구체화 수준에 관한 문제만 해결합니다. 계층형 설계는 특정 구체화 단계에 집중할 수 있게 도와줍니다. 호출 그래프는 구체화 단계에 대한 풍부한 단서를 보여줍니다. 호출 그래프는 함수가 서로 어떻게 연결되어 있는지 보여줍니다. 함수를 추출하면 더 일반적인 함수로..

chapter 4 액션에서 계산 빼내기 함수형 프로그래머는 테스트하기 쉽게 만들고, 재사용하기 쉽게 만들어야 합니다 전역변수 제거 DOM 업데이트와 비즈니스 규칙을 분리 함수에서 결괏값을 리턴 등등등.. 액션과 계산, 데이터를 구분하는 방법 //전역 변수는 변경 가능하기 때문에 액션! var shopping_cart = [] var shopping_cart_total = 0 function add_item_to_cart(name, price){ //전역 변수를 변경 하는 것 액션! shopping_cart.push({ name: name, price: price }); calc_cart_total() } //무료 배송비 계산하기 (구매 합계가 20달러 이상이면 무료 배송) function update_s..

chaper 1 쏙쏙 들어오는 함수형 코딩에 오신 것을 환영합니다 함수형 프로그래밍은 무엇인가요? 수학함수를 사용하고 부수효과를 피하는 것이 특징인 프로그래밍 패러다임 부수효과 없이 순수함수만 사용하는 프로그래밍 부수 효과 : 함수가 리턴값 이외에 하는 모든 일 순수 함수 : 인자에만 의존하고 부수 효과가 없는 함수로 같은 인자를 넣으면 항상 같은 결과를 돌려주는 함수로 수학 함수라고 하기도 함 하지만 부수 효과는 필요하고, 함수형 프로그래밍은 부수 효과를 잘 다룰 수 있고, 실용적입니다 액션과 계산 데이터 구분하기 함수형 프로그래머는 코드를 액션과 계산 데이터로 구분합니다. 액션 계산 데이터 - 실행 시점과 횟수에 의존합니다. - 부수효과, 부수효과가 있는 함수, 순수하지 않은 함수 라고 부르기도 합니..

const testText = " 첫번째 줄 테스트중요한 부분입니다. 두번째 테스트 에는 중요한게 없습니다. 중요한 것은 아무것도 없습니다 " 작업을 하다보니 문자열에 html이 들어오는 경우가 종종 있다 dangerouslySetInnerHTML을 사용 하면 손쉽게 html을 렌더링 할 수 가 있는데 __html을 사용해서 문자열을 넣어주면 html이 렌더링이 된다. 하지만 프론트 개발자는 들어온 html에 스타일을 적용해야 하는데 나는 emottion styled를 이용해보도록 하겠다! const Contents = styled.div` ol { display: grid; row-gap: 4px; counter-reset: number 0; } li { display: flex; column-gap:..

Omit 특정 속성만 제거한 타입을 정의한다 예시 interface Post{ id: number; title: string; content: string; } type Posts = Omit; const PoPularPost : Omit ={ title: "인기있는 콘텐츠" content: "날 따라해봐" }

왜 써야 하는데? 짧은 시간에 많은 이벤트가 발생하는 경우 이벤트 핸들러가 과도하게 호출되어서 성능의 문제를 발생시키기 때문에! 나아가 사용자 경험을 헤칠 수 있다 즉! 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해서 제약을 걸어 제어 할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함! Throttle 입력 주기를 방해하지 않고 일정시간 동안 입력을 모아서 한번에 출력을 제한 여러 번 발생하는 이벤트를 일정 시간 동안 최대 한 번만 실행되도록 이벤트 발생 시간 이후 일정 시간 동안만 기다리고 이벤트를 실행 후 재차 기다린다는 점 입력이 시작되면 일정주기로 게속 실행 예시 - 무한 스크롤 Debounce 입력 주기가 끝나면 출력 여러번의 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 개념 마..