프로그래머스 - 신고 결과 받기

https://school.programmers.co.kr/learn/courses/30/lessons/92334빈 객체에 각 유저의 이름을 키로 하여, 해당 유저가 신고한 유저 목록을 갖는 객체 report_obj 를 새로 만든다.이때, 동일 유저에 대한 신

2023년 2월 13일
·
0개의 댓글
·

프로그래머스 - 성격 유형 검사하기

https://school.programmers.co.kr/learn/courses/30/lessons/118666각 문항에 따라 선택한 답변의 점수와 그 점수에 해당하는 성격 유형를 찾아내어 각 유형의 점수를 정리해야 한다.총 8가지의 성격 유형이 존재하므로

2023년 2월 11일
·
0개의 댓글
·

프로그래머스 - 푸드 파이터 대회

문제https://school.programmers.co.kr/learn/courses/30/lessons/134240입출력 예시풀이풀이 해석 (첫번째 예제 기준)0번 음식인 물은 항상 1개만 존재하므로, reduce 메서드 콜백함수의 초기값으로 설정한다.주어

2023년 2월 6일
·
0개의 댓글
·

indexOf, slice, substring 메서드 사용시, 나를 헷갈리게 하는 인자들

메서드라는 것은 사실 자주 사용하면 그만큼 손에 익기 때문에, 어떤 때에 쓰는지 외우지 않아도 자연스럽게 알 수 있습니다. map, filter, 이런 메서드들이 그런데요. indexOf, slice, substring 등의 메서드들도 많이 사용하지만, 이 메서드들을

2022년 9월 19일
·
0개의 댓글
·

eslint import 순서 정렬하기

프로젝트를 진행하면서 모듈을 그냥 가져오기만 하고 순서에 대한 정렬을 하지 않으니, 다음과 같은 코드를 마주쳤습니다.어떤가요? ...판단은 자유입니다.import를 어떤 식으로 했는지가 코드가 돌아가는 데 중요한 부분은 아니지만, 순서없이 뒤죽박죽 되어 있으니 나중에

2022년 9월 12일
·
0개의 댓글
·

props로 전달하는 onClick 함수의 타입 지정하기

간단하게 지정한 콜백함수 타입의 문제점 버튼 컴포넌트를 재사용 가능한 컴포넌트로 만들기 위해, onClick 함수를 props로 받도록 했습니다. 이것을 타입스크립트와 함께 사용하려면 타입도 지정해줘야 합니다. 원래는 버튼 요소에 전달된 onClick 함수의 타입을

2022년 8월 31일
·
1개의 댓글
·

Block Formatting Context (BFC)

css를 공부하면서 개인적으로 잘 와닿지 않았던 개념 중 하나가 Block Formatting Context (BFC) 입니다. 사실 이 개념이 적용된 코드를 보았을 때는 그렇게 어렵게 느껴지지 않았는데요. 막상 개념 자체를 제 스스로에게 설명 해보려고 하니, 단어

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

요소의 컨테이닝 블록을 식별하는 방법

컨테이닝 블록이라는 용어를 처음 들었을 때, 용어의 글자를 보아 단순히 부모 영역을 가리킨다고 생각했습니다. 물론, 이것이 틀린 답은 아니었지만 그렇다고 항상 부모 영역을 가리키는 것도 아니었는데요. 이번에는 이 컨테이닝 블록이란 것이 무엇이고, 이 컨테이닝 블록을

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

Heroku 서버에 sequelize db 연동하기

이번에 새로운 프로젝트를 혼자서 해보기 위해, express로 구축한 서버를 실제로 Heroku에 배포해보는 연습을 해보았습니다. Heroku에서는 무료로 db를 연동하여 사용할 수 있게끔 해주기 때문에, 저와 같이 간단한 프로젝트를 배포해보시려는 분들에게는 좋은 서

2022년 8월 20일
·
0개의 댓글
·

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

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

2022년 8월 12일
·
0개의 댓글
·

background-position 속성에 적용되는 값

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

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

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

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

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

리액트로 숫자만 입력 가능한 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개의 댓글
·