wnghdcjfe / iutoon

아이유 음악을 앨범, 태그, 순위별로 볼 수 있는 "다음웹툰"같은 서비스

소개

• 현) 스타트업, 어비스 대표 및 리드개발자
• 전) 네이버 개발자
• 자바스크립트 테스트 프레임워크 Mocha.js contributor
• 백준 알고리즘 상위 0.1%
• 

저서

• 면접을 위한 CS전공지식노트 / 길벗 / 2022 [Yes24]
• 실시간 모니터링 시스템을 만들며 정복하는 MEVN / 비제이퍼블릭 / 2021 [Yes24]

강의

• 10주 완성 C++ 코딩테스트 / 인프런
• CS지식의 정석 / 인프런

특강

• 피벗알고리즘으로 하는 성능최적화 / Google Developers Group / 2018
• 책 쓰는 개발자 커리어 / SW마에스트로 / 2021
• IT 대기업 합격하는 방법 / 서울시 청년취업사관학교 / 2022
• 개발자 포트폴리오특강 / 경기도 / 2023
• IT취업특강 / 성신여대 / 2023
• 개발자직업특강 / 광시중 / 2023

신조

포기하더라도 이슈나 다 처리하고 포기하자...

iutoon's Issues

백엔드와의 연결작업

1. 이미지 크기 맞는지 확인, 확장자 전부
2. 로딩에 따른 request 연결
3. loading 지연에 따른 rotate loading 효과

testissue

testissue

백엔드 코드리뷰

1. 아이유 thumbImg필요(png) - 에 따른 property 추가해야 함.
2. 아이유 이미지 크기 통일성 필요(협의 후 결정)
3. 현재 쿼리를 날렸을 때 똑같은 객체가 오는 버그 발생

{popularSong: Array(10)}
popularSong: Array(10)
0: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.png", …}
1: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.png", …}
2: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.png", …}
3: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.png", …}
4: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.png", …}
5: {id: null, title: "바라보기", seeCount: "322946", albumInfo: "정규 1집 Growing Up", img: "http://localhost:12010/10.pn

또한, id null 버그 있음.

태그 뽑기

서칭 > 테스팅 해보기

디테일 부분작업

1. header page 바뀔 때 SVG 애니메이션

• 새로고침할 때 랜덤 이미지로 바뀌는 것.
• 휠스크롤 할 때 fadeIn
• 마우스를 특정 svg를 클릭했을 때 그 svg가 바뀌는 것.

2. song 상세 페이지 [태그, 가사배치, 윗부분 삭제]

3. route 변환시에 해당하는 nav background-color 변화 - 자연스럽게

4. 검색화면

• 검색시에 검은색 화면 이후에 해당 song으로 연결 , 태그로도 서치 가능.

test

test

프론트엔드 나머지 부분

• 모듈화 강화
• route에 따른 SVG 애니메이션

분석해야할 부분

1. sticky - height 고정하면 되는 것, (안 해도 되기도 함 응?)
2. song을 클릭했을 때 이미지가 올라가면서 헤더부분에 위치하는 transition 효과 가능할까?

ssss

sssss

백엔드 코드리팩토링

for(let i = 0; i<140; i++){
        if(json[i]){
            const info=[{

1. 함수형화

2. db createIndex로 발생되는 쿼리에 대한 index 설정하는 shell 또는 js 파일 만들기

3. csvtojson 이거 models에 넣어서 하는게 맞음? 원래 npm 으로 하는건데 이 부분 체크

4. 아이유 png 10장

추천시스템 개발

1. 아이유 노래 피처 캐치 - 잔잔한, 재밌는, 팝 등..
2. 처음 의사결정에 해당하는 데로 협업 필터링을 이용한 추천시스템 제작
3. 해당 관련 DOM 구축

24일까지.

1. react-helmet-async, 기본적인 틀구성(다음웹툰)
2. 휠스크롤시의 sticky css
3. 휠스크롤시의 parallax scroll
4. 휠스크롤시의 fadein 효과
5. 다른거 클릭시의 gif 활성화 효과 top > 앨범 이렇게
6. 검색창 아이콘 클릭시 제목, 키워드 입력 그리고 라벨을 붙여서 태그로도 가능하게(태그는 추후 아이유 노래에 피쳐를 붙여서 만들어볼까 생각중)

mockup

1. react-helmet-async, 기본적인 틀구성(다음웹툰)
2. 휠스크롤시의 sticky css
3. TOP페이지 - 패러랙스 스크롤
4. 앨범페이지