일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Promise
- 비동기 요청 처리
- React
- 국제화(i18n)
- 비동기프로그래밍
- #프론트엔드개발
- tanStack Query
- 자바스크립트
- 자바스크립트공부
- 웹 개발
- 컴포넌트
- 퍼포먼스 최적화
- 상태 관리 라이브러리
- 프라미스체이닝
- html
- 프론트엔드
- 웹 성능 최적화
- 웹 성능
- 패키지 스크립트
- 코드리뷰
- css
- Node.js
- jsx
- dom
- 리액트 기초
- 웹개발
- 동적 웹 페이지
- fe
- JavaScript
- 풀스택 개발
- Today
- Total
목록All (71)
sodol-dotcom

1. 객체 / 변수 선언과 제어문의 차이1-1. 객체 / 변수 선언의 경우:// 객체 선언const animal = { type: "고양이", name: "나비", color: "black"};// 변수 선언let x = 10;여기서 중괄호`{}`는 객체를 정의하는데 사용되고 있다. 이건 `animal`이라는 변수에 하나의 객체를 할당하는 작업이다.변수 선언 구문이기 때문에 구문 전체가 끝났다는 걸 명확하게 하기 위해 `;`를 붙여줘야한다.객체는 데이터의 묶음이고, `{}` 안에는 속성(property)들이 들어 있다.변수나 객체를 선언할 때는 마지막에 세미콜론(;)을 붙여서 구문이 끝났다는 걸 명확히 해주는 게 좋다.왜냐하면, JavaScript는 변수 선언이나 할당이 끝난 후 구문이 끝났다는 걸..

`reduce()` 는 배열의 각 요소를 순회하면서 값을 누적해 나가는 메소드이다. 이 메소드는 배열을 단일 값으로 축소하는데 사용한다.기본적으로 두 가지 인자가 필요하다. 누적 함수(accumulator function): 각 요소를 처리하면서 누적값을 계산하는 함수이다.초기값(initial value): 누적 계산을 시작할 때 사용할 초기 값이다. 1. `reduce()` 메소드의 기본 구조array.reduce((accumulator, currentValue, currentIndex, array) => { // 누적값(accumulator)과 현재값(currentValue)을 사용하여 계산을 수행한다. return newAccumulatorValue;}, initialValue); 파라..

1. 문제 개요문제 제목: 없는 숫자 더하기문제 설명: 0부터 9까지 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어진다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.문제 해설주어진 배열 `numbers`에는 0부터 9까지의 숫자 중 일부가 들어있다. 예를 들어, `numbers`의 배열이 `[1, 3, 5]`라면 1, 3, 5가 포함되어 있다는 의미이다.이 문제에서 우리가 해야 할 일은 다음과 같다.1. 0부터 9까지의 모든 숫자 중에서 배열 `numbers`에 없는 숫자들을 찾는다.2. 그런 다음, 이 없는 숫자들의 합을 계산한다.예를 들어, 만약 `numbers` 배열이 `[1, 3, 5]`..

1. 문제 개요문제 제목: 핸드폰 번호 가리기문제 설명: 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해 주세요.문제 해설: 개인정보 보호를 위해 핸드폰 번호를 숨겨야 한다. 주어진 전화번호 문자열 `phone_number`에서, 뒷 4자리를 제외한 나머지 숫자를 모두 `*`로 가려서 반환하는 함수를 작성해야 한다.2. 문제 해결 전략단계 1: 전화번호의 길이를 계산하고, 뒷4 자리를 제외한 나머지 부분을 파악한다.단계 2: 나머지 부분을 `*`로 대체한다.단계 3: 마지막 4자리와 `*..

1. 문제 개요문제 제목: 음양 더하기문제 설명: 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.문제 해설: 주어진 두 배열 `absolutes`와 `signs`에서, `absolutes`는 절댓값으로 이루어진 정수 배열이고, `signs`는 각 정수의 부호를 나타내는 불리언 배열입니다. `signs[i]`가 `true`일 때는 `absolutes[i]`는 양수, `signs[i]`가 `false`일 때는 `absolutes[i]`가 음수입니다. 이 정보를 사용하여 실제 정수들의 합을 계산해 반환하..

1. 고정된 프로퍼티 이름먼저, 프로퍼티 이름이 고정되어 있는 경우를 보면:let person = { name: "John", age: 30, hobby: "reading"};let hobby = person["hobby"]; // "hobby"라는 이름의 프로퍼티를 직접 접근console.log(hobby); // 출력: "reading" 이 경우에는 프로퍼티 이름이 `"hobby"`로 고정되어 있기 때문에 직접 문자열 `"hobby"`를 사용해서 접근하는 것이 가장 간단하고 직관적이다. 변수를 사용할 필요가 없다. 2. 동적으로 결정되는 프로퍼티 이름프로퍼티 이름이 동적으로 결정되는 경우를 살펴보면 예를 들어, 사용자로부터 입력을 받거나, 어떤 로직에 따라 프로퍼티 이름이 달라질 수 있다...

자바스크립트에서 객체의 프로퍼티(속성)에 접근하는 방법에는 두 가지(점 표기법, 괄호 표기법)가 있다. 그 중 괄호 표기법이 헷갈려서 남기는 페이지. 1. 객체와 프로퍼티자바스크립트에서 객체는 여러 개의 값을 저장할 수 있는 데이터 구조이다.let person = { name: "John", age: 30, hobby: "reading"}; 이 객체는 `name`, `age`, `hobby` 라는 프로퍼티를 가지고 있다. 2. 점 표기법 vs 괄호 표기법점 표기법: `person.name` 이렇게 사용해서 `name` 프로퍼티에 접근할 수 있다.괄호 표기법: `person["name"]` 이렇게 사용해도 `name` 프로퍼티에 접근할 수 있다.괄호 표기법은 변수나 문자열로 프로퍼티 이름을 동적으로..

1. 함수 스코프 (Function Scope)함수 스코프는 함수 내부에서 선언된 변수들이 그 함수 내부에서만 유효하다는 개념이다.`var` 키워드로 선언된 변수는 함수 스코프를 따른다.function myFunction() { var x = 10; // x는 함수 내부에서만 유효함 console.log(x); // 10}myFunction();console.log(x); // Error: x is not defined (함수 밖에서 접근 불가)`var`로 선언된 변수 `x `는 함수 `myFunction` 내부에서만 접근 가능하고, 함수 밖에서는 접근할 수 없다.함수 스코프는 "함수" 단위로 스코프가 결정된다. 2. 지역 스코프 (Local Scope)지역 스코프는 함수 내에서 선언된 변수..

1. 함수 선언문은 함수 블록에서만 지역 스코프를 가진다.함수 선언문은 함수 내부에서만 지역변수처럼 동작한다. 즉, 함수 안에서 선언된 함수는 해당 함수 안에서만 접근 가능하다.하지만 함수가 아닌 일반인 블록문(`if`, `for`, `while`등) 안에서 선언된 함수는 블록 내에서만 유효하지 않고, 블록 바깥에서도 접근할 수 있다. 2. 코드 예시로 이해해 보면2-1. 함수 블록 안에서의 함수 선언문 (지역 스코프를 가짐):함수 선언문은 함수 블록 내에서는 지역적으로 작동한다. 즉, 그 함수에서만 유효하다.function outerFunction() { function innerFunction() { console.log("This is inner function"); } ..

// About.jsfunction About() { return ( 공통 헤더 네비게이션 바 소개 페이지 내용 공통 푸터 );}1. Outlet 이란?`Outlet` 은 주로 React 라우팅 라이브러리인 `react-router-dom` 에서 사용하는 특수한 컴포넌트이다.이 컴포넌트는 여러 페이지를 구성할 때, 부모-자식 관계를 통해 페이지의 일부를 동적으로 바꾸고 싶을 때 사용된다.쉽게 말해, 특정 위치에 다른 컴포넌트를 삽입할 수 있는 “구멍”이나 “창구”라고 생각할 수 있다. 2. 왜 Outlet 이 필요한 이유?웹사이트를 만들 때, 여러 페이지가 있지만 그 페이지들 사이에 공통적으로 유지되어야 하는 부분이 있을 수 있다.예를 들어, 모든 페이지에 동일한 헤더와 푸터가 있고, 중간의..