리액트 4 스파르타코딩클럽 리액트심화반 05주차 꼬리스타그램🐈 https://my-community-99787.firebaseapp.com/ React App my-community-99787.firebaseapp.com src/pages/ MyPage와 Signup 페이지에서 닉네임 Validation => clear MyPage.js 구현하기 (email, displayName, profile) => clear!! PostList에서 댓글 수 미리 로드하기 => clear! src/components/ Header UI 이쁘게 Post 수정하기/삭제하기/공유하기 src/elements/ Like 좋아요 버튼 활성화 Spinner 만들기 (Material UI 이용) src/redux/ image.js 이미지 리사이즈, 크롭 기능 만들기 user.js 이미지 업로.. 2021. 8. 2. 스파르타코딩클럽 리액트 심화반 3주차 후기 뷰가 거의 바뀌지 않으니 뭐가 달라졌나 싶을 수도 있지만 기능적으로는 많은 걸 구현했다. 우선 알림 (Notification.js)를 만들어서, 내 게시물에 새로운 댓글이 달리거나 하면 알림이 생기고 그 개수만큼 뱃지 형태로 숫자가 디스플레이되도록 '뷰만' 구성했다. 아직 댓글 기능과 알림 기능이 제대로 구현된 상태는 아님. 그리고 후에 댓글 기능을 제대로 구현할 것을 염두해 두고, 게시물 수정하기 버튼(포스트 날짜 옆에 있는 수정 아이콘 클릭!)을 클릭해서 들어갔을때, 이 게시물에 댓글이 이미 달린 상태라면 사진은 변경할 수 없도록 disabled 속성을 주었다. "이 버튼을 눌러 일상을 공유하세요" 부분이 게시물에 댓글이 달렸을 때는 "댓글이 달린 사진은 수정할 수 없어요"라고 나오고, 클릭해도 이미.. 2021. 7. 21. 스파르타코딩클럽 리액트 심화반 2주차 후기 리액트 심화반 2주차! 어느정도 앱의 형태가 잡혔다!! 커밋할 체인지들도 너무 많았음ㅎㅎ 이번 주차에 내가 바꾼 것들! Post의 내용을 좀 더 인스타그램스럽게 바꿔보았다. 예를 들면 스크린샷에 보이는 댓글란의 배치! 원형의 사용자 프로필 이미지는 댓글의 내용이 길어질 경우 사용자의 이름 바로 옆에 배치될 수 있도록, flex-start를 적용했고, 사용자의displayName은 댓글 내용과 같은 라인에 배치되되, 약간의 공백과 굵은 글씨로 구별이 될 수 있도록 했다. 또 moment 모듈의 locale/ko를 사용해 댓글과 게시물의 작성 시점을 'SNS스럽게' n시간 전, n일 전으로 렌더링했다. 파이어베이스의 인증 함수를 이용해서 로그인,가입,로그아웃을 구체화시켰고, 로그인 상태에서만 나타나야 할 플.. 2021. 7. 16. 더 잘하고 싶어서, 다시 리액트부터 지금까지 5주동안 만든 앱에 여러가지 기능을 최대한 쑤셔박았는데, 몇가지의 오류가 있었다. 로그인/회원가입 기능은 구현했지만, 회원가입 후에 바로 로그인된 메인화면으로 이동되는 것을 구현하지 못했고, 로그인 기능 역시 유지 기능이 없어 매번 앱을 켤 때마다 새로 로그인을 해야 했다. 그리고 가장 큰 문제는.... 로그인과 회원가입을 구현하는데에는 성공했지만, 로그인을 해서 즐길만한 추가적인 컨텐츠가 전혀 없다는 것. 애초에 기존에 블로그를 운영하면서 수집한 고양이사료 (그것도 건사료에만 한한...)를 json으로 예쁘게 뿌려주는 것이 전부인 앱을 하나 만들었다고 현업에서 이걸 제대로 써먹을 수 있을리가 없잖...ㅠㅠㅠ 마침 앱개발종합반 튜터님과 1:1 상담시간을 스파르타에서 마련해주셔서, 좀 더 깊은 얘.. 2021. 7. 9. 이전 1 다음
