본문 바로가기

전체 글389

react.js & node.js 4일차 위와 같이 인자로 보내주는 것을 보고 이벤트 정보라고 부른다. 이것은 이 함수를 호출할때 자동으로 해당 이벤트에 대한 객체를 전달해준다. 그래서 이걸 가지고 보았을때 onChange 부분에서도 이벤트 정보를 인자로 받아 사용할 수 있다. 그리고 받은 인자들을 함수로 넘기어 줄때는 화살표 함수를 반드시 사용해야한다. 이점도 알아야하는데 대괄호를 써야지 키값이 되고 안쓰면 그냥 스트링이 된다. 그래서 반드시 사용시에 대괄호를 붙여주자. REACT REPEAT 하지만 이번에는 map함수를 알아볼것이다. map함수는 배열에 사용하는 함수이다. 함수형프로그래밍 map, filter가 대표적이다. map함수는 배열로서 사용하게 된다. ``` const numbers = [1,2,3,4,5]; const newNum.. 2021. 12. 30.
react.js & node.js 3일차 - React Rendering, Input, useState, filter, map, reduce IIFE(Immediately Invoked Function Expression - 즉시실행함수) React Rendering 위와같이 즉시실행함수를 사용했다. 하지만 이렇게 한다고 하더라도 number는 바뀌지 않는다. 왜일까? 이건 react가 평볌한 변수에 대해서는 render 해주지 않아서 그렇다. react가 render 해주는 변수들이 따로 존재한다. useState 그래서 useState를 사용했다. 이렇게해서 리스트로 바환된것은 비구조화 할당으로 변수와, 변수값을 바꿀 수 있는 것이다. 그리고 useState 내부에는 초기값을 넣어준다. 그래도 가상돔(virtualDOM)이 변화된 부분만 바꾸어주기 때문에 최적화에서는 큰 문제가 생기지 않는다. 하지만 컴포넌트는 새로생기기 때문에 useSt.. 2021. 12. 23.
react.js & node.js 2일차 리액트를 사용하는 이유 웹사이트가 점점 더 복잡해 지면서 프론트엔드를 더 효율적으로 개발하기 위해 facebook에서 개발. DOM에 직접 접근하는 기존 패러다임에서 data-binding과 컴포넌트 기반의 FE 프로그래밍. React는 컴포넌트 기반이다. React virtual DOM 사용 DOM이란? Document Object Model 트리구조로 이루어진 html 모델 HTML 구조가 DOM이다. HTML 구조를 보면 html > head > body >... 쭉 내려간다. 이런식으로 tree를 가진다. 이러한 것을 dom tree라고 부른다. React는 변화가 생기면 변화가 생긴곳만 감지해서 새롭게 정의를 해주는데 이때 변화를 해주는 횟수가 성능에 영향을 미친다. react에서는 최대한 업데.. 2021. 12. 23.
react.js & node.js 1일차 1주차 : React 기초, React hooks 2주차 : todo list 만들기, api 통신 3주차 : bootstrap 따라만들기 4주차 : 영화,책 검색사이트(node.js) -> 네이버 open API를 사용해서 책 검색, 영화 검색 사이트만들기 5주차 : 인스타그램 클론코딩 프로그래밍 언어 브라우저의 동작을 코딩할 수 있음. (정적페이지 -> 동적페이지) 브라우저 JS코드를 실행할 수 있음 (v8엔진) node.js의 등장 브라우저처럼 JS를 실행시킬 수 있는 환경. (runtime) Backend Server는 express.js이다. express는 node.js를 기반으로 할 수 있는 웹 프레임워크, 서버이다. 이거말고도 koa.js라는 것도 있기도 하다. node.js의 등장으로 프.. 2021. 12. 22.

티스토리툴바