ivorycode

일전에도 언급했지만 내가 JavaScript를 처음 공부할 때, 가장 어려워했고 이해하기 힘들어했던 개념 중 하나가 바로 이 실행 컨텍스트(Execution Context)였다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 오늘은 내가 미루고 미뤘던 Closure(이하 클로저)에 대해 정리해보려고 한다.(꽤 오랫동안 미뤄왔다... 그만큼 바빴다!!) Closure의 개념 외부 함수의 변수에 접근 가능한 내부 함수 클로저는 한 마디로 쉽게 정의하면 외부 함수의 변수에 접근 가능한 내부 함수이다. 예시 코드와 함께 좀 더 구체적으로 정리해보겠다. example code 1 // example 1 const o..

Redux란? A ➡️ B ➡️ C ➡️ D ➡️ E의 순서로 연결되는 컴포넌트들이 있다고 생각해보자. 만약 A에서 E로 접근하여 state값을 사용하려 한다면, A부터 E로 접근했다가 다시 E에서 A로 차례대로 돌아와야 하는 굉장히 비효율적인 패턴을 반복하게 된다. 이런 상황에서 Redux는 상태 관리 라이브러리로 복잡한 컴포넌트 구조속에서 간편하게 전역에서 state를 쉽게 공유할 수 있게 해준다. 키워드부터 정리하고 가자 액션(Action) state에 어떤 변경이 필요할 때, 액션이라는 객체를 발생시킨다. 단어 뜻 그대로 어떤 동작에 대해 선언된 객체라고 생각하면 된다. 액션은 반드시 type을 가지며, 그 외의 값들은 자유롭게 넣어줄 수 있다. 아래의 코드 예시를 참고해보자!! // action..

이 글은 'Next.js를 사용하는 이유'에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 그렇다고 React에서 SSR이 불가능하다고 묻는다면, 대답은 'React에서도 구현 가능하다'이다. 하지만, React로 개발환경을 구현하는 것은 굉장히 복잡한 일이었다.(React와 Next.js의 차이를 경험해보기 위해 사전에 예제 코드를 적용하며 경험해 보았다...) 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js 되겠다. 아래의 글에..

이 글은 JavaScript의 this에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 내가 JavaScript를 처음 공부할 때, 가장 어려워했고 이해하기 힘들어했던 개념 중 하나다. 여담으로 정말 이 개념이 어려워서 부트캠프 진행하는 내내 구시렁댔던 기억이 난다. 그래서 오늘은 this에 대해 깊이 있는 공부를 해보려고 한다. this 사전적 의미와 비슷한 JavaScript의 this this는 사전적 의미로 '이것'이라는 뜻을 가졌는데, 지금부터 알아볼 this는 사전적 의미와 비슷한 기능을 가졌다. JavaScript의 this는 함수 내에서 호출 맥락(Context)을 의미하고 있다. 조금 말이 어려운데 쉽게 ..

이 글은 Rest API 와 GraphQL에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! REST API(RESTful API)와 GraphQL를 알아보기 전에 API에 대해 간략히 짚고 넘어가자!! API(Application Programming Interface) 언제나 그랬듯 알기쉽게 예시를 들어보겠다. 우리가 식당에 가면 홀에서 서빙하는 직원이 메뉴판을 가져다 준다. 그 메뉴판을 통해 음식을 정하여 점원을 통해 주문을 하게 되면, 점원은 주방 요리사에게 주문내용을 전달하게 된다. 주문을 받은 요리사는 그 즉시 요리를 시작할 것이고, 요리가 완성되면 다시 점원을 통해 요리를 전달받고 비로소 먹을 수 있게 된다. ..

이 글은 JavaScript의 Callback과 Promise에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 앞선 포스팅에 이어 JavaScript의 비동기 처리에 대해 좀 더 알아보자. JavaScript를 비동기 처리하려고 할 때 크게 3가지 방법이 있다. 바로 Callback 이용, Promise객체 이용, 마지막으로 async, await이 있는데, 그 전에 왜 JavaScript의 비동기적 처리가 필요한 이유부터 알아보자. 비동기적 처리가 필요한 이유? JavaScript는 싱글 쓰레드 언어 JavaScript는 싱글 쓰레드(Thread) 언어다. 쓰레드란, 프로세스 내에서 실제로 작업을 수행하는 주체를 말한다..

이 글은 JavaScript의 동기와 비동기에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! JavaScript를 공부하며 동기와 비동기에 들은적이 있었는데, 정말 이해하기 어려웠던 개념 중 하나였다. 게다가 누군가에게 프로그래밍과 관련된 언어의 정의는 사전적인 의미와 비슷하다는 말에 제대로 낚여 한참을 헤맸던 이 두녀석에 대해 파헤쳐 보려고 한다. 동기란? 동기(Synchronous)는 요청과 결과로 이루어지는 실행의 흐름이 순차적으로 딱 맞아 떨어진다고 생각하면 쉽다. 더 쉽게 예를 들면, 슈퍼마리오와 같이 어떤 게임을 할 때 순차적으로 첫 번째, 스테이지부터 마지막 스테이지까지 순서대로 진행한다고 생각해보자. Sta..