나는개발자니까

앞서 말했듯이 클로저를 이해하기 위해 변수의 유효 범위, 스코프에 대해 알아보자.스코프(scope)는 변수의 유효 범위이고 자바스크립트의 스코프는 전역 스코프와 함수 스코프가 있다. 1. 전역 스코프전역 레벨에 선언하는 것을 전역 스코프(global scope)라고 한다. 전역 스코프에서 변수를 선언하면 어디서든 호출할 수 있다. 전역 스코프와 hello 스코프 모두 global 변수에 접근할 수 있다.브라우저 환경에서는 window, Node.js 환경에서는 global 전역 객체에 전역 레벨에서 선언한 스코프가 바인딩 된다.var global = 'global scope'function hello() { console.log(globel)}console.log(global) // global scop..

이번 회사 프로젝트에서 상태관리를 Redux로 하고 있어 공식문서를 번역하면서 중요해 보이는 부분만 작성해보았다.Redux 왜 생겨났을까요?프론트엔드 개발이 복잡하고 어려운 이유는 무엇일까요? 단순한 웹 애플리케이션을 벗어나 점점 복잡한 기능이 늘어나고 있는 요즘, 웹 애플리케이션을 만들기 위해 많은 상태를 관리해야 합니다. 기존 프로젝트에서 계획에 없던 상태를 하나씩 추가해 나가 여러 상태를 관리하게 되면 어느 순간부터는 개발자 조차 상태가 언제, 왜, 어떻게 업데이트하는지 디버깅하기 어려운 시점에 도달하게 되며 버그를 재현하기 어렵습니다.이보다 근본적인 이유는 사람이 추론하기 어려운 끊임없는 변화(mutaion)와 비동기(asyncronicity)의 개념을 섞어서 사용하기 때문입니다. 이 문제를 해결..

자바스크립트 클래스란 무엇인가? 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다. 따라서 클래스는 특정한 형태의 객체를 반복적으로 만들기 위해 사용하는 것이다. 자바스크립트 클래스의 코드에는 어떤 것이 있는지 하나씩 뜯어보자! 생성자 constructor는 생성자이며 객체를 생성하는 데 사용하는 특수한 메서드이다. 단 하나만 존재할 수 있으며 기본 생성자에서 별다르게 수행할 작업이 없다면 생략하는 것도 가능하다. class Car { constructor (name) { this.name = name } // SyntaxError: A class may only have one constructor constructor (name) { this.name = name } }..

자바스크립트로 코드를 작성하다보면 자주 함수 생성과 사용을 한다. 따라서 좋은 함수란 무엇인지 알아보자. 함수의 부수 효과를 최대한 억제하라 함수의 부수 효과 (side-effect) 란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미한다. 부수 효과가 없는 함수를 순수 함수라 하고, 부수 효과가 존재하는 함수를 비순수 함수라고 한다. 순수 함수는 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환한다. 언제 실행되든 항상 결과가 동일하기 때문에 예측 가능하며 안정적이다. 그러나, 웹 애플리케이션을 만드는 과정에서 부수 효과는 피할 수 없는 요소이다. 만약 개발 중에 부수 효과가 꼭 필요하다면 리액트 관점에서 보면 부수 효과를 처리하는 훅인 useEffec..

즉시 실행 함수 즉시 실행 함수 (Immediately Invoked Function Expression)은 말 그대로 함수를 정의하는 그 순간 즉시 실행되는 함수히다. (function (a, b) { return a + b })(10, 24); // 34 ((a, b) => { return a + b }, )(10, 24). // 34 즉시 실행 함수의 특징 1. 즉시 실행 함수는 한 번 선언하고 호출된 이후부터는 재호출이 불가능하다. 2. 따라서 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다. 3. 리팩터링에 도움이 된다. 즉시 실행 함수는 그 선언만으로도 실행이 끝난다는 것을 각인시키기 때문이다. 고차 함수 고차 함수(Higher Order Function)는 함수를 인수..

함수 선언문과 함수 표현식의 차이를 간단히 알아보자. 함수 선언문 hello() // hello function hello() { console.log('hello') } hello() // hello 함수 표현식 console.log(typeof hello === 'undefined') // true hello() // Uncaught TypeError: hello is not a function var hello = function () { console.log('hello') } hello() 위의 코드와 같이 함수 선언문은 함수 호이스팅을 통해 함수를 자유롭게 선언하고 어디서든 자유롭게 호출할 수 있다. 그리고 함수 표현식은 변수에 함수를 할당한 후 호출할 수 있다. 함수 선언문을 사용하면 선언된..

함수 리액트에서 함수형 컴포넌트를 작성하다 보면 화살표 함수와 일반 함수 모두 사용하는 경우가 많은데 정작 두 함수의 차이에 대해서 정확히 모른다. 자바스크립트 함수의 다양한 형태와 이러한 함수의 차이점이 무엇인지 알아보자. 함수란? 자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것이다. function sum(a, b) { return a + b } sum(10, 24) // 34 함수명 : function 뒤에 오는 이름 매개변수 : 함수의 입력값으로 받는 a, b 반환값 : return 뒤에 작성된 것 인수 : sum 뒤에 넘겨준 두 개의 값 또한 리액트에서 컴포넌트를 만드는 함수도 기초적인 형태를 다룬다. fun..

리액트에서의 동등 비교 리액트에서의 비교는 Object.is로 먼저 비교를 수행한 다음에 Object.is에서 수행하지 못한 비교, 즉 객체 간 얕은 비교를 한 번 더 수행하는 방식을 거친다. 객체 간 얕은 비교란 객체의 첫 번째 깊이에 존재하는 값만 비교한다는 것을 의미한다. 여기서 객체 간 얕은 비교는 의존성 비교, 리액트의 동등 비교가 필요한 곳에서 쓰인다. 그런데 리액트에서 객체의 얕은 비교까지만 구현하는 이유는 무엇일까? JSX props는 객체이고 props를 일차적으로만 비교하면 되기 때문이다. type Props = { hello: string } function HelloComponent(props: Props) { return {hello} } // ... function App() {..