안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클153 TypeScript useRef "Object is possibly null" error? 문제 발생 프로젝트에서 TypeScript 환경에서 useRef를 활용할 일이 있었는데, 해당 DOM 객체의 타입을 명시해주었음에도 불구하고 에러가 발생 문제 해결 const linkRef = useRef(null); // useRef 지정 if (linkRef.current !== null) { // null 값 체크 linkRef.current.focus(); } useRef를 통해 지정을 해주고, null 값을 체크해주면서 해결을 할 수 있다. const myRef = useRef(null); // useRef 지정 myRef.current?.focus(); // ES2020의 optional chain을 통해 다음과 같이 지정도 가능하다. ES2020의 optional chaing을 통해 위와 같.. 2023. 2. 17. 함수 선언식과 함수 표현식의 차이 함수 선언식 (Function Declartion) 함수 명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a, b) { return a + b; } 함수 표현식 (Function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a, b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은 호이스팅에서 양상을 나타내는데, 함수 선언식은 함수 전체를 호이스팅 시키고, 정의된 범위의 맨 위로 호이스팅되어 함수 선언 전에 함수를 함수를 사용할 수 있다는 것이다. 함수 표현식은 별도의 변수에 할당을 하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 여기서, 선언부만 호이스팅 하게 .. 2023. 2. 13. 콜백 지옥(Callback hell)을 해결하는 방법 콜백지옥이란? 콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 콜백 함수를 이용해서 비동기 처리를 해주다가 코드가 깊어지는 것을 의미하며, 일반적으로 콜백지옥을 해결하는 방법에는 이전에 포스팅한 Promise와 Async 방법이 있다. function taskA(a, b, cb) { setTimeout(() => { const response = a + b; cb(res); }, 2000); } function taskB(a, cb) { setTimeout(() => { const response = a * 2; cb(response); }, 2000); } function taskC(a, cb) { setTimeout(() => { const response =.. 2023. 2. 13. 자바스크립트의 클로져(Closure) 개념 클로저란? 클로저란, 자바스크립트의 고유 개념이 아니라 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 반환된 내부함수가 자신이 선언되었을 때 환경(렉시컬 환경) 스코프를 기억하여, 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 뜻한다. 렉시컬 환경 : 내부 함수가 선언되었을 때의 스코프 함수와 함수가 선언된 어휘적(Lexical) 환경의 조합 클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계라는 개념이 합쳐진 것이다. 클로저의 핵심은 스코프를 이용하여, 변수의 접근 범위를 폐쇄하는 것에 있다. 외부함수 스코프에서 내부함수 스코프로 접근 불가능하다. 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 가능하다. 따라서 내부 함수.. 2023. 2. 12. 자바스크립트가 유동적인 언어인 이유 정적 언어 컴파일 시점에 타입이 결정되는 언어 타입(자료형)을 컴파일 시에 결정하는 언어 C, C++, Java 등은 대표적인 정적 언어 정적 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야한다. 컴파일 시에 자료형이 맞지 않는 값이 들어있을 경우 컴파일 에러가 발생한다. 컴파일 시간에 변수의 타입을 체크하므로, 사소한 버그들을 쉽게 체크할 수 있는 장점이 있다. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 올라간다. 동적 언어 런타임 시점에 타입이 결정되는 언어 소스가 빌드될 때 자료형을 결정하는 것이 아니라 실행 시에 결정이 된다. 매번 타입을 써줄 필요가 없기 때문에, 프로그래머가 빠르게 코드를 작성할 수 있다. JavaScript, Ruby, Python 등은 대.. 2023. 2. 12. Promise를 사용한 비동기 통신, Async · Await 비동기 통신의 차이점 Promise와 Async · Await의 차이점 에러 핸들링 측면 Promise를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하다. Async · Await은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야한다. 코드 가독성 Promise의 .then() 지옥 가능성 (아래 내용에서 예시로 확인이 가능하다) 코드가 길어지면 길어질수록, Async · Await 을 활용한 코드가 가독성이 좋다. Async · Await 은 비동기 코드가 동기 코드처럼 읽히도록 가독성이 좋고, 흐름을 이해하기 쉽게 해준다. 자바스크립트에서 비동기 처리는 왜 필요할까? 자바스크립트는 동기적인 언어이다. 즉, 코드 하나하나가 처리되면서 지연시간이 발생하면 이후의 태스크들은 무아지경으로.. 2023. 2. 12. 이전 1 ··· 15 16 17 18 19 20 21 ··· 26 다음
