<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; count..

Promise.all이란?Promise.all() 메서드는 인자로 받은 Promise 인스턴스들의 처리 결과를 담은 새로운 Promise를 반환합니다. 인자로 전달된 Promise 인스턴스들이 모두 fulfilled 상태가 되면 결과 Promise는 모든 fulfilled 값을 가진 배열을 인수로 가진 fulfilled 상태가 되고, 하나 이상의 Promise가 rejected 상태가 되면 가장 먼저 rejected 상태가 된 Promise의 이유로 결과 Promise는 rejected 상태가 됩니다.병렬 처리Promise.all() 을 이용하면 병렬적으로 여러 개의 Promise를 실행할 수 있습니다. 모든 Promise가 fulfilled 상태가 되기 전까지는 결과 Promise가 fulfilled ..

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