post-thumbnail

React 적응기 - 8

비주얼 테스트: 화면을 구성하는 컴포넌트들을 독립적으로 관리하고 변화를 관찰하고 테스트하기 위한 방법. -> 컴포넌트 문서화를 편리하게 한다.수정 및 재활용하기 쉬워진다.예시에 사용한 코드는 교재와 해당 레포 에서 참조.create-react-app 보일러플레이트로 리

2020년 5월 20일
·
0개의 댓글

React 적응기 - 7

컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지로 나뉘는데, 이 포스트는 클래스형 컴포넌트에 대해 다룹니다. 클래스형 컴포넌트는 이전 포스트에서 설명했던 생명주기(Life cycle) 함수와 컴포넌트 구성 요소를 모두 포함하고 있습니다.특히 클래스형 컴포넌트는

2020년 4월 10일
·
0개의 댓글
post-thumbnail

Flux vs MVC: Best Explanation 번역

이 글은 해당 포스트를 번역한 것으로 의역 및 오역이 많습니다!잘못되거나 더 나은 수정이 있으시다면 댓글로 남겨주세요!Flux 아키텍쳐는 React.js 의 중추입니다. Flux 는 MVC 와 여러 디자인 패턴의 대체인데, 페이스북은 Flux 패턴이 확장성과 가독성 두

2020년 4월 8일
·
0개의 댓글
post-thumbnail

[프로젝트-DediCats] Devlog-update(1)

팀원 분의 지인께서 DediCats를 사용해시고 피드백을 주셨다. 마이페이지에서 내가 팔로우하는 고양이들을 확인하거나 언팔로우 할 수 있는데, 여기에 클릭하면 지도의 위치로 이동할 수 있는 버튼이 있으면 좋겠다고 말씀해주셔서 추가해보기로 했다.먼저 마이페이지에서 내가

2020년 4월 2일
·
0개의 댓글

React 적응기 - 6

컴포넌트의 생성부터 소멸까지의 과정을 Lifecycle 이라고 부른다.출처: Do it! 리액트 프로그래밍 정석 - 박호준 (p.113)

2020년 3월 21일
·
0개의 댓글

MVC 패턴

기존의 웹 프레임워크는 정보를 담당하는 Model, 화면을 담당하는 View, 구동을 담당하는 Controller로 나눈 MVC 패턴으로 분리하여 관리했다.모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를

2020년 3월 21일
·
0개의 댓글

React 적응기 - 5

이전에 작성한 포스트와 책의 내용을 바탕으로 정리 및 추가를 하는 포스트이다.JSX 를 설명할 때 자바스크립트를 확장한 문법으로, React element 를 생성하고, 컴포넌트를 생성해 UI를 객체화할 수 있다고 작성했었는데,이번에 JSX 가 Javascript XM

2020년 3월 20일
·
0개의 댓글

React 적응기 - 3

익명함수가 일반 함수와 무엇이 다른지화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사사용 방법객체배열htmljquerycommonJs - requireES6 importforEachmapreducecallbackpromiseasync await디바운스 개

2020년 3월 18일
·
0개의 댓글
post-thumbnail

React 적응기 - 2

예전에 ES6에 대한 포스트를 작성한 적이 있지만, 책에 나온 김에 다시 한번 리뷰하면 좋을 것 같다는 생각이 들었다.문자열 안에 변수나 연산을 혼합할 수 있는 문법이다.문자열로 표시하려는 부분은 따옴표 대신 \`\`(backtick)으로 감싸주고, 그 안의 변수나 연

2020년 3월 17일
·
0개의 댓글

React 적응기 - 1

페이스북에서 개발한 프론트엔드 프레임워크이다. 리액트는 페이스북을 개발할 때도 사용되었다.원하는 화면을 컴포넌트 단위로 빠르고 효율적으로 구성할 수 있다. 이 때, Virtual DOM(가상 화면)을 이용하여 화면 출력 속도를 높이고 코드 복잡도를 줄였다.Virtual

2020년 3월 16일
·
0개의 댓글

React 적응기

React 를 사용할 때

2020년 3월 12일
·
0개의 댓글
post-thumbnail

[프로젝트-DediCats] Devlog-Final

DediCatBack-end Develop, 팀장길고양이를 돌보는 유저를 위한 지도 기반 커뮤니티 앱 Stack: React Native(Expo), React Navigation, MobX, Google Maps API목업 디자인 기획 및 컴포넌트 구조 설계React

2020년 2월 26일
·
0개의 댓글

[프로젝트-DediCats] Devlog-13

프로젝트 개발 초기에는 빌드한 앱을 구글 플레이스토어와 앱스토어 둘 다 배포할 계획이었지만, 검색해보니 앱스토어의 검수과정과 기간이 1달 동안의 결과물로는 맞추기 어렵다는 쪽으로 의견이 모아져 플레이스토어 출시에 목표를 집중하기로 했다. 안드로이드에 맞추려면 어떤 부분

2020년 2월 20일
·
0개의 댓글

[프로젝트-DediCats] Devlog-12

오늘은 앱의 포스트 기능에서 자주 볼 수 있는 Infinite Scroll 과 Pull down Refresh 기능을 구현했다. 백엔드 팀원분들에게 이 기능을 위해 pagination 기능을 추가하고 싶다고 전달하였고, 다행히 어렵지 않은 부분이라 계속 진행할 수 있었

2020년 2월 19일
·
0개의 댓글

[프로젝트-DediCats] Devlog-11

이번 프로젝트에서 react-native-snap-carousel 을 이용해서 지도의 마커들의 정보를 렌더하고 있었다. 링크를 확인해보면 아이템들의 정보를 하나의 카드안에 렌더하고 그 카드를 옆으로 스와이프하면 다음 인덱스의 아이템을 렌더하는 방식이다. 기본적으로 re

2020년 2월 17일
·
0개의 댓글

[프로젝트-DediCats] Devlog-10

몇일 전, 포스트에서 mobx store 리팩토링 작업에 관한 포스트를 작성했었다. 2개의 스토어에서 총 6개의 스토어로 확장하였고 기능에 맞게 각 스토어로 이동시켰다.이 중 스토어 분할을 통해 리팩토링을 할 수 있었던 몇 가지 helper function 에 대해 적

2020년 2월 16일
·
0개의 댓글
post-thumbnail

[프로젝트-DediCats] Devlog-9

어제 발생했던 mariadb 문제를 여러 번의 삭제와 재설치 끝에 겨우 해결할 수 있었다. 중간에 디렉토리를 잘못 삭제해 ERROR 1006 (HY000): Can't create database 'cats' (errno: 2 "No such file or direct

2020년 2월 15일
·
0개의 댓글

[프로젝트-DediCats] Devlog-8

스토어를 리팩토링하는 과정이 예상한 것처럼 대작업이 되었다. 스토어로 들어갈 observable 과 action들을 구분하는 것부터 하나하나 새로 바뀐 루트로 변수를 재지정하는 일, 그리고 컴포넌트에 새로 inject 하는 것까지 상당히 수고스러운 작업이다. 그래도 내

2020년 2월 15일
·
0개의 댓글

[프로젝트-DediCats] Devlog-7

앱개발을 하면서 상대적으로 작업이 더 많은 프론트를 백엔드 분들이 지원을 해주시기 시작했다. 그리고 상태관리 라이브러리를 써보신 분의 조언에 의하면 현재 우리가 사용하고 있는 UserStore 와 CatStore 가 너무 포괄적이어서 Store 를 좀 더 나눌 필요가

2020년 2월 13일
·
0개의 댓글
post-thumbnail

[프로젝트-DediCats] Devlog-6

FlatList 는 어플에서 뉴스피드 기능을 만들 때 유용한데, Infinite Scroll(무한 스크롤 로딩) 과 Pull Down Refresh(끌어서 새로고침) 기능을 구현할 수 있기 때문이다. 먼저 이 기능들의 구현은 해당 블로그 에서 참고하여 작성하였다.또한

2020년 2월 12일
·
0개의 댓글