개발하자

리액트의 이벤트 시스템 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. 조화과정(..

useState 는 무엇일까? 공식문서에는 Hook과 useState에 대해서 아래와 같이 설명하고 있다. Hook이란? Hook은 특별한 함수입니다. useState state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 왜 사용하는 것인가? 왜인지를 생각해봤을 때 리액트는 함수내에서 변경이 있는 상태를 저장할 수 없다. 함수내의 변경이 생기면 함수전체를 다시 렌더링 하기 때문이다. 그럼 상태 변수를 유지 할 수 없기 때문에 함수 외부에서 상태를 유지해줄 함수나 객체가 필요하다. 어떻게 사용하는 것인가? 클론코딩 강좌를 들으며 useState의 사용법을 배웠다. 아래 코드 처럼 사용하면 손쉽게 상태를 저장하고 변경할 수 있다. import { useState } from "react"; impor..

왜 이제야 리액트 공부를 시작할까? 프론트엔드 공부를 한지 꽤 지났지만 리액트를 제대로 사용해본적은 없다. 처음부터 라이브러리나 프레임 워크에 맞춘 사고를 하고 싶지 않았고, 프론트엔드 동향은 꽤나 자주 바뀌지만 javascript 본질은 한동안 변하지 않을 것이라 생각했기 때문이다. 또 자신감도 있었다. vanilla.js 로 앱을 개발할 수준이 된다면 라이브러리와 프레임워크를 이해 못할리가 있을까? 사용법 자체는 더 빨리 익힐 것이라생각했다. 그럼 리액트 말고 무슨 공부를 했을까? 최근에는 vanilla.js 와 typescript로 웹앱 개발하여 출시 했다. 앱에 대한 자세한 내용은 레포에 있다!! https://github.com/star-to star-to star-to has 4 reposit..

Execution Context를 먼저 학습하는 것을 추천한다!! https://hyesunie.tistory.com/14 Scope와 Closure 이해하기 위한 선행 학습 (Execution Context, Lexical Environment ) JS에서 Scope와 Closure를 이해하기 위해서는 Lexical Evironmet에 대한 이해가 선행되어야 한다. 그래서 아래 포스팅을 해석하며 Execution Context를 이해해보려고 했다!! https://blog.bitsrc.io/understanding.. hyesunie.tistory.com Scope 공식 문서에서 정의한 내용을 보면 아래와 같이 간단하게 정의 돼있다. 현재 실행되는 컨텍스트를 말한다. 간단하지만 이해하기 위해서는 Exe..

이 전에 JS Prototype에 대해서 자세하게 학습한 적이 있었다. 그때 정리를 해두고 완벽하게 이해를 했다고 생각했는데,, 최근에 다시 Prototype에 대해 정리를 하려고 봤더니 많이 헤깔렸다!! 그래서 이번에는 블로그에 정리해두고 헤깔릴 때마다 보려고 한다. 프로토타입 상속에 대해 자세하게 공부하고 싶다면 이 사이트를 참고하면 좋다!! https://ko.javascript.info/prototype-inheritance 프로토타입 상속 ko.javascript.info Prototype이 무엇일까? 상속을 가능하게 하는 자바스크립트 언어의 고유 기능이라고 한 줄 요약을 할 수 있다. class의 extends와 완전히 같지는 않다!! class를 prototype 체인에 연결 하려고 했을 떄..

프론트 엔드 공부를 한지 벌써 1년이 다 돼 간다. 목숨걸고 열심히 했다고까지는 말하지 못하지만 차근차근 꾸준히 기본을 닦아왔다는 것은 확실하다!! 그래서 조금 더 큰 프로젝트를 혼자 할 수 있겠다는 자신감이 생겼고, 프로젝트를 기획해보려고 한다. 다른 사람들과 함께 하고 싶은 마음도 있지만, 어떤 사람을 만나게 될지 모른다는 불안감도 있고, 내가 타인의 영향을 잘 받는 사람이라서 결국은 내가 하고 싶은 프로젝트를 할 수 없을지도 모른다는 불안감이 있었기 때문에 혼자 프로젝트를 진행하려고 한다. 협업을 하지 않기 때문에 일단 기획을 먼저하고, 그 기획에 맞춰서 개발을 하는 연습을 해보려고 한다. 혼자 기획까지 완벽하게 할 수는 없겠지만 그래도 스스로 요구사항과 UI를 정해놓고, 어떻게든 구현해보려는 노력..