22/08/06 [모각코] 6일차

랜덤추천을 끝으로 페이지 구현작업은 어느정도 마무리 되었습니다. 설명을 하자면 1초간 로딩 시간이 있고 시간이 지나면 백엔드에서 가져온 랜덤한 맥주를 추천해주는 페이지입니다. 이제 남은 기간동안에는 백엔드와 연동해서 api도 사용해서 모든 구현을 마무리할 계획입니다. 이제부터 시작입니다.

→2022.08.08

TIL

22/08/03 [모각코] 5일차

오늘은 Like 페이지를 구현해봤습니다. 아직 서버가 만들어지지않아 data.json 을 임의로 설정해줍니다. // data.json { "beer_list": [ { "id": "1", "image_url": "/img/example.png", "beer_name": "곰표밀맥주", "total_point": 4.5, "information": "좋은맥주입니다." }, { "id": "2", "image_url": null, "beer_name": "필스너우르켈", "total_point": 4.0, "information": "너무 맛있는 맥주입니다." }, { "id": "3", "image_url": null, "beer_name": "필스너우르켈dsdd", "total_point": 5.0, "..

→2022.08.04

TIL

22/07/30 [모각코] 4일차

profile 즉 프로필 페이지를 만들어봤습니다. 프로필 사진을 누르면 프로필 사진을 변경할 수 있습니다. 추가로 footer 부분 까지 작업을 완료 했습니다.

→2022.08.02

TIL

22/07/27 [모각코] 3일차

오늘은 로그인 화면과 회원가입 화면을 마저 완성했습니다. 아직은 화면만 구현을 했고 다음은 프로필 화면을 만드려 합니다.

→2022.07.28

TIL

22/07/23 [모각코] 2일차

react에서는 props로 부모 컴포넌트와 자식 컴포넌트가 서로 정보를 교환할 수 있습니다. // App.jsx function App() { const [color, setColor] = useState(false); const changeBackGroundColor = () => { setColor(true); }; return ( ); } changeBackGroundColor 함수를 만들고 Main component에 props로 넘겨줍니다. // Main.jsx const Main = ({ changeBackGroundColor }) => { const [loadingTimer, setLoadingTimer] = useState(true); useEffect(() => { const timer..

→2022.07.23

TIL

22/07/20 [모각코] 1일차

일년만에 돌아온 모각코입니다. 오늘은 네캔만원 프로젝트 메인 표지화면을 만들었습니다. react를 사용한 페이지이고 styled-component를 사용했습니다. 일단 웹페이지는 모바일 친화적으로 만들었습니다. 나중에는 아예 모바일 앱을 만들어보고 싶은 생각도 있네요. react hook 중 useEffect를 사용해서 2초간 로고화면이 나오도록 설정했습니다. loadingTimer가 false로 바뀌면 삼항연산자를 사용해서 로그인화면이 나오게 했습니다. useEffect(() => { const timer = setTimeout(() => { setLoadingTimer(false); }, 2000); 2초가 지나면 로그인화면이 자동으로 나오게 되며 여기서 회원가입 버튼을 누르면 회원가입 페이지로 이동..

→2022.07.22