Jacob's Development Blog

Diary 앞에서 배운 내용을 토대로 다이어리 앱을 만든다. 배운 내용에 대한 것들은 많이 생략한다. 설치 및 할일 만들기 내비게이션, Hooks 참고 npx pod-install 기존에는 ios 폴더로 이동하여 pod install을 해주었다. 위 명령어는 동일한 기능이자만, 루트 폴더에서도 pod를 설치할 수 있게 해주는 명령어다. 설치 $ yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-vector-icons info.plist 파일 업데이트(아이콘 관련) buil..

이전글 참고하기 2021.11.29 - [React] - [React Native] 설치 및 할일 목록 만들기 [React Native] 설치 및 할일 목록 만들기 첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Na code-masterjung.tistory.com 앞써 공부한 내용(설치 및 할일목록 만들기)를 토대로, 내비게이션(navigation)을 공부한다. 참고 IOS 애뮬레이터 리로딩: 커맨드 + R Android 애뮬레이터 리로딩: R 두번 (키보드 입력이 한글인 상태에서는 해당 커맨드가 안먹는다.) https://reactnavigation.o..

첫 회사에서 RN으로 프로젝트를 했었으나, 사실 기억도 안나고 그 이후로 딱히 웹뷰 이외에 직접 RN을 사용하거나 코드를 작성할 일이 없어 새 실리콘 맥북에 적응도 해볼겸 공부해 본다. React-Native apple slicon mac에서 RN 프로젝트 처음부터 셋업 및 공부용 프로젝트. 설치 xcode android studio $ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 $ brew install watchman $ sudo gem install cocoapods 안드로이드 스튜디오 환경변수 설정 # zsh 사용시 $ vi ~/.zshrc # 맨 아래에 추가 # export ANDROID_HOME=$HOME/Library/Android/sd..

객체 객체는 외부에 드러나는 행위(behavior)와 행위를 지원하기 위한 상태(state)를 묶어주는 편리한 단위이다. 만약 객체가 없다고 생각해 본다면, 하나의 프로그램의 상태가 마구잡이로 섞여서 프로그램을 수정하기도 어렵고 이해하기도 어렵기 때문에 유지보수도 힘들 것이다. 하지만 객체를 사용하여 참조할 수 있는 상태의 네임스페이스가 훨씬 작아지므로, 특정 변화에 의해 상태가 어떤 영향을 받을지 분석하기 더 쉬워진다. 또한 객체의 목표 중 하나는 저장소를 관리하는 것이다. 각 객체는 조그마한 메모리를 갖고 있는 별도의 작은 컴퓨터라 볼 수 있다. 1. 객체 리터럴 가장 접하기 쉽고 일반적으로 객체를 만드는 방법이다. const person = {name: 'jacob', age: 20} 1-1. 새로..

삼항 연사자처럼 타입도 조건에 따라 타입이 달라지게 프로그래밍 할 수는 없을까? Condition Type 타입도 삼항 연산자와 유사한 방식으로 조건부 타입을 타입핑할 수 있다. T extends U ? X : Y 이것을 간단히 리뷰해 보자면, "T가 U에 할당될 수 있는지를 확인하고 이것이 참이라면 X 타입을 사용하고 그렇지 않다면 Y 타입을 사용해라"라는 의미다. 예제를 통해 확인하면 이해가 될 것이다. interface IItem { id: number; } function getItems(id?: T): T extends number ? IItem : IItem[] { if (typeof id === "number") { return { id: 1 } as any; } return [{ id: 1..

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴이다. 싱글톤 패턴이 유용했는지 아닌지에 대한 논란은 계속 있어왔으니, 다른 글을 참고하면 좋을 거 같다. 일단 어떻게 만들면 좋을지 간단하게 만들어 보자. Object literal 이 자체로는 유용하진 않지만 객체 리터럴로 간단하게 만들 수 있다. var Person = { name: 'jacob', age: 30, greeting: function () { return `Hi! ${this.name}`; }, }; 유용하지 않은 이유는 이 코드가 불변성을 제공하지 않기 때문에 언제든지 재정의될 수 있기 때문이다. 조금만 더 개선해 보자. const Person = { name: 'jacob', age: 30, greetin..

기본적인 타입 가드 방법 타입스크립트를 사용하다 보면 커스텀한 타입을 만들고, 그것들을 조합해 하나의 유니온 타입으로 만들어 사용하는 경우가 많다. 그런데 그 다음에 어떻게 타입을 좁혀야 할지(type narrow)를 몰라 타입 캐스팅을 해버리는 경우를 코드 리뷰를 하다보면 종종 볼 수 있다. 어떻게 이를 해결할 수 있을까? typeof 타입 축소를 하는 가장 기본적인 방법이다. 단, 런타임에 값에 유형에 대한 가장 기본적인 정보(타입스크립트 내장 타입)만 제공할 수 있다. ※ "string:", "number", "bigint", "boolean", "symbol", "undefined", "object", "function" function print(char: string | string[] | n..

처음에 개발을 시작했을때는 자바스크립트만 배웠지만, 운이 좋게도(?) 첫 회사를 입사하고 부터는 줄곧 타입스크립트만 사용하고 있다. 물론 지금 회사는 기존 모든 프로젝트는 자바스크립트를 사용해서 타입스크립트로 전환중이긴 하다. 그래서 타입스크립트에 대한 간단한 내용과 타입스크립트를 중간에 도입하면서 겪은 내용에 대해 기록해 본다. 왜 타입스크립트를 써야하는가? 이유는 자바스크립트가 동적 프로그래밍 언어이기 때문이다. 동적 프로그래밍 언어는 런타임시 변수의 타입이 결정되기 때문에, 런타임 중 변수의 타입이 결정되면서 생기는 버그와 에러를 자바스크립트를 실행해 보지 않으면 알 수가 없다. 그래서 나온게 대안으로 나온게 flow와 typescript이다. ‌ Flow vs Typescript flow는 페이스..

아직 블로그를 옮길지 말지 확실히 정하진 않았지만, 개인적으로 UI가 깃북이 더 마음에 들어 깃북으로 보시는걸 추천드립니다. CSR vs SSR vs SSG 웹 페이지를 렌더링하는 방식에는 크게 클라이언트 사이드 렌더링과 서버 사이드 렌더링이 있다. 이 둘의 차이점을 살펴보며, 더 나아가 다른 방법에 대해서도 찾아보자. ajdkfl6445.gitbook.io Client Side Rendering (CSR) 말 그대로 클라이언트(브라우저)에서 웹 페이지를 렌더링하는 것이다. 모든 로직, 데이터 가져오기, 템플릿, 라우팅은 서버가 아닌 모두 클리이언트에서 처리된다. ‌ CSR의 경우 자바스크립트 번들의 크기의 영향을 많이 받기 때문에 적극적인 코드 분할(code splitting)을 고려해야 하며, "필요..

Modern Browser 흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다. Modern JavaScript 모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다. Classes (ES2015) Arrow functions (ES2015) ..