본문 바로가기

분류 전체보기296

React - 7장 : 컴포넌트의 Lifecycle Method React - 1장 : React 이해 React - 2장 : JSX React - 3장 : 컴포넌트 React - 4장 : 이벤트 핸들링 React - 5장 : ref. DOM에 이름 달기 React - 6장 : 컴포넌트 반복 해당 포스팅은 23년 기준 지금은 잘 사용하지 않는 class형 Component의 라이프사이클에 대해서 설명하고 있다. 현재에는 함수형 Component를 주로 사용한다. 참고로만 알아두자. 7-1. 라이프사이클 메서드의 이해 - 모든 리액트 컴포넌트에는 라이프사이클이 존재하며, 렌더링 되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. - 라이프사이클 메서드는 class형 컴포넌트에만 사용할 수 있다. - 총 세 가지 [마운트, 업데이트, 언마운트] 의 카테고리로 나.. 2023. 2. 14.
React - 6장 : 컴포넌트 반복 6-1. 자바스크립트 배열의 map() 함수 - 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 1) 문법 // 기본문법 arr.map(callback, [thisArg]) // 예제 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => num * num); console.log(result); - callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 - currentValue : 현재 처리하고 있는 요소 - index : 현.. 2023. 2. 13.
[Lv.2] 짝지어 제거하기 (시간복잡도) 1. 문제 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다. 예를 들어, 문자열 S = baabaa 라면 b aa baa → bb aa → aa → 의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다. 제한사항 문자열의 길이 : 1,000,000이하의 자연수 문자열은 모두 소문자로 이루어져 있습니다. .. 2023. 2. 13.
[Lv.2] 영어 끝말잇기 1. 문제 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 .. 2023. 2. 13.
[Lv.2] 피보나치 수 (오버플로우 현상) 1. 문제 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 제한 사항 n은 2 이상 100,000 이하인 자연수입니다. 입출력 예 3 2 5 5 입출력 예 설명 피보나치수는 0번째부터 0, 1, 1, 2, 3, 5, ... 와 .. 2023. 2. 12.
[Lv.2] 숫자의 표현 (등차수열의합 / 정수론) 1. 문제 Finn은 요즘 수학공부에 빠져 있습니다. 수학 공부를 하던 Finn은 자연수 n을 연속한 자연수들로 표현 하는 방법이 여러개라는 사실을 알게 되었습니다. 예를들어 15는 다음과 같이 4가지로 표현 할 수 있습니다. 1 + 2 + 3 + 4 + 5 = 15 4 + 5 + 6 = 15 7 + 8 = 15 15 = 15 자연수 n이 매개변수로 주어질 때, 연속된 자연수들로 n을 표현하는 방법의 수를 return하는 solution를 완성해주세요. 제한사항 n은 10,000 이하의 자연수 입니다. 2. 풀이 // 등차수열의 합은 항의갯수*(초항+마지막항)/2 이다. function solution(n) { var answer = 1; for(let i =2; i 2023. 2. 12.
[Lv.2] 이진 변환 반복하기 (JS 이진수, 십진수 변환) 1. 문제 0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다. x의 모든 0을 제거합니다. x의 길이를 c라고 하면, x를 "c를 2진법으로 표현한 문자열"로 바꿉니다. 예를 들어, x = "0111010"이라면, x에 이진 변환을 가하면 x = "0111010" -> "1111" -> "100" 이 됩니다. 0과 1로 이루어진 문자열 s가 매개변수로 주어집니다. s가 "1"이 될 때까지 계속해서 s에 이진 변환을 가했을 때, 이진 변환의 횟수와 변환 과정에서 제거된 모든 0의 개수를 각각 배열에 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 s의 길이는 1 이상 150,000 이하입니다. s에는 '1'이 최소 하나 이상 포함되어 있습니다. 입출력 예.. 2023. 2. 12.
React - 5장 : ref. DOM에 이름 달기 - 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. - 요소에 id를 달면 css에서 특정 스타일을 적용하거나 자바스크립트로 해당 요소에 작업을 할 수 있다. 5-1. ref(reference) - HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. - 리액트 컴포넌트에 id를 사용하는 것은 권장하지 않는다. - 컴포넌트는 여러 번 사용할 수 있는데 id는 유니크한 값이기 때문에 잘못된 사용이 될 수 있다. - ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 떄문에 문제가 발생하지 않는다. 1) ref는 어떤 상황에서 사용해야 할까? - DOM을 꼭 직접적으로 건드려야 할 때 사용한다. - 특정 input에.. 2023. 2. 9.

티스토리툴바