본문 바로가기

TIL

 (64)
TIL no.47 - 클로저란 무엇일까 클로저란 무엇인가 클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킵니다. 클로저는 자바스크립트를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용됩니다. Mozilla에서 개념적인 정리 부분을 보면 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. Closure = function() + lexical scope 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다고 합니다. lexical 이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미합니다. 한마디로 클로저는 필요한 ..
TIL no.46 - this 는 무엇인가요 : JavaScript 이번 글에서는 JavaScript 를 공부하면서 어려웠고 잘 이해하고 싶었던 this에 대해 포스팅해보도록 하겠습니다. 내가 궁금한 거 1. 왜 this를 써야 하나요? 2. this 가 무엇인가요? 3. 왜 어려울까요? 4. 어떻게 써야하나요 ? 왜 this를 써야 하나요? Java는 클래스 기반 언어입니다. Java에서 함수는 메서드이고, 메서드는 클래스에 묶여 있습니다. 그리고 인스턴스는 클래스에서 생성됩니다. 그러므로 모든 메서드는 this 키워드가 가리키는 객체가 자신이 속한 클래스의 인스턴스라고 확신할 수 있습니다. 하지만 JavaScript에는 클래스가 없습니다. 그래도 함수는 구동되고 인스턴스는 원하는 대로 막 만들 수 있습니다. 클래스가 없으니 기본적으로 상속기능도 없습니다. 그래서 프로..
TIL no.45 - Redux 란, Redux 란 ? 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너를 말합니다. 리덕스의 아키텍처를 통해 변경사항을 기록하고, "시간여행형 디버깅"을 사용하고, 완전한 에러 리포트를 서버로 보낼 수 있습니다. *Flux 아키텍처를 더 편리하게 만드는 '전역 상태관리' 라이브러리로서 컴포넌트끼리 데이터 및 state 관리를 쉽고 효율적으로 할 수 있게 만듭니다. Flux의 단방향 구조에서 전역 상태관리를 유연하게 하기 위한 상태관리 라이브러리입니다. *Flux 란, 아래와 같이 단방향으로 흐르는 구조로 구성되어 있습니다. 어떠한 Action이 발생하였을 때 Dispatcher가 Action을 관리하고 Dispatcher의 통제하에 Store에 있는 데이터를 가져오거나 수정할 수 있습니다. 그리고 ..
TIL no.44 - SPA 란 ? SPA란 무엇인가 SPA란, Single Page Application 으로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 기존의 애플리케이션은 화면 이동 시에 클라이언트가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다. SPA는 정적인 파일들을 초기에 받아놓고 이후 필요한 비동기적 데이터 부분만을 서버에 요청합니다. 기존의 애플리케이션과 SPA의 간단한 정의만 놓고 보더라고 매번 모든 데이터를 다 주고받는 경우와 기본적인 페이지의 파일을 가지고 있고 필요한 데이터만 주고받는 것 중 SPA가 더 간단하고 발전된 경우라고 생각할 수 있을 것입니다. SPA는 페이지 이동 시 필요한 데이터 부분만 서버에 AJAX 로 요청하고 서버는 필요한 데이터의..
기업협업을 마치며 2달 동안의 위코드 생활 그리고 한 달 동안의 기업협업을 마지막으로 이제 정말 다같이 내달려오던 시간들이 끝이 났습니다. 이 정해진 시간이 끝이 아니라 앞으로도 함께 공부하고 개발하며 나아가겠지만 기간의 끝이라는 게 주는 기분이 다양합니다. 두 달 동안 위코드에서 함께 어려움을 마주하며 넘어지고 일어났던 시간들 만큼이나 한 달동안의 기업 협업 기간이 짧게 지나갔습니다. 2주 기간으로 진행했던 프로젝트들만큼이나 짧게 느껴졌던 기업협업이었습니다. 협업기간 동안 리액트 네이티브를 초기 세팅부터 시작해 새롭게 마주하는 것이 많았고 팀원들끼리 처음을 함께 이겨내면서 팀원들의 소중함을 또 느꼈던 시간이었습니다. 이후에 익숙하게 각자 주어진 태스크를 해나가면서 점점 더 협업에 책임감을 많이 느꼈던 것 같습니다. 이미..
TIL no.43 - 비동기 처리 async await : JavaScript async await 는 자바스크립 비동기 처리 문법 중 하나입니다. 콜백함수나 프로미스 보다도 간결하게 사용될 수 있다는 점에서 유용하게 사용할 수 있습니다. async 는 await를 무조건 필요로 하며 최근에 async를 쓰지 않아도 await를 사용할 수 있다고는 하나 아직 모든 부분에 적용되지는 않는 것 같습니다. 함수 앞에 async를 붙이며 비동기 처리를 해야하는 코드 앞에 await를 붙입니다. 비동기 처리 메소드가 꼭 Promise를 반환하는 것에만 await를 사용할 수 있습니다. 일반적으로 axios 같은 Promise를 반환하는 API 호출 함수에 await를 많이 사용합니다. 저도 이번에 기업협업에서 하는 프로젝트에서 axios로 API를 호출하는 함수에서 async await을 ..
TIL no.42 - REST API 회사에서 요구하는 우대사항을 보더라도 REST API를 이해하고 있다는 문장이 들어가 있는 것을 쉽게 볼 수 있듯이 REST API 는 중요한 개념을 차지합니다. 프로젝트나 인턴십을 진행할 때도 내가 REST API를 사용하고 있는지 아닌지 알지 못했고 이 개념에 대해 따로 이해하고 정리하고 싶다는 생각을 하다가 이제야 정리하게 되었습니다 ! REST API란, REST 는 Representational State Teansfer 의 약자입니다. 데이터 자원을 명시적인 URL 소스로 구분하여 자원의 상태와 정보를 주고 싶는 것이라고 할 수 있습니다. URI을 통해 자원(Resource)를 명시하고 HTTP Method를 통해 해당 자원에 대한 CRUD를 적용하는 것을 말합니다. *CRUD는 Create(..
TIL no.41 - React 에서 특정 Dom 에 접근하기 : useRef, ref 우리가 특정 Dom 을 선택하기 위해 javascript에서는 getElementId, querySelector 같은 selector 함수를 사용해서 선택할 수 있었습니다. 그렇다면 React에서는 어떻게 Dom에 접근할 수 있을까요? 사실 왜 접근해야 하는지 필요성을 느끼기 전까지는 알고 있어도 익숙해지지가 않습니다. 저는 이번에 react native를 사용하면서 라이브러리를 많이 접해봤는데 라이브러리에서 useRef가 많이 사용되어서 어찌저찌 사용은 했지만, 더 개념적으로 이해하고 싶어서 정리하게 되었습니다. React에서는 ref라는 것을 이용해 dom에 접근할 수 있는데 함수형 컴포넌트에서는 useRef 라는 Hook 함수를 사용합니다. 저는 함수형 컴포넌트를 예로 작성하도록 하겠습니다. 리액트..

티스토리툴바