Project Devlog17 넷플릭스 클론 - 3 넷플릭스 처음 들어갔을 때 초기화면을 구현하는 중이다. 사실 초기 화면 구현을 다 했었는데 구현한 코드가 마음에 들지 않아 한번 갈아엎고 다시 만드는 중이다. 그리고 원래는 Mobx를 적용하려 했으나, Redux를 사용해보고 싶어 다 갈아엎은 것도 있다. 그래서 디렉토리 구조도 조금 바꾸었다. redux를 적용하기 위해 redux, react-redux를 받았다. 그리고 store 폴더를 만들어 주었다. 원래는 action과 reducer 등을 따로 만들어주는 것으로 알고 있는데 나는 Ducks 패턴으로 리덕스를 구현하기 위해서 store에 modules라는 디렉토리를 만들어 주었다. ducks 패턴의 경우, 한 파일에 구현할 기능과 관련된 액션타입과 액션 생성함수, 리듀서를 함께 만들어주고 모듈화 시켜.. 2020. 4. 9. 넷플릭스 클론 - 2 프로젝트의 초기 셋팅을 해주었다. React + TypeScript 우선 CRA를 통해 리액트 프로젝트로 만들어주었는데, CRA에 Typescript옵션을 주어서 Typescipt + React 프로젝트로 생성을 해주었다. 그리고 tsconfig를 기존의 BillyZip 프로젝트에서 사용하였던 옵션을 참고하여 내 입맛에 맞게 바꾸어 주었다. Prettier + ESLint 그 다음 해준 것은 prettier 설정이다. prettierrc 설정파일을 통해 내가 자주 사용하는 옵션으로 설정을 해주었다. 그리고 그 다음은 ESLint 설정인데 평소 즐겨사용하는 airbnb 스타일로 설정해줄 것이다. 그리고 typescript와 prettier도 같이 사용하기 때문에 관련 설정도 해주었다. ESLint 설정을 .. 2020. 3. 22. 넷플릭스 클론 - 1 넷플릭스 웹 사이트 클론을 해보려고 한다!! 사용하고 싶은 스택을 다음과 같이 생각했다. 프론트 : react, mobx, sass, typescript ( + 컴포넌트 라이브러리, hooks..?) 이번에 상태관리로 mobx를 도입해보려고 한다. 그리고 css를 saas를 이용해 만들어보려고 한다!! 백엔드 : firebase 빠른 백엔드 구축을 위해 파이어 베이스를 사용해보려고 한다. 파이어 베이스를 일단 공부한 다음에 구축을 해봐야겠다. 2020. 3. 20. 포트폴리오 사이트를 만들자 포트폴리오 사이트의 필요성을 느껴 어떻게 만들지 찾아보고 있었다. 찾아보니 많은 포트폴리오 사이트가 있었다. 대부분 좋은 퀄리티의 유료 사이트가 많았는데 사실 아직은 돈이 좀 부담되기도하고 내 마음대로 커스텀이 조금 어려운 점도 있어서 고민이 많았다. 그리고 개발자라면 포트폴리오 사이트는 직접 만드는 것도 좋지 않을까 생각이 들었다. 그래서 찾다가 Github pages 라는 것을 알게되었다. Github pages는 저장소의 내용을 웹페이지로 만들어주는 서비스이다. 즉, 정적 사이트 호스팅 서비스로 무료로 나의 웹사이트를 구축할 수 있다는 것이다!! 그래서 Github pages를 이용하여 나만의 포트폴리오 사이트를 만들어 보기로 결심하였다. Github pages 우선은 Github에 레포지토리를 생.. 2020. 3. 14. Final Project - (13) 2020_0210 이번에는 매물의 상세 스크린에 대해서 만들어 주었다. bottom tab navigator의 첫번째 tab의 stack 중 detail screen에 대해서 만들어 주었다. - Home screen - More List screen - Detail screen - Review screen - Review posting screen 저번에 홈스크린을 만들어 줄 때 추천매물/종류별 매물의 카드와 More List에서 카드를 TouchableOpacity로 만들어주었고, onPress로 터치 시에 HouseDetail로 navigate되도록 만들어주었다고 했다. 그래서 카드를 터치할 경우 매물의 상세 스크린으로 이동된다. 이때 navigation의 navigate 메소드로 스크린을 이동시켜줄 때, 두번째 인자.. 2020. 2. 10. Final Project - (12) 2020_0209 이번에는 빌리집의 메인 스크린인 Home 스크린을 만들어 주었다. Home 스크린은 bottom tab navigator 중 첫번째 tab인데 여기에 stack navigator로 다음과 같은 스크린을 쌓아주었다. - Home screen - More List screen - Detail screen - Review screen - Review posting screen 이 중에서 홈 스크린과 More list screen을 만들어 주었다. Home Screen 홈 스크린은 메인 문구, 추천 매물 카드 (4개), 매물 종류별 카드 (각 4개) 그리고 각 종류에 대한 모든 매물을 볼 수 있는 스크린으로 넘어가는 버튼으로 구성되어 있다. 우선 전체적으로 ScreenView를 적용하였고, Home screen.. 2020. 2. 9. 이전 1 2 3 다음
