자바스크립트
-
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 -
내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~! PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..
리액트 코드 네이밍 규칙 (Coding Conventions) (+ 초보도 쉽게하는 단축키 설정하기!!)내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~! PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..
2024.05.13 -
벌써 레벨 1의 마지막 미션이 끝났다. 우테코 첫 등교가 엊그제 같은데 벌써 마지막이라니 믿기지가 않는다. 이번 영화 리뷰 미션은 비동기 통신이 핵심인 미션이었다. 학습 목표를 따라서 이번 미션에서는 API 통신을 처리할 때 고려해야 하는 다양한 문제를 직접 경험해 보면서 해결 방법을 고민해 보는 시간을 가졌다. ✅ 베포 사이트 영화 리뷰 웹앱 📍 학습 목표 step 1 API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 step 2 상세 정보 조회, 별점 매기기 UI/UX 개선 하기 step 1 step1에서는 메인 페이지에서는 인기순으로 정렬된 페이지를 그리고 검색을 했을 때는 검색된 결과물을 보여주는 결과 페이지가 있었고 모든..
[우테코 6기] 레벨 1 마지막 - 영화 리뷰 웹앱 미션 회고 ❗️벌써 레벨 1의 마지막 미션이 끝났다. 우테코 첫 등교가 엊그제 같은데 벌써 마지막이라니 믿기지가 않는다. 이번 영화 리뷰 미션은 비동기 통신이 핵심인 미션이었다. 학습 목표를 따라서 이번 미션에서는 API 통신을 처리할 때 고려해야 하는 다양한 문제를 직접 경험해 보면서 해결 방법을 고민해 보는 시간을 가졌다. ✅ 베포 사이트 영화 리뷰 웹앱 📍 학습 목표 step 1 API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 step 2 상세 정보 조회, 별점 매기기 UI/UX 개선 하기 step 1 step1에서는 메인 페이지에서는 인기순으로 정렬된 페이지를 그리고 검색을 했을 때는 검색된 결과물을 보여주는 결과 페이지가 있었고 모든..
2024.04.04 -
오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
[JavaScript] debounce, throttle 개념 정리오늘은 우테코를 진행하면서 배운 디바운스와 스로틀 개념에 대해서 정리해 보겠다. 이 정리는 우테코 수업과 모던 자바스크립트 딥 다이브 책을 읽고 정리해보았다. 짧은 시간에 과도한 이벤트가 연속으로 발생한다면? 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출되어서 성능에 문제를 일으킬 수 있다. 또 데이터 호출 버튼을 매우 빠르게 연속해서 눌러 생기는 성능 저하를 막고 싶다면? 사용자가 창 크기 조정을 멈출 때까지 기다려다가 resize event 를 해주고 싶다면? 입력창에 자동완성을 보여주고 싶은데 키보드 입력키 하나하나마다 해주고 싶지 않다면? 디바운스와 스로틀을 사용하여 불필요한 잦은 요청 제어와 일정 주기마다 원하는 동작을 제어하게 할 수 있다. debounce 디바운스는 짧은 시간에 연속..
2024.04.03 -
*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. 동기 처리와 비동기 처리 일반적인 함수 호출 ⇒ 함수 호출 → 함수 코드 평가 → 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택 (콜 스택) 에 푸시 → 함수 코드 실행 → 종료 시 콜 스택에서 팝 돼서 제거됨 함수가 실행되려면 함수 코드 평가에서 생성된 함수 실행 컨텍스트가 실행 컨텐스트 스택에 푸시 → 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (싱글 스레드 방식) : 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미함. == 한 번에 하나의 태스크만 실행할 수 있음 그래서 작업이 오래 걸리는 태스크를 실행하게 ..
[딥 다이브 스터디] 42장 비동기 프로그래밍*우테코 딥 다이브 스터디 준비 중 작성한 정리본으로 필자의 잘못 이해한 부분이나 부족한 부분이 있을 수 있습니다. 동기 처리와 비동기 처리 일반적인 함수 호출 ⇒ 함수 호출 → 함수 코드 평가 → 함수 실행 컨텍스트 생성 → 실행 컨텍스트 스택 (콜 스택) 에 푸시 → 함수 코드 실행 → 종료 시 콜 스택에서 팝 돼서 제거됨 함수가 실행되려면 함수 코드 평가에서 생성된 함수 실행 컨텍스트가 실행 컨텐스트 스택에 푸시 → 함수의 실행 순서는 실행 컨텍스트 스택으로 관리함 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. (싱글 스레드 방식) : 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미함. == 한 번에 하나의 태스크만 실행할 수 있음 그래서 작업이 오래 걸리는 태스크를 실행하게 ..
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