doeunn.log

▶게시물 댓글달기 기능 구현 이번 글에서는 게시물에 댓글달기 버튼을 누르면 그때 댓글 컴포넌트가 보이고 그 댓글 컴포넌트에 댓글을 작성/편집/삭제 하는 기능을 구현해 보려고 합니다. 📌 화면 구성 게시물 컴포넌트 하단에 있는 댓글 달기 버튼을 눌렀을 때 댓글 컴포넌트가 보이도록 합니다. 그리고 textarea에 댓글을 작성하고 저장하기 버튼을 누르면 바로 위 댓글 리스트에 보여지게 합니다. 또한 기존 댓글 각각 편집과 삭제 버튼이 존재하며 편집을 누르면 해당 댓글의 내용이 아래 textarea에 오면서 저장 버튼의 컬러가 바뀌도록 css까지 지정해 주었습니다. 삭제 버튼 역시 버튼을 누르는 동시에 화면에서 사라지게 했습니다. 📌 데이터베이스와 주고 받아야 할 내용 댓글을 작성하고 저장 버튼을 누른 시점 ..

▶게시물 좋아요 기능 구현 홈화면에서 게시물에 좋아요를 누르면 카운팅이 되고 이 카운팅된 수는 데이터베이스에 저장하고 있도록 구현을 해보려고 합니다. 📌 화면 구성 게시물 컴포넌트에서 게시물 하단 부분에 좋아요, 댓글달기, 공유하기 버튼을 추가해주려고 합니다. 📌 게시물 컴포넌트 코드 추가 기존에 작성한 CardBox라는 컴포넌트에 좋아요, 댓글달기, 공유하기 버튼 코드를 추가해야 합니다. 좋아요 버튼을 누르면 /api/home/like 라는 url로 좋아요를 누른 게시물의 id와 현재 좋아요 수를 서버에게 put 요청을 보냅니다. 📄 Home.jsx 파일 export default function Home(props) { // ... return( // ... ) const CardBox = (prop..

▶리액트(React)를 알아보자 리액트 프로젝트 파일을 생성하기 전에 리액트가 무엇인지, 구동원리는 무엇인지, 핵심 컨셉은 무엇인지! 등에 대해 알아보려고 합니다🙂! 🔎 React ? React란 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 라이브러리 입니다. 📌 라이브러리 ? (도서관 = 모듈들의 집합) 간혹 프레임워크와 라이브러리가 혼동될 때가 있는데요. 같이 알아봅시다! 프레임워크 코드를 작성할 때 필요한 틀을 제공해 주는 것 따라서 개발을 할 때 제어권이 개발자가 아닌 프레임워크에게 존재. 개발할 때 프레임워크가 가지고 있는 규칙에 의해 작성 ex) Spring, Django, nextJS, nuxtJS 라이브러리 같은 로그인 로직이라 하더라도 passportJS, g..

▶계정 찾기 및 탈퇴 기능 구현 지난번에 회원가입과 로그인 기능을 구현해 보았었는데요🙂 이번에는 회원가입 시 데이터베이스에 저장된 정보들을 가지고 계정(아이디) 찾기와 탈퇴 기능을 구현해 보도록 하겠습니다. 🔎 계정 찾기 📌 계정 찾기 화면 구성 이메일을 입력해서 검색하기 버튼을 누르면 그 이메일을 사용하고 있는 계정의 아이디를 보여주게 됩니다. 회원 이메일 입력하면 → 아이디 알려주기 없는 회원 이메일 입력하면 → 계정이 존재하지 않다고 알려주기 📌 데이터베이스에 있는 데이터를 무엇을 어떻게 활용? 클라이언트에서 사용자가 입력한 이메일을 서버에게 보내면 서버는 그 이메일를 이용하여 데이터베이스에서 조회를 하게 되고, 조회가 된다면 그 조회된 값에서 아이디 값만 다시 클라이언트에게 보내면 됩니다. 만약 ..

▶홈화면 게시물 - 데이터베이스에서 가져와서 컴포넌트로 보여주기 홈화면에 게시물들을 나타낼 겁니다. 데이터베이스에 저장되어 있는 게시물 정보를 가져와서 하나씩 컴포넌트로 화면에 보여주려고 합니다. 📌 홈화면 화면 구성 📌 해야하는 연결 데이터베이스에 연결하여 home 테이블에서 데이터를 모두 가져와 row 하나당 CardBox라는 컴포넌트 하나씩 화면에 보여주려고 합니다. 📌 홈화면 컴포넌트 가장 먼저 홈화면 컴포넌트를 구성하려고 합니다. 밑에서 CardBox라는 컴포넌트를 만들어서 화면에 보여줄 것까지 알고 코드를 봐 봅시다. 📄 Home.jsx 파일 export default function Home(props) { const [array, setArray] = useState([]); useEffe..

▶회원가입 & 로그인 기능 구현 이번 글에서는 지난 번에 연결하고 구성해 두었던 데이터베이스와 users 테이블을 이용하여 회원가입과 로그인 기능을 구현한 부분의 코드를 회고해 보려고 합니다😀! 🔎 회원가입 📌 회원가입 페이지 화면 구성 사용자 아이디, 사용자 이메일, 비밀번호, 비밀번호 확인, 생일, 성별 값을 입력하고 가입하기 버튼을 누르도록 화면을 구성했습니다. 📌 클라이언트와 서버가 주고 받아야 하는 내용들 클라이언트 → 서버 : 사용자 아이디, 사용자 이메일, 비밀번호, 생일(년, 월, 일), 성별 서버 → 클라이언트 : result( { 'successs' || 'dup-userid' } ) 클라이언트는 { userid, password, email, year, month, day, gende..