TIL

불리언 값을 넣지 않아도 불리언값으로 인정하는데 자바스크립트는 자신만의 기준이 있다.{} , Infinity, 문자열, 숫자, \[],null, undefined, 0, -0, NaN, ""(빈문자열)getName변수에 파라미터 person을 받고 Falsy한 값인지

a 변수가 양수인지 아닌지 판별하는 조건식을 if문으로 작성했을 경우, 간단한 작동이지만 코드의 길이가 길다.삼항연산자를 이용하면 한줄로 조건식을 작성할 수 있다.중첩 삼항 연산자는 가독성이 떨어진다.따라서 중첩으로 사용할때에는 if조건문을 이용해 가독성을 높여주는 것

논리 연산자의 특성(오른쪽에서 왼쪽으로 흐르면서 계산하는)을 이용한 문법이다.

입력한 파라미터가 한식인지 아닌지 구별하는 프로그램을 조건식을 이용해 만들어보자여기서 조건식이 너무 길고, 연산자를 중복으로 사용하고 있다.이 프로그램을 배열에 담고 includes메서드를 이용해 작동하도록 수정한다.여러가지 조건을 가지고 있는다면 if문을 여러개 쓸

배열, 객체에서 원하는 값을 쉽고 빠르게 구할 수 있는 방법따라서 변수명이 키값으로 강제되는 경우가 있다.즉 비구조화 할당할때 :을 이용해 다른 변수명을 지정해 주면 된다.

배열과 객체를 한줄로 펼치는 방법중복된 프로퍼티를 사용하게 되는 경우이다.이러한 경우에는 spread연산자를 이용할 수 있다.배열의 원소를 순서대로 펼칠 수 있다.

<자바스크립트의 싱글 스레드(Thread) 작업 수행방식>으로 진행된다.블로킹 방식 : 스레드가 작업하고 있을때 다른 작업을 동시에 할 수 없는 방식자바스크립트는 코드가 작성된 순서대로 작업을 처리함이전 작업이 진행중일 때는 다음 작업을 수행하지 않고 기다림먼저

연속되는 비동기 함수를 처리할때, 비동기 처리의 결과 값을 사용하기 위해서코드가 깊어지는 현상자바스크립트의 비동기를 도와주는 객체비동기 처리의 결과값을 핸들링 하는 코드를 비동기 함수로부터 분리할 수있다.Promise객체를 사용하면 비동기 처리의 콜백함수를 줄지어 사용

async 키워드는 함수에 붙여 Promise를 반환하는 기능을 가진다.비동기를 다루는 기능이자, promise를 더 쉽게 쓸수 있다.async를 함수 앞에 붙여주면, 자동적으로 함수는 Promise를 리턴하게 되는 함수가 되어 비동기 처리 함수가 된다.그렇다면, as

client와 server간에 상호작용을 하는 것으로 데이터 요청(Request)와 요청 데이터를 전달(Response)의 과정을 말한다.client와 server가 대화를 하는 방법즉, 다른 프로그램에게 말을 거는 것과 비유할 수 있다.API 호출은 데이터를 반환받기

자바스크립트를 브라우저가 아닌 어느 곳에서 실행 할 수 있게 해준다.자바스크립트 실행환경Javascript's Runtime 이라고 한다.https://nodejs.org/ko/따라서, Node.js를 이용하면 브라우저 없이 자바스크립트는 컴퓨터에서 실행 할

중복 코드로 인해서 중복코드의 변경상항에 의해서 중복코드가 포함된 페이지를 하나 하나 수정해야하는 상황한 개의 문제가 수많은 파일을 수정해야 한다.즉, 유지보수에 큰 문제가 된다.중복될 것 같은 부분은 별도의 파일로 제작하거나, 모듈로 만들어 컴포넌트를 만들어 코드를

npx create-react-app 파일명src파일 내에 js파일을 만든다.파일내 함수내에 원하는 것을 만들어 변수에 저장한다.파일을 밖으로 내보내려면 export default 함수명내보낸 컴포넌트를 넣고 싶은 파일에 불러올려면 import 이름 from 경로MyH

css파일을 export를 따로 하지 않는다.class, id명은 html파일에 적용하듯이 사용할 수 있다.App()함수의 return 값의 html구조안에 class와 id값을 지정해 주룻 있다.html에서의 class는 JSX문법에서는 className이므로 주의A

계속해서 변화하는 특정 상태상태에 따라 각각 다른 동작을 함State를 만들기 위해서 State가 필요한 컴포넌트 파일에 React를 import해야 한다.useState메서드는 배열을 반환하고, count와 setCount를 반환한다.count는 상태의 값으로 사용된

\+input, textarea, select, button으로 이루어진 간단한 입력 장치import {useState} from "react"; 코드 작성해 useState를 쓸 수 있도록 react를 연결시켜준다.각 입력html에 각 state를 이용해 입력갑, 초

버튼을 클릭했을 때, 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기DOM요소를 선택 조작을 도와주는 기능을 가지고 있다.react를 import할때, useRef를 추가하여 import한다.반환값을 상수에 담아 사용한다.이때 상수에는 React

더미 리스트를 이용해 데이터를 받고 데이터를 화면에 출력하도록 하도록 한다.js파일 DiaryList 컴포넌트 만들기배열에 저장된 일기 리스트를 화면에 나타내는 컴포넌트props로 들어온 diaryList는 App.js에 있는 dummyList의 배열의 데이터들이 들어

async객체를 이용해 promise를 반환하는 함수를 만든다.await를 이용해 API를 호출하는데, fetch와 then을 이용해 API데이터가 불러 와 질때까지 다른 함수들이 진행되지 못하도록 한다.현재 불러온 API데이터는 50개의 객체 요소를 가진 배열이다.너

크롬의 확장 도구

이미 계산 해본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해 두었던 데이터를 반환 시키게 하는 방법일기의 감정점수의 통계치를 구하는 함수를 통해 Memoiation기법을 사용할 것이다.getDiaryAnalysis() 함수는 각 계산

App.js가 초기 렌더링 되면서 DiaryEditor의 state가 변경되지 않았음에도 렌더링이 일어나는 현상이 있다.또한, 일기 List가 삭제 될때에도 DiaryEditor는 변화하지 않았음에도 리렌더가 된다.불필요한 컴포넌트의 런데링을 최적화할 필요가 있다.본이

React Router library 설치해야 React에서 Router기능을 사용할 수 있다.React-Router 라이브러리 공식 문서 의 설치 방법설치 후, 완료 된 것을 확인하는 방법 \-> package.json에 "react-router-dom"로 설치 유무

REACT에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리Path Variable(useParms) Query String(useSearchParams)Page Moving(useNavigate)use 키워드가를 앞에 붙여 사용하게 되는데 React의