최근 진행하고 있는 공모전에서 앱서비스를 개발하게 되었다.스택을 선정하는 과정중 동료 개발자가 웹개발자였고 한정적인 시간 내에서 JavaScript와 React 지식을 그대로 활용할 수 있는,상대적으로 러닝커브가 적다고 생각한 리액트 네이티브로 개발하기로 정하였다.React Native가 뭐야?React Native는 Facebook(현 Meta)에서 개발한 크로스플랫폼 모바일 앱 개발 프레임워크이다.하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있다는 점이 가장 큰 장점이다.React와 유사한 문법을 사용하기 때문에 웹 개발자가 모바일 앱 개발에 진입하기 위한 러닝커브가 상대적으로 낮다는 특징이 있다. React Native가 특별한 이유는 하이브리드 앱이 아닌 진짜 네이티브 앱을 ..

타입 별칭(Type Aliases)이란?타입스크립트를 공부하면서 '타입 별칭'이란 개념은 자주 접하게 될 것이다.타입 별칭이 뭘까??? 아래와 같다.타입 별칭은 이름 그대로 타입에 새로운 이름을 부여하는 기능이다. 타입 별칭은 복잡한 타입을 간결하게 표현할 수 있게 해주며, 코드의 가독성과 재사용성을 높여준다!또한 type 키워드를 사용하여 정의하며, 원시 타입부터 복잡한 객체 타입, 유니온 타입, 제네릭 타입까지 다양한 타입에 별칭을 붙일 수 있다. 타입 별칭은 단순히 타입에 이름을 붙이는 것 이상의 의미가 있는 것 같다.복잡한 타입 구조를 추상화하고, 코드의 의도를 명확하게 표현할 수 있게 해주기 때문.(특히 프로젝트의 규모가 커질수록 타입 별칭의 중요성은 더욱 커지지 않을까?)기본 사용법타입 별칭의..

열거형(Enums)이란?TypeScript에서 열거형(Enums)은 관련된 상수 값들의 집합을 정의하는 방법이다.우리가 코드를 작성할 때 특정 값들만 사용하도록 제한하고, 각 값에 의미 있는 이름을 부여하여 가독성을 높이는 역할을 한다고 이해하면 된다. 자바스크립트에는 열거형 개념이 따로 없지만, 타입스크립트는 이를 추가하여 개발자들이 좀 더 안전하고 명시적인 코드를 작성할 수 있게 해준다. 열거형을 통해 특정 값들만 사용하도록 제한하면 오타나 잘못된 값 사용으로 인한 오류를 줄일 수 있고, 코드의 의도를 더 명확하게 표현할 수 있다.enum Direction { Up, Down, Left, Right}// 열거형 사용 예시let myDirection: Direction = Direction.Up..

오늘은 TypeScript의 핵심 기능 중 하나인 인터페이스(Interface)에 대해 개념정리 해보고자 한다.인터페이스란?TypeScript에서 인터페이스는 타입 체크를 위한 강력한 도구라고 할 수 있다.인터페이스는 객체의 구조를 정의하며, 코드 내에서 객체가 특정 구조를 따르도록 강제한다 => 이를 통해 코드의 가독성과 안정성을 높일 수 있다! 인터페이스는 실제 구현이 아닌 '계약'과 같은 개념이다.즉, 특정 객체가 가져야 할 프로퍼티와 메서드를 선언하지만, 실제 구현은 해당 인터페이스를 이용하는 객체에게 맡긴다.(TypeScript 컴파일러는 객체가 인터페이스에 명시된 구조를 준수하는지 확인하여 타입 안정성을 보장한다.) JavaScript는 동적 타입 언어이기 때문에 런타임에 타입 관련 오류가 발..

JavaScript의 세계JavaScript는 1995년 Netscape의 Brendan Eich에 의해 만들어진 스크립트 언어로, 웹 브라우저에서 실행되는 코드를 작성하기 위해 탄생했다.동적 타입, 프로토타입 기반 객체지향, 함수형 프로그래밍 패러다임을 지원하는 다중 패러다임 언어! TypeScript를 소개하기 전에 JavaScript의 주요 특징을 살펴볼까?크게 네 가지로 나눌 수 있다.동적 타입 시스템프로토타입 기반 객체지향함수형 프로그래밍 지원비동기 프로그래밍그럼 위 특징들에 대해 하나씩 정리해보겠다.동적 타입 시스템변수의 타입이 런타임에 결정되고 변경될 수 있으며,이는 유연성을 제공하지만, 예상치 못한 타입 오류를 발생시킬 수 있다.let variable = "Hello"; // 문자열 타입v..

React는 정확히 무엇일까?공식 문서에서는 UI 구축을 위한 JavaScript 라이브러리라고 소개하고 있지만, 주변에서는 프레임워크라고 부르는 경우도 많이 보았다.이 혼란스러운 정체성에 대해 명확하게 이해하고 싶어 라이브러리와 프레임워크의 개념부터 차근차근 정리해보기로 했다.라이브러리란?라이브러리는 개발자가 필요로 하는 기능을 모아놓은 도구 모음이며, 가장 중요한 특징은 개발자가 주도권을 가진다는 점이다.라이브러리는 개발자가 필요할 때 호출하여 사용하며, 프로그램의 흐름을 개발자가 직접 제어한다. 예를 들어, 자바스크립트의 대표적인 라이브러리인 jQuery는 DOM 조작, 이벤트 처리, 애니메이션 등의 기능을 제공하지만 그것을 언제, 어떻게 사용할지는 전적으로 개발자의 몫이다. 라이브러리의 주요 특징..

최근 프로젝트를 통해 검색 기능이 있는 웹 페이지를 개발하면서 사용자 필터링 상태를 URL에 저장하고,브라우저의 뒤로 가기를 했을 때도 이전 필터링 상태가 그대로 유지되도록 만들어야 했다.Query String이란?Query String은 URL의 끝에 위치하며 웹 페이지에 특정 데이터를 전달하는 방식이다.URL에서 '?' 뒤에 오는 부분이 Query String이며, key=value 형태로 데이터를 표현한다.여러 개의 데이터는 '&'로 구분한다. 예를 들어보자.https://example.com/search?category=books&sort=newest&page=1위 URL에서 Query String은 '?category=books&sort=newest&page=1'이며,이는 category, so..

Protected Routes란?웹 개발을 하면서 특정 페이지들은 로그인한 사용자만 접근할 수 있도록 제한해야 할 필요성을 느꼈다.(예를 들어, 사용자의 프로필 페이지나 설정 페이지 같은 경우)React에서는 이러한 접근 제어를 'Protected Routes'라는 개념으로 구현할 수 있다.Protected Routes는 간단히 말해서 인증된 사용자만 접근할 수 있는 라우트를 의미한다.React Router v6?!React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리다.현재 v7 버전이 나오긴 하였지만 특히 v6 버전에서는 이전 버전과 비교해 더욱 직관적이고 선언적인 방식으로 라우팅을 구현할 수 있게 되었다.아래 코드를 함께 살펴볼까?import { BrowserRo..

Naver Maps API? 그런게 있어?Naver Maps API는 네이버에서 제공하는 지도 서비스 API이다.필자가 처음 지도 서비스를 구현하려고 할 때 Google Maps API를 고려했지만, 한국 지도 서비스의 특성상 Naver Maps API가 더 적합하다고 판단했다.(Naver Maps API는 한글 도로명 주소와 건물명을 더 정확하게 처리할 뿐만 아니라, 국내 위치 기반 서비스에 최적화되어 있다!!) 사용하려면 뭘해야 될까? 🤔먼저 Naver Cloud Platform에서 애플리케이션을 등록하고 Client ID를 발급받아야 한다.이 과정에서 서비스 도메인을 등록하는데, 개발 환경에서는 localhost도 등록할 수 있다.(필자는 React에서 사용하는 부분을 정리하고자 하니 Client..

웹 개발을 공부하면서 가장 기본이 되는 개념 중 하나가 뭘까?바로 필자는 HTTP 요청이라고 생각한다!오늘은 필자가 애용하는 Axios와 일반 Fetch에 대해서 비교하고 개념을 정리해보고자 한다.HTTP 요청이란?HTTP 요청은 클라이언트(브라우저)가 서버와 통신하기 위해 사용하는 프로토콜이다.예를 들어, 우리가 웹사이트에서 로그인을 하거나, 게시글을 작성하거나, 상품을 검색할 때마다 HTTP 요청이 발생한다.Fetch API 소개Fetch API는 자바스크립트에 내장된 HTTP 클라이언트로, 별도의 설치 없이 사용할 수 있다는 장점이 있다.Promise 기반으로 작동하며, 모던 자바스크립트의 비동기 처리를 잘 보여주는 API이다.기본적인 Fetch의 사용 예시는 아래와 같다.fetch('https:/..