우여곡절 구구절절 우여곡절 끝에 완성했던 바닐라 자바스크립트 프로젝트, 오늘의 바다.. 🥹 프로젝트 도중에 개인 사정으로 잠시 놓기도 했고.. 이런저런 일들이 많았어서 생각보다 완성까지 오래 걸렸다. 심지어 회고쓰는 것도 이제야.. (..!) 더 늦기 전에 서둘러 작성해본다. 좋았던 경험 1. 공공데이터 API를 쓰면서 그래도 적지 않은 수의 데이터를 다루어 본 것 같다. (데이터 엑셀파일에는 420여 개 정도의 전국의 해수욕장 데이터가 담겨있다.) 2. 자바스크립트로 나름대로 고민하며 기능을 구현했다. 이건 좋았던 것이기도, 아쉽기도 한데 일단 좋았던 것. 순수하게 자바스크립트로만 만든 프로젝트를 한번쯤 해보고 싶었기에 시작해서 구현하면서 연습도 되고- 중첩된 object 속 데이터를 어떻게 꺼내올 것..

지금까지 현재까지 데이터를 파이어베이스 백엔드로 보내고 받고 할 수 있는 웹 애플리케이션을 만들었다. 급한 일이 생겨서 막바지에 경주마처럼 배포까지 해놓은 상태 ^^.. 이번에도 디자인 간단하게 뚝딱뚝딱.. 하지만 여기서 끝내기엔 너무.. 🤔 기능이 꽤.. 부족.. 🤔 (단순한 기능인게 사실..) 인증(로그인)기능을 우선적으로 추가해볼 생각. 그리고 리팩토링이 매우 필요하기도 하고.. 일단 지금의 문제점은 특히 주문 관련된 페이지 컴포넌트들이 너무 무거워서 분리될 필요성이 있고, 뭔가 액션이 일어날 때마다 전체적인 요소들의 렌더링이 다시 일어나는 것을 볼 수 있어서 useMemo 훅을 이용한다던가.. 최적화가 꼭 필요할 것 같다. 또 강의에서 대체로 css module을 많이 사용해왔고, 나도 분리된 c..

지난 글 (https://i-ten.tistory.com/186)에 이은 에러 해결 기록.. 아마 이번 글이 마지막일 듯하다. 🔥 에러 페이지 이동시 무한 새로고침 나도 발견했었고 친구가 무려 녹화해서 보내준... 꽤나 당황스러운 에러 😇 에러 페이지에 무슨 일이 있는 것인가 이게 대체 뭔가.. 하는 혼란이 찾아왔었지만 해결은 의외로 간단했다. 웹팩으로 빌드하면서 error.html 문서에 패키지로 묶은 스크립트 파일 info가 선언되어 있었기 때문이었다. 스크립트 태그를 없애니 자연스럽게 해결~ 🔥 검색어 추천 가나다 순 정렬 이건 에러는 아니고, 한 친구가 가나다순으로 목록이 나오면 좋겠다고 해서 추가했다. API에 사용되는 해수욕장 목록 엑셀 데이터에 번호 붙이는 기준이 무엇인진 모르겠으나 (위..

지난 글(https://i-ten.tistory.com/185)에 이어서 두 번째 에러 해결 과정을 기록한다. 역시나 더 좋고 깔끔한 코드와 해결방법이 있을 것이라고 생각한다! 🔥 아무거나 입력했을 때 무한 로딩 + 최적화 말 그대로 아무렇게나 막 쳐서 검색했을 때 무한 로딩이 걸리는 현상. 값의 유효성을 확인하지 않고 그냥 넘겨버렸기 때문에 나타난 버그다. 버그를 수정하면서 사용자를 위해 검색 결과가 없다는 것을 안내하는 텍스트도 같이 추가하기로 했다. 아래는 필터링된 검색 결과를 보여주는 함수 코드의 일부인데, 검색 결과 배열에 아무것도 없을 때 에러 메시지를 보여주는 코드를 추가했다. 물론 활성화된걸 없애주는 코드도 아래 어딘가에 있음. 그리고 검색결과를 넘기는 함수에서는 try-catch문으로 해..

험난한 삽질 과정을 거쳐 드디어 배포된 환경에서도 잘 돌아간다!~ 그리고 사용자(친구들)로부터 받은 몇몇 피드백. 특히 QA 일을 잠시 해봤던 친구가 아주 상세한.. 피드백을 해주었다. 🥹(감동의 눈물) 언젠가 미래의 나에게 도움이 될 수도 있으니 삽질 과정을 기록해보기로 했다. 아직 부족한 부분이 많기 때문에 충분히 더 좋은 코드와 해결 방법이 있을 것이라 생각 ^^! (이에 대한 댓글도 환영합니다..) 그리고 작성하는데 글이 좀 길어질 가능성이 있어 제목에 냅다 번호를 붙여봤다. 🔥 해수욕장 이름 관련 이슈 먼저 해결해본 이슈는 해수욕장 이름이 때에 따라 다르게 나온다 는 이슈. 이것은 비교적 쉽게 해결했다. 해변 이름이 송지호 해수욕장을 예시로, 왼쪽처럼 나와야 하는데, 어떤 경우는 송지, 송지호 ..

프로젝트를 얼추 마무리하며 필수적인 기능 구현과 수정이 어느정도 끝난 상태에서 프로젝트를 일차적으로 마무리하며 돌아보는 글을 써볼까 한다. 간단하게 후딱 만들어보자! 하는 생각에서 시작해서, 5일 이내로 웬만한 작업을 다 마무리 한 것 같다. 처음에는 더 가볍게 만들어볼 생각이었지만 기획 단계에서도 약간의 욕심이 생겨서 직접 그림도 그려보고, 진행하면서 처음 간단하게 기획했던 것 보다 조금씩 더 얹어진 부분이 많았다. 😇 기획 이미지 우선 이미지들은 원하는 이미지 찾기 어려우면 내가 만들지 뭐.. 싶어서 트레이싱해서 그린 가위 바위 보. 게임이다보니 좀 통통 튀었으면 해서 네온컬러를 사용해보았다. 구상 처음 구상했던 것. 간단 그 자체!.. 랜덤으로 계속 돌아가는 이미지에서 버튼을 누르면 승패가 판가름 ..

들어가며 진행했던 미니 프로젝트인 가위바위보 게임에서 게임시작 페이지로 넘어가면 3초 카운트가 시작된다. 그런데 사파리 브라우저와 iOS 디바이스들에서는 Audio.play 함수가 동작하지 않는 것을 알게 되었다. 😱 크롬과 비슷하게 브라우저 정책상 사운드 자동재생이 바로 되지 않도록 막혀있는 것!... 그렇다면 천상 인트로페이지에서 버튼을 눌렀을 때 배경음악이 나오도록 했던 것처럼, 여기서도 무언가 눌렀을 때 게임이 시작될 수 있도록 해야하는데... (setTimout 메서드도 정상적으로 동작하지 않았다.) 사용성 부분에서는 조금 떨어질 수 있지만, iOS와 사파리 전용으로 게임 시작을 알리는 레이어를 깔아주기로 했다. 그럼 먼저 현재 접속하고 있는 브라우저가 무엇인지를 알아보는 것이 우선! navig..

할인금액이 적용된 가격을 JSP에서 쉼표표시하여 나타내고 싶었다. 검색 중 JSTL의 fmt 태그를 통해 숫자타입에 대한 조정이 가능하다는 것을 알게 되었다. fmt:formatNumber 이 태그는 숫자값을 숫자, 통화, 퍼센트로 바꾼다. 적용 코드 ${l.lec_price - (l.lec_price* l.lec_sale)}원 📃 참고 https://treasurebear.tistory.com/43 JSTL 금액 표시(세자리마다 쉼표) jsp로 화면을 그리고 있는데, 금액을 표시해야 되서 세자리마다 쉼표(, comma)를 넣어주고 싶었다. 1,000,000원 이렇게! 그래서 tld로 만들까.. script로 만들까.. 고민하다가, 찾아보니 jstl에서 기능을 제 treasurebear.tistory.com

HTML5에서 제공하는 geolocation API를 통해 위치 검색을 허용하면 현재 좌표를 얻어낸다. function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { let lon = position.coords.latitude; //위도 let lat = position.coords.longitude; //경도 toAddress(lon,lat); }, function(error) { console.error(error); }, { enableHighAccuracy: false, maximumAge: 0, timeout: Infinity }); } } 여기서 얻..

자바스크립트를 이용하여 버튼 클릭시 현재 페이지의 URL을 클립보드에 복사하는 기능을 추가하고 싶었다. function clipBoard(){ let dummy = document.createElement("input"); const url = location.href; document.body.appendChild(dummy); dummy.value = url; dummy.select(); document.execCommand("copy"); alert("URL을 클립보드에 복사했습니다."); document.body.removeChild(dummy); } 함수 실행시 임시로 URL을 담는 input을 생성하고 복사 후 삭제한다. document.execCommand("copy"); 클립보드 복사의 핵..