전체 글176

• 

  [Expo 44] 최신 Expo 환경에서 복수 이미지 업로드하는 방법 서론 대상독자 React Native Expo 개발 시, 이미지 업로드를 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 복수 이미지 업로드를 구현하는 방법에 대해서 알아보겠습니다. expo-image-picker에선 하나의 이미지만 선택할 수 있으므로, 한 번에 여러 이미지들을 업로드 할 수 있도록 프로그램을 작성하겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. 라이브러리 설치하기 expo install expo-image-picker expo-media-library expo-image-picker와 expo-media-library 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중.. Framework/React & RN 2022. 4. 2.

• 

  React Native/Typescript 환경에서 react-navigation을 활용하여 라우팅하는방법 서론 대상독자 타입스크립트로 RN 개발 시, react-navigation을 활용하여 라우팅하고 싶은 개발자 학습목표 @react-navigation에는 bottom-tabs, stack(native-stack), 드로어(drawer) 이렇게 총 3가지 종류의 네비게이터가 존재합니다. 오늘은 react-navigation을 활용하여 바텀 탭과 스택 네비게이팅에 대해서 알아보도록 하겠습니다. 기본적으로 리액트의 네비게이팅을 위해 쓰이는 React Router와 유사한 구조인데요, 바로 살펴보겠습니다. 본론 모듈 설치하기 yarn add @react-navigation/bottom-tabs @react-navigation/native @react-navigation/native-stack @react-nav.. Framework/React & RN 2022. 4. 2.

• 

  [Expo 44] 최신 Expo 환경에서 구글 로그인 구현하는 방법 서론 대상독자 React Native Expo 개발 시, 구글 로그인을 구현하고 싶은 개발자 학습목표 최신 Expo 환경(Expo 44)에서 구글 로그인을 구현하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. expo-auth-session 설치하기 expo install expo-auth-session expo-random expo-auth-session와 expo-random 라이브러리를 설치해줍니다. expo 모듈 같은 경우에는 expo 버젼에 따라 패키지 사용방법이 상이하므로, expo cli로 설치해주는 것이 중요합니다. 그럼 자동으로 expo에서 앱의 expo 버젼에 맞게 패키지를 설치해줍니다. 코드 작성하기 공식 문서에서 예제 코드를 불러와 사용하겠습니다. impo.. Framework/React & RN 2022. 4. 1.

• 

  React Native/Typescript 환경에서 Styled-component를 사용하는 방법 서론 대상독자 RN 개발 시, Styled-component를 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 Styled-component를 설정하는 방법에 대해서 알아보겠습니다. 본론 라이브러리 설치하기 yarn add styled-components; yarn add -D @types/styled-components @types/styled-components-react-native 리액트에서 사용할 때와 유일한 차이점은 @types/styled-components-react-native 패키지를 추가로 설치해준다는 점입니다. 실제로 사용해보기 테스트를 위해 버튼 컴포넌트를 스타일드 컴포넌트를 활용하여, 스타일링 해보도록 하겠습니다. 잘 적용되는 것을 보실 수 있을 겁니다.. Framework/React & RN 2022. 4. 1.

• 

  React Native 환경에서 svg 파일 불러오는 방법 서론 대상독자 RN 개발 시, svg 파일을 사용하고 싶은 개발자 학습목표 오늘은 RN Expo 환경에서 svg 파일을 불러오는 방법에 대해서 알아보겠습니다. 본론 react-native-svg와 react-native-svg-transformer 설치하기 yarn add react-native-svg react-native-svg-transformer react-native-svg와 react-native-svg-transformer란 라이브러리를 설치해줍니다. metro.config.js 수정하기 그런 뒤, metro.config.js 파일에서 아래와 같이 설정해줍니다. const { getDefaultConfig } = require("expo/metro-config"); module.exports.. Framework/React & RN 2022. 4. 1.

• 

  React Native/Typescript 환경에서 절대경로 설정하는 방법 서론 대상독자 RN 개발 시, 절대경로 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 절대 경로를 설정하는 방법에 대해서 알아보겠습니다. 본론 babel-plugin-module-resolver 설치하기 yarn add -D babel-plugin-module-resolver babel-plugn-module-resolver란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. 이 때, baseUrl로 들어가는 경로에 절대경로로 설정해주고 싶은 값이 들어가도록 설정해주는 것이 중요합니다. module.exports = function () { return { presets: ["babe.. Language/Typescript 2022. 4. 1.

• 

  React Native/Typescript 환경에서 데코레이터 함수 사용하는 방법 서론 대상독자 타입스크립트 개발 시, 데코레이터 함수를 사용하고 싶은 개발자 학습목표 타입스크립트 환경에서 데코레이터 함수를 설정하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. babel과 babel plugin 설치하기 yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/plugin-proposal-decorators란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. module.exports = function () { return { ..., plugins: [ ["@babel/plugin-proposal-deco.. Language/Typescript 2022. 4. 1.

• 

  [React] 함수형 컴포넌트와 클래스 컴포넌트의 차이점 서론 오늘은 리액트를 배운 사람이라면 한 번쯤은 묻게 되는 기본적인 내용에 관해서 정리해보려고 합니다. 지금은 함수형 컴포넌트와 Hooks로 리액트 컴포넌트를 작성하는 게 일반적이지만, Hook가 정식으로 추가되기 전인 React 버전 16.8 (2019년 2월 출시) 이전에는 클래스형 컴포넌트를 작성하는 것이 일반적이었습니다. 또 오픈소스 프로젝트 중 여전히 클래스형 컴포넌트로 작성된 경우가 더러 있습니다. 따라서 오늘은 그 둘의 차이점에 대해서 알아보고, 리액트에서 왜 Hooks로 작성하는 것을 권장하는 지 알아보도록 하겠습니다. 이 차이는 클래스와 함수의 차이에서 비롯됩니다. 함수형에서는 this가 가리키는 undefined인 반면, 클래스형에서는 해당 객체를 가리킵니다. 문제는 이 this가 컴포.. Framework/React & RN 2022. 3. 30.

• 

  [Javascript] 자바스크립트 함수와 클래스의 this binding 서론 오늘은 자바스크립트에서의 함수와 클래스의 this binding의 차이점에 대해서 알아보도록 하겠습니다. 차이점을 알기 위해선, this가 동작하는 방식에 관해 이해해야 합니다. 본론 함수에서의 this 함수에서의 this는 실행환경(런타임)과 함수가 선언된 방식에 따라서 다릅니다. 먼저 런타임이 node.js에서 확인해보도록 하겠습니다. 함수 선언식과 함수 표현식으로 선언된 함수 안에서의 this는 global 객체를 가리킵니다. 반면, 화살표 함수로 선언된 this는 module.exports를 가리킵니다. 그 까닭은 후자에선 상위 스코프의 this를 가리키는데, 전역 스코프에서의 this가 가리키는 것이 module.exports 이기 때문입니다. function printThis() { co.. Language/JS(Node.js) 2022. 3. 29.

• 

  [자바스크립트] map 함수에서 비동기 콜백 처리하기 학습목표 Promise.all을 활용하여, 비동기 콜백함수의 응답을 처리할 수 있다. 본론 흔히 배열을 순회해, 원하는 형태의 값으로 변환할 때 우리는 Array.prototype.map 함수를 사용합니다. 문제는 map 함수를 순회하는 과정에서 네트워크 요청을 거쳐야 한다면 일반 콜백함수가 아니라, 비동기 콜백을 처리해야 할 것입니다. 이 때, 비동기 콜백 함수가 실행된 결괏값을 리턴 받으려면 어떻게 해야 할까요? Promise 대신 말이죠. 정답은 Promise.all을 사용해주면 됩니다. Promise.all(iterable) Promise.all 메서드는 파라미터로 순회 가능한 객체를 전달 받을 수 있습니다. 이 경우에는 map 함수의 리턴 값이 되는 객체가 되겠죠. 리턴 값은 요청이 성공적일 때.. Language/JS(Node.js) 2022. 3. 28.

• 

  [예외처리] Python 에러 종류와 예외처리 서론 학습목표 파이썬에서의 예외처리 방법에 대해서 학습한다. 파이썬에는 어떤 종류의 에러 객체들이 알고 활용할 수 있다. 본론 오늘은 간단하게 Python에서의 예외처리와 자주 발생되는 에러의 종류에 대해서 정리해보도록 합니다. 대표적인 에러 종류 8가지 IndentationError SyntaxError IndexError ValueError NameError TypeError AttributeError KeyError IndentationError 이 에러는 정확하게 들여쓰지 않으면 발생됩니다. 파이썬에서는 들여쓰기로 스코프를 판단하는데, 아래와 같이 올바르게 들여쓰기를 처리하지 않으면 에러가 발생됩니다. # 잘못된 들여쓰기의 예 def introduce_name(name): print(name) >.. Language/Python 2022. 3. 27.

• 

  [Python] 코딩테스트를 위한 입출력 초간단 정리 서론 오늘은 코딩테스트 문제 풀이를 위해서 빼놓을 수 없는 입출력에 대해 알아보도록 하겠습니다. 학습목표 파이썬 입출력 함수를 통해, 입력 값을 간단하게 받아 올 수 있다. map 함수를 사용하여, 원하는 형태로 데이터를 변환할 수 있다. 본론 입력함수 : input() input 함수를 통해 입력 값을 받아올 수 있습니다. a = input() >>> "안녕하세요 반갑습니다" print(a) // 안녕하세요 반갑습니다공백을 기준으로 나누기 : split() input()의 리턴값은 문자열입니다. 따라서 이번엔 문자열 내장함수인 split을 통해, 주어진 문자열을 공백을 기준으로 나눌 수 있습니다. 반환값은 리스트 형태입니다. b = input().split() >>>> "3 5 6 7" print(b).. Language/Python 2022. 2. 23.