오늘 만든 것저번에 Authentication까지 마무리하고 이번에는 nweet 트윗을 전송( + 수정, 삭제)하고 띄우는 것을 완료했습니다. 대부분이 firebase에서 제공해주는 메서드여서 어려움없이 따라갈 수 있었습니다.NweetingApp.js function App() { const [init, setInit] = useState(false); const [userObj, setUserObj] = useState(null); useEffect(() => { ... }, []); return ( {init ? ( ) : ( "Initializing..." )} );} 코드가 살짝 수정되었습니다. isLoggedIn..

오늘 만든 것최근 노마드코더의 트위터 클론 강의를 듣고 있습니다. CRUD 맛을 보고 싶어서 트위터 클론 강의를 선택했습니다.아직 초반 단계이지만 역시 버전 이슈는 항상 등장하네요. react 관련 (ex : react-router-dom) 버전은 강의에 맞추어주었습니다. firebase의  경우 docs를 확인하면서 제 버전에 맞게 작성하고 있습니다. 그 결과 현재까지는 문제가 없습니다! 폴더 구조 Authentcationcreate accountlog inlog out로그인했을 때 안 했을 때 보여줄 페이지 import React from "react";import {HashRouter as Router,Redirect,Route,Switch,} from "react-router-dom";import..

오늘 만든 것Movie Detail 페이지Header의 경우 메인페이지의 컴포넌트를 가지고 왔습니다. 이미지만 클릭한 영화의 이미지가 나올 수 있게 해주었습니다. url의 movieId를 사용해서 가지고 왔는데요. 이부분을 좀 살펴보겠습니다. App.js라우팅으로 페이지를 이동할 때 props로 값을 전달하고 싶다면 위 코드처럼 작성하면 됩니다. routing할 때 path를 설정해주는 코드입니다. 이때 /: 뒤가 parameter로 전해질 props의 이름입니다. '/:' 형식을 사용하여 원하는 정보를 parameter로 전달 할 수 있습니다. let movieId = props.match.params.movieId;컴포넌트에서는 위와 같이 props로 값을 전달 받을 수 있습니다. props를 콘솔로..

오늘 만든 것grid-cardgrid 형태를 주기 위해 ant Design의 { Row, Col }을 사용했습니다. 먼저 Column의 경우 한 Column에 1-24 값을 입력할 수 있습니다. lg (large 사이즈 일 때) 6을 입력하면 같은 너비의 4열,md (medium 사이즈 일 때) 8 을 입력하면 같은 너비의 3열,xs (xsmall 사이즈 일 때) 24 를 입력하면 같은 너비의 1열을 의미합니다.function GridCards(props) { return ( ... 생략 );}Row gutter를 통해 grid 간 간격을 조절할 수 있습니다.값으로는 숫자, 객체, 배열이 올 수 있으며 기본값은 0입니다.객체 ex) { xs: 8, sm: 16, md: 24}배..

인트로학교 동기들과 스터디를 만드는 스불재를 실천해 버렸습니다.4월까지 각자 마음에 드는 클론 강의 듣고 애플리케이션을 완성하기로 했습니다. 저는 인프런의 무비앱 시리즈를 선택하였습니다. 풀스택 맛이라도 보려고요. Boiler-plate을 이용한 강의이기 때문에 초기 제공 자료에 로그인 기능이나 nav는 완성된 상태였습니다.좀 아쉽지만 이 부분에 대한 강의도 있다고 하니 나중에 따로 찾아 듣기로 하죠. 그리고 이 강의가 나온지 꽤 되었기 때문에 감안하면서 들으려고 합니다. 오늘 한 것노드 환경 세팅 node verison을 강의 세팅과 동일하게 해 주었습니다.package.json에 대해 정확히 이해를 한 상태가 아니라서 그냥 강의에 맞추는 게 더 편하더라고요..movie api를 사용하여 유명한 영화 ..