Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

js 4

타입스크립트 심층 분석 1 - 타입스크립트의 역할 및 타입스크립트의 뿌리, 타입(Type) 이해하기

시리즈의 다른 글 보기   타입스크립트 심층 분석의 첫 번 째 글에서는 타입스크립트와 타입에 대해 원론적인 내용을 담고 있습니다. 가볍게 시작한다는 마음으로 읽어주시면 좋겠습니다. 최근 타입스크립트의 깊이 있는 사용에 대해 관심이 생겼는데요. 사실 일반적인 웹 앱을 개발할 때 타입스크립에 대한 많은 학습이 필요하지 않은 것 같습니다. 하지만 이전에 개발 노트: React navigation에서 덜 귀찮기 위해 더 강력한 타입 사용하기글을 쓴 것처럼 타입을 더 상세하게 적용하여 명확한 코드를 작성하고 싶은 욕심과 라이브러리 개발자들이 타입을 설정하는 것에 대한 궁금증, 그리고 언젠간 직접 라이브러리 개발을 하고 싶다는 욕망까지 많은 이유가 합쳐져 타입 스크립트에 대해 깊이 있게 공부를 시작하였습니다.타입스..

개발/TypeScript 2024.08.04

트러블 슈팅: React Native의 FormData는 웹과 (조금)다릅니다! (feat. 서버가 FormData의 key와 value를 구분하는 법)

리액트 네이티브를 사용한 개발을 진행하던 중 한 가지 문제가 생겼습니다. FormData를 통해 백엔드에 데이터를 보내주었는데 백엔드 측에서 이를 읽지 못하였습니다. 분명 키와 값 쌍을 정해주었는데 해당 키를 null로 조회하였습니다. 백엔드 측의 코드도, 프론트엔드 측의 코드도 아무런 문제가 없어 보였는데 말이죠.FormData는 무엇인가?FormData는 form 필드와 그 데잍터를 나타내는 키-값 쌍을 쉽게 생성할 수 있는 인터페이스입니다. 이름에서도 유추할 수 있듯이 html의 form을 구성하는 데이터를 쉽게 구성할 수 있도록 도와주는 객체입니다. HTML의 경우 다음과 같은 코드를 작성하면 해당 폼 요소가 가진 필드 전체가 자동으로 FormData로 구성이 됩니다. FormData의 인자는 f..

함수 선언문과 함수 표현식: 어떤 것을 사용해야 할까?

자바스크립트는 함수를 정의하는 데에 있어서 두 가지 기본적인 방법을 제공합니다. 함수 표현식과 함수 선언문이죠. 이 두 가지 방식은 각각의 특징과 장단점이 있으며, 코드를 작성할 때 어떤 것을 선택해야 할지 고민이 될 수 있습니다. 저 또한 이전까지 막연히 함수 표현식을 사용하는 것이 좋다고 생각했었는데, 리액트 공식문서 등 꽤 많은 곳에서 왜 함수 선언문을 사용하는 지에 대해 궁금증이 생겨 알아보게 되었습니다. 이번 글에서는 함수 표현식과 함수 선언문의 차이를 알아보고, 어떤 방식을 사용하는 것이 더 나을지에 대해 살펴보겠습니다.함수 선언문 - Function Declarations함수 선언문은 함수를 선언하면서 동시에 정의합니다. 함수 이름이 필수적이며, 함수 선언문은 호이스팅이 발생하여 어디에서든지..

개발/JavaScript 2024.03.01

자바스크립트의 변수 선언 (호이스팅과 스코프 그리고 클로저까지 간단하게 알아보자)

var 전역범위에서 접근이 가능한 변수를 선언하는 키워드입니다. 아무런 키워드없이 변수를 선언 및 할당하게 되면 var를 쓴 것과 같은 효과를 가집니다. 이 키워드를 사용하여 선언된 변수는 변수가 선언되는 위치에 따라 변수의 유효범위가 달라질 수 있습니다. 예를 들어, 함수 내에서 var를 사용하여 변수를 선언하면 해당 변수는 함수 내부에서만 접근할 수 있습니다. 그러나 함수 내부의 블록 (예: if 문이나 for 문) 안에서 선언된 경우에도 해당 변수는 함수 전체에서 접근할 수 있습니다. 이는 var가 함수 스코프(function scope)를 가지기 때문입니다. 스코프란? 스코프는 변수를 찾아내기 위한 규칙입니다. 규칙 중에서도 범위에 대한 규칙이죠. 함수는 자신이 선언된 위치에 의해서 자신이 유효한..

개발/JavaScript 2023.12.22