2025. 07. 08 추가
- Netlify Functions 사용해서 포트폴리오 탭에 보안 적용하기 하고 싶었던 건 이랬다:
  1. 싸이트 자체는 아무나 볼 수 있지만, 포트폴리오는 특정인들만 볼 수 있도록 하고싶다.
  2. 비밀번호를 맞게 쳐야만 볼 수 있고, 비밀번호가 틀리다면 개발자모드를 뜯어봐도 내부 정보는 볼 수 없도록!
하지만 이건 서버 없이는 불가능하다는 걸 알았고, Netlify Functions를 활용하면 가능할 수도 있다는걸 알게되었다.
처음엔 조금 헤맸지만, 이제는 원하는대로 동작한다!!
추가적으로 ux적인 측면에서도 조금 디벨롭했다.(sessionStorage)
  - 비밀번호 얼럿의 취소를 누르면 재클릭하기 전까진 다시 묻지 않는다
  - 한번 비밀번호를 맞게 쳤으면 창을 새로고침하기 전까진 해당 프로젝트는 계속 열리게 수정

- Netlify에 배포하기 21년도엔 카페24 호스팅을 사용했고 FTP 파일질라를 이용해 직접 파일들을 올렸었다.
이번에는 Netlify라는 좋은 걸 알게되어서 한번 써봤다. (이게 무료라니)
덕분에 예전에 Codepen 연동해서 쓰려고 아이디만 만들어뒀었던 GitHub도 이제 진짜 제대로 써봤다.
깃헙이 처음엔 .. '개발자들이 피그마를 처음 쓸때 이런 기분일까?' 싶을 정도로 어려웠지만
막상 한번 써보니 너무 간편하고 쉬웠다 ㅎㅎㅎ 이렇게 간단하게 수정한 코드를 바로바로 올릴 수 있다니!! 신세계!!

2025. 07. 07 추가
- 일촌평 새로고침해도 남아있도록 수정 21년도엔 지피티가 없었기에 방법을 도저히 못 찾았었는데, 25년도에 지피티와 함께하니 아주 금방 구현해버렸다!
LocalStorage를 사용해서 구현했다~!
아직 서버와 db가 없으니 본인이 작성한건 본인에게만 보이지만...
그래도 이전과는 다르게 일촌평 작성 후 새로고침해도 남아있고, 삭제도 원하는 것만 삭제 후 새로고침하면 그대로 남겨진다!

- 포트폴리오 탭 신규 추가 웹 포트폴리오를 다시 만들어보고 싶다는 생각에 예전 작업물들을 확인하다가,
싸이월드 미니홈피는 지금 다시 봐도 스스로 뿌듯하고 재밌다는 생각이 들었다
그래서 포트폴리오 탭을 추가하고 이걸 다시 살려보자!!라는 생각이 들었고. 그대로 바로 진행했다ㅎㅎ




2021. 03. 31
아이디어 및 구현 - BGM 플레이 가능할까? 완료. 기존 코드 참고하여 만듦. 처음에는 사운드클라우드 iframe으로 하려했지만 css 수정이 불가하여 music player를 새로 만듦.
볼륨 + - 버튼은 삭제하고 jquery slider ui활용하여 만듦.
$('#current-bgm').html(bgmSource[currentIndex].title);에서 계속 Uncaught TypeError: Cannot read property 'title' of undefined 오류발생.
var currentIndex = saveIndex ? Number(saveIndex) : Math.floor(Math.random() * bgmSource.length);
만 있을 시 자꾸만 오류가 발생해서
if (!(currentIndex >= 0 && currentIndex < bgmSource.length)) { currentIndex = 0;}
추가하여 해결.

- 일촌평 실제로 가능하게? 완료. 일촌명은 웹크롤링해서 단어를 조합하는 식으로 짜려다가 배보다 배꼽이 커지는듯해서 배열에 직접 재밌을듯한 단어들을 적어서 만듦.

- 프로필 사진 클릭하면 큰창으로 보이게 완료. fancybox 플러그인 사용. 직접짜려다가 배보다 배꼽이 커지는 듯해서 간단한 플러그인 사용함.

- bgm에 cd 이미지 빙글빙글 돌아가게 완료. transform과 keyframe animation css로 구현함
bgm 플레이 관련 코드 사이에 끼워넣어서 첫 화면+플레이하지않을 시에는 cd가 돌아가지않고 음악이 흘러나올때만 cd가 빙글빙글 돌도록 구현함.

- 투데이 카운트 가능(?!) 완료. 브라우저 쿠키를 사용해서 해결했다.
그러나 방문자 누적을 보여 줄 Total 카운트는 서버 없이는 도저히 불가능한걸로....

- 프로필과 다이어리 페이지 탭과 아코디언을 jquery로 짜서 구현함

- 사진첩페이지 사진첩 페이지는 탭/아코디언 jquery말고 css만을 이용하여 구현함
펼쳐보기에서 사진 클릭 시 fancybox 작동되지 않도록
pointer-events: none; css를 추가하여 해결함
펼쳐보기/작게보기 추가



작업하면서 겪은 어려움 1. Uncaught TypeError: Cannot read property script를 head에 넣지 않고 body태그 가장 하단으로 위치 변경하니 오류 해결됌
js파일 내에서도 document.ready function안에 있는 것을 밖으로 빼내어 오류 해결
(함수와 함수 호출에 따른 차이점)

2. 일촌평의 일촌명 랜덤 생성 https://nickname.hwanmoo.kr/
한국어 별명 생성기의 open api를 사용하여 ajax로 데이터를 가져와 쓰려고 했지만,
(cross-origin read blocking) corb /cors 정책때문에 오류 생김
dataType:"jsonp"를 사용해서 해결해보려했지만 해결불가..
api 제공해주는 서버측에서 cors정책 해결이 안되어있어서 사용이 불가했다
(callback등)

3. 사진첩 페이지 grid system이용해서 나열은 했는데 사진이 제각각 사이즈가 달라서
전체 다 정사각형 사이즈로 맞추기로함.
background-image로 하기에는 grid시스템과 잘 맞지않아서 css의 object-fit:cover;을 이용하여 해결.


2021. 03. 31 작성함. -끝-