공부하자

Your local changes to the following files would be overwritten by merge.. 위 오류는 의외로 자주 만나는 오류인데, 알고리즘 스터디에서 한 브랜치에서 여러 사람이 코드를 올리다보니 충돌이 발생한 것 같다. 해결방법에는 여러가지가 있는 것 같지만 한 블로그를 통해 아래 명령어를 입력하지 pull이 가능해졌다. git stash && git pull origin main && git stash pop 간단하게 살펴보면 git stash는 현재 디렉토리의 파일을 임시로 백업하고 깨끗한 상태로 돌린다. 해당 명령어를 통해 현재 Staging 영역에 있는 파일의 변경사항을 스택에 넣어둔다. git pull origin main으로 변경사항을 적용하고, gi..

this란? 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 단위구조이다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수 호출 방식에 따..

JWT에 대해 알아보기 전 먼저 토큰에 대해서 알아보자. Token 토큰은 보통 서버가 클라이언트 인증을 확인하는 방식 중 하나이다. 토큰 기반 인증 시스템은 클라이언트가 서버에 접속을 하면 서버에서 해당 클라이언트에 인증되었다는 의미로 '토큰'을 부여한다. 이 토큰은 유일하며 토큰을 발급받은 클라이언트는 또다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 심어서 보낸다. 그러면 서버에서는 클라이언트로부터 받은 토큰을 서버에서 제공한 토큰과의 일치 여부를 체크하여 인증 과정을 처리하게 된다. 토큰은 앱과 서버가 통신 및 인증할 때 많이 사용된다. 웹에는 쿠키와 세션이 있지만 앱에는 없기 때문이다. JWT(JSON Web Token) JWT는 인증에 필요한 정보들을 암호화시킨 JSON토큰을 말한다. 그리고 ..

DOM이란? Document Object Model의 약자이고, 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 즉, HTML과 스크립팅 언어(javascript)를 서로 이어주는 역할을 한다. DOM을 문서 객체 모델이라고 하는데 여기서 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다. [ Virtual DOM을 사용하는 이유 ] 큰 규모의 웹 어플리케이션은 수많은 데이터가 로딩된다. 데이터가 로딩될때마다 수많은 요소들이 DOM에 직접 접근하여 변화를 주다 보면 로딩 속도가 느려질 가능성이 크다. 이는 DOM 자체가 느려지는 걸 의미하는 게 아니다. ..

리액트를 사용해 프로젝트를 하다보면 라이프 사이클에 대해 알고 적절히 활용을 해야합니다. 그래서 이 글에서는 라이프 사이클, 라이프 사이클 메서드, 그리고 많이 사용되는 Hook에 대해 정리를 해보았습니다. 라이프 사이클이란 무엇인가? 모든 리액트 컴포넌트는 라이프 사이클이 존재합니다. 컴포넌트는 생성(mounting) => 업데이트(updating) => 제거(unmounting)의 생명주기를 갖는데, 이 생명주기를 활용해서 필요한 작업들을 적절한 시기에 지정해줘야 불필요한 업데이트를 방지할 수 있습니다. [ React 17이상 버전 생명주기 ] 출처 : http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Metho..

클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 스칼라 등)에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical environment within which that function was declared. (클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.) 클로저를 자세히 알아보기 전 위 정의에서 가장 먼저 이해해야 할 핵심 키워드인 "함수가 선언된 렉시컬 환경"에 대해서 먼저 알아보자. const x = 1; function outerFunc() { const x = 10; functi..

http 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. HTTP..

계층적 구조에 포함되어 있는 HTML 요소에 이벤트가 발생할 경우 연쇄적 반응이 일어난다. 이벤트가 전파되는데 전파방향에 따라 버블링과 캡처링으로 구분할 수 있다. 주의할 것은 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다는 것이다. 를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계). 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다. 이벤트 버블링 자식요소에서 발생한 이벤트가 부모 요소까지 전파하는 것. FORM DIV P 위의 코드를 실행하게 되면 만약 p를 누르면 p -> div -> form 순서대로 alert이 뜨게된다. di..