홍가의 코딩공부

안녕하세요 홍 가 입니다. 오늘은 리액트 CRUD를 이용하여 게시판을 만들어 봤습니다. 자세한 코드는 시리즈 | React + Node + Mysql CRUD 게시판 만들기 - Hongga.log 면접을 보면서 느낀게 front를 해도 서버와 데이터베이스 쪽도 어느정도 알아야겠구나를 느꼇으며 CRUD를 사용한 프로젝트를 만들고 싶어 게시판을 선택했습니다. 파일 및 DB생성, 서버연결 레이 velog.io 우선 CRUD를 사용하려면 2개의 폴더가 필요합니다. 한 번에 2개 폴더 지정해서 사용하세요 저는 하다가 맨날 바꿔가지고 항상 깃허브작업을 2번 씩합니다... 한 번에 2개 폴더 만드셔서 깃허브에 연결해서 사용하세요. 두 번 일 안합니다. pagenation을 사용하여 내용을 10개씩 보여줍니다. 페이지..

Project (React) 2023. 11. 1. 10:00

안녕하세요 홍 가 입니다. 오늘은 쇼핑몰을 만들어보려고 합니다. 자세한 코드는 여기에 있습니다. 시리즈 | React 쇼핑몰 만들기 - Hongga.log 전에는 CRUD를 만들어 봤으며 요번에는 쇼핑몰을 제작해보려고 합니다. 저는 front기본은 게시판과 쇼핑몰이라고 생각을 합니다. 기초 파일 생성 및 레이아웃 설정 메인 페이지 틀 잡기 제품 클릭 velog.io 우선 기본 틀은 이렇게 구성이 되었고요 가상 데이터를 받아와서 페이지를 제작했습니다. 라이브러리는 axios, react-router-dom, redux, styled-components를 다운받아 사용했습니다. 처음에 보여지는 부분입니다. 장바구니 부분입니다. redux를 사용해서 제작했습니다. HOME부분에 있는 상품 클릭시 상세페이지로 ..

Project (React) 2023. 10. 31. 16:06

안녕하세요 홍 가 입니다. 제가 많은 생각 끝에 블로그를 옮기려고 합니다. tistory를 삭제하는 것은 아니지만 주로 velog로 활동을 하려고 합니다. 티스토리는 제가 완성한 내용 및 깃허브에 관한 내용을 계속 올릴 예정입니다. 다른 내용은 햄버거 버튼에 있는 카테고리 및 사이드바에 있는 최신글로 확인해주시면 감사하겠습니다. 현재도 벨로그에 글을 올리고 있습니다. 제가 벨로그로 옮기는 이유는 티스토리보다 편리함이 크다는 장점이 있습니다. 마크다운은 음.. 잘 모르겠지만 그냥 글을 작성하면 그 글에대한 내용을 이런식으로 한눈에 볼 수 있다는 장점이 매우 컷습니다. 저는 한눈에 보는 것을 좋아하기 때문에 제가 블로그를 작성하면서 저랬으면 좋겠다 했는데 그게 velog였어요 그래서 tistory는 아마 v..

카테고리 없음 2023. 10. 31. 15:50

안녕하세요 홍 가 입니다. 요즘 블로그를 벨로그로 옮기는 중이라 업로드를 못하고있네요 벨로그에는 기초 지식 및 간단한 프로젝트 등을 올리고 있습니다. 2023-10-25 11시40분경 팀 스페이스를 지워야하는데 안지워져가지고 찾던 중 누가 워크 스페이스를 지우는 글을 보고 똑같이 따라했습니다. 결과는 ??????????????????????? ??????????????????????? 진짜 많은 생각이 지나갔습니다. 저의 모든 파일이 담겨져있고 심지어 포폴과 연결되어있는 노션이 사라졌다..? 바로 물음표 눌러서 지원팀에게 메세지 보내기 url은 브라우저 검색기록 및 카톡이나 지인들에게 보낸 페이지를 넣으면 되고 워크스페이스 이름은 내손으로 직접 지웠으니 알 수 밖에 없고 이메일 주소가 가장 난감했다 저는..

카테고리 없음 2023. 10. 25. 12:06

안녕하세요 홍 가 입니다. 오늘은 마지막 부분인 DB내용을 삭제 및 수정하기가 되겠습니다. 사진과 같이 원래는 삭제 수정 버튼이 위에 "새로운 컴포넌트..." 부분에도 있어야 하지만 보이지 않습니다. 보이지 않는 이유는 제가 임의로 사용자 아이디를 바꿔서 보이지 않습니다. firebase에서 제공해주는 database부분에 접근하여 글 삭제를 하도록 했습니다. onChange에서는 e.target.value를 사용하고 onSubmit에서는 e.preventDefault();를 사용한다. firebase에서 제공해주는 database부분에 접근하여 업데이트를 하도록 했습니다.

Project (React) 2023. 9. 22. 10:00

안녕하세요 홍가 입니다. 오늘은 firebase DataBase를 생성해보려고 합니다. firebase에서 제공해주는 DB를 사용해보려고 합니다. 이렇게 직접 작성을 해도 됩니다. 저는 연동을 시켜서 사용하려고 해요 firebase파일에 가서 작성을 해줍니다. submit으로 보내주는데 collection과 document로 구성이 되어 사용되는데 collection부분에 texts라는 파일을 생성해주고 그 내부 document에 내용과 날짜를 넣어주고 setText로 text값을 받아 적용이 됩니다. 텍스트를 치고 등록을 누르고 firebaseDB로 오시면 이렇게 생성이 된걸 보실수 있습니다. 홈 화면에 보여주기 위해 코드작성 이렇게 화면에 나타나게 됩니다.

Project (React) 2023. 9. 18. 10:00

안녕하세요 홍가 입니다. 오늘은 firebase로 로그인 및 로그아웃을 구현해보려고 합니다. 아이디와 비밀번호를 받기 위해 사용을 했고요 useState를 사용해서 회원가입과 로그인을 나눴습니다. click버튼을 사용하여 firebase에서 지원해 주는 구글 깃허브와 연동을 시켜줍니다. 이렇게 사용을 한다면 로그인이 완료가 됩니다. 제가 사용하는 react-router-dom 버전은 5.3.1 버전이기 때문에 navigate 말고 history를 사용했습니다. 이제 로그아웃 버튼을 누르면 다시 로그인 화면으로 이동이 되며 회원가입을 했던 이메일과 비밀번호를 적고 로그인버튼을 클릭하면 로그인이 다시 됩니다.

Project (React) 2023. 9. 14. 18:33

안녕하세요 홍 가 입니다. 오늘은 firebase로 로그인 구현을 해보려고 합니다. firebase는 Auth서비스를 제공해주는데 로그인 방법 선택지가 많습니다. 보통 회원 가입을 하려면 테이블을 생성해서 코드를 연결시켜서 사용을 하는데 firebase는 복잡하게 하지 않고 서비스를 제공해주기 때문에 사용이 편리합니다. 이메일과 구글은 클릭만 하면 설정이 끝납니다. 사전 설정은 깃허브 로그인 하시고 setting을 가셔서 dev -> OAuth에 접속을 하면 이미지와 같은 창이 뜨고 빈칸을 다 설정해주시면 아이디와 비밀번호를 두 번 째 사진 빈칸 부분에 넣어주시면 됩니다. 그러면 이렇게 3개의 로그인 방식을 제공한다고 보여줍니다. 먼저 email과 password가 잘 작동하는지 확인 합니다. 코드는 이..

Project (React) 2023. 9. 2. 14:00