전체 글 56

[스터디 with 실전 리액트 프로그래밍] 6편 - ES6+에서 객체와 배열

ES6+에서는 많은 자바스크립트의 기능들이 추가됐고 개선됐다. 이 중 배열과 객체에 관한 것을 알아보자. 단축 속성명 단축 속성명(shorthand property names)을 이용하면 객체를 보다 간편하게 작성할 수 있다. 객체의 속성에 간단히 변수만 적어줘도 되고, 속성값이 함수일 때, function 키워드 없이 함수명만 적어줘도 된다. 단축 속성명을 이용하면 객체를 리턴하는 함수도 간단히 만들 수 있다. // 단축 속성명 X function f(age, name) { return {age: age, name: name} } // 단축 속성명 O function f(age, name) { return {age, name} } 콘솔로 디버깅할 때도 유용하다. // 단축 속성명 X console.lo..

[스터디 with 실전 리액트 프로그래밍] 5편 - const, let, var

바쁘다는 핑계로 공부를 미루다 보니, 1장이 생각보다 늦게 끝났다... 1장에선 리액트의 기초 개념이 나왔다면, 2장에선 자바스크립트의 심화를 다룬다. 리액트가 자바스크립트 라이브러리인 만큼, 리액트 개발하는데 있어 자바스크립트의 이해는 필수적이다. 그러니 자바스크립트도 열심히 공부하자. 변수 정의 방법 자바스크립트에선 변수를 정의하는 방법이 var, const, let 세가지가 있다. 이 중 const, let은 ES6에서 새로 추가되었고, ES5까지 자바스크립트에서는 var만 이용해 변수를 정의했다. var 특징 1 - 함수 스코프 var은 함수 스코프를 가진다. 사진처럼 변수가 정의된 함수 밖에서 변수에 접근하면 참조에러가 뜬다. var은 함수 스코프이기 때문에 아래의 사진처럼 반복문에서 정의된 변..

[스터디 with 실전 리액트 프로그래밍] 4편 - 단일 페이지 어플리케이션

리액트로 만든 어플리케이션의 페이지 전환은 보통 단일 페이지 어플리케이션(single page application, SPA) 방식으로 개발한다. 전통적인 방식은 페이지 전환마다 서버에 html 파일을 요청을 하는 반면에, 단일 페이지 어플리케이션 방식은 처음에만 서버에 데이터를 요청하고 이후 라우팅은 클라이언트에서 처리한다. 이렇게 단일 페이지 어플리케이션으로 개발하면 페이지 전환 시 화면 깜빡임이 없어서 좋은 유저 경험을 제공한다. 두가지 방법으로 단일 페이지 어플리케이션을 개발해보자. 먼저 브라우저 히스토리 API를 이용해보자. 브라우저 히스토리 API History - Web API | MDN History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을..

[헬스 다이어리 앱 개발] 5편 - 절대 경로 설정하기

개발의 편의를 위해 import 방식을 상대 경로에서 절대 경로로 변경하자. 기존엔 import 할 때 아래와 같이 상대 경로로 불러왔다. import Calendar from '../Calendar'; 상대 경로의 단점은 파일 위치를 변경하면 import하는 파일들의 경로도 다 변경된다는 점이다. 바뀐 경로를 하나하나 수정하는 작업은 매우 번거롭고 복잡하다. 따라서 절대 경로로 변경해주자. babel-plugin-module-resolver 절대 경로를 사용하기 위해선 module-resolver라는 바벨 플러그인을 설치해야 한다. $ yarn add -D babel-plugin-module-resolver 설치해준뒤 babel.config.js 파일을 아래처럼 작성해준다. module.exports ..

[헬스 다이어리 앱 개발] 4편 - 달력 만들기

홈 화면에 들어갈 달력을 만들어보자. 달력을 만드는 이유는 깃허브의 잔디처럼 운동을 하면 달력에 표시를 해 동기부여를 주기 위해서다. React-Native-Calendars 달력 라이브러리는 React-Native-Calendars라는 걸 이용했다. yarn으로 설치후, 불러왔다. 달력에 넣을 기능은 1. 운동한 날짜를 표시한다. 2. 날짜를 누르면 그 날한 운동 기록을 보여준다. 날짜를 누르면 해당 날의 다이어리 스키린으로 이동하게 했다. 다음엔 본격적으로 운동 데이터를 저장해보자. 참고 자료 GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆 React Native Calendar Components 🗓️ 📆 . Co..

[헬스 다이어리 앱 개발] 3편 - React Navigation 적용하기

우리가 사용하는 앱들은 클릭이나 스크롤, 드래그 등을 통한 인터렉티브한 화면 이동을 지원한다. React Navigation를 이용하여 화면 이동을 구현해보자. Stack Navigation 적용하기 native용 react-navigation을 설치 해준다. $ yarn add @react-navigation/native $ yarn add @react-navigation/native-stack $ yarn add react-native-screens react-native-safe-area-context 앱과 웹의 화면 전환 차이점 중 하나는 앱은 화면을 단순히 이동하는 것이 아니라 새로운 화면을 스택으로 쌓는다는 점이다. 따라서 뒤로가기 버튼을 클릭하면 전 화면으로 이동한다. 유튜브 앱도 뒤로 가기..

[헬스 다이어리 앱 개발] 2편 - 로그인 화면 만들기 & React-Native-Paper 적용하기

보기 좋은 떡이 먹기도 좋다고, React-Native-Paper을 이용해 앱을 예쁘게 꾸며주고 로그인 화면을 만들어보자. React-Native-Paper 적용 Home · React Native Paper Material design for React Native callstack.github.io React-Native-Paper는 리액트 네이티브용 디자인 라이브러리다. paper에 있는 예쁜 컴포넌트들을 사용해 헬스 어플을 좀 세련되게 만들어 보자. 위의 사이트에 들어가면 친절하게 어떻게 설치하고 사용하는지가 나와 있다. 아래의 명령어를 이용해 paper을 설치하자. $ yarn add react-native-paper 아이디와 비밀번호를 입력하는 인풋필드는 TextInput 컴포넌트를 로그인 버..

[헬스 다이어리 앱 개발] 1편 - Expo로 리액트 네이티브 개발 환경 세팅

앱을 만들기 위한 개발 환경 세팅을 해보자. 안드로이드 개발을 위한 코틀린이나 ios 개발을 위한 swift 등 새로운 언어를 배우기엔 지금 시간 여유가 없어서 네이티브 앱은 부담스럽고, 자바스크립트나 리액트 개발 경험이 있으니 리액트 네이티브로 개발 하기로 결정했다. 리액트 네이티브는 하나의 언어로 ios, 안드로이드 모두 개발 가능하기 때문에 많이들 사용한다. 찾아보니 Expo와 React Native CLI 두가지로 개발을 하는데 Expo는 간단하고 빠른 앱 개발을 지원하지만 그만큼 여러 제약이 존재한다. 앱 개발이 처음이니 우선 Expo로 리액트 네이티브와 앱 개발에 익숙해진 뒤, CLI로 개발을 하자 그럼 Expo로 리액트 네이티브 개발 환경을 세팅해보자. 공식문서를 따라했고 정말 간단했다. S..

[헬스 다이어리 앱 개발] 0편 - 시작하며

최고의 개발 공부는 직접 무언갈 만들어 보는 것이라 한다. 단순히 공부만 하는 것보다 직접 만드는 것이 효율도 좋지만 무엇보다 훨씬 훨씬 재밌다! 그래서 간단한 앱을 하나 만들어야겠다 생각했고, 지금 가장 필요한 헬스 기록 앱을 만들기로 했다. 만들고 싶은 기능은 헬스 기록을 일별 그래프로 보여주기 특정 시간 내에 헬스 기록이 없으면, 푸쉬알림 보내기 어제보다 조금하면 더 하라고 얼려주기 요런 기능들을 넣어 어떻게든 헬스를 더 하게끔 만들고 싶다. 지금껏 수많은 시도들을 했지만, 매번 꾸준히 하지 못한채 실패했다. 돌이켜보니 이주를 넘은적이 한번도 없다 ㅎㅎ.. 이 앱을 통해 이번에는 다르기를 기원한다.

Sync vs Async / Blocking vs Non-blocking

sync(동기)와 async(비동기)에 대하여 공부를 하다 보니 항상 따라오는게 있었다. 바로 blocking과 non-blocking이었다. 이 sync와 blocking, async와 non-blocking은 의미와 상황이 자주 혼동되지만 서로 다른 개념이다. -Sync, Async sync(동기)와 async(비동기)는 시간의 관점, 실행되는 함수의 관점에서 봐야한다. 동기는 말 그대로 동시에 일어나는 것이다. 하나가 끝나면 다른 하나가 동시에 시작된다. 즉 sync는 호출한 함수가 호출된 함수의 종류를 신경쓰는 것이다. 반면에 async는 호출된 함수가 끝나든 말든 신경쓰지 않는 것이다. 보통 async는 호출된 함수가 끝나면 callback을 통해 결과값을 처리한다. - Blocking, Non..

기타 개발 2022.06.15