studyHard
article thumbnail
게시판 프로젝트 (6) - mongo db, Read

게시판 프로젝트 Day6 구현 & 에러 적당히 CSS를 잡아뒀다.. 몽고db에 데이터를 집어넣고 렌더링했음 (딱히 어려운 부분은 없었다) 딱히 적을게 없다. 앞으로 해야할게 넘쳐난다. 행복하다. 해야할 것 좋아요 버튼, 카테고리별 분류(더미데이터 만들어줘잉..), 게시글 작성페이지, 댓글 등등등등등등등

article thumbnail
게시판 프로젝트 (5) - kakao login

게시판 프로젝트 Day5 구현 & 에러 카카오 OAuth 로그인을 해결하고 나서 정보를 불러오는데 자꾸 언디파인드만 뜬다. 왜 그러지 또 시간을 낭비하다가 카카오에서 설정을 안해줘서 언디파인드가 나온다는 걸 알게됐다. (무생님 감사합니다..) 로그인시 이미지+이름 추가. 기존 헤더에 내정보를 없애고 로그인 했을때 프로필(이미지+이름)을 눌렀을때 내정보로 이동하게 변경. 해야할 것 CRUD기능 게시판, 댓글 구현, MongoDB 연동..

article thumbnail
게시판 프로젝트 (4) - next/auth

게시판 프로젝트 Day4 next/auth를 사용해서 로그인을 하는 간단한 코드인데 계속 404 not found가 나와서 10시간을 고생했다.. 진짜 하루종일 찾아보다가 멘탈이 나갔었는데 알고보니까 pages폴더를 app안에 만들었더라..하.. 고쳐서 다행인데 가슴은 찢어질거같다..

article thumbnail
게시판 프로젝트 (3) - root layout

게시판 프로젝트 Day3 구현한 것 root layout에 헤더와 푸터를 만들고 css로 기본 구조 잡기, hover, active 효과를 준 다음 라우팅을 걸어주었다. Tailwind CSS 공식 사이트에서 속성을 하나하나 찾아보고 집어넣느라 시간이 좀 오래걸렸는데 쓰다보니까 편한것같다. 스타일드 컴포넌트랑 같이쓰면 가독성이 올라간다고 생각해서, 동기분들과 얘기한뒤 추가하기로 했다. root page에는 기본 메인페이지가 형성될예정이고 다른 폴더(경로)에 게시판, 글쓰기 페이지 등등이 들어갈것같다. 맨처음에 root layout의 html을 지웠다가 수많은 콘솔과, vscode 수정후 저장시 자동렌더링이 안되어서 멘붕이었다...흑흑 해야할 것 카카오톡 로그인 OAuth를 구현할 예정이고, 로그인 여부에..

article thumbnail
게시판 프로젝트 (2) - 플래닝

게시판 프로젝트 Day2 구현한 것 라우팅을 미리 정리해 두었고 사용하게 될 데이터도 정리해 보았다. 근데 OAuth를 사용해 봐야 더 정확하게 정리할 수 있을 것 같다. 각 컴포넌트에 들어갈 기능 등을 정리해 보았다. 실제 코딩에 들어가면 더 세분화될 테지만 큰 틀만 잡아두었다. 작업순서 또한 정해보았는데 저대로 이루어지지는 않을 것이다. 다만 저 흐름대로 진행될 거라고 생각한다. 해야 할 것 아직 Next.js를 공부하는 도중이라 개발을 진행하지는 못했다. (아마 내일부터는 시작할 거 같다) 얼른 공부를 끝내고 TS와 Tailwind CSS도 공부해야 하고.. RTK를 사용해 볼 예정이었는데 Next.js 와 같이 사용하기 위한 별도의 라이브러리가 버전 문제로 사용할 수 없을 거 같다. Context..

article thumbnail
게시판 프로젝트 (1) - 시작

솔로 프로젝트 시작 2023.05.23 ~ 2023.06.05까지 총 2주일 동안 솔로 프로젝트를 시작하려고 한다. 솔로 프로젝트이지만 동기 두 분과 총 셋(한분 추가해서 넷)이서 유사한 결과물을 각자 만들기로 했다. 피그잼을 통해 세부적인 계획을 세웠으며 오늘부터 열심히 미쳐볼 예정이다.. 좋은 결과물을 만드는 것도 목적이지만 Next.js, TS, Tailwind CSS 등 다뤄보지 않은 스택들을 공부하기 위함의 목적도 있는 만큼 상당히 어려울 거라 예상된다. (그렇지만 재밌을 거 같다..) 위의 디자인 형식으로 만들 예정이고... 날짜를 정해서 서로 코드리뷰도 할 예정인데 진짜 시간이 있을까 걱정이고 벌써 지옥문을 연거 같고 두근두근 떨리지만, 아몰랑 얼른 공부나 하러 가야겠다.. 파이팅!

Modal Page (이벤트 버블링 관련)
미니 프로젝트/Modal 2023. 4. 1. 15:44

const Section = () => { const [modalOpen, setModalOpen] = useState(false); const imagesArr = [ "/img/1.png", "/img/2.png", "/img/3.png", "/img/4.png", "/img/5.png", "/img/6.png", "/img/7.png", "/img/8.png", ]; const showModal = () => { setModalOpen(true); }; return ( {imagesArr.map((image, index) => ( {modalOpen && } ))} ); }; function Modal({ setModalOpen, id, title, content, writer }) { const ..