0. Props & State ? React Native는 React에서 파생되었기 때문에 대부분의 개념이 React와 동일하다. Props와 State 역시 리액트의 핵심 개념이다. Props 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 전달받은 데이터는 자식 컴포넌트에서 변경이 불가능하다. State 컴포넌트 안에서 유동적으로 데이터를 다룰 때 사용하며, 컴포넌트 안에서 데이터를 변경할 수 있다. 즉, State는 컴포넌트의 상태를 나타낸다. 1. 프로젝트 준비 react-native init Counter --template react-native-template-typescript React Native CLI를 사용해서 타입스크립트용 프로젝트를 생성하였다. npm install --..

0. 들어가며 들어가기에 앞서 개발환경 구성은 앞선 React Native 개발환경 구성 부분을 확인하시길 바랍니다. 1. 프로젝트 생성 React Native CLI를 사용해서 React Native 프로젝트를 생성한다. react-native init FirstApp 명령어를 사용하면 자동으로 최신 리액트 네이티브 버전으로 프로젝트가 생성된다. 하지만, 이번 버전을 사용하거나, 특정 프로젝트와 동일한 버전으로 프로젝트를 생성하고 싶은 경우에는 react-native init -version 0.59.10 FirstApp -version 옵션을 사용하면 지정할 수 있다. 프로젝트 구성이 다 된 경우에 IOS의 경우 yarn ios // or react-native run-ios 명령어를 통해서 프로젝트..

온보딩 키트 부스트캠프에 합격하면 온보딩 키트라는 것을 준다고 들었다. 지난 기수는 과자를 주었다고 했는데, 본인은 바삭한 식감의 과자들을 좋아하지 않는다. 군대에 있을때도 PX에서 과자를 사본 기억이 손에 꼽을 정도.... 과자가 들어있다기엔 사이즈가 생각보다 작았다. 뭐가 들어있는지 궁금해서 바로 열어봤는데, 심플?하게 들어있었다. 먼저 앞에 있는 종이 봉투를 열어봤는데, 내용물이 생각보다 많이 있었다. 메시지와 스티커들, 플래너 그리고 문에 걸어두는 푯말? ( 쉿 ! 성장중 )이 있었다. 스티커 친구들은 나의 밋밋한 맥북에 붙일 예정이고 플래너는 아직 어떻게 사용할지 모르겠다. 이어서 뒤 하얀 천을 들어 꺼내보니 슬리퍼가 들어있었다. 과자를 먹지 않는 본인으로써는 매우 만족스러운 아이템이였다.

2차 온라인 코딩 테스트 2차는 CS문제는 없이 알고리즘 문제만 있어서 오히려 걱정이 적었다. 생각보다 까다로운 시험 응시 환경을 체크하고 3시간의 긴 시험이 시작되었다. 전반적으로 문제가 어렵다(?)고 느껴지진 않았고 1차 알고리즘 문제와 유사하다고 생각이 들었다. 문제당 약 45분 정도? 50분? 시간이 걸려서 모두 풀고 코드를 점검했다. 테스트케이스 외엔 다른 케이스가 주어지지 않아서 만든 케이스를 하나씩 넣어보면서 점검해보면서 시간을 보내다가 10분정도 일찍 시험을 종료했다. 전반적으로 시험을 치신 분들이 문제 해석에 어렵다고 말씀을 하신걸 보면 나만 그런게 아니라 난이도 자체는 쉬운 것 같다. 내심 합격이라고 생각했지만, 밖으로 표현하면 괜히 불합격할 것 같아서 조용하게 시간을 보내다가 합격 통..

들어가면서 사실 챌린지를 합격하지 않았다면 그대로 사라질 리뷰였지만, 합격을 했기 때문에 나도 한번 글을 써본다. Ho! 지원 배경 개발자로 회사를 다니면서 연차가 쌓여만 가는데, 스스로 크게 변한게 없다고 생각해서 ( 변한게 있을지도? ) 환경을 한번 바꿔보자는 생각으로 당차게 회사를 나와서 공부를 하게 된지 5개월이 흘렀다. 계획했던 기간이 있어 기간에 맞춰 공부를 계속 했지만 제대로 하고 있는지 스스로를 테스트하고 싶어서 네이버 부스트캠프에 지원을 하였다. 부스트캠프? 네이버 커넥트 재단에서 개발 역량 강화 등을 교육시켜주는 고마운 프로그램이다. 모든 과정은 무료이고, 코딩 테스트 접수시에만 1만원 응시료가 있다. AI, Web, Application 3 전형으로 나뉘어져있다. 지원 과정으로는 - ..

interface는 object 타입을 지정할 때 사용하는 키워드이다. 하지만 용도가 하나 더 있는데, class 타입을 확인하고 싶은 경우에도 interface 문법을 사용한다. 이때 추가로 필요한 게 implements 키워드이다. interface & implements class Car { model :string; price :number = 10000; constructor(a :string) { this.model = a; } } let myCar = new Car("morning"); class Car를 통해 생성되는 object들은 model과 price 속성을 가지고 있다. 근데, class가 model과 price 속성을 가지고 있는지 타입으로 확인하고 싶은 경우에 interface와..

TypeScript로 프로젝트를 진행하다 보면 d.ts 파일을 보게 된다. d.ts 파일은 타입만 저장할 수 있는 파일 형식이다. 사용하는 이유는 타입 정의만 따로 저장해서 import 하기 위해서 프로젝트에서 사용하는 타입을 쭉 정리하는 레퍼런스용으로 사용 타입만 모아서 정의하는 d.ts 파일명.d.ts라고 작성한 파일은 type 키워드, interface 같은 타입 정의만 넣을 수 있다. 함수의 경우엔 { } 중괄호 붙이는 게 불가능하고 파라미터 & return 타입만 지정 가능하다. export type Age = number; export type multuply = (x :number, y :number) => number export interface Person { name :string }..

프로젝트를 진행하다 보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import 문법으로 가져와 사용하면 되는데, 타입스크립트로 작성된 파일이 아닌, 자바스크립트로 작성된 파일이라면 타입 지정 문제로 에러가 발생할 수 있다. // data.js let a = 10; let b = { name : 'kim' } // index.js console.log(a + 1); 일반적인 경우라면 index.html 역할을 하는 곳에 두 파일을 첨부하면 된다. (index.html) // index.ts를 변환시킨 js 파일 콘솔창으로는 a + 1이 11로 잘 나오지만 타입스크립트 파일 내에서는 a가 정의되어 있지 않다는 에러가 발생한다. 타입스크립트 입장에서는 a라는 변수를 import 한 적이 없기 때문에 에..