늘 겸손하게

목차 얕은 비교 깊은 비교 얕은 비교 자바스크립트에서 얕은 비교는 원시값을 비교할 경우 값을 비교하나, 배열 객체 등 객체를 비교할때는 레퍼런스, 즉 참조값을 비교합니다. 그래서 자바스크립트에서는 같은 값을 가진 객체라도 얕은 비교를 하면 다르다고 판단할 수 있습니다. const str1 = "hello" const str2 = "hello" if (str1 === str2) { console.log("string same") // string name } const obj1 = { number : 10 } const obj2 = { number : 10 } if (obj1 == obj2) { console.log("object same") // 출력 안됨 } 깊은 비교 객체를 비교할때 레퍼런스(주소)만..

github-pages를 통해 배포까지 완료했으나 매번 새로운 코드를 push하고, deploy 하는 과정은 낭비이므로 배포 자동화를 프로젝트에 적용해보자. yml 파일 작성 actions가 어떤 방식으로 이루어질지를 결정하는 yml 파일을 우선 작성해야 한다. root/.github/workflows/ 하위에 gh-pages.yml 파일을 생성하자. 내용은 아래와 같이 작성한다. name: Build and Deploy on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v2.1.2 with: node..

목차 서론 Presentational 컴포넌트 Container 컴포넌트 이 방식의 장점 서론 React에서 컴포넌트를 Presentational 컴포넌트와 Container 컴포넌트로 나누어 작성할 수 있다. Presentational 컴포넌트는 무엇이고, Container 컴포넌트는 무엇일까? 또 이렇게 분리했을때 장점이 무엇일까? Presentational 컴포넌트 UI 담당하는 컴포넌트. 사용자에게 어떻게 보일지에 집중한다. 특징으로는 내부에 presentational 컴포넌트와 container 컴포넌트를 가질 수 있다. 개인 스타일(css, Markup)을 가지고 있다. store, Flux actions 등 앱의 다른 부분에 의존하지 않는다. 데이터를 조작하지 않는다. props를 통해 데이..

목차 컴포넌트 기반 아키텍처 React Component 모듈화 마무리 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처는 큰 애플리케이션을 작은 재사용 가능한 조각으로 나누어 개발 및 유지 보수를 용이하게 만든다. React는 JavaScript UI 라이브러리로 UI를 구축하기 위해 컴포넌트 기반 아키텍처를 제공한다. 여기서 이야기 하는 컴포넌트 기반 아키텍처를 더 자세히 알아보자. 컴포넌트 기반 아키텍처를 알려면 먼저 컴포넌트가 무엇인지 알아야 한다. React Component React의 기본 구성 요소로 UI의 일부분을 정의하며, JavaScript 함수 또는 클래스로 작성된다. 컴포넌트는 props(속성) 및 state(상태)를 사용하여 동작을 정의하고 데이터를 표시한다. 각 컴포넌트는 독립적으..