티스토리

sero.log🌱

검색하기

블로그 홈

sero.log🌱

i-ten.tistory.com/m

포스팅 내용에 대한 조언은 언제나 환영입니다. 🙌

구독자: 9

방명록 방문하기

주요 글 목록

조금 늦은 오늘의 바다 회고 우여곡절 구구절절 우여곡절 끝에 완성했던 바닐라 자바스크립트 프로젝트, 오늘의 바다.. 🥹 프로젝트 도중에 개인 사정으로 잠시 놓기도 했고.. 이런저런 일들이 많았어서 생각보다 완성까지 오래 걸렸다. 심지어 회고쓰는 것도 이제야.. (..!) 더 늦기 전에 서둘러 작성해본다. 좋았던 경험 1. 공공데이터 API를 쓰면서 그래도 적지 않은 수의 데이터를 다루어 본 것 같다. (데이터 엑셀파일에는 420여 개 정도의 전국의 해수욕장 데이터가 담겨있다.) 2. 자바스크립트로 나름대로 고민하며 기능을 구현했다. 이건 좋았던 것이기도, 아쉽기도 한데 일단 좋았던 것. 순수하게 자바스크립트로만 만든 프로젝트를 한번쯤 해보고 싶었기에 시작해서 구현하면서 연습도 되고- 중첩된 object 속 데이터를 어떻게 꺼내올 것.. 공감수 1 댓글수 1 2022. 10. 17.
[🍏] 중간회고? 현재까지의 진행상황 🤔 지금까지 현재까지 데이터를 파이어베이스 백엔드로 보내고 받고 할 수 있는 웹 애플리케이션을 만들었다. 급한 일이 생겨서 막바지에 경주마처럼 배포까지 해놓은 상태 ^^.. 이번에도 디자인 간단하게 뚝딱뚝딱.. 하지만 여기서 끝내기엔 너무.. 🤔 기능이 꽤.. 부족.. 🤔 (단순한 기능인게 사실..) 인증(로그인)기능을 우선적으로 추가해볼 생각. 그리고 리팩토링이 매우 필요하기도 하고.. 일단 지금의 문제점은 특히 주문 관련된 페이지 컴포넌트들이 너무 무거워서 분리될 필요성이 있고, 뭔가 액션이 일어날 때마다 전체적인 요소들의 렌더링이 다시 일어나는 것을 볼 수 있어서 useMemo 훅을 이용한다던가.. 최적화가 꼭 필요할 것 같다. 또 강의에서 대체로 css module을 많이 사용해왔고, 나도 분리된 c.. 공감수 0 댓글수 0 2022. 10. 11.
에러 수정 삽질 기록 (3) 지난 글 (https://i-ten.tistory.com/186)에 이은 에러 해결 기록.. 아마 이번 글이 마지막일 듯하다. 🔥 에러 페이지 이동시 무한 새로고침 나도 발견했었고 친구가 무려 녹화해서 보내준... 꽤나 당황스러운 에러 😇 에러 페이지에 무슨 일이 있는 것인가 이게 대체 뭔가.. 하는 혼란이 찾아왔었지만 해결은 의외로 간단했다. 웹팩으로 빌드하면서 error.html 문서에 패키지로 묶은 스크립트 파일 info가 선언되어 있었기 때문이었다. 스크립트 태그를 없애니 자연스럽게 해결~ 🔥 검색어 추천 가나다 순 정렬 이건 에러는 아니고, 한 친구가 가나다순으로 목록이 나오면 좋겠다고 해서 추가했다. API에 사용되는 해수욕장 목록 엑셀 데이터에 번호 붙이는 기준이 무엇인진 모르겠으나 (위.. 공감수 0 댓글수 0 2022. 9. 16.
에러 수정 삽질 기록 (2) 지난 글(https://i-ten.tistory.com/185)에 이어서 두 번째 에러 해결 과정을 기록한다. 역시나 더 좋고 깔끔한 코드와 해결방법이 있을 것이라고 생각한다! 🔥 아무거나 입력했을 때 무한 로딩 + 최적화 말 그대로 아무렇게나 막 쳐서 검색했을 때 무한 로딩이 걸리는 현상. 값의 유효성을 확인하지 않고 그냥 넘겨버렸기 때문에 나타난 버그다. 버그를 수정하면서 사용자를 위해 검색 결과가 없다는 것을 안내하는 텍스트도 같이 추가하기로 했다. 아래는 필터링된 검색 결과를 보여주는 함수 코드의 일부인데, 검색 결과 배열에 아무것도 없을 때 에러 메시지를 보여주는 코드를 추가했다. 물론 활성화된걸 없애주는 코드도 아래 어딘가에 있음. 그리고 검색결과를 넘기는 함수에서는 try-catch문으로 해.. 공감수 1 댓글수 1 2022. 9. 15.
에러 수정 삽질 기록 (1) 험난한 삽질 과정을 거쳐 드디어 배포된 환경에서도 잘 돌아간다!~ 그리고 사용자(친구들)로부터 받은 몇몇 피드백. 특히 QA 일을 잠시 해봤던 친구가 아주 상세한.. 피드백을 해주었다. 🥹(감동의 눈물) 언젠가 미래의 나에게 도움이 될 수도 있으니 삽질 과정을 기록해보기로 했다. 아직 부족한 부분이 많기 때문에 충분히 더 좋은 코드와 해결 방법이 있을 것이라 생각 ^^! (이에 대한 댓글도 환영합니다..) 그리고 작성하는데 글이 좀 길어질 가능성이 있어 제목에 냅다 번호를 붙여봤다. 🔥 해수욕장 이름 관련 이슈 먼저 해결해본 이슈는 해수욕장 이름이 때에 따라 다르게 나온다 는 이슈. 이것은 비교적 쉽게 해결했다. 해변 이름이 송지호 해수욕장을 예시로, 왼쪽처럼 나와야 하는데, 어떤 경우는 송지, 송지호 .. 공감수 0 댓글수 0 2022. 9. 14.
가위바위보 미니게임을 만들어보며 프로젝트를 얼추 마무리하며 필수적인 기능 구현과 수정이 어느정도 끝난 상태에서 프로젝트를 일차적으로 마무리하며 돌아보는 글을 써볼까 한다. 간단하게 후딱 만들어보자! 하는 생각에서 시작해서, 5일 이내로 웬만한 작업을 다 마무리 한 것 같다. 처음에는 더 가볍게 만들어볼 생각이었지만 기획 단계에서도 약간의 욕심이 생겨서 직접 그림도 그려보고, 진행하면서 처음 간단하게 기획했던 것 보다 조금씩 더 얹어진 부분이 많았다. 😇 기획 이미지 우선 이미지들은 원하는 이미지 찾기 어려우면 내가 만들지 뭐.. 싶어서 트레이싱해서 그린 가위 바위 보. 게임이다보니 좀 통통 튀었으면 해서 네온컬러를 사용해보았다. 구상 처음 구상했던 것. 간단 그 자체!.. 랜덤으로 계속 돌아가는 이미지에서 버튼을 누르면 승패가 판가름 .. 공감수 0 댓글수 0 2022. 6. 27.
[JavaScript+SCSS] 브라우저 타입 확인, 사파리에서만 적용되는 SCSS 들어가며 진행했던 미니 프로젝트인 가위바위보 게임에서 게임시작 페이지로 넘어가면 3초 카운트가 시작된다. 그런데 사파리 브라우저와 iOS 디바이스들에서는 Audio.play 함수가 동작하지 않는 것을 알게 되었다. 😱 크롬과 비슷하게 브라우저 정책상 사운드 자동재생이 바로 되지 않도록 막혀있는 것!... 그렇다면 천상 인트로페이지에서 버튼을 눌렀을 때 배경음악이 나오도록 했던 것처럼, 여기서도 무언가 눌렀을 때 게임이 시작될 수 있도록 해야하는데... (setTimout 메서드도 정상적으로 동작하지 않았다.) 사용성 부분에서는 조금 떨어질 수 있지만, iOS와 사파리 전용으로 게임 시작을 알리는 레이어를 깔아주기로 했다. 그럼 먼저 현재 접속하고 있는 브라우저가 무엇인지를 알아보는 것이 우선! navig.. 공감수 1 댓글수 0 2022. 6. 27.
[JSTL] ftm 태그로 금액 쉼표 표시 할인금액이 적용된 가격을 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 공감수 0 댓글수 0 2021. 9. 27.
[JS] 카카오 좌표>주소변환 API 사용 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 }); } } 여기서 얻.. 공감수 0 댓글수 0 2021. 9. 27.
[JS] URL 클립보드에 복사하기 자바스크립트를 이용하여 버튼 클릭시 현재 페이지의 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"); 클립보드 복사의 핵.. 공감수 0 댓글수 0 2021. 9. 15.
[java] 실시간 문의 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 9. 8.
[JS] 현재 페이지 패스 알아내기 컨트롤러의 url, 즉 웹사이트에서 현재 페이지의 패스를 알아내고 싶었다. let currentPathName = window.location.pathname; window.location.pathname 을 통해 슬러시를 포함한 뒷부분 url을 알 수 있다. 아래는 현재 작성중인 포스트의 패스. 공감수 0 댓글수 0 2021. 9. 8.
[JS] localStorage 로 히스토리 남기기 localStorage 로컬 스토리지 브라우저 내에 키-값을 쌍으로 하여 값을 저장한다. 브라우저가 다시 닫힌 뒤 다시 실행되어도 값이 유지된다. 키-값은 항상 문자열이어야 한다. 또 도메인이나 포트, 프로토콜이 같다면 동일한 모든 창에서 공유된다. 로컬스토리지의 길이 현재 저장되어있는 데이터의 개수를 알 수 있다. const localLength = localStorage.length; localStorage.setItem 로컬스토리지에 값을 추가한다. localStorage.setItem(keyword); 키 값 전체 알기 for문을 통해 로컬스토리지의 인덱스에 해당하는 키에 접근하여 localStorage.getItem(key) 를 통해 키의 값을 알 수 있다. for (let i = 0; i 공감수 0 댓글수 0 2021. 9. 8.
[Ajax] DB와의 연동/ Ajax 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 9. 8.
[웹프로젝트] 화면설계 화면정의서를 작성하기 위해 팀원별로 페이지를 나누어 설계했다. 메인페이지나 상세페이지 같은 부분은 아무래도 내가 관련 경험이 있었기에 담당하게 되었다. 기존 서비스들의 UI를 참고하여 디자인하였고 사용성을 고려하려 했다. 이후 실제 구현하면서 살짝 바뀐 부분들이 있긴 하지만 거의 비슷하다. 결제로 넘어가는 창 같은 경우도 설계했지만 완전히 똑같게 구현되지는 못했다. 공감수 0 댓글수 0 2021. 9. 2.
[웹프로젝트] DB설계 DB를 설계하는 과정은 생각보다 순탄치 않았다. 처음 설계하는 것이다보니 빈틈도 많았고, SQL문 작성을 하며 수정되는 부분이 아주 많았다. 가장 초창기에 생성되었던 다이어그램. 아래 ER 다이어그램은 초기에 SQL문 작성까지 하며 1차적으로 형성된 다이어그램이다. 크게 회원, 강의 카테고리를 중심으로 주문, 찜, 결제, 문의, 쿠폰 등의 테이블들이 있다. 그러나 실제로 팀원들끼리 업무를 배분하여 구현하면서 시간적 제한과 어려움이 있어 빠진 부분들이 좀 있다. 특히 쿠폰 부분은 담당 팀원이 현재까지 배운 단계로 구현하기엔 어렵다고 하여 빼게 되었다. 디비버로 작성된 테이블을 토대로 ER 다이어그램은 아래와 같다. 디비버를 다루는게 미숙해서 선 정리가 조금 복잡하다. 공감수 0 댓글수 0 2021. 9. 2.
[웹프로젝트] 요구사항 명세서 작성 주제를 정한 후 그에 맞춰 사용자 입장에서 필요한 기능을 생각해보고, 이를 토대로 요구사항 명세서를 작성해보는 시간을 가졌다. 팀 회의를 하기 전에 먼저 개인적으로 작성을 해봤다. 프로젝트의 주제는, 앞선 글에서 언급했다시피 온오프라인 유료클래스 플랫폼이다. 수강생과 클래스를 운영하는 강사(사업자), 플랫폼 관리자. 이렇게 세 부류로 분류하여 명세서를 작성했다. 개인적으로 작업한 초기 요구사항 명세서📃 사용자가 필요한 기능들을 정리해보았다. 필요한 기능들은 기존 사이트들을 많이 참고했다. 커뮤니티를 세부적으로 어떤 기능으로 구현할 것인지 의논이 되지 않은 상태여서, 나는 게시판을 통해 서로 댓글과 쪽지, 팔로우로 소통한다고 구상하여 작성했다. 다음으로 사업자(강사)와 관리자의 요구사항 명세서. 역시 기존.. 공감수 1 댓글수 0 2021. 6. 24.
[웹프로젝트] 웹프로젝트 진행 기록 현재 학원에서 웹 프로젝트를 진행중이다. 시작한지 몇주 되었지만 기록을 해놓으면 좋겠다 싶어 이 글을 시작으로 현재까지 해온 것들과 프로젝트를 해가며 겪는 일들을 남겨보고자 한다. 이번 글에선 먼저 주제에 대해 써본다. 주제 프로젝트의 주제를 결정하기 위해 개인적으로 아이템을 선정해 가져오기로 했다. 내가 아이템을 생각하며 정한 기준이 있다면, 1. 너무 뻔하지 않은 아이템 (일반적인 쇼핑몰 같은?) 2. 레퍼런스가 많은 아이템 제안한 주제🖐 1. 헬스/피트니스 가격비교 플랫폼 : 동네마다 미용실만큼 많이 있는 피트니스시설을 모을 수 있는 플랫폼. 하지만 정작 내가 이런 시설을 이용해본 적이 없었고... 레퍼런스 찾기가 힘들다는 것에서 보류.. 2. 온오프라인 유료 클래스 플랫폼 + 커뮤니티 : 요즘 이.. 공감수 0 댓글수 0 2021. 6. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.