홍준혁

오늘은 파이어 베이스를 이용해서 간단한 리액트와의 연동 예제를 보여주도록 하겠다. -본 글은 리액트 프로젝트와 파이어베이스 프로젝트를 생성했다는 가정하에 진행한다. 콘솔 창에 npm install firebase 를 해주자. 그다음에 src디렉터리에 firebase.js이라든지 fbase.js라든지 자기가 알아볼 수 있을법한 파이어 베이스 파일을 만들어 주도록 하자. 먼저 firebase.js에 import firebase from 'firebase/app'; 를 해주고, 그 다음 파이어 베이스의 config를 initialize 해주기 위해 저기 firebaseConfig라는 값을 복사하고 아까 만든 firebase.js에 붙여 넣기 해준다. 그다음에 firebase.initializeApp(fireb..

리액트에서 리덕스 구조를 이해하려면 투두 리스트만큼 가성비 좋은 게 없다. 그럼 간단히 리액트에서 투두리스트를 리덕스로 구현해보자. 먼저 src의 구조는 이렇게 크게 세가지로 나뉜다. modules는 액션 타입 , 액션 생성 함수 , 리듀서를 한 파일에서 관리하는 Ducks패턴을 모아놓은 디렉터리라고 생각하자. 즉, 기존에는 액션 타입 , 액션 생성 함수 , 리듀서이 세 가지를 각각 다른 파일에 나눠서 개발했다면 Ducks패턴은 그걸 짬뽕시켜놓은 개념이다. Ducks 패턴의 장점은 새로운 액션을 만들때 번거로운 작업을 하지 않아도 된다. 이제 component에서 간단히 input , button , ul만 태그 해놓자. 제출 그다음에 modules폴더에 todos.js라는 파일을 만들어서 액션 타입 ,..

리덕스에서는 중요한 규칙 3가지가 있다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있다. 2. 상태는 읽기 전용이다. 3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 한다. 이제 하나하나 왜 그래야 하는지 보도록 하자. 먼저 1. 하나의 애플리케이션 안에는 하나의 스토어가 있다. 이는 말 그대로 하나의 스토어가 있어야 한다. 사실 여러 개의 스토러를 만드는 것도 가능하나. 권장하는 방식은 아니다. 왜냐하면 그러면 개발자 도구를 못쓴다...! 2. 상태는 읽기 전용이다. 상태는 읽기 전용이다. 이는 불변성을 유지해야 한다는 말과 같다. 우리가 기존에 리액트 프로젝트를 했을 때 setState를 통해 state를 업데이트해줬지 state에 push나 concat과 같은 함수를 사용해서 state를..

리덕스에서는 ACTION(액션)이라는 것이 있는데 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킨다. 액션은 객체 형태로 표현이 되며, 만약 1을 더하는 액션을 정의할때는 { type : "ADD" } 이런 식으로 액션을 정의할 수 있다. 그리고 액션객체는 다른 값도 넣을 수 있다. (개발자 맘대로) { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } 그리고 액션을 만들려면, 액션 생성 함수를 써야 하는데 그냥 간단히 파라미터를 받아와서 액션 객체 형태로 만들어주는 역활을 한다. export function addTodo(data) { return { type: "ADD_TODO", data }; } 왜 액션함수를 만드냐면 나중에 다른 ..

현제 로그인 화면을 다 만들었다. 디자이너 없이 혼자 만드니까 너무 힘들ㄷr.....ㅋㅋㅋ 새로고침 할때 옆에 있는 멘트도 바뀐다...! 아직 만들었던 서버랑 연결은 하지 않은 상태이고 상태 관리 라이브러리는 Redux를 사용하려고 하는데 프로젝트에 잘 주입할 수 있을지 걱정이다. 그리고 HLOG깃허브 주소는 https://github.com/Hong-JunHyeok/HLOG Hong-JunHyeok/HLOG Contribute to Hong-JunHyeok/HLOG development by creating an account on GitHub. github.com 여기다. 깃허브 와서 팔로우 한번씩만 해주고 가주면...! 큰 힘이 될 것이다.!!! 그럼 오늘은 여기까지 하고 다음에는 메인화면 구성을 ..

서버 단에서 기본적으로 필요한 API를 다 만들었다. 이제 프런트를 작업할 차례인데 그전에 디자인을 하려고 한다. 어떤 디자인 콘셉트를 잡고 개발을 할 것인지 볼 것이다. 먼저 메인 컬러는 붉은색으로 하고 싶다 왜냐하면 내 성이 홍이고... 홍은 붉은.. 색이니까... 아무튼 붉은색으로 콘셉트 컬러를 잡을 것이고 또한 세련된 느낌을 중점적으로 디자인할 것이다. 심플함 감성 세련 이 세 가지를 중점적으로 디자인하도록 하겠다. 이제 figma로 디자인을 만들어 봐야겠다. 아이폰의 PRODUCT RED 색을 굉장히 좋아하는데 그래서 #B00D23의 색을 사용해야겠다. 어느정도 디자인을 해보고 프런트엔드 프로젝트를 개발하고 있다. 다음 포스트에서 로그인&회원가입 컴포넌트를 보여주겠다.