Back to the Basics

Tipic 1 정리 Topic1은 hardware에 대한 내용이다. 1. Intro 컴퓨터를 살 때 또는 중고로 팔 때 중요시 여기는 것은 바로 "성능"이다. 최근에 나도 공부를 위해 macbook air 2021을 구매했다. Topic1의 내용과 같이 모델을 선택한다고 해서 끝이 아니라 ram용량을 몇 GB로 선택할 것인지, CPu는 i5를 선택할 것인지, i7을 선택할 것인지 (물론 macbook air는 appel chip을 사용하므로 cup에 대해 고민할 일을 없었다.)에 따라 가격이 2배 또는 1.5배로 확 오른다. 이렇게 고르고 고르다 보면 결국 그냥 조금 더 투자해서 macbook pro를 사는 게 더 나을 수도 있다는 생각이 드는 경우까지 갈 수 도 있다. 성능 대비 투자한 비용이 2배 또..

HA를 위해 이전에 풀었던 코플릿을 쭈욱~ 돌아보는 중에 풀었던 문제들 중 객체의 값들로 num 타입의 숫자들이 있는데, 이것들의 최댓값을 Object.values를 뽑아서 Math.max()로 뽑았던 것을 보았다. 혹시 배열로 따로 속성들을 뽑지 않고 최댓값을 구할 수 있는 방법이 있을까 순간 궁금해져서 HA를 공부해야 하는 이 바쁜 와중에 Math.max MDN을 들어가게 되었다. (시간이 걸리는 일은 아니니까) MDN을 보다보니 Math.max에 대해 몰랐던 사실과 기억하고 있어야 할 사항, 그리고 Math.max 대체 방법들이 나와있었다. 아, 이건 정리하여 기록을 해야겠다! 싶어서 이렇게 글을 또 쓴다. ( 빨리 나머지 코플릿 문제들 봐야 하는데,,,) Math.max MDN Math.max()..

**예제는 MDN을 참조하였다 코플릿을 다시 보면서 잘 사용하지 않던 method가 있어 정리해보았다. flta method에 대해 기능을 알아보고, filter가 어떻게 작동되는지 기능을 직접 코드로 구현해 보았다. arr.flat() : 배열 내부의 sub-srray 요소들을 특정 차원으로 새로운 배열로 return 한다. - syntax : flat() ,flat(depth) - param : depth는 optional 이며 중첩돤 배열 구조를 얼마나 깊게 flattering을 하는지를 지정하는 깊이를 나타낸다. 기본값음 1 기본값은 1이며, 아래의 코드는 2차원 배열 내부의 배열인 [4,5]을 1차원 배열 수준으로 flattering 한 것이다. const arr1=[1,2,3,[4,5],6,7..

공식 홈페이지도 참고해보자! React 방식과 DOM 방식 차이 React Event Handling은 DOM의 처리 방식과 비슷하지만 몇 가지 차이점이 있다. 문법적인 차이는 공식 홈페이지에서도 나와있듯이 React에서 Event는 camelCase로 사용한다 JSX를 사용하여 "함수"로 Event Handler(이벤트 처리 함수)를 전달한다. 예를 들면 아래의 코드와 같다. {/* HTML */} Click me {/* React */} React는 이러한 값을 컴포넌트의 State로 관리하고 업데이트한다. Onchange는 input의 text가 바뀔 때마다 발생하는 이벤트이다 onChange Event가 발생하면 e.target.value를 통해 이벤트 객체에 담겨 있는 input값을 읽어올 수 ..

State Application에서 Sate란 컴포넌트 내에서 변할 수 없는 값이며 상태는 React State로 다뤄야 한다. [20100810]- React-State and Lifecycle 공식문서를 보고 state와 props에 대해 정리한 글이다. 참고해보자~! State hook, useState Hook이란 무엇일까??? 공식 홈페이지에 의하면 Hook은 "React feature를 연결할 수 있는 특수한 함수"라고 한다. React를 다루기 위해 특별히? 사용되는 함수라고 생각하면 될까..?? React에서는 useState라는 특별한 함수를 통해 state를 다룬다. useState는 React Hook중의 하나이며 React state를 추가할 수 있게 해주는 Hook이다. How t..

React State & Props Achievement Goals state, props의 개념에 대해서 이해하고, 실제 프로젝트에 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 State를 정의 및 변경할 수 있다. React 컴포넌트 (React Component)에 props를 전달할 수 있다. 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다. 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다. React의 단방향 데이터 흐름(One-way flow)에 대해 자신의 언어로 설명할 수 있다. State & props Intro..

보호되어 있는 글입니다.

간단하게 오늘 배운 lesson 내용을 정리해 보았다. React SPA Achievement Goals SPA(Single-page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. SPA SPA란? SPA(Single Page Application : 페이진 갱신에 필요한 데이터만 입력받아 현재 페이지의 정보를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션 또는 사이트를 말한다. 전통적인 웹사이트는 사용자의 요구가 있을 때마다 페이지 전체를 로딩한다. --> "깜빡인다" 라고 표현한다. SPA는 업데이트가 필요한 부분만 새로 불러온다(중복되는 부분은 불러오지 않는..