본문 바로가기

분류 전체보기64

0043. TypeScript 공부하기3 - 구조적/명목적 타입 시스템, 타입 별칭, 인덱스 시그니처, 열거형 타입(enum) 섹션 2. 타입스크립트 기본 4강. 객체 객체 리터럴 타입 : { }를 이용하여 객체의 타입을 정의하는 방식 user.id에 마우스를 올려보면 property 타입에 id가 number로 나타나는 것을 볼 수 있다. 1) 구조적 타입 시스템 타입스크립트에서는 Object 같은 이런 단순한 이름으로 Type을 정의하는 것이 아니라, 이 객체를 이루는 프로퍼티나 매소드가 어떻게 생겼는지 구조를 기준으로 타입을 정의한다. 프로퍼티를 기준으로 타입을 결정하는 시스템 = Property Based Type System 타입스크립트 2) 명목적 타입 시스템 이름만으로 타입을 정의하는 것 구조적 타입 시스템과 반대의 개념 자바스크립트 3) 선택적 프로퍼티(Optional Property) id를 모르면 안 적어도 되.. 2024. 1. 22.
0042. TypeScript 공부하기2 - 원시타입, 리터럴타입, 기본타입, 배열과 튜플, 터미널 명령어 섹션 2. 타입스크립트 기본 1강. 기본타입 기본 타입 : 타입스크립트가 자체적으로 제공하는 타입 node.js 초기화 명령어 : npm init ▶ 이때 git도 초기화되는 것 같았다. 무지성으로 엔터만 치다가 읽어보니 git 관련 정보가 있었다. 타입 정보를 제공하는 typesnode 패키지 설치 명령어 : npm i @types/node package.json에 @types/node가 추가된 것을 확인할 수 있다. 그런데, 강사분 폴더를 보니 Section2 폴더에 바로 추가를 하셨다. 즉, 터미널을 이동해서 Section2 안에 package.json파일과 tsconfig.json 파일을 넣어야 한다. 그러기 위해서는 터미널 이동 명령어를 알아야 한다. cd 이동경로 : 이동경로로 디렉토리 이동 .. 2024. 1. 22.
0041. TypeScript 공부하기1 - 타입스크립트 개론, 동작 원리, 컴파일러 옵션 설정하기(Feat. 한입 크기로 잘라먹는 타입스크립트) 필자가 자꾸 강의를 왔다 갔다 해서 독자분들이 헷갈리실지 모르겠다. 하지만, 듣다 보면 필요한 것이 생겨서 어쩔 수가 없다. 누가 처음부터 짜주는 코스를 따라가는 것이 아니라, 필요한 것을 찾아가다 보니 발생하는 시행착오 같은 상황이다. 필자가 다 듣고 정리하려고 한다. 저도 이러고싶지 않았습니다.. 이번에 들을 인프런 강의이다. 강의제목 : 안 입 크기로 잘라먹는 타입스크립트(OneBite TypeScript) 1/4 정도 들은 의견으로는 강사분이 설명을 잘하신다. 강의가 전체적으로 깔끔해서 매우 좋았다. 섹션 1. 타입스크립트 개론 1강. 타입스크립트를 소개합니다. 1) TypeScript 2012년 오픈소스로 공개 타입스크립트 = 자바스크립트의 확장판 자바스크립트를 더 안전하게 사용할 수 있도록 ".. 2024. 1. 19.
0040. 실전 FE 개발 배우기3 - 데브메뉴, Flipper, 앱 이름 바꾸기, 리액트 네비게이션(Feat. 시작하자마자 끝) 9강. 데브메뉴와 Flipper 1) 데브메뉴 그동안 위의 화면에서는 a 단축키(run on Android)밖에 쓰지 않았었다. 하지만 d와 r도 있다. r - reload app인데, 새로고침 느낌이다. 뭐가 리로드 됐는지는 모르겠는데 어쨌든 새로고침이 되었다. 서버가 켜진 터미널에서 d를 누르면 개발자 메뉴가 나온다. 2) Flipper 기본 React Native의 디버거를 쓰지 않고 페이스북이 만든 모바일앱 디버거인 Flipper를 씀 리액트 네이티브와 호환이 잘된다. https://fbflipper.com/ Extensible mobile app debugger | Flipper Tools Mobile development Flipper aims to be your number one compa.. 2024. 1. 19.
0039. 실전 FE 개발 배우기2 - 환경설정하기 마무리, 코드분석 (Feat. 이게 왜 되지..?) 섹션 0. 리액트 네이티브 시작! 6강. 프로젝트 시작하기 기본 폴더 : C:\Users\사용자 실행 : npm i -g react-native - 리액트 네이티브의 전역 설치 실행 : npx react-native init FoodDeliveryApp 설치 후에 ls 명령어 입력 후 FoodDeliveryApp 뜨는지 확인 작업 폴더가 여러 개라면 간단하게 추가할 수 있다. 좌측의 Workspace에서 우클릭 후 Add Folder to Workspace... 를 클릭하면 된다. 그러면 위처럼 폴더가 추가된 것을 확인할 수 있다. Commit 해서 Girhub에 올릴 수 있는 칸도 어려 갈래로 나눠진다. 문제는 지금 npm run android가 안된다는 것이다. 많은 검색을 통해 느낀 건, 지금 저 .. 2024. 1. 16.
0038. 실전 FE 개발 배우기1 - 리액트, 윈도우-안드로이드 환경 설정하기(Feat. 안드로이드 스튜디오) 이번에 필자가 듣는 강의는 이거다. 인프런의 배달앱 클론코딩 [with React Native]이다. 섹션 0. 강의 소개 1강. 리액트 네이티브 시작하기 React Native Learn once, Write anywhere : 한번 배워서 여러 군데 써먹어라! Expo CLI vs React Native CLI - React Native CLI 추천 2강. 에러질문법 라이브러리, 프레임워크를 끌어다 쓰다 에러가 나면 어디서 에러가 났는지 찾기가 어려운 경우가 많다. 그래서 질문이 굉장히 중요한데 질문을 하는 기본이 안되어 있는 경우가 많다. 이런 질문법으로는 스택오버플로우 같이 엄격한 곳에서 질문을 제대로 하지 않으면 엄청난 비난과 글삭제가 될 것이다. 아래는 질문을 잘하는 법이다. 에러를 질문하기 .. 2024. 1. 11.
0037. Front-end 공부하기 : 중간점검(강의 수강 순서, 아쉬운 점 등) 지금까지 수강한 강의들과 수강할 강의들을 살펴보고 얼마나 배웠는지, 얼마나 배울 것이 남았는지를 확인해보려고 한다. 그리고 배우는 순서가 생각보다 중요하기 때문에 중간에 계속 체크하는 것이 좋을 듯싶다. 아래의 강의들은 모두 인프런의 강의들이다. 1. 현재까지 수강한 강의 1) 처음 만난 리액트(62강, 5시간 15분) 처음 만났기 때문에 수강하는데 매우 오래 걸렸다. 기본적인 자바스크립트에 대한 이해가 없으면 미리 JS 강의를 듣고 오는 것을 추천한다. 그래도 모르는 상태에서라도 코드를 쳐보고 실습해 보는 것이 좋았던 강의이다. 2) 생활코딩 - 자바스크립트(JavaScript) 기본(102강, 14시간 2분) 강의가 길고 상세한 것은 좋았다. 하지만 버전이 너무 옛날 버전(10년 전 강의)이라서 과거.. 2024. 1. 11.
0036. JavaScript 공부하기 11 - 원시 데이터 타입, 레퍼 객체, 복제, 참조 섹션 25. 객체지향 - 데이터 타입 1강. 원시 데이터 타입과 객체 원시(기본) 데이터 타입 vs 객체(참조) 데이터 타입 원시 데이터 타입(primitive type) 숫자 → Number 문자열 → String 불리언(true/false) → Boolean null → X undefined → X 이게 아니면 모두 객체 데이터 타입, 참조 데이터 타입이다. 2강. 레퍼 객체 객체 접근 연산자(Object access operator) - str.length 에서 "."으로 점찍은 것을 말한다. 자바스크립트에서 문자열을 객체처럼 사용하려고 하면 자바스크립트가 그것을 객체처럼 만들어 버린다. 래퍼 객체(wrapper object) 원시데이터 타입이 있을 때, 원시 데이터 타입을 감싸주는 객체 원시데이터.. 2024. 1. 9.
0035. JavaScript 공부하기10 - 객체지향 상속, prototype, 표준 내장 객체, Object 섹션 22. 객체지향 - 상속 1강. 상속이란? 상속(inheritance) 객체지향에서 아주 중요한 개념 객체의 로직을 그대로 물려받는 또 다른 객체를 만드는 기능을 의미한다. 다만, 그대로 물려받는 것이 아니라 기존 로직을 수정하고 변경한 파생된 새로운 객체를 만들게 해 준다. 로직 재활용 가능 //original function Person(name) { this.name = name; this.introduce = function() { return 'My name is ' +this.name; } } var p1 = new Person('innovation'); document.write(p1.introduce()+" "); function Person(name) { this.name = nam.. 2024. 1. 9.
0034. JavaScript 공부하기9 - 객체지향 프로그래밍, 추상화, 부품화, 생성자와 new, 전역객체, apply와 this 섹션 18. 객체지향 - 객체지향 프로그래밍 소개 1강. 객체지향 프로그래밍 오리엔테이션 1) 객체지향 프로그래밍(OOP, Object-Oriented Programming) 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것 2) 핵심 : 객체(Object) 객체는 레고블록처럼 객체+객체로 조립해서 프로그램을 만들 수 있다. 이런 기법을 OOP라고 한다. 프로그램이 커지면서 발생하는 막장을 해결하기 위해 Grouping, Categorizing이 쓰이는데, 그룹핑된 하나하나의 단위들을 객체라고 생각하면 된다. 객체끼리 구획화시키고 분류해서 생각한다. 재활용성에 객체가 기여한다. 여기서 쓰던걸 저기에 쓰니 여러 문제가 발생하는.. 2024. 1. 8.

티스토리툴바