NOW OR NEVER

Retrofit RESTful API를 쉽게 사용할 수 있도록 도와주는 라이브러리 Retrofit 객체 생성(build) 방법 val retrofit = Retrofit.Builder() .baseUrl("API URL") // JSON을 객체로 변환하기 위해 Gson 컨버터 추가 .addConverterFactory(GsonConverterFactory.create()) // Retrofit 객체 생성 .build() Annotation api 호출하는 것을 Retrofit 어노테이션을 이용하여 interface로 만들어 사용하면 더 간편하게 호출할 수 있다. @GET, @POST, @PUT, @DELETE, @PATCH HTTP 요청 메서드(GET, POST, PUT, DELETE, PATCH)를 정..

Google Map API (Mac 기준) 1. https://console.cloud.google.com/welcome 접속 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. 프로젝트 만들기 3. 사용 설정한 api 및 서비스 - api 및 서비스 사용 설정 - Maps SDK for Android 4. api 키 제한 설정 안드로이드 스튜디오 터미널에서 SHA-1 인증서 디지털 지문 얻기 window : gradlew signingReport 입력 후 ctrl + enter mac : keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass..

async & await 개념 비동기의 핵심 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다. promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들 promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. 기존에 존재하는 pr..

Array APIs 1. join arrayName.join('seperator'); join(separator?: string): string; 배열에 있는 모든 아이템들을 문자를 통해서 각각 구분자(seperator)를 넣어 더해서 seperator string으로 return ? 뜻은 전달해도 되고 안해도 된다는 뜻, 즉 seperator은 넣어도 되고 안넣어도 되는데 안넣게 되면 구분자는 ,로 들어가게 됨 2. split arrayName.split('seperator', limit); split(separator: string | RegExp, limit?: number): string[]; seperator과 limit 총 두가지의 parameter을 받음 seperator 필수 작성 stri..

Array 배열 자료 구조란? 일상생활에서 비슷한 것들만 모아서 각 바구니에 모아놓는 것처럼 프로그래밍 언어에서도 비슷한 종류의 데이터들을 묶어서 한 곳에다가 보관해놓는 것들을 자료구조라고 한다. 자료구조에는 어떤 방식으로, 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다. object와 자료구조의 차이점 object는 서로 연관된 특징과 또는 행동들을 묶어놓는 것을 말한다. 자료구조는 비슷한 type의 objec들을 묶어놓는 것을 말한다. js가 아닌 다른 언어에서는 보통 자료구조에는 동일한 type의 object를 담을 수만 있다. 즉 type이 있는 언어에서는 동일한 type의 데이터만 담을 수 있다. js는 dynamically typed language이기에 type이 동적으..

console node js에서도 실행 가능하고 web api인 console api에서도 실행 가능 많이 쓰이는 문법이라 거의 web api 뿐만아니라 프레임워크 등에서도 다 실행가능 Devtool console js 작성해서 실행 가능 간단한 js기능 구현 가능 source 디버깅시 유용 작성한 코드 확인 가능 break point 를 걸어서 디버깅할 때도 유용하게 쓰임 network network가 어떻게 발생하는지, 얼마나 많은 사이즈들의 데이터가 오고가는지 검사 가능 performance 분석, memory 분석 등 굉장히 다양한 것들을 볼 수 있다. 'use strict'; js를 strict 모드로 개발하기 위한 것 순수 vanilla js 작성시 js 최상단에 'use strict'; 정의..

API(Application Programming Interface) 개념 service 내부의 구현사항을 잘 숨겨두고 외부에서 사용하는 사람이 필요한 것만 노출해둔 이것을 인터페이스, API라 부른다. 연도별 API의 역사 API의 시초 : 1964년 거대한 컴퓨터를 쓸 때부터 등장한 단어로 하드웨어 독립성(Hardware Independence)을 위해 사용됨. 예를 들어 서로 다른 하드웨어 부품마다 개발자가 일일이 프로그래밍을 작성하기 보다는 HAL(Hardware Abstraction layer)라는 하드웨어 추상화 계층을 통해 한번만 display 함수를 이용하면 각기 다른 모니터에 출력을 하거나 각기 다른 하드웨어 부품에 작성을 하는 이런 일들을 쉽게 해주는 것이 생긴 것이다. 1980년대 중..

Typescript redux middleware redux-thunk yarn add axios redux-thunk typescript 지원되서 따로 @types로 설치 안해도 됨 quicktype(https://app.quicktype.io/) 받아오는 json 결과물 무슨 타입인지 확인하는 법 json 결과물 복사해서 입력하면 typescript형태로 변환 가능 AxiosError : axios가 에러났을 때 사용하는 에러 객체의 타입 createAsyncAction : 비동기 작업시 사용하기 편한 액션 생성 함수 export const AsyncAction이름= createAsyncAction( 액션이름들 )(); ThunkAction keyof S : 상태가 지니고 있는 key github a..

리액트 API 연동 redux는 API 연동 필수적인 요소가 아니다. API 연동 기본 npx create-react-app > yarn add axios axios 라이브러리 : rest api를 요청하게 될 때 프로미스 기반으로 처리할 수 있게 해주는 라이브러리(rest api 쉽게 요청 가능) import axios from ‘axios’; 요청 방법 : axios.HTTP메서드(요청 api 주소와 (정보)) ; rest api : 클라이언트와 서버가 소통하는 방식 중 하나(HTTP 메서드(GET, POST, PUT, DELETE)를 통해 구분) HTTP 메서드 : GET(데이터 조회), POST(데이터 등록), PUT(데이터 수정), DELETE(데이터 제거) 컴포넌트에서 api 요청하는 방법 a..

리액트 컴포넌트 스타일링 Styled-components Styled-components 라이브러리는 CSS in JS(자바스크립트 안에 CSS 작성)와 관련된 것이다. CSS in JS 라이브러리 중 가장 인기 많음, emotion도 유명함 Tagged Template Literal 문법 속성을 활용해서 구현이 되어 있다. 설치 : yarn add styled-components style 적용하고자 하는 파일 상단에 import styled from "styled-components"; 작성 확장 프로그램 vs code-styled-components 설치시 색상 지원, 자동완성지원 사용 시 ${props => props.컴포넌트props이름 && csswidth : 10rem; height : 10..