비동기 Single Thread 언어 js는 싱글스레드 언어! => js 엔진은 단하나의 실행 컨텍스트 스택을 가지며, 한번에 하나의 작업만 수행 가능 동기 / 비동기 js는 싱글스레드 언어! => js 엔진은 단하나의 실행 컨텍스트 스택을 가지며, 한번에 하나의 작업만 수행 가능 js의 동시성을 지원하는것이 바로 '이벤트루프'! 비동기 처리 비동기처리 방식의 문제점 -> 반환 결고 ㅏ가지고 후속처리 불가 -> callback 사용 Callback 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는것 즉, 함수 자체를 매개변수로 전달하는것 Callback Hell => Promis, Async Promise resolve(value) reject(error) 비동기처리가 성공하면,..

Router 그동안 사용한 페이지 이동 => a태그 a태그의 문제점? html새로 불러오면서 다시그림. 화면 깜빡 우리가 배우는 react는 sap환경 즉.하나의 html 그럼 조건부렌더링으로 페이지 바꾸면안되나? => 놉 뒤로가기 앞으로가기 동작 ㄴ 새로고침시 최초 렌더링메인 이동 특정 url 접속 ㄴㄴ 페이지별 즐찾도 불가 => 우리가 사용할 것: Router React Router routing: 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는것. 이 기능을 가진게 Router임 Router Components 종류 BrowserRouter =>多用 HashRouter MemoryRouter NativeRouter 주로 BrowserRouter사용하고, 필요에따라 HashRouter 사용 B..

💜 ESLint, Prettier 자동 적용 시키기💛 ESLint 설치 및 초기 세팅우선 ESLint와 prettier를 설치하자.아래 포스트에 설치 방법을 작성해두었다.https://lullu-nan-potato-developer.tistory.com/entry/%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85-ESLint-Prettier [초기세팅] ESLint, Prettier, stylelint, husky + lint-staged💜 ESLint 💛 ESLint 란? ESLint란, ES와 Lint를 합친 말이다. 그렇다면 ES와 Lint는 무엇일까? ES: Ecma Script. Ecma라는 기구에서 만든 script. 즉, 표준 javascript를 의미..

💜 ESLint 💛 ESLint 란?ESLint란, ES와 Lint를 합친 말이다.그렇다면 ES와 Lint는 무엇일까?ES: Ecma Script. Ecma라는 기구에서 만든 script. 즉, 표준 javascript를 의미한다.Lint: 에러가 있는 코드에 표시를 달아놓은 것. 정리하자면, ESLint는 '자바스크립트 문법에서 에러를 표시해주는 도구'이다.ESLint는 코드 검사를 통해 에러와 버그를 검사한다. 뿐만 아니라, 코드 스타일 가이드에 맞지 않는 부분을 찾아내는 기능도 한다.   이때, 검사 정도를 개발자가 설정할 수 있다. 즉, 어느 정도의 수준으로 에러를 표시하고/해결하게 할 건지에 대한 커스텀 및 스타일링이 가능하다. 따라서 협업에 특히 유용하다. 가령, 정말 문제..

CSS in JS JavaScript 파일 안에 스타일을 선언하는 방식 CSS in CSS styled-components 대표적인 CSS-in-JS 라이브러리 장점 css모델을 컴포넌트 레벨로 추상화하는 모듈성. (문서레벨이 아니라) js환경을 최대한 활용. js와 css 사이의 상수와 함수를 공유 단점 러닝커브? 새로운 의존성 css in css 비해 느린속도 기본 문법 1. tagged template literal 사용 (tag + 백틱) const a = styled.div` //~~~ `; 2. Components 대문자로 시작 3. styled API를 사용해서 스타일링함 import styled from "styled-components"; 동적 스타일링 단일 속성 props 사용하기. 다..

Component 특징 규칙 함수형 컴포넌트, 클래스형 컴포넌트 왜 함수형 컴포넌트를 사용하는가? 함수형 컴포넌트 매개변수로 props를 받아오고, React Element를 반환 props properties의 줄임말 어떤 값을 컴포넌트에 전달해줘야할때 사용! 구조분해할당! children 컴포넌트 태그 사이의 내용을 보여주는 props 이거 왜 나 몰랐냐 .. 아니 알았는데 제대로 모르고 사용해왔따 .. props는 읽기 전용이다 모든 react 컴포넌트는 자신의 props를 다룰때 반드시 순수함수처럼 동작해야함. 순수함수: 외부의 상태를 변경x + 동일한 인자에 대해 항상 똑같은 값을 리턴하는 함수 즉, 자신의 props를 수정하지 말것! => 그럼 어떻게? state state (상태) 컴포넌트 ..

React란 리액트는 js ui library! 라이브러리 vs 프레임워크 - 가장 중요한 차이점: 애플리케이션 제어 흐름을 누가 갖고 있는지? - 라이브러리 -> 제어권이 개발자에게 있음 - 프레임워크 -> 제어권이 프레임워크에 있음 React는 왜 만들어졌을까? - 기능 많아질수록 동적으로 표현할 ui가 늘어나면서,, DOM api만으로는 개발하기 어려워짐 ㅠㅠ 1세대 -> DOM 조작, 이벤트 발생 2세대 -> jQuery 3세대 -> 프레임워크(Angular, Vue), 라이브러리(React) React 이해하기 싱글 페이지 애플리케이션 SPA - 단 한개의 페이지만으로 구성. - 모든 정적 리소스를 최초 한번만 다운받아 렌더링 - 페이지 갱신에 필요한 데이터만 리렌더링 - => 단점? 초기 구동..

DOM DOM Document Object Model : HTML을 '객체 형태'로 파싱해서 구조화한 모델. 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드 브라우저가 이해할 수 있는 구조, 노드 트리로 표현됨 DOM API 웹 문서의 동적 변경을 위해, DOM은 프로그래밍언어가 자신에게 접근/수정할 수 있는 방법 제공. js로 DOM에 접근하여, 노드추가/삭제/변경/이벤트처리/수정 등이 가능해짐 예시) document.getElementById() 등 https://poiemaweb.com/js-dom#3-dom-query--traversing-%EC%9A%94%EC%86%8C%EC%97%90%EC%9D%98-%EC%A0%91%EA%B7%BC DOM | PoiemaWeb 브라우저는 웹 문서(HT..