콘요맘떼 개발일지

HTTP Request Method HTTP Request Method는 클라이언트가 웹 서버에게 request를 날릴 때 그 목적 및 종류 등을 표현한다. GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 이렇게 총 9가지의 종류가 존재한다. 이전에는 GET, POST을 제외한 대부분의 메소드는 실제로 사용되지 않았다. 그러나 Restful API라는 개념이 주목받기 시작하면서 PUT, DELETE, PATCH 등을 포함한 그 외의 메소드들 역시 이전보다 활용도가 높아지게 되었다. Restful API 그렇다면 Restful API가 무엇일까? Restful API는 이름대로 REST 다운 REST API를 말한다. Restful API의 목적..

데이터 속성을 활용하면 자유롭게 HTML element에 추가적인 정보를 저장할 수 있다. HTML에서 사용하기 HTML element에 데이터 정보를 추가해주고 싶다면 data-로 시작하는 속성을 추가해주면 된다. data-로 시작하기만 하면 그 어떤 것도 상관없다. 자 이제 넣은 정보를 활용할 때이다. 물론 화면상으로는 보이지 않으면서 HTML 문서상으로만 무슨 정보를 추가하기 위해 데이터 속성을 활용할 수도 있지만 일반적으로 데이터 속성은 CSS 혹은 Javascript에서 활용하기 위해 등록된다. CSS 정말 마음대로 넣어주기는 했지만 데이터 속성도 엄연한 HTML 속성이다. 따라서 CSS에서도 접근할 수 있다. (1) 속성 선택자에서 활용하기 (2) Property Value에서 활용하기 att..

[참고!] 이벤트 위임에 대해서 공부하기 위해서는 이벤트 버블링과 이벤트 캡쳐링에 대한 이해가 필요하다. 만약 관련된 지식이 없다면 이전 포스트를 먼저 읽고 오길 바란다. 이벤트 위임 (Event Delegation) 이벤트 캡쳐링과 이벤트 버블링을 활용하면 이벤트 위임이라는 강력한 이벤트 핸들링 패턴을 활용할 수 있다. 이벤트 위임은 비슷한 방식으로 작동하는 여러 가지 엘레먼트들이 존재할 때 그들의 공통 조상에 이벤트 핸들러를 부여함으로써 편리하게 이벤트를 핸들링하는 방법이다. 각각의 element에 직접적으로 이벤트 핸들러를 부여하는 것이 더 직관적이고 단순한 방법 같은데 왜 굳이 조상 엘레먼트까지 올라가야할지에 대한 의문이 생길 수 있다. 그래서 예시를 가져와봤다. 위 코드에서 box들은 정상적으로..

이벤트 버블링 (Event Bubbling) 한 아이템에 이벤트가 발생하면 해당 이벤트는 해당 아이템부터 하나씩 그 부모 요소로, 결국은 body element까지 전달된다. 만약 해당 이벤트에 대해서 부모 element 역시 이벤트 핸들러가 존재한다면 하나의 이벤트에 대해서 여러가지 요소들에 대한 이벤트 핸들러가 동작할 수 있다. 이렇게 이벤트가 가장 깊은 곳의 element부터 부모 element로 쭉쭉 거슬러올라가는 방식을 이벤트 버블링이라고 한다. 참고로 모든 이벤트가 버블링되는 것은 아니며 focus 이벤트와 같이 버블링이 적용되지 않는 이벤트들도 존재한다. (물론 거의 모든 이벤트는 버블링이 적용된다.) 위의 예시에서 '아무말'이라는 텍스트를 클릭하면 click이라는 이벤트가 span, div..

실행 컨텍스트에 대한 이해가 없으면 클로저의 개념에 대한 이해가 어려울 수 있다. 만약 실행 컨텍스트에 대한 개념이 잡혀있지 않다면 실행 컨텍스트에 대한 공부를 먼저 진행하는 것을 권한다. 렉시컬 스코프 (Lexical Scope, 어휘적 범위) 자바스크립트는 렉시컬 스코프라는 변수 유효범위를 따른다. 렉시컬 스코프에서는 함수 혹은 변수의 유효범위가 선언된 위치를 기준으로 결정된다. 이와 반대로 호출된 시점을 기준으로 유효범위가 결정되는 방식을 Dynamic Scope라고 부른다. 우리가 자주 사용하는 C, C++, Java, Javascript 등의 언어들은 모두 Lexical Scope 방식을 따르며 Dynamic Scope를 따르는 언어들은 Perl, Bash Shell, APL과 같은 들어보기도 ..

자바스크립트에서 this는 자신을 호출한 객체가 담기는 속성이며 실행 컨텍스트 내부의 this 프로퍼티에 의해 그 값이 결정된다. this의 값이 결정되는 기준은 생각보다 복잡하다. 다음은 대표적인 경우들에 this의 값이 어떻게 적용되는지에 대한 예시들이다. 1) 단독적으로 사용된 this → window 객체 2) 일반 함수 안의 this → window 객체 3) 일반 중첩 함수의 this → window 객체 ※ 만약 this가 window 객체인 경우 this.변수명으로 전역 데이터에 접근할 수 있다. 4) 이벤트 리스터의 this → 이벤트를 발생시킨 객체 (target) 5) 객체의 메소드 안에 위치한 this → 메소드를 호출한 객체 6) 생성자 안의 this → 생성자 함수가 생성하는 객..

실행 컨텍스트 (Execution Context) - 자바스크립트 코드들이 실행되기 위한 환경을 의미한다. 여기서 말하는 자바스크립트는 크게 세 가지가 존재한다. 1) 전역 코드 : 전역 영역에 존재하는 코드 2) 함수 코드 : 함수 내부에 존재하는 코드 3) eval 코드 : eval 함수로 실행되는 코드 그러나 eval 함수는 해커가 악의적으로 이용할 가능성이 있기 때문에 사용이 지양된다. 따라서 실질적으로 사용되는 코드는 전역 코드와 함수 코드라고 보면 된다. - 실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트 두 종류가 있다. - 실행 컨텍스트는 코드를 형상화하고 구분하는 추상적인 개념이지만 자바스크립트 엔진에 의해 물리적 객체 형태로 관리되며 3가지 프로퍼티를 가진다. (1) 변수객체 (Vari..

리액트를 개발해본 사람이라면 누구나 한 번쯤 접했을 화면이다. 리액트는 컴포넌트 내부에서 에러가 발생하면 위와 같이 에러를 화면으로 보여준다. 그러나 저 화면은 개발을 하는 우리들만이 볼 수 있는 화면이다. Production 모드로 들어가면 에러는 보여지지 않고 렌더링에 실패한 컴포넌트가 남긴 쓸쓸한 텅 빈 화면만이 남아있을 것이다. 그에 따라 React16에서는 UI 일부분에 해당하는 자바스크립트 에러가 전체 어플리케이션을 셧다운시키는 것을 막기 위해서 에러 경계라는 새로운 개념을 가져왔다. (React 공식 문서에 적힌 표현) 에러 경계(Error Boundary)는 하위 컴포넌트 트리 안에서 발생하는 에러를 찾아내고 깨진 컴포넌트 트리 대신 fallback UI를 제공해준다. 복잡할 것 없이 에러..

번들링은 여러 파일을 하나로 묶는 것을 말한다. 그냥 파일을 그대로 가져오면 편리함에도 번들링을 실행하는 이유는 단발성으로 리소스를 요청하는 HTTP 통신의 특성상 여러 번 파일을 요청하는 것보다 여러 파일을 한 번에 가져오는 것이 훨씬 효율적이기 때문이다. 이러한 측면에서 번들링은 최대한 빨리 리소스를 가져와서 사용자에게 화면을 제공해야 하는 프론트엔드 직무에서 매우 중요한 개념 중 하나이다. 리액트 어플리케이션들은 Webpack, Rollup, Browserify 등의 번들링 툴을 활용하여 하나의 파일로 통합할 수 있다. 심지어 리액트 어플리케이션을 만들기 위해 많이 사용하는 Create React App 혹은 최근 서버 사이드 렌더링과 함께 주목받고 있는 Next.js 등의 툴을 활용한다면 어플리케..

자바스크립트는 '단일 스레드'기반 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있다. 보다 정확히 표현하자면 자바스크립트 엔진은 '단일 콜 스택'을 활용하고 하나의 메인 스레드를 가진다. 그러나 자바스크립트가 돌아가는 실제 환경(브라우저, Node 등)은 여러 개의 스레드가 사용된다. 하나의 콜 스택을 활용하는 자바스크립트 엔진과 여러 스레드를 활용하는 실제 구동 환경이 서로 연동될 수 있도록 해주는 것이 바로 '이벤트 루프'이다. (이벤트 루프는 앞서 언급한 단일 메인 스레드를 관리해준다.) 자바스크립트는 이벤트 루프를 통해 비동기 방식으로 동시성을 지원한다. 참고로 이벤트 루프는 자바스크립트 엔진에서 지원되는 것이 아니라 브라우저 혹은 NodeJS에 의해 제공된다. (NodeJS는 libuv라..