rosie

컴포넌트란?

컴포넌트란?리액트 앱을 구성하는 최소한의 단위, 리액트의 기본적인 구성요소즉, 애플리케이션의 구성 요소를 담당하며 재사용가능하고 독립적인 단위로 구성컴포넌트는 UI를 작은 단위로 분리하여 개발하고 유지보수 할수 있도록 하는데 도움을 줌따라서 컴포넌트를 사용하면 코드의 가독성과 재사용성을 높일수 있다는 장점이 있음클래스 컴포넌트 vs 함수 컴포넌트클래스 컴포너트ES6 클래스 사용해서 정의render() 메서드로 UI 반환생명주기 메서드 기능 제공상태관리 기능 제공함수 컴포넌트JavaScript 함수로 정의JSX 반환react-hook 사용하여 생명주기 기능 활용컴포넌트 장점재사용성컴포넌트는 독립적이고 모듈화된 단위로 작성필요한 곳에서 쉽게 재사용 가능가독성과 유지보수성컴포넌트 기반으로 개발을 하게 되면UI..

1.create-react-app 주요 개념 설명Create React App한번에 React 개발 환경을 구성해주는 환경meta에서 만든 보일러플레이트로 공식적으로 지원되는 Single Page React Application을 만드는 방법 중 하나따로 React 환경을 구성할 필요없이 최신의 빌드설정을 제공하고 React의 개발 초기에 필요한 여러 라이브러리 및 패키지등을 세팅해줌굉장히 간편하다는 장점이 있음장점하나의 명령어로 react 프로젝트를 손쉽게 세팅 가능초기 개발 시간 단축, 개발 생산성 향상React 앱 개발에만 집중할 수 있음(babel, webpack 등 심화된 관리 x)단점빌드 설정을 커스터마이징하기 어려움, 따로 추가적인 수정이 필요함리액트 앱 구조에 대해서 이해하기 어려울 수 있..

정수 배열 arr이 매개변수로 주어집니다. arr의 길이가 2의 정수 거듭제곱이 되도록 arr 뒤에 정수 0을 추가하려고 합니다. arr에 최소한의 개수로 0을 추가한 배열을 return 하는 solution 함수를 작성해 주세요.🚫제한 사항1 ≤ arr의 길이 ≤ 1,0001 ≤ arr의 원소 ≤ 1,000❗입출력 예arrresult[1, 2, 3, 4, 5, 6][1, 2, 3, 4, 5, 6, 0, 0][58, 172, 756, 89][58, 172, 756, 89]😀 내가 푼 답const solution = (arr) => { let length = arr.length const isPowerOfTwo = (num) => (num & (num - 1)) === 0 ..

📚 startsWith()- startsWith() 함수는 문자열 객체의 메서드 중 하나로 해당 문자열이 지정된 접두사로 시작하는지 여부 확인- boolean 값을 반환string.startsWith(searchString[, position])- searchString : 검색할 접두사로 사용할 문자열- position(선택) : 검색을 시작할 인덱스를 나타내는 정수, 기본값은 0이고 생략하면 전체 문자열을 대상📚 endsWith()- endsWith() 함수는 문자열 객체의 메서드 중 하나로 해당 문장려이 지정된 접미사로 끝나는지 여부 확인- boolean 값을 반환string.endsWidth(searchString[, position])📚 includes()- 하나의 문자열이 다른 문장려에 ..

정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요. num_list가 [1, 2, 3, 4, 5, 6, 7, 8] 로 길이가 8이고 n이 2이므로 num_list를 2 * 4 배열로 다음과 같이 변경합니다. 2차원으로 바꿀 때에는 num_list의 원소들을 앞에서부터 n개씩 나눠 2차원 배열로 변경합니다. 🚫제한 사항 1 ≤ my_string ≤ 110 my_string은 대문자, 소문자, 공백으로 구성되어 있습니다. 대문자와 소문자를 구분합니다. 공백(" ")도 하나의 문자로 구분합니다. 중복된 문자 중 가장 앞에 있는 문자를 남깁니다. ❗입출력 예 num_list n result ..

문자열 my_string이 매개변수로 주어집니다. my_string에서 중복된 문자를 제거하고 하나의 문자만 남긴 문자열을 return하도록 solution 함수를 완성해주세요. 🚫제한 사항 1 ≤ my_string ≤ 110 my_string은 대문자, 소문자, 공백으로 구성되어 있습니다. 대문자와 소문자를 구분합니다. 공백(" ")도 하나의 문자로 구분합니다. 중복된 문자 중 가장 앞에 있는 문자를 남깁니다. ❗입출력 예 my_string result "people" "peol" "We are the world" "We arthwold" 😀 내가 푼 답 const solution = (my_string) => { return [...new Set(my_string)].join("") } Set 중복되..

ⅰ) Model !!→ 데이터(data)가공을 책입지는 컴포넌트(component) - 모델은 어플리케이션의 정보, 데이터를 나타냄 - 데이터베이스, 초기화 된 상수나 값, 변수 등을 뜻함 - 비지니스 로직을 처리한 후 모델의 변경 사항을 컨트롤러와 뷰에 전달함 - Model의 규칙 - 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 함 - 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 함 - 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만함 ⅱ) View !! → 사용자에게 보여지는 부분, 즉 유저 인터페이스(User interface)를 의미함 - MVC 패턴은 여러 개의 뷰가 존재할 수 있으며, 모델에게 질의하여 데이터를 전달받음 - 뷰는 받은 데이터를 화면에 표시해주는 역할을 가..

정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. 🚫제한 사항 -10,000 ≤ numbers의 원소 ≤ 10,000 2 ≤ numbers 의 길이 ≤ 100 ❗입출력 예 numbers result [1, 2, -3, 4, -5] 15 [0, -31, 24, 10, 1, 9] 240 [10, 20, 30, 5, 5, 20, 5] 600 😀 내가 푼 답 const solution = (numbers) => { let arr = [] for(let i = 0; i < numbers.length; i++){ for(let j = 0; j a - b); return Math.max(numbers..

머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. 🚫제한 사항 box의 길이는 3입니다. box[0] = 상자의 가로 길이 box[1] = 상자의 세로 길이 box[2] = 상자의 높이 길이 1 ≤ box의 원소 ≤ 100 1 ≤ n ≤ 50 n ≤ box의 원소 주사위는 상자와 평행하게 넣습니다. ❗입출력 예 box n result [1, 1, 1] 1 1 [10, 8, 6] 3 12 😀 내가 푼 답 const solutio..

정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요. 🚫제한 사항 1 ≤ array의 길이 ≤ 100 0 ≤ array 원소 ≤ 1,000 array에 중복된 숫자는 없습니다. ❗입출력 예 array result [1, 8, 3] [8, 1] [9, 10, 11, 8] [11, 2] 😀 내가 푼 답 const solution = (array) => { return [Math.max(...array), array.indexOf(Math.max(...array))] } 😊 문제풀이 답안 OR 다른사람들 답안 // 1 function solution(array) { let max = Math.max(...array)..