첫 포트폴리오 사이트를 제작하면서 욕심이 생겼다. 디자이너는 아니지만 뭔가 퀄리티 있는 사이트를 만들고 싶어졌다. 디자이너의 감과 실력이 없는 내게 걸어볼 만한 승부수는 디테일이었다. 스크롤을 내릴때 자석처럼 딱딱 걸리게 하는 scroll-snap 속성을 넣었는데 작동을 하질 않았다. 분명 부모 태그에 scroll-snap-type: y mandatory; 자식 태그에 scroll-snap-align: center; // start나 다른 위치도 가능 을 넣으면 된다고 들었는데 아무리 해봐도 적용이 안된다. 구글링을 해봤다. 이런 식의 바디태그에 스크롤바를 없애라는 글들만 가득했다. 예상대로 스크롤바를 없애니 내리지도 올리지도 못하는 상황이 되어버렸다. 조금 더 찾아봤다. 아하 왜 이 생각을 못했을까? ..

첫번째 포트폴리오가 완성됐다. 소스코드는 https://github.com/10000sun/bike-accident GitHub - 10000sun/bike-accident Contribute to 10000sun/bike-accident development by creating an account on GitHub. github.com 시연은 https://10000sun.github.io/bike-accident 자전거 사고 다발 지역 찾기 사용법 찾고싶은 지역을 시, 구, 군 순서로 선택합니다. 찾고싶은 년도를 선택합니다. 검색을 누르고 지도를 확인합니다. 주의사항 데이터가 완벽하지 않습니다. 찾고싶은 지역 및 년도의 데이 10000sun.github.io 여기서 해볼수있다.

얼추 다 완성하고 시험삼아 모든 지역 및 모든 년도로 돌려보는데 이런 오류가 떴다. 저 1이 뭔가 싶어서 찾아봤다. locations 배열의 행부분이었다. 행부분이 뭔지 뜯어봤다. data.items.item의 배열이었다. 배열을 뜯어봤다. 값이 없다. 못받아왔나? 다른 배열을 뜯어봤다. 잘받아왔다. 사실 특정 지역의 데이터가 충분하지 않아서 데이터가 없었던것이다. 데이터가 없으니 불러오지못할수밖에... 그래서 데이터가 없을시 경고문을 작성했다. 간단하게 배열의 길이가 0이면(없으면) 경고문이 표시되게 했다. 잘된다. 오늘도 지식이 늘었다. 깃허브 : https://github.com/10000sun 현 작업물 : https://10000sun.github.io/bike-accident/

얼추 만들어둔걸 우선 깃허브 브랜치에 커밋하려고 했는데... mixed content 오류가 뜬다. 찾아보니 http 사이트에서 https 사이트를 불러올때 일어나는 보안 문제라고 한다. 5초만에 검색하여 를 추가했다. 아주 잘 된다. 깃허브 : https://github.com/10000sun 현 작업물 : https://10000sun.github.io/bike-accident/

한참 만들던 중 구글맵을 불러올수없는 오류가 생겼다. 유튜브 영상을 보며 혼자 만들고있는데 복병이 들이닥쳤다. 서둘러 놓친 부분은 없는지 영상을 다시 정독했다. 블로그와 유튜브를 짬뽕하여 만들고 있었더니 callback 함수를 제멋대로 넣은게 화근이었다. 찾았다고 생각한 찰나, callback을 없애고 넣었는데 콜백 함수가 없으니 로딩이 안된다. 뭐가 잘못된걸까 하고 미친듯이 찾아봤다. 약 이틀이 소요되었으나 진전이 없던 찰나. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ css에서 사이즈 설정 다 마쳐놓고 바보같이 class를 호출하고있었다. 수정하고 나니 아주 잘 된다. 이제 지역 설정하는 함수만 추가하면 될것같다. 깃허브 : https://github.com/10000sun/ 현 작업물 : https://1000..

api를 이용한 웹사이트가 하나 만들고 싶어졌다. 점점 개발에 욕심이 생긴다. 정부에서 제공하는 공공데이터 포털을 이용해 api를 가져오려고 했는데, 변수 안에 변수를 불러오는게 작동이 안됐다. 처음엔 오타인가 싶어 처음부터 다시 써보기도 하고, 이것 저것 건들며 약 20분을 소비한 결과, 작은 따옴표 둘중에 1옆에 있는 작은따옴표를 사용해야 제대로 인식을 했다. 20분만에 값진 정보를 얻었다. 깃허브 : https://github.com/10000sun 현 작업물 : https://10000sun.github.io/bike-accident/