홍가의 코딩공부

안녕하세요 홍 가 입니다. 오늘은 리액트 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

안녕하세요 홍 가 입니다. 오늘은 마지막 부분인 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

안녕하세요 홍 가 입니다. 오늘은 firebase를 사용해보려고 합니다. 프론트엔드 개발자는 프론트쪽만 공부하다 보니 서버 및 데이터 쪽이 어려우실 수 있어요 firebase는 그럴 때 사용하는 서비스입니다. 저도 요즘 면접을 보면서 느낀 점이 프론트 공고를 올려도 DB 쪽을 어느 정도 알아야 한다고 피드백을 많이 받아서 요즘 firebase 및 MySQL을 따로 공부하고 있습니다. firebase는 저희가 사용하기 쉽게 웹서버를 지원해 줍니다. 웹부터 앱까지 서버를 구현하지 않고 개발을 할 수 있습니다. 주로 게시판 및 웹 쇼핑몰 등등 많은 곳에 사용이 가능합니다. 저도 firebase를 통해 메신저를 만들어 보려고 합니다. Firebase | Google’s Mobile and Web App Deve..

Project (React) 2023. 9. 1. 14:58