개발하자

리액트의 이벤트 시스템 html에서 제공하는 이벤트 시스템과 유사함 주의 사항 카멜표기법 : onClick 함수형태로 전달 DOM 요소에만 설정할 수 있음 (컴포넌트에 대해서는 설정 할 수 없음 클래스 컴포넌트 웹 브라우저의 네이티브 이벤트를 감싸는 객체이기 때문에 네이티브 이벤트와 똑같이 사용하면 됨 여러개의 state를 유지하고 이벤트로 업데이트 해야할 때 name과 같은 tag attribute 를 state와 같은 key 값으로 지정하여 사용 할 수 있음 handleChange = (e) => { this.setState({[e.target.name] : e.target.value}) } 이벤트 리스너를 arrow function 로 사용함→ 기존의 함수 형태로 사용하면 this binding을 ..

주단위 캘린더 라이브러리 팀프로젝트 주제 기획과 디자인을 할 때 내가 개발할 부분을 선택할 수 있다면 캘린더 부분과 사이드바 부분을 해보고 싶었다. 그래서 팀회의에서 그 기능을 내가 맡고 싶다고 했다. 캘린더는 주 단위 캘린더인데, 라이브러리가 유사한게 있지만 그냥 내가 구현해보려고 한다. 구현하는 김에 라이브러리를 만들어볼까 생각 중이다. 오늘은 그 부분에 대해서 알아봤다. 기능 정리하기 디자인 할 때 상세 기능을 세밀하게 생각해보지는 않아서 일단은 기능 부터 정리했다. 구글 캘린더와 유사하게 만들고 싶은 생각이 있어서, 기능도 유사하게 정리 됐다. https://lizard-cosmos-28e.notion.site/d6d36b0b2324483ba26bb7f04954b880 기능 정리 캘린더 lizar..

UI를 만들고, 나타날 때, 사라질 떄, 변경이 일어날 떄 주어진 작업들을 처리함 컴포넌트 생성 방식 리액트는 함수 컴포넌트와 클래스 컴포넌트를 생성할 수 있음 클래스 함수 장점 라이프 사이클 API를 사용할 수 있기 때문에 컴포넌트의 흐름을 파악하기 좋음 선언하기 편하고 자원을 덜 사용함 단점 생성시 API를 모두 사용할 수 있게끔 하기 때문에 사용하지 않는 것들 까지 가지고 있어 자원을 더 많이 사용 함 state와 라이프 사이클 API 사용이 불가능⇒ Hook으로 해결할 수 있음 props ( properties) 부모 컴포넌트에서 주입 받은 데이터들 (값, 객체, 함수, 배열 등) 사용 방법 기본 const MyComponent = props => { return 안녕하세요, 제 이름은 {prop..

Module Bundler, Transpiler 1. Module Bundler 별개의 js 파일을 script 태그로 다운로드 받을 경우 파일이 다르더라도 같은 변수명이나 함수명에 대한 오류가 발생하는데 이러한 문제를 해결해 줌 분리되어 있는 파일을 파일별 scope를 구분지어 하나의 파일로 통합시켜줌 웹팩의 경우 통합하려면 어차피 파일을 다 읽어야하는데 그 김에 할 수 있는 것들을 loader나 plugin으로 추가할 수 있음 webpack, rollup 2. Transpiler 최신버전의 자바스크립트를 지원하지 않는 환경, 예를 들면 es6를 지원하지 않는 환경에서 동작할 수 있도록 구 표준을 준수하는 코드로 바꿔줌 babel JSX란? 익숙한 markup 형태로 개발을 할 수 있도록 해주는 문법 ..

왜 리액트인가? 자바스크립트만으로도 규모가 큰 어플리케이션을 만들수 있는 시대가 됐음 개인 컴퓨터 성능이 좋아짐 브라우저마다 달랐던 것들을 표준화 함 (EcmaScript) 모듈화 작업을 표준화함 (CommonJS, ESM, AMD) 웹서버와 비동기적 데이터 교환이 가능해짐 (AJAX) javascript history NAVER D2 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것 다른 프레임 워크와의 비교를 해보아야 결론이 날 것 같음! 리액트 이해 1. 오직 view만 신경쓰는 라이브러리 2. 초기 렌더링 render 함수가 이를 다룸, 뷰의 작동과 구성에대한 정보를 지닌 객체를 반환 → 최상위 컴포넌트의 렌더링 작업이 끝나면 html을 만들고 실제 DOM에 주입 3. 조화과정(..