Javascript
3 posts
[번역] 자바스크립트 함수 호출과 "this" 이해하기

원문 : Understanding JavaScript Function Invocation and “this” 본 글은 Typescript Handbook - 함수 부분을 학습하던 중 본문에 링크되어있던 원문 글을 읽고 Javascript에서의 함수 호출과 알듯 말듯 모호했던 this를 학습하며 번역한 글입니다. 의역이 포함되어 있는 점 양해 부탁드리며, 잘못된 부분을 발견하셨을 경우 댓글로 알려주시면 감사하겠습니다. 😊 지난 시간동안 자바스크립트 함수 호출에 대해 많은 혼란이 있었습니다. 특히, 함수 호출에서의 this의 의미를 혼란스러워하는 사람들이 많았습니다. 이 혼란은 함수 호출의 핵심 원리를 이해하고, 그 원리를 기반으로 함수 호출 방법을 살펴보는 식으로 해결할 수 있다고 필자는 생각합니다. 사실 이것은 ECMAScript에서 이 문제를 다루는 방식이기도 합니다. 이 글은 ECMAScript보다는 단순하게 쓰여진 감이 있지만, 기본적인 아이디어는 같습니다. 핵심 기본 원…

April 09, 2023
Javascript
정규 표현식 톺아보기

들어가며 사실 정규 표현식은 필요할 때마다 구글링을 해 원하는 식을 손쉽게 찾아낼 수 있고, 요즘 핫한 chatGPT에게 질문만 하면 적절한 예시까지 곁들여주기도 한다. 다만 알고 사용하는 것과 모르고 복붙하는 것은 큰 차이가 있다고 생각하기에 (또 서치한 결과를 스스로 검증하는 능력도 중요하기에) 정리해보는 글. 정규 표현식이란 정규 표현식 (Regular Expression)은 특정 패턴을 가진 문자열 집합을 뜻하며, 이를 활용해 문자열에서 원하는 패턴의 문자열을 찾아내고 테스트하거나 치환할 수있다. 예를 들면 이메일주소의 형식에 맞는 문자열인지 테스트하거나 휴대폰번호 입력 input에 숫자만 입력되도록 할 수 있다. 정규 표현식은 대부분의 프로그래밍 언어에 내장되어 있고, 코드 에디터에서 검색할 수도 있는데 자바스크립트에는 ES3부터 도입되었다. 여러 기호가 혼합되어 있는 형태가 처음엔 낯설 수 있지만 명확한 구조를 익히면 반복문, 조건문없이 문자열의 패턴을 정의하고 테스트할…

February 26, 2023
Javascript
Babel을 활용해 별칭 경로 설정하기

들어가며 회사에서 소속팀이 변경되어 지금까지 봐오던 코드와 다른 코드를 보게 되었다. 그러다 눈에 띈 상단의 경로들. 대부분의 경로가 보다 짤막하고 의 형태로 이루어져있었다. 팀원분께 여쭈어보니 별칭 경로라는 걸 알게되었고, 보다 편리하게 개발할 수 있는 수단이라 생각되어 조금 더 배워보고 정리해본다. 별칭 경로를 사용하는 이유 Javascript/Typescript 환경에서 import 구문을 사용할 땐 보통 상대 경로를 사용한다. 이 때 각 모듈의 디렉토리 depth가 깊어진다면, 아래와 같이 보기만 해도 아찔한 경로를 사용해야한다. 이런 경우 아래와 같은 몇 가지 문제점이 존재한다. 정확히 어느 경로에 있는 모듈인지 한 눈에 파악하기가 어렵다. 경로를 작성할 때 오류가 날 가능성이 크다. 문제 해결을 위해선 경로를 알아보기 쉽게 + 깔끔하게 정리해주는 절대 경로를 활용할 수 있다. 여기서 더 나아가 절대 경로를 활용해 특정 디렉토리 경로에 별칭을 달아주는 별칭 경로를 활용한…

May 22, 2022
Javascript