[241028 TIL] 본캠프 19일차

📌 오늘의 TIL 알고리즘 문제 풀이 실패 원인 파악 (해결 완료) [React 입문] 강의 수강

 

 

 알고리즘 '피보나치 수' 문제 풀이 

/* 실패 코드 */
function solution(n) {
    let answer = [0, 1];

    for (let i = 2; i <= n; i++) {
    	answer.push(answer[i - 1] + answer[i - 2]);
    }

    return answer[n] % 1234567;
}

코드를 작성하는 것은 별로 어렵지 않았는데 시간 초과도 아닌 실패가 발생을 했다. 아무리 생각을 해도 코드적으로는 원인을 찾지 못해서 커뮤니티에 들어갔는데 값이 엄청나게 커지는 경우 실패할 수 있다는 얘기가 있었고, 최종적으로 다음과 같이 해결하였다.

• A를 B로 나눈 나머지는 A가 B보다 작아질 때까지 A에서 B를 빼고 남은 값이다.
• 즉, 모두 더한 뒤 B * n을 빼는 것과 더하는 과정마다 B * m을 빼는 것의 결과는 동일하다.

/* 정답 코드 */
function solution(n) {
    let answer = [0, 1];

    for (let i = 2; i <= n; i++) {
    	answer.push((answer[i - 1] + answer[i - 2]) % 1234567);
    }

    return answer[n];
}

 

 

 [React 입문] 강의 수강 

코드적인 내용이나 규칙은 개인 과제를 수행하면서 보다 정확히 익히기로 하고, 오늘은 React와 관련된 전반적인 개념을 습득하는데 집중했다.

 

React란?

UI를 만들기 위한 라이브러리이다.

프레임워크 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 자원을 지원하는 기술의 조합
라이브러리 공통 기능의 모듈화가 이루어진 프로그램의 집합

 

React는 Redux, React-router-dom 등 다른 라이브러리들을 추가해서 함께 사용하는 경우가 많기 때문에 그 자체로 프레임워크라고 하기엔 기능이 부족하다.

 

React의 이점 및 특징

• SPA (Single Page Application)를 지원한다.

MPA 브라우저에서 서버에 응답을 요청하면 서버에서 해당 요청에 따라 새로운 HTML 파일을 전달
SPA 브라우저에서 서버에 응답을 요청하면 서버에서 해당 요청을 처리한 뒤 필요한 데이터를 JSON 형태로 전달

• 개발자들 사이에서 인기가 많다.
• 인기가 많은만큼 커뮤니티가 막강하다.

 

Routing

SPA는 여러 페이지를 가지고 있지 않은데 어떻게 사용자가 여러 페이지를 이동하면서 웹사이트를 이용하는 것처럼 보여질 수 있을까?

• Hashed Routing 해시 값을 기준으로 페이지를 이동하는 기술
• Browser Routing # 키워드를 제거함으로써 사용자 입장에서 보다 깔끔하게 느껴짐

 

컴포넌트 (Component)

UI를 개별적인 조각으로 나눔으로써 재사용이 가능하도록 해주는 것으로, JavaScript의 함수와 유사하다.

부모 컴포넌트 다른 컴포넌트를 품는 컴포넌트
자식 컴포넌트 다른 컴포넌트에 품어지는 컴포넌트

 

JSX

HTML을 품은 JavaScript라고 생각할 수 있다.

 

props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터로서, 반드시 부모 컴포넌트에서 자식 컴포넌트로만 전달되고 그 값을 변경하지 않는다.

 

state

컴포넌트 내부에서 바뀔 수 있는 값으로, useState() 이용해서 생성한다.