Day 1~4 🌞
리액트란 무엇인가?? 🧐
기존의 HTML, CSS, JavaScript를 사용해 정적인 페이지를 만들어보는 학습을 했었다. 하지만 이번엔 SPA(Single Page Application)에 대표적인 리액트를 사용하여 웹 페이지를 구성하는 수업을 진행하였다. 그러면 리액트는 과연 무엇일까???. 본질적인 이야기부터 시작해보자.
리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. 말은 라이브러리지만 사용하기 위한 규칙이나 문법이 제법 엄격한 편이다. 리액트를 프레임워크라고 부르는 사람도 있을 정도이니 말이다.
리액트 특징은 크게 3가지가 있다.
- 선언형 프로그래밍
- 컴포넌트 기반
- 범용성
개발에서 선언형이란 코드를 자세히 분석하지 않아도 명시적으로 그 코드의 의도를 알 수 있는 형태를 말한다. 기존 HTML, CSS, JS를 사용한 코드는 그 목적에 맞게 서로 분리되어있어서 하나의 기능을 확인할 때에 3가지의 파일을 전부 다 확인 해야 하는 단점이 있다. 하지만 리액트는 JSX라는 문법을 통해 하나의 파일에 명시적으로 HTML, CSS, JS를 씀으로써 이러한 불편함을 없앴다.
컴포넌트 기반이란 하나의 기능 구현을 위해 여러 종류의 코드를 묶어 분리함으로써 서로 독립적이고 재사용이 가능하므로, 기능 자체에 집중하여 개발할 수 있다. 즉 유지 보수와 유닛 테스트를 통한 구조를 만든다고 할 수 있다.
범용성이란 프레임워크처럼 한 프로젝트 내에서 종속이 되는 게 아니라 라이브러리처럼 필요한 부분만 리액트를 활용할 수 있으므로 유연한 개발을 할 수 있다. 또 지금의 META(전 Facebook)에서 관리를 해서 안정적이고, 좋은 피드백을 받을 수 있는 커뮤니티 생태계도 활성화가 잘 되어 있다.
리액트의 주요 컨셉 🤨
기존의 방식은 브라우저가 HTML을 서버에게 받아와 DOM tree를 구성해 최종적으로 Render Tree를 만들어 유저에게 UI를 보여줬었다. 이와 비슷하게 리액트도 부모 컴포넌트, 자식 컴포넌트를 갖는 트리구조를 형성하게 된다. 리액트에서는 이 구조 "Virtual DOM Tree" 이라는 것을 통해 유저에게 UI를 제공한다.
Virtual DOM Tree
리액트는 state라는 오브젝트에 데이터가 변경되면 리액트가 변경된 사항을 감지해 자동으로 re-rendering을 하게 된다. 이 말은 즉 루트 컴포넌트에 있는 state가 변경되면 자식 컴포넌트들은 다시 호출되기 때문에 성능적으로 문제가 되지 않겠느냐는 의구심이 들 수도 있다. 하지만 리액트는 다르다. 리액트는 모든 컴포넌트들 메모리에 저장되어있고 이전에 virtual DOM tree와 비교해 실제로 변경된 곳만 DOM tree에 업데이트 시킨다. 즉 랜더링이 많이 되어도 성능상 크게 걱정할 필요는 없다.
Day 5
프로그래밍을 어느 정도 하다 보면 만나게 되는 벽. 재귀함수에 대해서 학습했다. 재귀적인 사고방식은 수학적 귀납법에 따라 정립할 수 있는데. 이 생각 자체가 어려운데???🥲
재귀함수를 사용할려면?
function recursive() {
if (종료 조건) {
//Base case
} else {
// recursive case
}이것만 알면 재귀의 큰 틀은 만들 수 있다. Base case는
반복되는 재귀함수를 탈출하는 코드를 말하고, recursive case는 반복으로 재귀를 돌리기 위한 코드를 말한다.
코드를 사용하기 전에 본질적인 종료 조건이 무엇이 되어야 하며 가장 작은 단위의 재귀적 조건을 생각하는 게 재귀의 핵심이다.
익숙하지 않다면 저 코드를 기본적으로 깔고 시작하는 게 나중에 있을 DFS 알고리즘을 쉽게 이용할 수 있는 팁이 될 것 같다.
피보나치 수열
function fibonacci(num) {
if (num <= 1) return num;
return fibonacci(num - 1) + fibonacci(num - 2)
}피보나치 수열 문제를 알기 위해 집적 노트에 그림을 그려보았다. 결국 그림을 따라가다 보니 알게된 원리인데, 즉 끝단에 있는 리프 노드가 1인 노드의 개수가 총 몇 개인지 리턴하면 되는 원리였다. 쉬운데 쉽지 않은 피보나치...
