프론트엔드 93

[프로그래머스] 옹알이(2) (LV1 - JavaScript)

1. 문제 머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해 주세요.  제한사항 1 ≤ babbling의 길이 ≤ 1001 ≤ babbling[i]의 길이 ≤ 30문자열은 알파벳 소문자로만 이루어져 있습니다.입출력 예babblingresult ["aya", "yee", "u", "maa"] 1 ["ayaye", "uuu", "yeye", "yemawoo", "ayaayaa"..

[React] 리액트 useEffect란?

리액트에서 useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. React 컴포넌트가 렌더링 된 후 특정 코드를 실행하고, 컴포넌트가 언마운트되거나 상태가 변할 때 정리 작업(cleanup)을 할 수 있도록 도와줍니다.  목차 1. useEffect 기본 개념 2. useEffect 사용 예시 3. 의존성 배열(Dependency Array) 4. 정리 작업(cleanup)마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useEffect 기본 개념 useEffect는 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있도록 해줍니다. React 컴포넌트는 렌더링 될 때마다 DOM에 대한 변화가 일어나기 때문에, useEffect를 통해 필요..

[React] 리액트 State와 useState

React에서 상태(state)는 컴포넌트가 기억하고 관리해야 할 동적인 데이터를 의미합니다. 웹 애플리케이션은 사용자와의 상호작용에 따라 화면이 변경되기 때문에, 상태를 제대로 관리하는 것이 매우 중요합니다. 특히 함수형 컴포넌트에서는 useState라는 Hook을 사용하여 상태를 관리할 수 있습니다. 이 글에서는 state의 개념과 useState Hook의 사용법, 그리고 상태 관리의 핵심 개념에 대해 알아보겠습니다.   목차 1. State란? 2. State의 중요성 3. useState란? 4. useState 불변성 유지추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. State란?state는 React 컴포넌트에서 변경될 수 있는 데이터를 가리킵니다. 컴포넌트는 상태를 통해 동..

[프로그래머스] 덧칠하기 (LV1 - JavaScript)

1. 문제어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다.넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 다시 칠해야 할 구역들을 정했습니다. 벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같습니다.롤러가 벽에서 벗..

[React] 리액트 Props란?

React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 중요한 방법입니다. props는 컴포넌트가 동작하는 방식을 정의하거나, 동적인 데이터를 전달해 UI를 업데이트하는 데 사용됩니다. props의 개념, 사용법, 그리고 활용 사례에 대해 자세히 알아보겠습니다.   React Props: 컴포넌트 간 데이터 전달의 핵심  목차 1. Props란? 2. Props 사용법 3. Props로 함수 전달하기 4. Children Props마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Props란?Props(properties)는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 매개변수입니다. 간단히 말해, props는 컴포넌트의 입력 값이라고 할 수 있습..

[React] 리액트 컴포넌트란?

React는 모듈화 된 사용자 인터페이스를 구축하기 위한 라이브러리로, 그 핵심은 컴포넌트입니다. 컴포넌트는 화면의 일부분을 구성하고, 재사용 가능하며 독립적인 단위를 제공합니다. 이번 포스팅에서는 React 컴포넌트의 개념, 종류, 작성 방법에 대해 알아보겠습니다.   목차 1. React 컴포넌트란? 2. React 컴포넌트 종류 3. React 컴포넌트 장점: 재사용성마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React 컴포넌트란? 컴포넌트는 HTML, CSS, JavaScript가 결합된 UI 조각이라고 생각하면 됩니다. React에서 컴포넌트를 사용하면 각각의 조각들을 독립적으로 설계하고, 이를 재사용하여 일관성 있는 인터페이스를 구축할 수 있습니다. 컴포넌트는 화면을 ..

[React] JSX는 무엇인가?

React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트를 통해 UI를 모듈화 하고 재사용할 수 있는 강력한 기능을 제공합니다. 그 중심에 있는 것이 바로 JSX (JavaScript XML)입니다. JSX는 HTML과 매우 유사한 문법을 사용하여 React 컴포넌트를 작성할 수 있도록 도와줍니다.이 글에서는 JSX의 주요 문법과 특징, 그리고 React에서 JSX가 왜 중요한지에 대해 설명하겠습니다.   React JSX 문법에 대한 이해 목차 1. JSX란 무엇인가? 2. JSX 특징 마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. JSX란 무엇인가? JSX는 JavaScript 코드 내에서 HTML과 같은 문법을 사용하게 해주는 확장 문법입..

[프로그래머스] 소수 찾기 (LV1 - JavaScript)

1. 문제1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.)제한사항 n은 2이상 1000000이하의 자연수입니다.입출력 예nresult10453 입출력 예 설명입출력 예 #11부터 10 사이의 소수는 [2,3,5,7] 4개가 존재하므로 4를 반환입출력 예 #21부터 5 사이의 소수는 [2,3,5] 3개가 존재하므로 3를 반환 2. 오답풀이 전략소수는 1과 자신만을 약수로 갖는 특징 사용약수의 대칭성을 이용해 반복 횟수 줄이기function solution(n) { let primeCount = 0; let i = 2; while(i 테스트 케이스는 모두 통..

[프로그래머스] 과일 장수 (LV1 - JavaScript)

https://school.programmers.co.kr/learn/courses/30/lessons/135808 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다. 한 상자에 사과를 m 개씩 담아 포장합니다. 상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다. 과일 장수가 가능한 많은 ..

[프로그래머스] 모의고사 (LV1 - JavaScript)

https://school.programmers.co.kr/learn/courses/30/lessons/42840 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 1. 문제수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 ..