profile
삽질을 해봐야 레벨업을 할 수 있다

리액트로 이미지 확대 기능 구현하기

동기 제가 ebay 사이트를 이용하던서 자주 이용하던 기능이 하나 있습니다. 기능 이름이 정확히 맞는지는 모르겠지만, 어떤 기능이냐면 바로 image zoom in 입니다. 백문이 불여일견이라고, 눈으로 한번 보는게 설명이 더 빠를 것 같습니다. 이미지를 따로 클

6일 전
·
0개의 댓글
·

background-position 속성에 적용되는 값

background-position 속성이란? css 프로퍼티로 background-image 를 설정할 때, 해당 이미지의 위치값을 설정하는데 사용되는 속성입니다. 보통 아래와 같은 형태로 많이 사용하며, 이렇게 적용하게 되면 div 요소의 가장자리에서 왼쪽 방향

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

flex item에 text-overflow: ellipsis 속성 적용하기

어떤 요소에 텍스트 노드가 하나 있다고 가정해보겠습니다. 이 요소는 특정 너비를 갖고 있다고 한다면, 텍스트가 이 요소보다 길 수도 있겠죠?아래는 네이버 메인 화면 중 일부분인데요. 텍스트가 컨테이닝 블록보다 길어지니 ... 처리된 것을 볼 수 있습니다.이는 말줄임표

2022년 7월 24일
·
0개의 댓글
·

리액트로 숫자만 입력 가능한 input 만들기

사용자로부터 숫자를 입력받기 전에, input 요소와 관련된 키보드 이벤트에 관해 먼저 알아보겠습니다.input 요소에 마우스 혹은 키보드로 커서를 활성화시켰을 때, 발생하는 이벤트입니다.다른 이벤트들보다 가장 먼저 실행됩니다.사용자가 키를 누를 때 발생하는 이벤트입니

2022년 7월 24일
·
0개의 댓글
·

장바구니에 옵션을 추가할 때, 중복성 처리하기

다음 코드는 장바구니 리스트(cart)와 사용자가 장바구니에 추가할 옵션 리스트(options) 입니다.사용자가 개별 상품 페이지에서 원하는 구매 옵션을 선택하고, 이를 장바구니에 추가할 때,장바구니 리스트와 사용자가 선택한 옵션 리스트 사이에 중복된 상품이 존재할 가

2022년 7월 22일
·
0개의 댓글
·

중첩된 객체로부터 트리를 생성하고, 트리의 자손 수 나타내기

이 예제는 모던 자바스크립트 튜토리얼 과제입니다.중첩된 객체의 데이터로 ul·li 리스트를 생성하는 createTree 함수를 만들어 보세요.코드 형식:내용이 없는 <ul></ul> 처럼 ‘불필요한’ 요소가 트리에 존재해서는 안된다는 점을 참고하세요.data

2022년 7월 15일
·
0개의 댓글
·

리액트에서 button 요소를 type에 따라 조건부 렌더링할 때 벌어지는 일

문제의 상황 form 요소 안에서 입력 단계가 1에서 3까지 있다고 가정할 때, 1단계에서 다음 단계로 넘어가려면 다음 버튼을 클릭해야 하고, 마지막 3단계에서는 넘어갈 단계가 없으니 폼을 제출해야 합니다. 위에 설명한 것을, 리액트 코드로 간단하게 표현해보면 다음

2022년 7월 3일
·
0개의 댓글
·

시간 차이 계산하기

다음과 같은 2개의 시간의 차이를 구하는 방법에 대해 알아보겠습니다. 12:50 AM ~ 07:20 AM 09:30 PM ~ 07:30 AM 먼저, AM/PM과 같은 시간을 나누는 기준이 있다면 24시간으로 환산하여 변경해주는 것이 좋습니다. 24시간제로 변경하기

2022년 7월 1일
·
0개의 댓글
·

객체의 특정 프로퍼티 n개를 다른 타입을 갖는 타입으로 매핑하기

다음과 같은 타입을 가지고 있다고 가정하겠습니다. 위의 RecordItem 타입을 기반으로 다음과 같은 RecordForm 타입을 만들고 싶습니다. Mapped Type 객체 타입의 경우, keyof 연산자를 조합하여 Mapped Type을 만들 수 있습니다. 다

2022년 6월 28일
·
0개의 댓글
·

Array.fill 메서드에 객체를 전달할 때 주의하세요!

보통 배열을 만들고, 이 배열을 특정 값으로 채우기 위해 fill 메서드를 주로 사용합니다. 일단 먼저 배열을 만들기 위해, 배열 리터럴이나 생성자를 이용해 배열을 생성합니다. 리터럴과 생성자 방식은 약간의 차이가 있습니다. 배열 만들기 (리터럴 vs 생성자) 먼

2022년 6월 26일
·
0개의 댓글
·

배열에 타입을 명시하지 않으면 어떻게 될까요?

배열의 타입 추론 방식 배열을 선언할 때, 타입을 지정하지 않으면 타입스크립트는 다음과 같이 타입을 추론합니다. 위 배열을 구조분해하여 사용하게 되면, mixedFirst의 타입이 number 타입이 아닌, number | string | boolean의 유니온

2022년 6월 26일
·
0개의 댓글
·

리액트로 로딩 상태를 나타내는 진행바 만들기

메인 페이지에서 상품 리스트를 모두 가져올 때, 사용자에게 현재 데이터를 가져오는 중임을 표시하는 로딩상태 바를 만들고 싶습니다.진행바를 만들기 위해서는 바를 나타내는 요소의 width 값이 필요합니다.이 width 값은 로딩 상태의 %를 나타내는데, 문제는 로딩 상태

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

비동기 요청을 취소할 수 있는 방법

각각의 카테고리 링크를 n개 나열하고, 공통된 공간에 카테고리 링크를 클릭할 때마다 해당 카테고리와 관련된 데이터를 새로 가져오는 코드가 있습니다.이 코드는 실제로 잘 작동합니다. 그런데 렌더링과 관련된 문제가 하나 발생합니다.어떤 문제가 발생했을까요?먼저, 이 코드는

2022년 6월 25일
·
0개의 댓글
·

장바구니 아이템을 모두 삭제했는데, 전체 선택 박스가 체크 되어 있어요!

위 코드는 장바구니의 아이템을 1개씩 삭제하거나, 혹은 여러개를 선택하여 삭제할 때 실행되는 리듀서 함수 코드입니다.액션이 디스패칭될 때, 이 코드는 1가지 상황을 제외하고 잘 작동합니다.장바구니 리스트에서 모든 아이템을 삭제할 때를 제외하고 말이죠!장바구니에 아이템이

2022년 6월 25일
·
0개의 댓글
·