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

이번에는 netlify 같은 서비스의 도움을 받지 않고, 웹팩으로 빌드해보고 Github Pages에서 배포해보기로 했다. 일단 빌드하는 데도 삽질을 많이 했지만, 배포하고 나니 로컬환경에선 잘 동작했던 게 먹통이 되어서 (...) 또 한바탕 삽질을 했다. 아직 온전히 웹팩을 이해한 것은 아니지만, 현재 배포까지는 해결했기 때문에 다음엔 이 만큼의 삽질을 하지 않기 위해 기록한다... 😇 그래서 웹팩이 뭔지?... 웹팩.. 프론트엔드를 공부하다 보면 한번쯤은 들어봤을 법한 이름. 우리가 사용하는 여러 웹 애플리케이션은 모두 수많은 자원들을 바탕으로 구성되어 있다. HTML, CSS, JavaScript 파일 뿐만 아니라 페이지를 구성하는 이미지, 폰트 등등.. 만들 때야 각각의 자원들을 필요에 따라서 구..

검색 기능을 만들다 보니.. 이렇게 구글에서 추천 검색어를 띄워주는 걸 만들면 좋겠다 싶었다. 완벽한 검색 기능을 만들 순 없겠지만!.. 일단 첫 글자라도 일치하는 모든 데이터를 가져와 보기로. filter 메서드를 통해서 걸러오면 되는데, 한글은 영문이 아니기 때문에 toLowerCase 같은 메서드를 사용하지 않아도 된다. 필터링된 해수욕장들을 li 태그 안에 넣는 작업을 거친다. 그리고 DOM 작업을 좀 거치면 이렇게 첫 글자가 일치하는 해수욕장들이 뜬다! +++ 완성 후 검색어가 가나다순으로 정렬되었으면 좋겠다는 피드백이 있었어서 추가 작업을 진행했다. 아래에서 볼 수 있다. https://i-ten.tistory.com/187 에러 수정 삽질 기록 (3) 지난 글 (https://i-ten.ti..

7월 돌아보기 또 한 달이 훌쩍 지나갔다. 휴가를 미리 다녀오기도 했고, 인생은 역시 마냥 계획대로 흘러가지는 않기 때문에!.. 😇 7월에 계획한 일들을 모두 이루지는 못했지만 그래도 다 못한 것은 아니기에!.. 이번 달도 힘내서 계속 공부해봐야지. 강연 1. 전직러 웨비나 7월에는 강연을 들을 기회가 좀 있었다. 비슷한 상황이어서 자연스레 신청하게 된 개발자로 전직한 분들의 웨비나. 취준생들을 위한 강연- 보다는 좀 더 구체적인 주제를 갖고 있는 웨비나여서 좋았고, 연사님들의 공유를 통해서 꽤 다양한 인사이트를 얻을 수 있었다. 특히 앞으로 나의 진로를 개발자로 선택함에 있어서 단순히 좋아하는 '일'이어서가 아닌, '일의 성격'이 나와 잘 맞을지? 를 생각해보게 됐다. 강연 2. 테크니컬 라이팅 역시 ..

먼저 JSON 파일에서 데이터를 가져와서 필요한 형태로 가공해야 하는데... 배열 안의 객체 형태였고, 당시 이런 형태를 별로 다뤄본 적이 없었다. 내가 필요한 형태는 beach-num과 name을 매치시켜서 배열에 name만 쭉 가져오고 싶었다. 그리고 한참 동안 배열 메서드로만 삽질을 하는데 ( . . .) 그러다 mdn 문서를 보고 깨달았다. 아.. 구조 분해 할당을 사용해야 하는구나.. 🥹 Object.entries에 대한 페이지를 쭉 보다 보면, entires 메서드를 구조 분해 할당을 이용해서 key, value 값으로 가져올 수 있다는 걸 알 수 있다. 좋아 그럼 나도 이제 써보자..🥹 파일에 저장된 데이터를 다시 json화 해서 값만 가져온 뒤, entires 메서드를 이용해서 beachN..

들어가며 자바스크립트에 대한 지식이 1mm 내린 비처럼 있을랑 말랑 했던 시절.. this에 대한 설명글들을 봐도 도무지 이해하기가 어려웠다. 이게 뭔가에 따라서 달라지는건 알겠는데 그래서... 어떻게 된다는 ? ?.. 짧게 얘기하자면 this는 누가 호출했느냐에 따라 달라진다. 어렵게만 느껴졌던 this에 대해 정리해 보자. 그래서 this란?? 일단 this의 사전적 의미는 '이것'이긴 한데.. 뭘 가리키느냐. 바로 자신이 속한 객체나 생성할 인스턴스를 가리키는 변수다. C++이나 JAVA와 같은 클래스 기반의 언어에서의 this는 클래스가 생성한 인스턴스다. 이미 this를 선언하면서 생성된 인스턴스를 가리킨다고 결정된 것이다. 그런데 자바스크립트의 this는 좀 특이하다. 자바스크립트에서의 th..

들어가며 뭔가 뒤바뀐 순서지만 지난번 CSR과 SSR에 대해 알아보며, 우리가 웹페이지에 접속하면 '렌더링'이라는 과정을 거친다는 것을 알게 되었다. 자연스레 이 렌더링이 구체적으로 어떻게 이루어지는지 궁금해져서, 얼핏 들어본 단어들을 드디어 정리할 시기가 왔다..! 머리 한편에 흩어져있는 단어들을 한번 맞춰가며 이번 글에서는 브라우저 렌더링에 대해 정리해본다. 일단 브라우저가 뭔가요? 렌더링이 일어나는 주체, 우리가 매일같이 흔하게, 인터넷 접속을 하기 위해서 사용하고 있는 프로그램이다. 예전에는 인터넷 익스플로러, 요즘엔 크롬, 파이어폭스, 네이버 웨일, 맥 유저라면 사파리. 그 외에도 브레이브, 비발디 등등 다양한 브라우저가 있다. 그럼 렌더링은 뭔데요? render라는 단어는 사전적으로 make와..

6월 돌아보기 벌써 7월이 시작하고 첫 번째 수요일이 되었는데 이제 회고를 쓴다!? . . 그나저나 6월엔 블로그 글을 좀 더 쓰겠다고 했는데 그러지 못했다. 그렇게 됐다.. 😇.. 그래도 잔디는 주말과 어떤 날들을 제외하고 대체로 심었다. 뭐 1일 1 커밋 이런 건 아니고 그냥 강의 듣고 진행하면서 시점에 따라서 커밋했다. 확실히 커밋을 많이 해보고.. 되돌리고.. 수정하고 하다 보니 깃이 조금은 더 친숙해지고 있다는 것을 느낀 한 달.. 퇴사하고 본격적으로 프론트 공부를 시작한 건 4월 중순께인데, 그 사이 시간 동안 UX로 돌릴 것이냐, 프론트로 쭉 공부해볼 것이냐를 고민을 참 많이 했었다. 그리고 그 고민은 다시 돌아와 6월이 시작되고 한 2주 동안을 그렇게 보냈다.. 😂 SNS도 그렇고 여기저기..