client는 React와 Redux를 사용했고, server는 Node.js를 사용했다. 먼저, 기능 구현을 우선시 하기 위해 css는 최소한으로 하였다. Client [React] 로그인, 로그아웃, 회원가입 구현하기 with Redux 프로젝트 구조를 살펴보자면 아래와 같다. 기능구현을 우선시 하기 위해 css는 최소한으로 했다! 먼저, 기본이 되는 페이지를 살펴보자. ✅ 라우팅 설정 /은 첫 페이지 랜딩페이지로 로그아웃 페 uiop5809.tistory.com Server [Node.js] 로그인, 로그아웃, 회원가입 구현 with MongoDB 프로젝트 구조를 살펴보자면 아래와 같다. ✅ 초기 설정 express를 가져오고 express를 활용해 app을 만들어 준 뒤, 포트 번호를 5000번으..

네 컷 아카이브 프로젝트의 메인페이지 css를 진행하던 도중 배경이미지만 opacity를 줘도 이미지 위에 있는 글자와 함께 같이 투명해지는 문제가 발생했다. 📌 해결방법 가상요소를 이용해 필터를 만들었다 ::before html css 배경화면에만 opacity를 주려고 했으나 아래 방식으로는 글자색까지 투명해지는 것을 볼 수 있었다 .. 이러한 문제를 해결하고자 박스에 before 가상요소를 썼다. 가상요소의 position을 absolute로 주고 width: 100%, height: 100%로 주면 배경 이미지 크기를 동일하게 맞출 수 있다. 또한 박스의 position은 relative로 줘서 배경이미지보다 위로 올라오게 한다. 그러면 글씨에 영향주지 않고 배경이미지에만 opacity를 줄 수 ..

사진을 온라인으로도 저장할 수 있는데 왜 네 컷 전용 온라인 앨범은 없을까..? 네 컷 사진 기록 및 인생 네 컷 프레임 공유 서비스를 소개합니다! 💡 기획 배경 QR을 통해 다운로드한 네 컷 사진, 동영상이 항상 갤러리에서 다른 사진들과 섞이는 것이 항상 아쉬웠습니다. 따라서 다운로드한 네 컷 사진을 한 공간에서 모아볼 수 있으면 어떨까 하는 생각으로부터 네 컷 사진 앨범의 아이디어가 나오게 되었습니다. 최근 네 컷 사진 업체들의 기능이 늘어났으며 그중 하나인 인생 네 컷 프레임 만들기 기능을 활용하고자 하였습니다. 인생 네 컷 프레임 만들기 기능은 직접 제작한 프레임을 적용하여 사진을 찍을 수 있는 기능입니다. 직접 제작한 프레임을 각자의 개인 공간에 게시하다 보니 원하는 프레임을 찾기까지의 과정이 ..