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

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/ 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그 정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다. fe-developers.kakaoent.com https://yozm.wishket.com/magazine/detail/1531/ Atomic Design Pattern의 Best Practice 여정기 | 요즘IT 좋은 폴더 구조에 관한 이야기는 개발자들 간의 끊임없는 떡밥입니다. 정답이 있지 않고 프로젝트의 특징이나 크기, 주관적인 해석에 따라 정말 여러 ..

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

let input = require("fs").readFileSync("example.txt").toString().split("\n"); const count = +input[0]; const arr = input[1].split(" ").sort((a, b) => a - b); const firstNumber = +arr[0]; const lastNumber = +arr[count - 1]; let result = 0; arr.length >= 2 ? (result = firstNumber * lastNumber) : (result = firstNumber * firstNumber); console.log(result); 처음에는 생각없이 for문으로 풀어보려고 애를 썼는데 생각해보니까.... 굳이 ..