Javascript
-
1. 문제 분석 문제 설명각 사진마다 포함된 인물의 그리움 점수를 합산하여 사진의 추억 점수를 계산합니다. 사진별로 포함된 인물과 각 인물의 그리움 점수가 주어지며, 각 사진의 추억 점수를 계산하여 배열에 담아 반환합니다.제약사항name의 길이와 yearning의 길이는 같고, 3 이상 100 이하photo의 길이는 3 이상 100 이하이며, photo[i]의 길이는 3 이상 100 이하 2. 해결 방법 1. 각 사진을 순회하며 사진의 추억 점수를 계산한다. (reduce 메서드 사용) 2. 하나의 사진에 포함된 인물들을 순회하며 추억 점수를 계산한다. (reduce 메서드 사용) 3. 사진에 있는 인물이 그리움 목록에 있는지 찾는다 (findIndex 사용)4. 그리움 목록에 있다면 3번에서 찾은 인..
[프로그래머스] 추억 점수 (JS)1. 문제 분석 문제 설명각 사진마다 포함된 인물의 그리움 점수를 합산하여 사진의 추억 점수를 계산합니다. 사진별로 포함된 인물과 각 인물의 그리움 점수가 주어지며, 각 사진의 추억 점수를 계산하여 배열에 담아 반환합니다.제약사항name의 길이와 yearning의 길이는 같고, 3 이상 100 이하photo의 길이는 3 이상 100 이하이며, photo[i]의 길이는 3 이상 100 이하 2. 해결 방법 1. 각 사진을 순회하며 사진의 추억 점수를 계산한다. (reduce 메서드 사용) 2. 하나의 사진에 포함된 인물들을 순회하며 추억 점수를 계산한다. (reduce 메서드 사용) 3. 사진에 있는 인물이 그리움 목록에 있는지 찾는다 (findIndex 사용)4. 그리움 목록에 있다면 3번에서 찾은 인..
2024.06.13 -
프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 분석 문제 설명 로봇 강아지가 주어진 명령에 따라 직사각형 공원에서 산책을 합니다. 공원은 'O' (이동 가능), 'X' (장애물), 'S' (시작 지점)으로 구성된 격자 형태입니다. 로봇 강아지는 주어진 명령을 순서대로 수행하며, 각 명령은 방향 ('N', 'S', 'E', 'W')과 거리로 구성됩니다. 명령을 수행하기 전에, 로봇 강아지는 다음을 확인합니다:이동하려는 방향이 공원을 벗어나는지.이동 경로에 장애물이 있는지.이 두 조건 중 하나라도 충족하면 해당 명령은 무시되고, 다음 명령으로 넘어갑니..
[프로그래머스] 공원 산책 (JS)프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제 분석 문제 설명 로봇 강아지가 주어진 명령에 따라 직사각형 공원에서 산책을 합니다. 공원은 'O' (이동 가능), 'X' (장애물), 'S' (시작 지점)으로 구성된 격자 형태입니다. 로봇 강아지는 주어진 명령을 순서대로 수행하며, 각 명령은 방향 ('N', 'S', 'E', 'W')과 거리로 구성됩니다. 명령을 수행하기 전에, 로봇 강아지는 다음을 확인합니다:이동하려는 방향이 공원을 벗어나는지.이동 경로에 장애물이 있는지.이 두 조건 중 하나라도 충족하면 해당 명령은 무시되고, 다음 명령으로 넘어갑니..
2024.06.11 -
오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
[JavaScript] debounce, throttle 개념 정리오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
2024.04.03 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); 생성자 함수 (constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. const strObj = new String('Lee'); // String 생성자 함수에 의해 String 객체 생성 생성자 함수에 의한 객체 생성 방식의 장점 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러개 생성하려면 매번 같..
[딥 다이브 스터디] 17장 생성자 함수에 의한 객체 생성*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. const person = new Object(); 생성자 함수 (constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. const strObj = new String('Lee'); // String 생성자 함수에 의해 String 객체 생성 생성자 함수에 의한 객체 생성 방식의 장점 객체 리터럴에 의한 객체 생성 방식의 문제점 동일한 프로퍼티를 갖는 객체를 여러개 생성하려면 매번 같..
2024.04.01 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 틀린 부분이 있을 수 있습니다. 프로퍼티란? 자바스크립트에서 "프로퍼티(Property)"는 객체(object)의 특징이나 상태를 나타내는 값(value)을 가리키는 이름-값 쌍(name-value pair)을 의미합니다. 이러한 프로퍼티들은 객체의 특정한 기능을 정의하거나 객체의 상태를 나타내는 데 사용됩니다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트(속성)를 기본 값으로 자동 정의합니다. → 프로퍼티의 상태 프로퍼티의 값 (value) 값의 갱신 가능 여부 (writable) → false 시 값 변경 X 열거 가능 여부 (en..
[딥 다이브 스터디] 16장 프로퍼티 어트리뷰트*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 틀린 부분이 있을 수 있습니다. 프로퍼티란? 자바스크립트에서 "프로퍼티(Property)"는 객체(object)의 특징이나 상태를 나타내는 값(value)을 가리키는 이름-값 쌍(name-value pair)을 의미합니다. 이러한 프로퍼티들은 객체의 특정한 기능을 정의하거나 객체의 상태를 나타내는 데 사용됩니다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트(속성)를 기본 값으로 자동 정의합니다. → 프로퍼티의 상태 프로퍼티의 값 (value) 값의 갱신 가능 여부 (writable) → false 시 값 변경 X 열거 가능 여부 (en..
2024.04.01 -
package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
[JavaScript] dependencies와 devDependencies의 차이 정리package.json 속 dependencies와 devDependencies의 차이가 뭘까? 리액트를 하다보면 npm i 를 통해 많은 라이브러리를 설치하면서 dependencies 가 늘어나는 걸 본 적이 있을 것이다. 나도 처음엔 두 차이에 대해서 잘 알지도 못했고 사실 궁금하지도 않았던거 같다. 그저 패키지를 설치하게 되면 어떤 패키지가 설치되었는지 확인하는 용도로만 사용했던거 같다. 그러다가 우테코 3번째 미션을 진행하면서 이러한 코멘트가 달렸다. 헉! 그리고 그제서야 부랴부랴 이 차이에 대해서 찾아보았던거 같다. dependencies 는 프로덕션 환경에서 필요한 패키지를 말하여 어플리케이션이 실행될 때 필요한 패키지들을 정의하는 것이었다. 리액트 같은 프레임워크를 사용하여 라이브러리를 설치..
2024.03.18 -
이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다. 미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다. 이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다. 1. innerHTML innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내..
[JavaScript] innerHTML, innerText, textContent 차이 정리이번 우테코 웹 기반 미션 로또를 진행하면서 HTML 내의 텍스트를 다루어야 하는 일이 있었습니다. 미션을 진행하면서 어떤 텍스트 요소를 사용하는 것이 좋은 코드일까 고민하면서 공부한 개념들을 살짝 정리해 보았습니다. 웹 개발에서 JavaScript를 활용하여 HTML 요소의 텍스트를 다루는 것은 아주 흔한 일입니다. 이를 다루기 위해서는 innerHTML, innerText, textContent 등의 다양한 속성들을 사용하여 다룰 수 있고, 각각 다른 특성을 가지고 있어 이를 이해하고 사용해야 합니다. 1. innerHTML innerHTML은 HTML 요소의 속성으로, 해당 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 새 내용으로 설정할 수 있는 기능을 제공합니다. 이를 통해 쉽게 내..
2024.03.04