분류 전체보기

타입스크립트란? - 자바스크립트에 타입을 추가해서 확장시킨 것이다. - 자바스크립트를 이해함으로써 코드를 실행하기 전 에러를 잡거나 고치는 데 시간을 절약해준다. - 어떤 브라우저나 어떤 운영체제 어떤 실행환경이든 가능하며 완전히 오픈소스다. 타입스크립트는 "Compiled Language" 자바스크립트는 "Interpreted Language" 타입스크립트는 컴파일 타임에서 미리 에러를 찾아 고칠 수 있기 때문에 편리하다. 타입스크립트에서 바로 해석해서 실행시켜주는 자바스크립트로 컴파일러가 변경해준다! ✅ 자바스크립트 Type vs 타입스크립트 Type 자바스크립트는 Dynamic (Types resolved at runtime) 개발할 땐 알 수 없고 런타임에 도달해야만 잘못되었는지 알 수 있다! 타..

Firebase를 사용해서 무엇을 할 수 있을까? Firebase는 처음엔 데이터베이스였지만 지금은 백엔드 기능을 포괄한다. app이 필요로 하는 많은 것들을 해줄 수 있다. 즉, 데이터베이스 관련 코드 없이 데이터베이스를 사용할 수 있게 해 준다. 그러나 데이터베이스나 사용자나 서버 전부 구글로부터 빌려서 쓰기 때문에 아이디어를 테스트할 때만 사용하는 것이 좋다고 한다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase 초기 설정 ✅ Firebase 설치 사이트에 들어가서 앱을 등록하고 프로젝트에 firebase를 설치한다. 그리고 Firebase SDK를 추가해준다..

React.Suspense란? Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다. 기본적으로 리액트는 JSX 코드 안에 들어있는 모든 컴포넌트를 즉시 호출하여 바로 랜더링을 진행한다. 예를 들어, 리액트는 다음과 같이 컴포넌트가 포함된 JSX 코드를 렌더링할 때, Event 함수를 바로 호출한다. 그러나 아래처럼 Suspense로 감싸주면 컴포넌트의 랜더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있다. ✅ useState를 통한 Loading 이전까지는 늘 이렇게 비동기 작업을 수행하기 이전에 loading이라는 상태값을..

스켈레톤(Skeleton) 이란? 웹 페이지에서 로드 시간이 짧은 것처럼 보이게 하는 몇 가지 방법들이 있다. 스켈레톤은 그 방법 중에 하나로서 데이터가 로드되기 전에 콘텐츠의 자리비움(placholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI다. 그래서 오늘은 프로젝트를 로딩할 때 몇 초 동안 화면이 비어있는 것보단 스켈레톤을 보여주도록 설정해보려고 한다. App.tsx loading 상태를 생성하고 useEffect와 setTimeout을 이용해 loading이 2초 동안 되게 구현했다. loading 중이면 Placeholder 즉, 스켈레톤 컴포넌트를 렌더링하고 loading 끝나면 Item 컴포넌트를 렌더링한다. import React, { useEffect, ..

Swiper를 적용하려고 라이브러리를 찾아보다 Effect coverflow가 맘에 들어 선택하게 됐다. Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 사용 방법 공식문서에 나온 대로 따라해봤다. 먼저, swiper 를 설치해준다. npm i swiper 다음으로 import를 해줬는데 모듈을 찾을 수 없다고 오류가 떴다. package 파일을 찾아보니 현재 내 프로젝트 swiper 버전은 6.8.4였다. import { Swiper, SwiperSlide } from "swiper/react";..

📝 Standard Mission 소셜 로그인 한 가지 이상 구현해보기 - ex. 카카오, 네이버, 구글… - 단순 화면 전환 뿐만 아니라 이름, 이메일 값 가져와서 TextView에 띄우기 - SDK 사용 가능 ✅ 프로젝트 초기 설정 우선 프로젝트를 하나 생성하고 build.gradle(project) 파일 대신 settings.gradle 파일에 Android SDK 레파지토리(Repository)를 설정한다. (이유는 아래 블로그를 참고) [안드로이드] Android studio Arctic Fox 버전 이후 gradle allprojects 추가방법 안드로이드 스튜디오 버전을 업데이트하고 신규 프로젝트파일을 생성했습니다. 라이브러리 추가가 필요해서 jcenter와 jitpack.io 레포지토리 등..

📌 학습목표 - 서버에 대해 설명할 수 있다. - Server와 Client의 구조를 설명할 수 있다. - 서버와의 통신에 대해 설명할 수 있다. - XML과 JSON에 대해 설명할 수 있다. 📝 Standard Mission Retrofit2를 이용하여 앱에 OpenAPI 3개 이상 연동하기 - 사용 API는 자유, SDK 사용하지 않기 - JSON 형태의 OpenAPI 사용 권장 - 로그에서 받아온 값 출력하기 - 추천 사이트 : 공공데이터포털 (open.go.kr) 1️⃣ 영화진흥위원회 오픈 API 영화진흥위원회 오픈 API 중에 일일 박스오피스 API를 가져와볼 것이다. 영화진흥위원회 오픈API 제공서비스 영화관입장권통합전산망이 제공하는 오픈API서비스 모음입니다. 사용 가능한 서비스를 확인하고 ..

Retrofit2 설치 retrofit github에 들어가 코드를 복사해 안드로이드 스튜디오에 다운로드를 해준다. dependencies { implementation 'com.squareup.retrofit2:retrofit:2.9.0' } GitHub - square/retrofit: A type-safe HTTP client for Android and the JVM A type-safe HTTP client for Android and the JVM. Contribute to square/retrofit development by creating an account on GitHub. github.com 다음으로 안드로이드는 기본적으로 앱에서 따로 권한을 받지 않는 이상 통신이 안 된다. 그래서..

사용자가 로그인을 하면, 서버에서 해당 계정 정보를 확인해 유효시간이 있는 JWT 토큰을 발급한다. 해당 사용자는 유효시간이 끝날 때까지, 인증이 필요한 요청마다 해당 JWT 토큰을 http 헤더에 넣어 서버에 요청을 한다. 서버에서는 해당 JWT 토큰이 유효한지 확인하고 정보를 전달한다. 1. 사용자가 username, password로 로그인을 한다. 2. 서버는 해당 계정 정보를 읽어 사용자가 있는지 확인을 하고, JWT 토큰을 발급한다. 이때, JWT 토큰에 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 넣고 토큰의 유효 기간을 설정한다. 3. 서버는 secret_key를 이용해 Access Token을 발급하고, 해당 JWT 토큰을 브라우저에게 전달한다. 4. 사용자는 ..

JWT 토큰을 어디에 저장해야 할까? JWT 인증은 서버가 상태를 갖지 않아 클라이언트 측에서 토큰을 저장하고 있어야 한다. 우리가 사용할 수 있는 저장소는 쿠키, 세션 스토리지, 로컬 스토리지가 있다. (기존에는 쿠키만 존재했으나 HTML5 들어 저장소 종류가 되었다.) 이 중 어떤 저장소에 JWT토큰을 저장해야 할까라는 고민을 시작으로 웹 저장소를 선택할 때 고려해야 할 점들은 무엇이고 이들의 차이점은 무엇인지 정리해보았다! 고려해야 할 점 ✅ 얼마나 오래 보관할 것인가 저장소별 휘발성에 차이가 있다. - 쿠키는 만료일을 지정하게 되어있고 만료일이 경과하면 삭제된다. - 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거된다. 자동 로그인 등 브라우저를 열었을 때도 유지해야 하는 데이터는 보관하기..