profile
Front-end 개발 공부일지

[ Goplan ] - Firebase 호스팅 연결

완성한 리엑트 프로젝트를 라이브 서버에 연결하기위한 Firebase 호스팅 연결 방법을 배워보고 싶어서 아래 블로들을 참조해서 연동했습니다. 정리를 잘 해두셔서 링크만 연결해 둡니다. 참조 https://forest71.tistory.com/169 https://codingmania.tistory.com/298

2019년 10월 20일
·
0개의 댓글

[ Goplan ] - Redux & Firebase Authentication

사용자 인증 Firebase Authentication 에서 테스트용 사용자를 추가한다. image.png 사용사 인증 action을 생성할 authActions.js 파일을 작성 store/ authActions.js SignIn 컴포넌트에 액션을 연결해준다. SignIn.js 처음에 생성해둔 테스트용 사용자를 이메일 비밀번호를 사용해 액션이 잘...

2019년 10월 17일
·
0개의 댓글

[ Goplan ] - Redux & Firbase 연동 (Error 해결)

Redux 연동 redux에 관련된 파일들을 작성할 store 폴더에 reducers actions 두 가지 하위 폴더를 만들어 준다. Reducers reducers 폴더에는 아래와 같은 파일을 생성한다. projectReducer.js // 프로젝트를 생성하는 리듀서 authReducer.js // 로그인 인증 리듀서 rootReducer.js...

2019년 10월 16일
·
0개의 댓글

[ Goplan ] - React Component 생성

프로젝트 셋팅 create-react-app goplan 프로젝트를 생성. 기본 모듈 설치 `yarn add redux react-redux redux-thunk react-router-dom` 기능에 집중하기 위해 일단은 Materialize Css 를 사용해 스타일링을 하고 마지막에 scss 를 적용하려고 한다. 폴더 구조 image.png 매번...

2019년 10월 15일
·
0개의 댓글
post-thumbnail

[ GoPlan ] - 도전해야 하는 일들을 포스팅하고 실현하세요!

GoPlan 도전해야 하는 일들을 포스팅하고 실현하세요! react-redux & firebase 를 공부하며 만든 프로젝트 입니다. React & FireBase App React-Redux 상태관리 React-router-dom SPA방식 App FireBase를 사용한 로그인 기능 구현. Learn React Redux thunk Fireba...

2019년 10월 15일
·
0개의 댓글

[ React Blog ] - Modal & 읽기, 수정기능 구현

Modal & 읽기, 수정기능 구현

2019년 10월 8일
·
0개의 댓글

[ React Blog ] - Redux 연동 & 추가, 삭제기능 구현

모듈 설치 create-react-app 으로 프로젝트를 셋팅하고 scss로 기본적인 컴포넌트 디자인과 react-router-dom을 사용해서 컴포넌트 링크를 연결시켜준 상태이다. redux를 사용해서 포스팅의 추가, 읽기, 수정, 삭제 기능을 구현하려고 한다. 필요한 모듈을 먼저 설치해준다. `yarn add redux react-redux red...

2019년 10월 7일
·
0개의 댓글
post-thumbnail

[ React Blog ] - 프로젝트 시작

React Project - Blog 빠른 반응속도와 재사용성이 높은 코드를 위해 React-Router를 사용해 SPA 방식의 어플리케이션을 구현해 보고싶어서 기본적인 CRUD 기능을 갖춘 블로그를 만들려고 한다. 먼저 기능에 맞춰 직관적이고 깔끔하게 컴포넌트를 디자인을 구성했다. 이제 기능을 구현해보자! 앞으로 포스팅할 내용 프로젝트 구조 & ...

2019년 10월 4일
·
0개의 댓글

[ React ] - React Life Cycle

LifeCycle API image.png 이 API 는 React Component가 브라우저에서 로딩, 사라질때, 에러가 나타났을때 그리고 업데이트될 때, 호출되는 API로 리액트 라이프 사이클을 공부한 내용을 정리한 포스트이다. 컴포넌트 라이프사이클 초기 화면 로딩시 constructor getDerivedStateFromProps render...

2019년 9월 29일
·
0개의 댓글

[ React ] Multi-Step-Form

image.png 하나의 부모 구성 요소와 세 개의 자식 구성 요소가 있습니다. 참조 https://css-tricks.com/the-magic-of-react-based-multi-step-forms/ https://www.w3schools.com/howto/howtojsform_steps.asp

2019년 9월 24일
·
0개의 댓글

[ React ] Testing

테스트 자동화 테스트를 하는 코드를 작성해서, 테스트 시스템이 자동으로 확인을 해줄 수 있게 하는 것. 이를 테스트 자동화라고 합니다. 장점 여러분들이 프로젝트를 다른 사람들과 협업을 하게 되는 경우 테스트 코드를 작성하는 것은 매우 큰 도움을 줍니다. 테스트 코드가 존재한다면, 리팩토링 이후에 코드가 이전과 똑같이 작동하는지 검증하는게 매우 쉬워지기 ...

2019년 9월 19일
·
0개의 댓글
post-thumbnail

[ Netflix Clone 4 ] Modal & Search Api

Modal 영화를 클릭하면 해당하는 영화정보를 담고있는 모달이 뜨게 만들어보자! 모달이 클릭한 영화의 정보를 담고있으려면 Movie컴포넌트와 같은 props를 받아야한다. 때문에 Movie 컴포넌트에서 Modal을 같이 렌더링 시키기로 했다. 일단 영화 정보를 담는 image / Title / overview 데이터를 props로 받고, Movie를 클...

2019년 9월 14일
·
5개의 댓글
post-thumbnail

[ Netflix Clone 3 ] Style

Static Directory image.png style을 담당하는 static (정적) 폴더에 스타일링에 관련된 파일들을 담아둔다. /images 필요한 이미지와 로고 등이 들어가있는 폴더 /sass scss 파일을 작성하는 폴더로 abstracts 와 components 두 가지 하위 폴더로 나눠져 있고 index 파일인 style.scss...

2019년 9월 9일
·
0개의 댓글
post-thumbnail

[ Netflix Clone 2 ] Component - 폴더 구조 & UI

Directory 데이터를 가져왔으니 본격적으로 프론트 작업을 해보쟈! 전체적인 디렉토리의 구조 src폴더 내부에는 컴포넌트의 구조와 상태를 작성할 폴더를 Component / Container로 나눠 로직의 재사용성을 높혀주고 스타일링을 담당하는 폴더인 static과 Redux를 작성할 폴더인 store로 구성했다. image.png /Compone...

2019년 9월 5일
·
2개의 댓글
post-thumbnail

[ Netflix Clone 1 ] Redux thunk API 연동하기

프로젝트 생성 Git Bash를 열고 명령어를 입력해 프로젝트를 생성 `$ npx create-react-app netflix-clone` 해당 디렉토리에서 필요한 모듈을 설치해 주고 `$ yarn add redux react-redux axios` 개발서버 실행

2019년 9월 2일
·
5개의 댓글
post-thumbnail

[ Netflix Clone ]

들어가며 디자인 전공인 나는 혼자 개발 공부를 시작한지 4개월이 됐는데, 유튜브와 패스트 캠퍼스 온라인 강좌 등 많은 기초 강좌들을 보고 따라 하는 방식으로 공부를 해왔다. 지금까지 만들어 왔던 작은 프로젝트들을 보면 투두 리스트, 레시피 앱, 무비 앱, 웹사이트 퍼블리싱 같이 기초적인 기술을 배우기 좋은 간단한 프로젝트들인데, 설명되어 있는 코드를 따...

2019년 9월 2일
·
1개의 댓글