TIL

node=> path.join vs path.resolve

rem vs em: em은 현재 요소의 폰트 크기를 기준으로 결정line-height: font-size에 비례해서 결정된다font-size:40px line-height: 1.5(60px)이면글자 위 아래로 10px씩의 여백이 생긴다

css-position자식의 부모의 위치를 기준으로 위치하게 하려면 부모 컨테이너를static 아닌 값으로 주기,대표적으로 relative사용z-indexposition:static아닌 거 써야 적용 가능offsetTop / getBoundingClientRect /

console.log(type of null)=>Object가 출력됨,이것은 js를 만들 당시 개발자들의 실수 일어난 일.현재는 이것을 고칠 시 어떤 일이 일어날지 예측불가이기에 안 고치는 것 같다.

클래스 생성

원하는 것: 이곳에 글자 하나하나 입력할 때마다 원하는 결과를 찾아주는 것문제점 :mongoDB는 기본적으로 하나의 단어가 완결된 상태로 검색을 함해결책: 검색한 키워드:mongodb partial text search참고:https://stackoverfl

여러 개의 return 값을 가질 수 있다제너레이터의 반환 값은 generator객체이고 이 객체는 iterable/iterator이다따라서 iterator.next()로 generator객체를 실행하고그 결과값은 {value,done}을 가진 객체를 반환함수 키워드

Destructuring 목적: 객체/배열의 값을 편하게 가져오기 위해 사용 console.log({...a}); a라는 객체의 * key/value*만 가져온다. -> Object {b: 1, c: Object} console.log({...a.c}) a라는 객체에

Virtual DOM(내 돔을 메모리에 저장 후 이전과 비교해서 바뀐 부분만 다시 자동으로 렌더링)SPA(페이지 이동시,웹이 아닌 앱처럼 느껴짐)->UX에 좋다.컴포넌트의 재사용,부품 조립을 하듯이 사용할 수 있다.

혹은

필요성 JS에는 Array.sort()함수가 존재한다.그러나 정렬함수가 항상 좋은 퍼포먼스를 보장하지 않고 내가 가진 데이터의 양이나 상황에 따라 어떤 정렬을 사용하는 것이 좋을지 달라지기에 자주 쓰이는 몇 가지는 알아두려 한다. 버블정렬 배열의 처음부터 시작 인접

전체 배열에서 가장 작은 값을 찾는다배열에서 맨 앞의 값과 이 최솟값의 위치를 바꾼다즉,매 번 시행시마다 가장 작은 원소의 위치가 하나씩 결정된다(버블정렬은 맨 뒤에 가장 큰 원소가 하나씩 결정되던 것과 반대)맨 앞의 값을 제외하고 다시 최솟값을 찾고,이미 결정된 맨

Redux사용 후기 어쩌다 사용하게 되었나? 1.리액트 컴포넌트 간의 데이터를 props로 관리하려 시도 2. 댓글을 생성하려 하는데 이용하는 라는 컴포넌트가 있다 해보자, 댓글은 크게 댓글과 대댓글로 나뉘고 댓글은 대댓글은 에서 다룬다고 할 때 컴포넌트의 pr

CRA없이 리액트의 createElement를 JSX로 바꾸기 위해서npx로 바벨을 실행시켜보았다npx @babel/core @babel/cli @babel/preset-envnode_modules/bin(binary)에는 바이너리 파일만 모여있고 npx를 통해 명령어

Object.entries() 역할: 주어진 객체의 키/값을 각각의 배열로 만든다 return값 ->배열,이 배열의 원소는 주어진 객체의 키/값을 가지고 만든 배열

공통점처음 페이지 로드시, 클라이언트 -> 서버로 요청해서 HTML파일 받아와야차이점MPA페이지 이동시마다(전환요청시마다) 클라이언트->서버의 요청을 통해 받아온 HTML을 reloadSPA페이지 이동시에 서버로의 요청을 필요X페이지 전환은 자체적으로 Routing처리

.css파일 작은 프로젝트서 사용시간편 그러나 속성 클래스 이름 겹칠때 오류 발생중복 방지를 위해 컴포넌트명-클래스 방식 이름이나 css선택자 활용ex ) .App-header/ .App-link (컴포넌트-클래스명)filename.module.csssassnpm i

선언된 순서에 따라 잘 실행되는 경우위에 것을 JS Parser 통한 호이스팅한 결과\*/

요청과 응답:브라우저->서버에 웹페이지(HTML/CSS/JS/이미지 파일) 요청->서버가 응답(HTML/CSS/JS/이미지 파일)Parsing(돔 트리를 만드는 과정): 브라우저의 렌더링 엔진이 HTML/CSS을 HTML/CSS parser를 통해 DOM ,CSSOM

GET/POST는 HTTP의 methodHTTP는 또 뭐지?웹상에서 클라이언트-서버 간 요청/응답을 할 때 정해놓은 프로토콜(일종의 약속)클라이언트는 HTTP 프로토콜로 서버에 요청, 서버는 요청에 맞는 응답을 클라이언트에게 보낸다.이때 HTTP 메소드는(GET/POS

this 함수 호출시 binding되는 객체를 가리키는 변수 this는 함수가 어떻게 호출되었느냐에 따라 this가 바인딩되는 객체가 달라진다(함수 선언시에 this의 바인딩되는 객체가 결정되는 게 아니다). 이는 함수 선언시 상위 스코프가 결정되는 Lexical

Lexical Scope란? 정의 함수의 상위 scope가 함수 실행이 아닌, 함수 정의할 때를 기준으로 설정되는 것 변수를 함수 안에서 새로 선언할때 `const foo = () => { let string='100000'; foo2(); }` 변수를

브라우저는 특정 화면 요소에서 이벤트가 발생시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.(이벤트 버블링이 기본이므로) 이 때 이벤트 전파방식은 버블링과 캡쳐링 2가지로 나눌 수 있다. 버블링 화면의 하위요소->상위요소로(최상위요소 body까지 전

자바스크립트는 팔이 하나인 로보트 이 친구는 싱글스레드 방식으로 일을 처리한다.(싱글스레드=== Call Stack 1개 === 한 번에 하나씩만 처리가능) 마치 팔이 하나 있는 로보트같기에 비동기 방식으로 일을 처리한다. 즉, 오래 걸리는 일은 붙잡고 끝날때까지

변수 타입 정의시 Number,String...은 객체를 의미하므로 number,string처럼 소문자로 시작해야

강제 형변환(남이 만들어놓은 타입을 내가 원하는 타입으로 바꾸고 싶을 때) const num: number = 10; 방법1-> 변수 선언 후 형변환시 () 안 붙임 const newStr = num as unknown as string; => type:string

App.tsx Greeting.tsx

배열을 반씩 쪼개야쪼개진 배열의 앞의 것부터 길이가 1이 될때까지 쪼갬(길이가 1인 배열이 되어야만 비로소 합치는 행동을 시작)길이가 1인 배열 2개를 비교해서 정렬,길이가 1인 모든 배열들에 대해 진행정렬된 원소 2개짜리 배열을 합침(이렇게 합쳐진 배열들을 크기순대로

Quick sort를 보던 중, 배열의 원소를 바꿔주는 걸 편하게 하는 코드를 보고 신기해서 써본다.

CSS는 같은 내용을 반복해 입력해야 하는 작업이 많다.그렇다면 같은 값을 변수로 저장해 여러 번 사용하는 게 좋고, CSS도 :root {\--primaryColor:value}처럼 변수 선언을 제공하지만, LESS는 이에 비해서 내장 함수나 mixin그리고 nest

인자를 전달하는 방식에 따른 함수 호출 방법을 의미 크게 Call By Value와 Call By Reference로 나뉜다. 자바스크립트는 Call By Value로 함수를 호출 대신, 호출 방식에 따라서 인자가 평가되는 과정이 달라진다.즉, 함수의 매개변수가 원시타

currentTarget => 이벤트가 등록되어 있는 요소를 가리킴,target => 이벤트가 실제 일어나는 요소를 가리킴

부모컴포넌트 Counter.js / 자식: Title.js부모컴포넌트<Counter/>의 state 변화시, 자식 컴포넌트<Title />도 렌더링된다. 그러나 <Title title={Clicked ${count2-10} times} />과 관련있는

별 건 아니지만,리액트가 배열을 요소로 반환할 수 있다는 걸 처음 알게 되었다.대신 key값은 꼭 주기 ``를 쓰면 그 안에 있는 요소의 순서가 키의 역할을 하기에 key값을 따로 줄 필요 X

다음을 지켜야 리액트가 각 Hook의 상태를 제대로 기억하고 사용규칙 1: 하나의 컴포넌트에서 훅을 사용하는 순서는 항상 같아야 한다,if문 안에서 훅 쓰지 말것 => 실행 안 될수도 있기에for문 안에서 훅 쓰지 말것 => for문 조건 따라 실행 횟수 달라지고 실행

브라우저의 돔을 변경하는 것은 많은 자원이 필요한 일 따라서 리액트는 메모리에 가상돔을 올려놓고 이전과 비교하여 변경된 부분만 브라우저의 돔에 반영한다. 즉, 변경한 요소의 이전 DOM을 삭제하고 새로운 상태의 DOM을 생성하여 붙인다. 컴포넌트 삭제(unmount)

React Context는 전역 데이터를 담고 있는 하나의 저장 공간

다음과 같은 컴포넌트를 통해 컴포넌트 작성시 권장되는 것들을 알아보려 합니다.이 코드를 하나씩 뜯어보자면

PropTypes 컴포넌트에서 전달받은 props의 타입을 확인가능하게 함 컴포넌트 파악에 도움이 된다 설치 리액트에 내장 되어 있기에 리액트만 설치되어 있다면 설치 필요X 사용 import PropTypes from "prop-types"; Greeting.js

useState의 대체 함수로, 하나의 컴포넌트에서 여러 개의 state를 다룰 때 사용(state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환initalState에 넣어준 값 ===

실행 결과다음과 같은 화면이 출력

Intersection Observer APIreact hooks (useState,useEffect,useRef)스크롤 이벤트 발생시마다 eventListener를 발생시키는 것은 javascript의 main thread에 계속 성능상 영향을 줌,따라서 특정 요소가

함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 단, 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반

1.REST api를 대체하는 새로운 api표준(facebook이 개발/유지)API 클라이언트가 서버로부터 데이터 받아오는 방법을 정의GraphQL의 핵심은 클라이언트가 필요한 데이터를 정확히 가져올 수 있다는 것,서버에서는 단 하나의 api만 노출2.API에 대한 쿼

쿼리 - 클라이언트가 무슨 데이터가 필요한지 알려주는 객체와 비슷한 형식의 정보클라이언트는 단 하나의 엔드포인트를 통해 데이터를 가져오고 이 구조는 클라이언트가 원하는 유연한 구조를 취할 수 있다.위의 쿼리문은 데이터베이스에 현재 저장된 모든 도시의 정보(이름/나이)을

GraphQL 클라이언트 라이브러리 GraphQL은 프론트엔드 개발자에게 특히 편리합니다.왜냐하면 REST API를 사용하면서 겪을 수 있는 Under/Overfetch를 비롯한 많은 불편함과 단점들을 해소시켜주기 때문입니다. 복잡성은 막중한 연산 작업을 모두 감당할

ExchangeRates component within your App component from the previous example, you'll first see a loading indicator on the page, followed by data when i

HTML5에서 등장localStoragesessionStorageIE8+이상의 모든 브라우저에서 지원기존의 쿠키보다 훨씬 안전하다 / 개발자 도구의 application에서 수동으로 삭제 하거나 브라우저 캐시 삭제를 하지 않는 한, 인터넷 다시 켜도 남아있다오리진(or

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments

클라이언트 - 서버 간 통신 규칙을 Http라 할 수 있다.HTTP의 특징은 2가지로 볼 수 있는데 다음과 같다.1\. Stateless서버는 클라이언트의 상태를 기억하고 있을 필요가 없다.데이터를 주고 받았어도, 그 다음 통신에서는 이전 데이터나 상태를 기억할 필요가

js에서 typeof arr === typeof object그렇다면 object와 array의 타입 구분을 어떻게 할 것인가?