카테고리 화면 카테고리에는 로맨스, 판타지/SF, 일상 장르 3가지가 있다. 여기 있는 작품들은 다 외부 API가 아니라 내가 DB로 등록해둔 것을 가져왔다. 약간 노가다긴 했는데 아는 작품을 슬쩍슬쩍 끼워넣으면서 재미있었다. 🤤 이래서 관심 있는 분야로 개발하는 게 재밌다는 거군... 작품 DB에서 특정 장르 작품만 필터링 해서 캐러셀로 보여주기 이전 게시물과 똑같이 Slick 라이브러리를 사용했기 때문에 그냥 filter로 장르만 걸러주면 된다. 슬라이드, 슬라이드 안에 들어갈 이미지들, 양쪽 화살표, 슬라이드의 세팅을 만들어준다. 특히 슬라이드 안에 들어갈 이미지는 useState로 빈 배열을 만든 후 각 장르별로 번호를 붙여 넣어줬다. 아래와 같이 모든 영화를 요청해 데이터를 받아오고, 장르가 로..
구름에서 진행한 두 번째 팀 프로젝트 ☁️ 넷플릭스 클론 코딩이지만 이번에도 넷플릭스를 똑같이 클론하지는 않았다. 우리 팀의 이름인 홍삼의 홍을 따와 Hongflix를 만들었고 메인 컬러는 남색을 사용했다. 영화 사이트 클론 코딩은 비교적 흔한 레퍼런스이기도 하고, 존 안 코치님의 강의에서도 들었어서 익숙했다. 다만 위 경우는 외부 API를 가져오는 거였고, 우리는 관리자로 고도화 해서 콘텐츠 DB를 CRUD 했다. 그래서 이렇게 생성된 DB에서 정보를 가져오는 구조였지만 그래도 기본 틀은 비슷해서 곧잘 할 수 있었다. 다만 이번 프로젝트의 챌린지는 동영상 재생 & 기간 내 다양한 페이지 구현이었다. 🥲 자세한 부분은 각 파트로 나눠 서술할 예정이다. TO DO 홈 화면 유저 회원가입/로그인 마이페이지 ..
드디어 쓰는 첫 프로젝트 회고 ☁️ 첫 프로젝트는 7월 말에 시작했던 인스타그램 클론 코딩이다. 우리팀은 똑같이 클론하는 게 아니라 그 안에서도 각자 할 수 있는 부분을 좀 더 디벨롭하기로 했다. 예컨대 CICD나 기획, 디자인 같은 부분을 우리의 입맛대로 수정해서 하면 조금 더 애정이 갈 것 같았다. 이 프로젝트는 어떤... 진짜 공식적인 프로젝트까진 아니었고, 그냥 팀 빌딩 활동의 일환? 이전까지 개인 과제를 했다면 이번에는 좀 더 협업 중심의 팀 과제였다. 강제성은 없었지만, 우리는 본래 스터디 팀이어서 스터디와 병행하면서 프로젝트를 시작했다. TO DO 로그인, 회원가입, 게시글 CRUD, 홈 화면 원래 회의를 거쳐 이런 저런 다양한 기능들이 나왔지만... 우리끼리 협업이 처음이다 보니 처음은 퀄..
네이버 로그인 폼 클론 코딩 웹 개발을 많이 해보지 않기도 했고, 특히 CSS는 항상 감으로 때려 맞춰서 했던 적이 많아서 최근 CSS 공부를 하고 있다. 그런데 설명만 들어서는 다 이해하는 것 같이 느껴져서, 직접 한 번 해보려고 네이버 클론 코딩을 해봤다. 처음부터 호기롭게 메인 화면을 하려다가 바로 포기했다. 들어갈 것이 많기도 하고 대략적인 구조도 짜지 않은 채 바로 하려고 하다 보니 계속 꼬여서, 보다 조금 간단해 보이는 로그인 폼으로 시작했다. 네이버 로그인 폼 : https://summermong.github.io/playground-js/practice_loginClone/index.html 당연하지만 왼쪽이 네이버고 오른쪽이 내 클론 코딩이다. 포기한 부분은 ID 로그인, 일회용 번호, ..
들어가기 앞서 개발에 관심을 가지게 되면서 제일 먼저 만들어보고 싶었던 게 MBTI 테스트였다. 이걸 만들기 위해서는 먼저 HTML, CSS, JS가 뭔지 알아야 했고 그걸 알아가는 과정에서 코딩에 흥미가 생겼다. 어느 정도 지식이 생겼고 이제는 강의를 봐도 알아 들을 수 있을 것 같아 인프런에서 MBTI 강의를 수강했다. (무려 무료!) 멋사에서도 관련된 강의가 있는데, SEO랑 광고 붙이는 방법도 알려주지만 유료여서 그 부분은 내가 따로 공부하기로 했다. 아무튼 아래 강의는 바닐라JS라서 약간의 하드코딩이 필요한데, 어떤 식으로 돌아가는지 로직을 이해할 수 있어서 좋았다. [무료] [하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기 - 인프런 | 강의 HTML..
(내가 만든 쿠~ 키가 아닌 가위바위보 게임 🎶) 바닐라 자바스크립트로 간단한 가위바위보 게임을 만들어봤습니다. 토이 프로젝트로 가위바위보를 만들어봐야겠다고 결심한 발단 전개 위기 절정 결말 및 야무진 에필로그까지 쌈박하게 정리해보겠습니다. UX/UI 게임을 시작하기 전 간단하게 게임에 대한 설명을 보여주고 Play 버튼을 누르면 게임 화면으로 넘어갑니다. [You / Computer 의 점수], [가위바위보 버튼], [라운드별 결과], [유저가 선택한 패와 컴퓨터의 패]를 보여주는 순으로 나눠져 있습니다. 유저 또는 컴퓨터가 5점을 획득하면 종료 팝업이 뜨고, 최종 성적에 따라 종료 팝업의 텍스트를 변경하는 함수를 사용했습니다. 종료 팝업에는 [다시하기] 버튼과 [공유하기] 버튼이 있고, 버튼을 누르면..
