React 를 사용하면 setState를 사용하게 될 텐데, setState 함수를 활용하여 현제 상태를 변경해주는 것을 확인하기 위해 다음과 같은 코드를 실행한다고 치자. const [todoText, setTodoText] = useState(''); const onChange = (e) => { setTodoText(e.target.value); console.log(todoText); }; return ( ); 그럼 input값에 텍스트 변화를 줄 때마다 console에 즉시 변경된 값이 변형되어 출력되는가? 아니다. 실제로는 아래와 같이 동작한다. 마치 이전 상태를 console창에 출력하는 듯한 효과를 느낄 수 있는데, 이것은 setState 가 비동기로 처리되기 때문이다. setState로 ..

npm i -D eslint npm i prettier -D -E npm i eslint-plugin-prettier eslint-config-prettier -D npm i -D eslint-config-airbnb .eslintrc.json { "env": { "browser": true, "es6": true, "node": true }, "extends": [ "airbnb", "prettier/react", "eslint:recommended", "plugin:prettier/recommended" ], "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".js", ".jsx"] } ], "react/jsx-curly-..

git을 사용하다 보면 git push -u origin master 로 푸쉬를 하려고 시도를 할떄 rejected로 에러가 뜨는 경우가 있다. 해결법은 git push -u origin +master 처럼 푸쉬하려는 브랜치 앞에 +를 붙여주는 것이다.

localhost:4000/playground 에 분명히 플레이 그라운드 설정을 했는데, graphql 화면이 아이콘만 무한로딩이 된다면? helmet 버젼의 문제이다. helmet 4점대 버젼의 이슈로 3점대버젼으로 바꾸면 고쳐진다. yarn remove helmet // 아래 코드로 3점대 버젼 설치하기 yarn add helmet@lastest yarn add @types/helmet 해결완료!

velog.io/@smooth97/-Data-Visualizing-D3.js-%EB%9E%80 Data- Driven Documents. Js 데이터 중심의 문서의 약자로 자바스크립트 기반의 라이브러리 언어이다. 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해서 시각화 결과물을 생성한다. 데이터 시각화 프레임워크로 잘 알려져 있고, html5의 svg을 통해서 다양한 화면 해상도에서도 깨짐없는 보기가 가능하다. - D3 동작 과정 Loading: 시각적 요소를 그리기 전 보여주고자 하는 데이터를 불러온다. Selecting-Bindling: 시각적 요소안에 데이터 수치를 입력한 코드에 맞춰 연동시킨다. Transform: 그래프의 유형, 색상, 축 등 다양한 요소가 지정된다. Transition:..

아무리 style-components를 사용해도 스타일이 안바뀔때.. 분명히 내가 알기론 맞게 설계하고 코드를 짰으나, 화면에서는 그렇게 렌더링이 되지 않을때 웹 console을 반드시 확인하자. 분명히 에러가 있을 것이다. 오늘은 React의 style component를 pascal 형식으로 써주지 않아서 에러가 발생해서 시간을 매우매우매우 많이 낭비했다. 내가 배운것이 잘못되었나라는 의문까지 갖게 했던 하루였다.

https://d2.naver.com/helloworld/59361 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 표시하는 것이다. 자원은 보통 html 문서이지만 pdf나 이미지 등의 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 HTML과 CSS명세에 따라 html 파일을 해석해서 표시하는데 이 명세는 웹표준화 기구인 W3C에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고, 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만, 최근에는 대부분의 브라우저가 표준 명세를 따르게 되었다. 브라우저의 사용자 인터페이스는 서로 닮아 있는데, 다음과 같은 요소들이 일반적이다. - URI를 입력할 수 있는 주소 표시 줄 - ..

출처: https://wit.nts-corp.com/2019/02/14/5522 DOM은 무엇인가? Document Object Model 은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API를 제공한다. 웹페이지는 어떻게 만들어지는가? 웹 브라우저가 원본 HTML의 문서를 읽어들인 후에, 스타일을 입히고 대화형 페이지로 만들어서 viewport에 표시하는 과정을 Critical Rendering Path 라고 한다. 1번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링 할지 결정한다. 그리고 2번째 단계에서 브라우저는 해당 렌더링을 수행한다. 1번째 과정을 거치면 "렌더 트리"가 생성되고..