쵸코쿠키의 연습장

오늘날 다양한 방식으로 작업을 관리할 수 있는 도구들이 있습니다. 그중에서도 투두 리스트 애플리케이션은 간단하면서도 강력한 작업 관리 도구로 널리 사용됩니다. 개발자들이 이러한 투두 애플리케이션을 만들어 보는 것은 단순히 기능 구현을 넘어서 다양한 개념들을 배우고 실전 경험을 쌓는 데 매우 유용합니다. 특히 이번 프로젝트에서는 React와 Firebase를 활용해 투두 리스트 애플리케이션을 만들어보면서, 데이터베이스와의 통합, 실시간 데이터 처리, UI 설계 등의 개념을 체험하게 됩니다.    사전 준비물Node.js: React 프로젝트에서 필요한 npm 패키지 설치를 위해 필요합니다.VS Code: 코드 편집기로서 React 프로젝트 개발을 위한 환경을 제공합니다.Firebase 콘솔: 클라우드 기반..

웹 애플리케이션을 개발하는 과정에서 로컬 환경에서는 대개 localhost URL을 사용하여 서비스를 실행합니다. 하지만 프로덕션 배포나 다른 환경으로 전환할 때는 해당 URL을 적절한 값으로 변경해야 하는데, 이러한 과정에서 환경 변수를 활용하면 더욱 유연하고 안전하게 프로젝트를 관리할 수 있습니다.이 글에서는 Angular 프로젝트에서 환경 변수를 이용하여 쉽게 구성 요소를 대체하고, Docker와 함께 환경 변수를 적용하는 방법까지 상세하게 다룹니다.    환경 변수란?**환경 변수(Environment Variables)**는 시스템 외부에서 설정할 수 있는 변수로, 애플리케이션이 실행될 때 동적으로 값을 읽어들입니다. 이를 통해 개발, 테스트, 프로덕션 등 다양한 환경에서 같은 코드베이스로도 다..

오늘날 모바일 애플리케이션 개발에서는 사용자 경험과 UI 디자인이 성공적인 앱의 핵심 요소로 여겨지고 있습니다. 이를 위해 개발자들은 효율적이면서도 확장 가능한 스타일링 시스템을 필요로 합니다. 그중 하나가 바로 Tailwind CSS입니다. 특히 Tailwind CSS는 다양한 장점을 제공하여 React Native 프로젝트에서 널리 사용되고 있습니다. 이 글에서는 Tailwind CSS를 React Native 프로젝트에서 사용하는 이유와 그 이점에 대해 자세히 살펴보겠습니다.  Tailwind CSS란 무엇인가?Tailwind CSS는 매우 유연한 유틸리티 기반 CSS 프레임워크로, 다수의 사전 정의된 클래스를 통해 빠르게 사용자 인터페이스를 설계할 수 있습니다. 기존의 CSS처럼 커스텀 코드를 작..

모바일 앱 개발이 점점 더 중요해짐에 따라 개발자들은 앱 개발 시 두 가지 주요 선택지를 마주하게 됩니다: Flutter와 React Native. 이 두 프레임워크는 각각 Google과 Meta(Facebook)에 의해 개발되었으며, 현재 가장 인기 있는 크로스 플랫폼 모바일 앱 개발 도구로 자리 잡고 있습니다. 이 글에서는 Flutter와 React Native를 비교하고, 각 프레임워크의 강점과 약점, 그리고 개발자가 선택할 때 고려해야 할 요소들에 대해 논의하겠습니다.  크로스 플랫폼 모바일 앱 개발이란?과거에는 iOS와 Android에서 각각 앱을 개발하려면 두 개의 별도 코드베이스를 유지해야 했습니다. 이는 iOS에서는 Swift 또는 Objective-C, Android에서는 Kotlin 또..

리액트(React)는 개발자들이 재사용 가능하고 모듈화된 사용자 인터페이스를 생성할 수 있게 해주는 인기 있는 자바스크립트 라이브러리입니다. 리액트에서는 다양한 훅(Hook)을 제공하며, 그 중에서도 useState()와 useRef()는 가장 많이 사용되는 두 가지 훅입니다. 이 두 훅은 각각 다른 목적을 가지고 있으며, 적절하게 사용하면 리액트 애플리케이션의 성능과 효율성을 크게 향상시킬 수 있습니다. 이번 글에서는 useState()와 useRef()의 차이점과 각각의 사용 시점을 자세히 알아보겠습니다.  useState()란 무엇인가?useState()는 리액트에서 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 내장 훅입니다. 이 훅은 초기 값을 인수로 받아들이며, 현재 상태와 그 ..

// Function parameter type annotations: const doSomething = (person: string, age: number, isFunny: boolean) => {}; // Return type annotation: function greet(person: string = "stranger"): string { return `Hi there, ${person}!`; } function square(num: number): number { return num * num; } square(3); greet("Tonya Harding"); doSomething("ChickenFace", 78, true); 함수 파라미터 어노테이션 이전 강의에서 제대로 언급하지 않은 것이 ..

함수 파라미터 애노테이션 타입 애너테이션을 변수에 추가하는 법을 알아봤습니다. 암시적 타입 변환(implicit typing) 때문에 이건 흔히 쓰이진 않습니다. 이제 타입을 이용해서 함수 파라미터와 반환값에 할당하는 법을 살펴보겠습니다. function square(num: number): number { return num * num; } square(3); TypeScript에 함수를 작성할 때는 이전의 함수 구문과 같습니다. square라는 함수를 작성한다고 해봅니다. 숫자를 입력하니 num이라고 쓰고 num * num로 반환합니다. 3을 입력하면 3 곱하기 3이니까 반환값은 9가 됩니다. num에 마우스를 올리면 이 파라미터 num은 any 타입이 기본값으로 설정된다고 나옵니다. 이 말은 제가 ..

지연 초기화와 암묵적 Any 타입 애너테이션이 필요하거나 유용한 경우에 대해 다뤄보겠습니다. 초기화와 별도로 변수를 선언하는 경우입니다. 이미 이런 경우를 보셨거나 직접 마주하셨을 수도 있습니다. const movies = ["Arrival", "The Thing", "Aliens", "Amadeus"]; let foundMovie: string; for (let movie of movies) { if (movie === "Amadeus") { foundMovie = "Amadeus"; } } 예시 영화의 목록을 검색하는 변수가 하나 있다고 해봅시다. movies라는 변수를 만들고 여기에 문자열을 배열로 추가해 줍니다. 이전에 사용한 Arrival부터 The Thing과 Aliens 그리고 진짜 명작인 ..

Any 타입 JavaScript에는 없고 TypeScript에만 있는 any 타입에 대해 알아보겠습니다. any 타입은 말 그대로 어떤 타입도 받을 수 있습니다. TypeScript의 기본적으로 타입 확인 없이 쓸 수 있습니다. 어찌 보면 TypeScript을 사용하는 목적과 멀기 때문에 일반적으로는 잘 사용하지 않겠지만 하지만 살다 보면 any 타입을 사용해야 할 때가 있습니다. 우선 any 타입은 모두 소문자여야 합니다. // the any type let thing: any = "hello"; //This is not a great idea! thing = 1; thing = false; thing(); thing.toUpperCase(); const movies = ["Arrival", "The ..

타입 이제 TypeScript에 다양한 타입이 존재합니다. 가장 먼저 볼 거는 TypeScript 코드 어디에서 타입을 사용하는지입니다. 기본적으로 함수에서부터 여러 상황들이 존재하는데 예시가 있습니다. 어떤 함수는 불리언 값이어야 하는 경우가 있습니다. 단일 불리언 값이나 불리언 배열 혹은 문자열이 될 수도 있습니다. 또 어떤 함수는 숫자 두 개를 인수로 받고 하나의 숫자만 반환하는 경우도 있습니다. 또, 패턴이나 객체의 형태도 특정할 수 있습니다. 어떤 객체가 colors이라는 특정 프로퍼티를 갖고 프로퍼티가 문자열의 배열이어야 한다고 지정할 수 있습니다. 아니면 매우 간단하게 설정할 수도 있는데 TypeScript의 타입을 변수로 지정할 수도 있습니다. 가변 타입 예를 들어 영화 제목이라고 부르는 ..

타입 추론 지금까지 사용한 타입 애너테이션이 대부분의 경우는 필요 없다는 사실에 대해 알려드리려고 합니다. 애너테이션은 타입과 구문의 기초를 배울 때는 좋은 도구이지만 실제로 변수를 작성할 때는 타입 추론(Inference)을 사용하면 됩니다. TypeScript는 꽤 똑똑하기 때문에 변수 선언을 보면 어떤 값에 할당되는지 파악합니다. 지금 보시는 경우에는 27이 x에 할당되었는데 TypeScript은 이를 보고 27이 숫자이기 때문에 x가 숫자 타입이라는 걸 추론합니다. 그러고 나서 x 값에 숫자가 아닌 문자열이나 불리언 타입을 넣으면 오류라고 표시합니다. // Type Inference let tvShow = "Olive Kitteridge"; tvShow = "The Other Two"; tvSho..

TypeScript을 사용하는 핵심은 JavaScript로 컴파일링하는 것입니다. 끝에는 JavaScript로 컴파일링해야 합니다. 터미널에서 파일 위치 디렉터리만 지정하시면 됩니다. 터미널에서 하는 게 익숙하지 않으시면 간단하게 VS Code의 파일명에 마우스 오른쪽 버튼을 누르고 Open in Integrated Terminal을 클릭하시면 됩니다. 그리고 tsc와 .ts로 끝나는 파일명을 입력합니다. // String Variable With Explicit Annotation let movieTitle: string = "Amadeus"; movieTitle = "Arrival"; movieTitle = 9; //This results in an error! movieTitle.toUpperCas..

첫 번째는 숫자(number) 타입으로 JavaScript와 동일합니다. 정수형과 부동수형으로 나누진 않고 동일하게 숫자 타입으로 지정합니다. 변수 뒤에 콜론(:)과 number로 TypeScript에 타입을 지정하면 됩니다. 두 번째로는 불리언이 있습니다 주의할 점은 모두 소문자로 표시해야 됩니다. boolean으로 b를 소문자로 써야 합니다. 아시겠지만 불리언은 참 혹은 거짓 값을 의미하고 그래서 불리언 타입에는 변수의 옵션이 두 개밖에 없습니다. // String Variable With Explicit Annotation let movieTitle: string = "Amadeus"; movieTitle = "Arrival"; movieTitle = 9; //This results in an er..

그럼 TypeScript를 실행하고 기본 워크플로우를 익혀보겠습니다. 첫 번째로 TypeScript을 작성할 파일을 생성해야 합니다. 온라인 편집기 TS Playground를 사용하시면 안 하셔도 됩니다. 로컬 환경에서 실행하시면 파일 생성이 꼭 필요합니다. 파일 확장자는 .ts여야 합니다 그럼 basics.ts라는 파일을 만들어 보겠습니다. 이름은 아무렇게나 하셔도 됩니다. .ts라는 확장자는 VS Code에 이 파일이 TypeScript라는 걸 알려줍니다. .tsx 확장자도 있는데, 이 부분은 React를 다룰 때 알려드리겠습니다. 앞서 말했듯 React 부분은 강의에서 핵심 내용이 아닙니다. 간단히 말하면 .tsx는 TypeScript에 jsx 파일을 더하는 건데 TypeScript으로 jsx 구문..

TypeScript Playground을 함께 살펴보겠습니다. 브라우저 기반 환경입니다. 아무것도 설치하지 않고 바로 TypeScript를 작성할 수 있습니다. 이걸 보는 이유는 두 가지입니다. 하나는 설치가 힘든 분들도 있습니다. 뭔가를 설치하면 안되는 컴퓨터를 쓰실 수도 있습니다. 그렇다면 TypeScript Playground를 사용하면 됩니다. 공식 문서로 가서 Playground를 누르면 나옵니다. 컴퓨터에 TypeScript를 설치할 수 없는 분을 위한 게 첫 번째 이유였습니다. 두 번째는 이것저것 시도하기가 좋습니다. 공식 문서를 보고 시도해보고 싶은데 프로젝트를 만들기 귀찮을 때 TS Playground에서 다 해볼 수 있습니다. 그림 왼쪽이 TypeScript이고 오른쪽이 컴파일링된 Ja..

TypeScript 설치 typescriptlang.org에서 TypeScript 공식 문서를 봅니다. 검색창에 TypeScript를 검색해서 들어가셔도 됩니다. Download를 누르면 방법이 여럿 나옵니다. 가장 쉬운 방법은 npm을 사용하는 겁니다. npm을 쓰려면 당연히 NodeJS와 npm을 설치합니다. npm을 써본 경험이 있으면 도움이 됩니다. npm 명령어로 TypeScript를 설치합니다. 그전에 npm -v 명령어로 npm이 설치되었는지 확인합니다. npm -v 확인해서 아직 설치 전이라면 설치하면 됩니다. nodejs.org에서 설치할 수 있습니다. 여러분 컴퓨터에 맞는 걸 클릭하고 권장 버전을 사용합니다. 인스톨러를 실행하여 설치합니다. 다른 건 필요 없고 지시에 따라서 확인 버튼을..

정적 검사 TypeScript는 정적 검사라는 걸 수행하는데 많은 언어에 있는 기능입니다. 실행하지 않고도 코드 내 오류를 잡는 기능입니다. 코드를 실행하는 건 JavaScript가 할 일입니다. TypeScript는 정적으로 검사합니다. 실행하기 전에 코드를 보고 문제가 있는지 알려줍니다. 그래서 정적 검사라고 합니다. TypeScript는 정적 타입 검사기로서, 실행하기 전에 프로그램 데이터의 종류나 타입을 검사합니다. 문자열, 숫자, 배열이나 특정한 프로퍼티를 가진 객체 등을 검사합니다. 그런 걸 모두 실행 전에 합니다. 왜 타입인가 첫 번째로 오류를 찾아줍니다. 가장 중요한 건데 실행 전에 오류를 찾을 수 있습니다. 개발 단계에서 작성과 동시에 분석을 함으로써 문제를 찾아 주고 실행할 필요가 없습..