항해 중/6주차 미니 프로젝트10 [미니프로젝트] 6일차 (+피그마 꿀팁) 오늘 한 일 1. CSS 마무리 2. 회의 + 회고록 작성 + 회고 멘토링 3. AWS S3 사용해서 프로젝트 배포하기 -> http://anonymousmentalcare.s3-website.ap-northeast-2.amazonaws.com/ React App anonymousmentalcare.s3-website.ap-northeast-2.amazonaws.com CSS 꿀팁 피그마 사용하면 CSS를 쉽게 만질 수 있다. 1) 회원가입 및 로그인 2) 새로운 file을 하나 만든다. 3) 예를 들어 Card Box를 하나 만들어서 효과를 준다. 4) Inspect로 가서 CSS 코드를 복붙한다! https://www.figma.com/files/recent?fuid=104955634592877728.. 2021. 12. 11. [미니프로젝트] 5일차 오늘 한 일 1) 회원가입 disabled 처리 수정 -> 비밀번호가 정규식 검사에 일치하지 않는데 비밀번호와 비밀번호 확인이 같으면 버튼이 활성화 되는 문제를 발견해서 수정함 2) 코딩애플 Redux 강의 들음 3) 게시물 수정 기능 만들어 주신 거 프로젝트에 합침 4) 로고 정함 5) 8시에 팀 회의 하면서 프로젝트 CSS 어떻게 진행 할 지 결정 + CSS 수정 ★ div 한 줄에 3개씩 띄우기 할 때 flex-flow : row wrap;를 사용해서 해결했다. + 댓글 삭제 기능 할 때는 댓글 정보를 서버에서 가져 올 때 식별 할 수 있는 사용자 정보를 담고 있어야 내가 작성한 댓글에만 삭제 버튼을 놓을 수 있을 것 같다! + 댓글 수정 기능 할 때는 댓글 삭제처럼 식별 할 수 있는 사용자 정보를.. 2021. 12. 11. [미니프로젝트] 리액트로 이미지 업로더 구현하기 게시물 작성, 게시물 수정 시 이미지를 업로드 하면 서버에 이미지를 넘겨주고, 프론트에서 미리보기로 띄우는 작업을 구현하기 위해서 참고한 사이트이다! https://maruzzing.github.io/study/react/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%8D%94-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0/ 리액트로 이미지 업로더 구현하기 파일 업로드하는걸 구현하기 어렵지 않을까? 라고 생각했었는데 의외로 아주 간단했다. input type= maruzzing.github.io 2021. 12. 9. [미니프로젝트] 4일차 오늘 한 일 1) 피드 페이지 -> 내가 작성한 게시물 -> 내가 작성한 댓글이 보이는 문제 (해결) -> 받아오는 값이 객체 형태여서 map이 안돌아가는 문제 (객체 -> 배열로 바꿔서 해결) 2) 댓글 안써지는 문제 (기존에 있던 댓글에 내가 작성한 댓글을 합쳐야 하는 데 객체 형태라서 합치지 못함) 3) 댓글 쓸 때 작성한 날짜 보여주기 -> moment 패키지 설치 4) 아이디 중복검사 : 중복 검사 버튼 만들어서 검사가 되었는 지 안되었는 지 state로 저장해서 상태 알려주고 중복 검사 통과 못하면 버튼 안눌리게 처리 (disabled) 5) 아이디 중복 검사 추가 후 기존에 있던 회원가입 버튼 활성화/비활성화 코드 수정 6) 게시물 작성 시 이미지 업로드 하는 부분에서 axios로 서버에서 .. 2021. 12. 9. [미니프로젝트] 객체를 배열로 바꾸는 방법 어제 구현 할 때는 피드 페이지에서 내가 쓴 게시물을 누를 경우 처리를 잘못해서 내가 쓴 모든 댓글이 보였었다. const CommentList = (props) => { const myCommentInfo = useSelector((state) => state.post.comments); const check = myCommentInfo.commentId ? true : false const commentInfo = useSelector((state)=>state.feed.myPosts); if(check){ // 내 게시물 조회일 경우 console.log("게시물게시물 조회") return ( {myCommentInfo.map((p) => { return ; })} ); }else{ // 랜덤한 게.. 2021. 12. 9. [미니프로젝트] 3일차 오늘 한 일 1. 회원가입 정규식 검사, 서버와 연결(axios) 팀원분이 만들어 주셔서 오류 해결 함. 2. 로그인, 회원가입 서버와 연결(axios) 3. 로그인 시 서버에서는 토큰이 생성 되고, 네트워크 -> Header -> Authorization에 들어가는 데 프론트에서는 토큰을 받아 올 수 없는 문제가 발생 4. Feed.js flexbox 수정 (팀원 분이 해주심) 5. localStorage에 token 저장해서 Header, Index에서 토큰 유무에 따라 다르게 처리 6. 로그아웃 처리 : localStorage에 담긴 토큰 정보를 localStorage.remove('토큰 이름')을 사용 (아직 서버에서 기능이 안만들어 져서 연결을 안해봄) 7. 5번에서 새로고침을 하지 않으면 반영.. 2021. 12. 8. [미니프로젝트] 2일차 오늘 한 일 1. 로그인 redux 구현 (loginCheckFB -> 로그인 여부 확인, loginFB -> 로그인 요청) 2. 프론트 팀원분이랑 로그인, 회원가입 기능 합치기 + 메인 페이지 구현 -> 다른 기능 분배해서 구현 3. scroll은 되지만 보이지는 않게 하고 싶은 데 적용이 안되는 중이다.. 더 찾아봐야 할 듯 4. 피드, 게시물(상세, 작성), 댓글(작성, 목록) 틀 구현 5. 로그아웃 기능 구현 6. 서버와 연동 전에 session 확인 해보기 위해서 cookie 사용 (window.location.href('/') 사용) 7. 백엔드분들이 EC2에 파일 올려 주시고 프론트랑 연동 되는 지 확인 해봤는 데 안되서 회의 -> 회원가입 연동 성공 8. flexbox 사용해서 여러 방면으.. 2021. 12. 7. [미니프로젝트] 스크롤 기능은 살리고 스크롤바는 없애기 3시간동안 해도 안되던 게 body에 넣었더니 됐다. https://wooaoe.tistory.com/m/49 [HTML/CSS] 스크롤 기능은 살리고 스크롤바는 없애기 스크롤 기능은 존재하되, 스크롤바가 보이지 않는 css 효과에 대해 알아봅시다! 💡 스크롤 기능은 살리고, 스크롤바는 없애는 방법? 안녕하세요. 스크롤바 없애기 wooaoe.tistory.com 2021. 12. 7. [미니프로젝트] 1일차 오늘 한 일 1. 프로젝트 틀 잡고, elements 폴더에 Button, Input, Grid, Text 구현 2. 모달창을 사용해서 로그인 페이지 구현 3. disabled를 사용해서 아이디, 비밀번호 중 하나라도 입력 하지 않았을 시 버튼 비활성화 4. 로그인 기능 구현 + 로그인에서 회원가입 클릭 시 화면 전환 5. 회원가입 버튼 클릭 시 modal을 유지하면서 이동 6. 헤더 구현 (로그인, 회원가입 버튼 추가 및 연결) 7. 헤더 구현 (로그인 전, 로그인 후 보여지는 버튼 다르게 구현) 8. 로그아웃 구현 9. 모달창 바깥 화면 눌렀을 때 안나가지는 문제 해결 10. Header에서 로그인/회원가입 처음만 모달창 띄워주고 그 이후로는 안띄워 지는 문제 해결 고민 했던 부분 1) 헤더 -> 로.. 2021. 12. 6. 이전 1 2 다음 728x90
