2024.12.04
_15:47
뮤직플레이어를 사용하면서, 노래 변경이나 볼륨 조절 등 직접 눌러줘야되는데 불편함을 느끼고, 키보드 입력 기능을 추가함.
2024.11.18
_19:05
프로젝트 아키텍처 등 만들어서 프로젝트 눌렀을 때 모달로 자세한 내용들 띄울 수 있게 변경하자.
2024.05.27
_21:45
구상과 구현에 글을 안썼는데, 모바일 버전에 보이는 뮤직 컴포넌트를 따로 만들었었다.
일단 보여주는 페이지의 모양이 달라지고, 작동 방식이 다르다보니 다르게 했었는데, 모바일 버전을 만들고보니 pc버전도 모바일 버전처럼 동작방식을 변경해도 될 것 같았다. 그렇게 조금 변경하고 보니 디자인과 몇개의 동작방식 말고는 똑같은 코드라는걸 느끼고, 이를 하나의 컴포넌트로 통합했다.
이걸 통합한 이유 중 다른 한가지는 pc버전에서도 뮤직플레이어만 쓰는 페이지를 한 개 만들거라 종합하면 CM월드 사이드에 나오는 플레이어, pc버전 뮤직플레이어, 모바일버전 뮤직플레이어, 총 3개의 뮤직플레이어가 필요한데 일일이 만드는건 낭비이자 부적절하기 때문이었다. 무튼 그렇게 3개의 플레이어를 한개의 컴포넌트로 통합했고, 이제 pc버전의 뮤직플레이어에 접근할 수 있도록 CM월드의 놀이터 탭을 개방하고 거기에 팜팜과 페이크 카카오페이, 그리고 뮤직플레이어를 넣으면 될 것 같다.
2024.05.23
_00:06
와 오랜만에 글쓴다..
일단 배포는 끝났고, 일단 지인들에게 링크 줬는데 모바일 사이즈는 설정을 안해둬서 카톡으로 링크받은 사람들이 바로 접속해볼 수 없는 상태가 빈번하게 발생했다.
근데 모바일 사이즈를 하려면 배치나 그런거 전부 새로 짜야되고 이게 일단 지인들에게 카톡으로 링크보내서 그렇지 포트폴리오 사이트인데 모바일로 들어와서 볼껀가 싶더라.
그래서 생각한게 원래 배포하고 휴대폰에서 화면 껐을 때도 bgm 재생이 잘 되면 밖에서 노래 들을 때 접속도 하고 그럴 생각이었었는데, 오늘 테스트해보니 자연스럽진 않지만 재생이 가능했다.
그래서 차라리 모바일에서 접속하면 뮤직플레이어 사이트로 동작하도록 만들 계획이다.
https://yejin-han.github.io/music-player/
Music Player
queue_music shuffle skip_previous play_arrow skip_next repeat
yejin-han.github.io
일단 이분꺼 디자인 참고해서 만들어 볼까 한다.
2024.04.15
_23:09
프로젝트 세부정보 모달로 띄울 수 있도록 작업 필요.
세부정보로 뭐 띄울지 미리 생각 좀 해둬야할듯.
지금 페이지도 내용들 너무 추상적인가? 한번 생각 필요.
세팅 페이지 음악 자동 추천 기능 만들어야함.
날씨 지역 선택 기능 추가해야함.
어느정도 거의 끝났으니 다시 백엔드쪽 진도 좀 내고, 어짜피 배포하려면 배포부분도 공부해야하니 포트폴리오 작업은 이제 좀 늦추고 백엔드쪽 달려야할듯
2024.04.15
_13:14
firebase 사용량 제한 당해서 글이 안나온다.. 글쓰기 기능 구현했는데 테스트를 못하고 있다.. ㅎㅎ
오후 8시반쯤 걸렸는데 풀리는게 오후 8시쯤 풀린다고.. 제한 풀리면 게시판 테스트 완료하고, 글쓰기 데이터에 Re 처리 체크하고,
홈페이지 방명록 숫자 나오는거 제대로 나오는지 테스트하자.
홈페이지 공지사항 태그들 만들기.
환영합니다 => 첫페이지 인삿말
업데이트정보 => 버전별로 나누고, 시작은 Beta로 => 크게 2.0. 2.1. 식으로 나누고 밑에 자세한 버전 적는식
방명록 저장방식 설명글 하나 적어주자.
개발일지 로 여기 Portfolio.v2 태그 링크 넣어주자 => 스샷도 넣을까? => 사이트 링크에도 하나 추가해주자
2024.04.14
_02:22
글쓰기 기능 구현
사진 선택하기(+사진들 추가해야됨), db로 보낼 데이터들 = UID, name, postedAt, img, message, Re ?, isDeleted : false
작성하기 버튼 기능 구현
삭제 기능 구현 = isDeleted : frue, deletedAt
2024.04.13
_23:50
firebase onAuthStateChanged에 대한 깨달음과 객체화에 대한 조금의 이해로 인하여 코드 구조 변경 필요해보임..
2024.04.12
_13:31
클라우드 타입에 올라간 백엔드 계속 죽는지 확인하고 계속 죽으면 react로 바꾸던지, 다른 방법을 찾던지 해야할듯 싶다.
(react로 변경하기 번거로워서 이렇게 했는데 오히려 손이 많이가는 기분..)
여기에 프로젝트 별로 모달을 넣는게 좋으려나..?
모달을 넣게 되면 지금 사이트 이동 기능들 어디로 옮기는게 좋으려나..?
방명록 작업하고 설정에 기능들 정리하고, 홈 마무리하고 1차완성처리 해야할듯?
2024.04.11
_16:10
누나뮤직 프로젝트 했던거 데모사이트 올릴려면 react로 변경 필요..
구조 그냥 그대로 하고 환경변수 api만 넣을지, react로 변경시킬지 고민좀..
=> 막상 손대려니깐 손댈게 너무 많다.. 이것에 그정도로 시간 투자할 필요가 있을지 의문이라 그냥 놔두는게 좋을듯 싶다.
_14:26
프로젝트 눌렀을 때 새창 띄워서 추가 정보 보여줄 것인가?
보여주면 뭘 보여줄것인가?
하게된다면 modal 기능 사용
2024.04.09
_00:45
프로젝트 페이지를 먼저 작업할까 방명록 페이지를 먼저 작업할까..
프로젝트는 최근에 코알누로 팀프로젝트 했던거 react로 다시 만들어서 배포까지 올려야될테고..
방명록은 백엔드 구현안할꺼라 파이어베이스 사용할 계획인데 이쪽도 해보는데 시간 좀 걸릴것 같고..
이 글 작성 전까지는 방명록쪽으로 생각이 갔었는데 일단 포트폴리오가 주 목적이니 프로젝트 페이지 먼저 만들고, 나머지는 점차 만들어나가는걸로 하자.
2024.04.08
_17:73
왼쪽에 탭을 나눠야할까? 적을게 많나?
간단 자기소개, 기술스택, 교육, 자격증 정도인듯 싶은데 그냥 합치는게 좋을듯
그렇다면 왼쪽 탭에는 뭘 넣어야할까?
_13:14
왼쪽탭 디자인해주기,
쥬크박스 왼쪽탭 해당 컴포넌트로 변경해서 컴포넌트 재사용/통일성 향상시키기 - 쥬크박스 왼쪽탭에서 오른쪽으로 보내던 데이터들 redux처리 없애고 오른쪽에서 url별로 처리하기 - 동적으로 처리할지?
뮤직플레이어 세팅에 필요한 기능들 검토후 반영, 테스트버튼 만들기
2024.04.07
_01:53
설정에 뭐 넣을지 생각해보자
자동 재생 - 없으면 0(자동재생안함)이다
음량 저장 - 없으면 기본값 얼마다
마지막 플레이리스트 저장 - 없으면 재접속시에 노래없어서 일일이 다시 플레이해야한다
셔플 유무 저장 - 없으면 기본플레이
자동노래추천 - 시간과 날씨에 맞게 설정된 노래 추천 (디테일정보)
음량/플레이 테스트 버튼 - 프리스타일 Y 플레이어로 넘기기(하나만 넘기면 플레이리스트 변경안되니 두개 번갈아가면서 넘겨야할듯, 아니면 설정이 바로 플레이리스트에 반영되면 굳이 노래 바꿀필요없어도 될듯)
2024.04.06
_00:59
이젠 진도 좀 나가야할듯싶다.
메인페이지 아니면 설정 페이지 먼저 만들자.
2024.04.05
_18:53
프로젝트 하면서 뭐가 조금 바뀌면 계속 타입오류가 난다..
타입스크립트를 적용해야할듯 싶다..
_04:25
localStorage에 값들 넣었는데 랜덤기능때문에 로직이 너무 복잡해져서 좀 꼬이고있다.
그런데 지금 생각해보니 굳이 다시 들어왔을 때 랜덤플레이로 만들어진 리스트에 플레이 중이던 노래부터 노래가 시작할 필요가 있을까 싶다.. 랜덤플레이는 말그대로 랜덤하게 듣고싶어서 해놓는거라 그냥 선택한 플레이리스트 원본 저장하고, 랜덤플레이 버튼 여부만 체크한다음에 다시 들어왔을 때 localStorage에서 플레이리스트 가져와서 랜덤체크되어있었으면 랜덤으로 노래만들어주고 아니면 플레이리스트 그냥 처음부터 재생시키면 될듯 싶다.
한마디로 굳이 마지막으로 들었던 노래가 다시 재생되어야할 필요가 있나 싶다.
아니면 마지막으로 재생중이었던 노래의 정보만 저장했다가 다시 켰을 때 그 노래정보에 맞는 인덱스로만 변경해줘도 될듯싶다.
고민좀 해보자.
2024.04.04
며칠 보니 현재,최저,최고 기온이 같은값인데 최고,최저가 내가 예상했던 하루의 최저,최고 기온이 아니던지 아니면 한국은 지원을 안해주는듯 싶어서 최고,최저 기온은 삭제하고, 하는김에 실제로 잘 안보는 기압,풍향도 삭제하는게 좋은듯 싶다.
redux toolkit? 으로 redux 변경해보기
랜덤플레이 기능을 만들까?? 당장은 필요한게 아니라 이건 좀 보류
접속할때마다 쥬크박스 들어가서 노래 재생하기 귀찮다. localStorage에 저장할 내용들 생각해보기.
첫 접속을 localStorage의 세팅저장여부로 판단해서 세팅으로 유도하는 기능 부터 추가해볼까?
아 포트폴리오인데 프로젝트 내용 하나도 작성안해놈...ㅎㅎ
구상
2024.04.03
곡 전체 플레이 부분 디자인 수정하고, 사이드 날씨랑 시간부분도 디자인 수정하자.
유튜브영상 보이게 하는 사이즈 하드코딩된거 값받아온걸로 넓이 정하기.
playerControl 쓰는거 오류 다시한번 체크해보기
구현
2024.04.04
사이드 녀석들 디자인 일단 마무리함.
제목이랑 아티스트 글자수 넘어가는 얘들... 처리해줌.
애플 뮤직에 있는 노래들 다 등록함.
구상
2024.04.02
오른쪽 유튜브 영상 일단 안보이게했는데 열었다 닫혔다 할 수 있는 버튼 추가해주는게 좋을듯.
오른쪽 플레이어 곡정보부분 노래제목 길어지면 줄 하나 밀리는데 애초에 두줄짜리 공간을 할당해줘야할듯
체크박스 상태관리가 꼬이는데 제대로 하려면 복잡해져서, 체크박스 기능빼고 한곡 바로 플레이 기능과 플레이리스트 전체 목록 플레이 이렇게 두가지로 쥬크박스 기능을 줄이는게 좋아보인다.
유튜브 영상칸의 높이를 0px로 숨겼었는데 영상(노래)의 상태확인이 안되는 불편한점이 있어서 어느정도의 화면은 필요해보인다.
더불어 볼륨조절 기능이 먹히지 않아서 볼륨컨트롤을 위해서도 필요하다.
재생 컨트롤 밑에 재생목록을 띄웠는데 목록이 많아지면 공간을 많이 차지하는데다가 재생목록을 띄우면 기타 기능들이 추가되야할듯 싶어서 그냥 빼는게 좋아보인다.
구현
2024.04.02
일단 쥬크박스쪽 거의 완성함
플레이어 디자인적인건 95% 완성된것 같고, 데이터 적인것도 지금은 거의 끝났는데, 나중에 localStorage 연동하고 하면 다시 일 늘어날듯..
노래제목 - 가수 정보를 슬라이드 형식으로 바꿨고, 마우스 올리면 슬라이드가 멈추며, 클릭하면 하단에 유튜브 영상이 나온다.
시작, 초기 뼈대
2024.04.01
구상
일단 어느정도 구상대로 만들고 있긴한데
포트폴리오가 주 목적이다보니 화면에 보여줄 영역을 크게 만들어야겠다고 처음 생각했던것과 다르게
어느정도 중앙으로 좀 모아줄 필요가 느껴진다.
전에 코알누 스터디할때도 어느정도 여백에 대해서 얘기해줬던것도 있고,
당장 티스토리만봐도 중앙의 60%정도만 쓰는것 같다.
그리고 배경을 gif로 넣어서 이것도 좀 더 잘보일 수 있는 효과도 있을듯 싶다.
유튜브영상이 나오는게 뭔가 싸이월드 감성이랑 좀 안맞는것 같기도하고, 영상으로 시선이 분산되는듯 싶다.
그래서 유튜브 영상나오는 간을 줄이고, 별도의 컨트롤 버튼을 추가하는게 좋을 것 같다.
더불어 쥬크박스를 작업해야하는데 구조를 어떻게 잡을지 고민이다.
일단 예전 쥬크박스 짤을 가져왔는데.
왼쪽에는 내가 가진 음악탭과 내추천플레이리스트들 탭 그리고 사용자가 만들 수 있는 플레이리스트탭(이건일단생각만)을 만들고,
오른쪽에는 해당 노래들이 나오면 될듯 싶다. 일단 구현을 해보자.
구현
씻으며 생각해보니 div 태그 좀 중복되는거 때문에 왼쪽 오른쪽 컴포넌트 나누는게 더 비효율적이라는 생각이 듦.
한 path로 두개의 컴포넌트를 쓰려니 추가구문도 필요하고 제약사항도 걸리고 그래서 구조를 바꾸기로함.
구조바꿨고, 구조를 반 갈아 엎으면서 중복라우터 처리에 대한 개념을 다시 잡게되어서 더욱 깔끔하게 path처리가 되었다.
그리고 배경변경을 위한 자식 => 부모 데이터 보내는것도 필요하고, 나중에 음악재생목록 데이터 주고받는거 생각하면 상태관리 툴인 redux를 써야 할듯 싶다. 근데 써본적이 없어서 공부해보면서 써봐야한다..
https://velog.io/@best0ne/React-Redux
[React] Redux
리액트 애플리케이션의 상태 관리 라이브러리state(상태) : 컴포넌트 내부에서 관리되는 데이터리액트는 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.자식 컴포넌트들 간의 데이
velog.io
시계 기능 추가
redux로 데이터 전송해서 배경바꾸기 완료
화면 중앙 집중화 필요 => 변경
시작, 초기 뼈대
2024.03.29 ~ 03.31
구상
우선 싸이월드 하면은 개인적으로 bgm이라고 생각한다.
일단 유튜브 api를 생각하고 있지만, 이는 직접 사용해봐야 정확히 알 수 있으며, 안된다면 스포티파이 api를 써야할듯 싶다.
기본 틀은 최대한 그대로 가져오고, 처음에는 localStorage에 설정이 있는지 체크하여 설정 페이지를 먼저 보여주며
이때 소리 bgm 재생여부와 플레이리스트 등 기타 기능을 넣을 생각이다.
그리고 배경은 위치와 날씨 받아와서 날씨관련된 배경으로 보여주고,
포트폴리오니깐 내용들을 잘 보여주기 위해 내용칸들을 좀 키울 생각이다.
그리고 각 탭은 router로 처리하면 될 듯 싶다.
구현
우선 git 레파지토리 새로 파고 react 만들기 시작.
화면 뼈대 완성, 사이드 네이바 70%, geolocation 기본동작 넣음, 순서도 그리기 시작
geolocation 처리 페이지, geolocation으로 위경도 받아서 날씨데이터 받아오기, 받아온 날씨 데이터 보여주기, 배경 변경하기
