blog

JSX(JavaScript XML)는 자바스크립트에 XML 파일이 더해진 파일이다. 그냥 자바스크립트에서 html까지 같이 쓸 수 있는 확장된 문법이라고 생각하면 된다.JSX를 빌드하게 되면 바벨이 자바스크립트 코드로 변경을 해준다.JSX에서 작성되는 HTML코드들을

형상 관리 도구 중 하나형상 관리란 소스코드를 버전으로 나누어서 관리는 하게 해주는 도구이다.git은 간단하게 말하자면 작업하던 파일들은 v1 , v1.1 , v1.2와 같이 버전으로 저장하는 방법이다.소스코드를 버전별로 관리를 하여 저장만 해둔다면 언제든지 불러올 수

내장된 표현식을 하용하는 문자열 리터럴표현식/문자열 삽입, 여러 줄 문자열 등의 기능을 제공한다.런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.따옴표가 아닌 백틱(\`)을 사용한다.플레이스홀더 ${}를 이용해서 표현식을 넣을 수 있다.템플릿 리터럴에서 발전된

캡처링 단계 => 타깃 단계 => 버블링 단계자식요소에서 부모요소로 이벤트를 전파하는 방법, 기본적으로 자바스크립트에서 이벤트 버블링은 발생을 한다.focus 이벤트는 버블링이 발생하지 않는다.버튼1에 이벤트를 넣어놓고 자식요소인 버튼2과 버튼3를 클릭하면 이벤트 버블

RestAPI(Representational State Transfer API)를 restful 한 api sql 쿼리 언어를 사용한다.엔드포인트가 1개 이다.백엔드에서 쿼리언어를 작성한다.restful한 방식은 정해진 규칙이 아니라 개발자들 사이에서 암묵적으로 정해진

예외 처리 방식에 대한 설명예외는 개발자가 인식하지 못하는 것과 개발자가 어느정도는 인식을 하고 있는 2가지의 예외가 있다. 예외가 발생하지 않으면 계속 실행을 할 수 있고 try 내부에서 에러가 발생한다면 catch로 예외처리를 떠넘긴다.try에서 발생한 예외를 받아

페이지들을 연결하고 페이지의 히스토리를 기록하면서 페이지들끼리 이동을 하게 해준다.url이 고정되어 입력하면 똑같은 페이지를 보이게 한다.게시판, 상품정보 등 일일이 모든 페이지를 만들 수 없을 때 동적 라우터를 이용한다.example.product/1 , exampl

배열이나 객체의 속성을 해체해서 개별 변수에 담을 수 있게하는 표현식

둘중에 1개를 선택할 때 편하다. 짝수 홀수 같은 경우data ? data.board.user : "";{ data?fetchBoard.id && 데이터가있으면 보이고 없으면 안보임 }{ false && 절대 안보임 }{ true && 무조건 보임 }{ da

기능을 담당하는 부분(컨테이너)과 화면(JSX)을 보여주는 (프레젠터)부분을 분리하여 파일을 나누는 방법개인적으로 추천하지 않는다. 코드가 분리되어서 오히려 알아보기가 어려워질수도 있다.Container쪽에 Presenter 컴포넌트를 import해서 사용한다.기능과

\*필터는 배열의 요소에서 조건을 만족하는 요소들을 배열로 반환해주는 메소드이다.\*조건이 참인 요소들만 배열로 구성되어 반환된다.\*원본 배열이 손상되지는 않는다.\*배열의 요소들을 1개씩 뽑아서 작업을 처리하고 원하는 요소로 반환을 해서 새로운 배열을 만드는 방법이

자바스크립트가 처음 만들어질때 의도가 개발자가 아닌 일반인들도 쉽게 접근하기 위해서 탄생한 언어이다. 그래서 다른 언어에 존재하는 int, float, string 등 과 같은 엄격한 자료형 타입을 가지지 않는 특성이 있다. 이러한 문제가 현재에는 오히려 발목을 잡고

state란 react 객체로 컴포넌트 내에서 정보나 데이터를 보관하는 용도로 사용이 됩니다.react에서 state가 변경이 되면 리렌더링을 요청하게 되고 virtual DOM에서 변경이 된 부분에서 모든 자식 부분을 렌더링 하게 됩니다.setState()는 stat

자식 컴포넌트에서 state값을 변경시켜 부모 컴포넌트를 렌더링 시킬 떄 사용하는 방법이다.자식 컴포넌트에서 부모 컴포넌트를 리렌더링 시킬 수 있지만 부모 컴포넌트에 붙어있는 다른 자식 컴포넌트까지 리렌더링을 발생시킬 수 있으므로 주의해야 한다.props로 부모의 st

리액트 훅이란 초기에 리액트는 클래스 컴포넌트 형태로 작동을 하게 되었고 클래스 컴포넌트에서 사용되는 함수들을 함수형 컴포넌트에서 사용을 할 수 있게 해주는 함수이다.\[] 의존성 배열(dependency array)에 따라 다르다.전부 실행되고서 실행이된다.리액트를

새로고침 하지 않고 url을 불러올 수 있는 nextjs의 기능pathname : 전체 경로query : 쿼리 스트링router.push(url, as, options)url : 주소as : 브라우저 주소창에 표시될 주소option : shallowshallow 새로고

객체의 key값을 받아서 사용을 할 수 있다,Object.values(객체)Object.keys(객체)키와 값 배열형태로 뱐환해준다.객체를 병합해서 반환하는 메소드, 키의 값이 일치하면 덮어쓰기를 한 후에 객체로 반환을 한다.Object.assign({},obj1,ob

전역 상태 관리를 사용하면 보안에 안좋다는 이야기가 있다.리액트에서는 지역 상태로 관리하는 것을 권장한다.서버에서 받아오는 데이터와 UI를 담당하는 전역 상태는 분리해서 구분해둔다.컴포넌트를 감싼 트리 전체에 props를 넘겨주지 않고서 전역적으로 상태를 관리할 수 있

브라우저는 비연결성, 비상태성이여서 데이터를 기억하지를 못하는 http 특성을 가지고 있습니다. 그래서 매번 서버에 저장하고 서버에서 클라이언트에게 맞는 정보를 보내주어야 하는데 그렇다면 매번 인증의 과정을 거쳐서 어떤 클라이언트인지 알아야 하는 번거로움이 존재합니다.

인증(회원이 아닌 사람)되지 않은 사람이나 인가(회원이거나 아니거나 접근이 허용되지 않는 경우)되지 않는 클라이언트가 사이트에 접속을 하게되면 다른 페이지로 이동을 하게 만드는 방법단순하게 말하면 A사용자가 B의 마이페이지를 들어가려고 한다면 당연히 막아야한다. 그래서

독립 가능한 기능의 단위유지보수가 쉬워진다. 중복되는 코드를 줄일 수 있다.모듈이라는 파일 내부에서 변수나 함수 이름을 사용하게 되면서 전역적인 스코프에서 이름 공간을 침범하지 않게 된다.재사용성이 좋다.모듈을 식별하는 것모듈을 분리하는 것모듈을 외부에 공개하는 것na

자바스크립트는 인터프리터 언어이므로 한줄씩 해석이 되는데 현재 실행이 되고있는 환경(실행 컨텍스트)를 가리킵니다.이 떄 this가 가리키는 지점이 실행컨텍스트 입니다.this는 브라우저에서는 window객체를 node에서는 global객체를 java 클래스 내부에서는

여러곳에서 반복해서 사용하는 컴포넌트를 정의하고 실행해서 1개의 컴포넌트에서 관리할 수 있다. 중간에 가로채는 역할을 할 수 있어서 필터나 권한 분기 처리등의 용도로 사용이 가능하다.클로저를 반환해서 계속 사용을 할 수 있는 것이다.단, 너무 depth를 깊게 만든다면

인자를 여러개를 받아서 그 중 일부인자를 고정해서 사용하는 방법아래와 같이 1개의 값이 고정이 거의 변화없이 고정이되면서 사용이되고 나머지 인자값들이 자주 변한다면 react currying과 같은 방법을 고려하는 것이 좋다.예시 참고

배열 안에 배열로 감싸진 것을 제거하는 과정이다.중첩된 배열을 해제하는 과정배열 안에 배열로 감싸는 과정이다.flatten의 반대의 과정배열안에 배열을 해제하는 방법 , 디폴트 값은 1이다. 따로 설정이 가능하다고 한다.평탄화 작업과 배열로 반환한다.

정보를 담고있는 데이터이다.토큰은 대표적으로 refreshToken이나 accessToken이 있다.토큰은 암호화된 정보를 가지고 인증이나 인가를 처리하는 역할을 담당한다.대표적으로 JWT(JSON WEB TOKEN)이 존재한다.JWT는 그냥 JSON 형식으로 만들어진

대표적인 관계형 데이터베이스 MySQL, OracleDB, Mariadb,MSSQL, PostgreSQL데이터를 테이블 구조를 이용하여 보관하고 데이터를 저장,수정,삭제,검색 등을 관리한다.ORM(Object Relation Mapping)으로 hibernate(자바

객체지향 프로그래밍으로 클래스와 객체 , 인스턴스를 이용한 프로그래밍 방식을 말한다. OOP는 자바,c++에서 사용하는 방식으로 자바스크립트 개발자에게는 친숙하지 않은 방식이다.OOP는 과거부터 현재까지도 사용하는 방식으로 OOP의 4대속성(은닉성, 상속, 다형성, 추

선언 후에 아무런 값이 할당되지 않은 경우원시 타입var로 선언한 타입은 선언시 undefined로 초기화가 된다.선언 후에 값이 들어있지 않는 경우리터럴 값typeof undefined // undefinedtypeof null // object자바스크립트는 대문자를

📌 설명산술연산자 : + - / % \*\*"10" + "5" // 10510 "55" // 55010 + "55" // 1055true+true; // 2비교연산자 : > < >= <= == === != !==대입연산자 : =증감연산자 : ++변수 변

구글에서 C++로 만든 자바스크립트, 웹 어셈블리 엔진이고 오픈 소스이다. 현재는 구글 크롬과 노드 js에서 사용을 하고 있다고 한다.인터프리터 언어인 자바스크립트의 속도를 개선하기 컴파일을 최적화 해주는 엔진이다.컴파일 언어는 코드를 기계어로 변환하여 사용을 하지만

동기 함수는 Execution Context를 생성해서 Stack에 Push한다.Execution Context를 생성Stack에 함수가 모두 사용되면 Execution Context를 Pop시킨다. 이때를 Stack이 완전히 비어있다고 판단한다.setTimeout()

상태코드는 3자리의 숫자로 구성이 되어있다성공적으로 통신이 되었을 때100 | 요청을 기다리고 있다101 | 서버에 프로토콜 전환을 요청하는 중\\, 서버의 승인을 대기하는 중102 | 처리성공적으로 통신이되었고 받았다200 | 서버에서 요청을 성공적으로 처리하였을 \

얕은복사란 메모리에서 데이터가 위치한 주소를 참조하는 방식이다.처음에 코딩을 배울 때 x = y 와 같이하게되면 x라는 변수에 y값이 들어가는 것을 해보았을 것입니다. 이때 복사되는 방식을 얕은복사라고 합니다.x에 y값을 넣어주었지만 x의 값을 변경하게 되면 y의 값도

간략히 말하자면 사용자가 정의한 타입정의 방식이다. 사용자가 정의한 타입이여서 여러가지 타입에 대해 사용을 할 수 있게 해준다.타입변환을 잘못하게 되면 자동형변환이 발생을 하는데 제너릭을 타입을 지정해주면 잘못되서 자동형변환이 일어나는 것을 방지할 수 있다.모든 타입에

react-router-dom을 이용한 방식은 nextjs에서 사용하는 것과 같이 페이지를 기준으로 이동되는 방식이 아니고 폴더의 경로를 지정해서 컴포넌트를 실행시켜주는 방식이다. 또한 동적 라우팅을 하기 위해서 /\* 과 같이 경로를 잡아주어서 실행을 하게 된다.re

virtual DOM이란 실제 DOM을 가상화한 객체이다.virtual DOM이 없다면 상태값이 변경되고 변경이 되었으니 브라우저는 html DOM을 새로 구성하고 만들기 시작할 것이다. 작은 내용을 수정하여도 전부를 다시 만들어야 되므로 매우 비효율적이다.virtua

우리가 인터넷에 입력하는 도메인 주소는 사실 127.0.0.1과 같은 숫자로 구성된 ip주소 입니다. 도메인 주소를 ip주소로 변환하기 위해서 dns서버(구글은8.8.8.8)과 같은 서버에 요청을 보내고 입력한 도메인 주소를 ip주소로 변경해서 받을 수 있습니다.도메인

자바스크립트 엔진이 코드를 실행하기 위해서 실행에 필요한 정보를 알고 있을 필요가 있다. 변수의 유효 범위나 this같은 정보를 알고 있어야 한다. 이러한 정보를 보관하는 곳이 실행컨텍스트이다.실행컨텍스트는 논리적 스택 구조를 가지므로 스택방식으로 작동이 된다. 선입후

원시 자료형은 모두 하나의 데이터 타입만을 가지고 있다.stringnumberbigintbooleanundefinedsymbol(null)실제 데이터가 있는 공간이 아닌 heap공간에 있는 주소를 참조하는 것이다. 배열객체함수

대상 문자열이 원본 문자열의 시작이거나 끝에 존재하는지 확인해서 boolean값을 반환하는 메소드문자열 중간에 변수나 함수 호출과 같은 것들을 추가할 때 ""와 같은 문자가 아닌 \`${변수}\`ES6 화살표 함수 for(let 객체 of 배열) {}for(let i

지속적 통합(Continuous integration, CI)과 지속적 제공(Continuous delivery, CD), 줄여서 CI/CD는 애플리케이션 개발팀이 더 자주, 안정적으로 코드 변경을 제공하기 위해 사용하는 문화와 운영 원칙, 일련의 작업 방식으로 구성된

도커는 컨테이너 기반의 오픈소스 가상화 플랫폼이다.다양한 이유로 계속 바뀌는 서버 환경과 개발 환경 문제를 해결하기 위해 등장했다.툴 업데이트, 회사의 툴 사용 변경, 회사의 언어 정책 변경 등기존에 서버와 개발 환경이 변경되면 컴퓨터 셋팅(개발 환경) 등을 다시하거나

HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트

배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초깃값);초깃값을 적어야 누적값이 초기화되고 아니라면 배열0의 값이 초깃값이 된다.초깃값은 숫자만이 아닌 빈 배열 같은 것도 가능하다reduce와 같지만 인덱싱 순서가 반대이다

이전에 입력을 해서 나온 결과값을 보관하여 같은 입력값이 들어왔을 때 계산하지 않고 사용하는 방법usecallback이나 usememo, memo와 같은 리액트에서 기능이 이와 같다.알고리즘에서 피보나치 문제와 같이 이전의 값을 기억해서 재사용가능한 동적계획법과 같은

낙관적인 UI라는 뜻으로 데이터를 서버에 보내지 않고도 어떤 결과인지 알 수 있는 경우에 사용한다.좋아요 같이 데이터가 전송이 제대로 되지않아도 크게 문제가 발생하지 않는 경우에 사용을 한다.데이터를 전송하지 못하는 에러가 발생하는 문제에 대한 로직도 작성을 해야한다고

받아올때 데이터가 큰 경우 필요할 때 맞춰서 데이터를 받아오는 방법보여줄 데이터가 많을 때 미리 데이터를 받아와서 사용자가 필요할 때 데이터를 뿌려주는 방법

callback은 callback내에서만 코드를 처리해야하고 외부로 반환을 할 수가 없다.callback은 본인 함수 내에서 작업을 해야하므로 콜백지옥이라고 불리는 상황이 발생할 수 있다.과거에는 await와 같은 방식이 없었으므로 동기적으로 작업을 처리하기 위해서 매

다음은 구독 할 때 값 1 , 2 , 3 을 즉시 (동기식으로) 푸시 하고 구독 호출 이후 1 초 후에 값 4 를 푸시 한 다음 완료되는 Observable입니다Pull and Push 는 데이터 생산자 가 데이터 소비자 와 통신 하는 방법을 설명하는 서로 다른 두 가

인터넷 주소를 언급할때 흔히 도메인(Domain) 또는 도메인 이름DNS(Domain Name System) 란 도메인 이름(ex. google.com)을 IP 주소로 바꿔주는 역할홈페이지고 사이트여서 데이터를 물리적으로 저장할 컴퓨터가 필요함. 이런 컴퓨터를 호스팅

SPA vs MPASPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다.MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.MPA