자바스크립트의 개념을 공부하다 보면 필수적으로 마주치게 되는 호이스팅에 대해 따로 정리해 본다. 호이스팅 Hoisting 자바스크립트에서 변수 선언이나 함수 선언이 해당 스코프의 최상단으로 올려지는 현상을 말한다. 변수의 호이스팅 먼저 변수에서의 호이스팅을 알아보자. var로 선언한 변수 console.log(hi); // undefined var hi = 'hello'; 위와 같은 코드가 있을 때, undefined가 출력되는 것을 확인할 수 있다. 그 이유가 바로 호이스팅 때문인데, 변수 hi의 선언문이 먼저 최상단으로 올라가 버려 선언되었지만 아직 'hello'라는 할당을 받기 전인 상태이다. var 키워드로 선언된 변수의 경우 선언과 동시에 undefined로 할당된다는 특징이 있다. let 또는..

'Restful API란?' 이라는 질문에 답변을 위한 REST API에 대한 내용을 정리해본다. RESTful API는 결국 REST하다는 의미인데, 먼저 REST가 어떤 의미인지부터 알아야할 필요성이 있겠다. REST API REST API는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST는 REpresentational State Transfer의 약자로, 자원(Resource)에 대한 요청을 행위(HTTP Method)로 처리한다. 주로 JSON, XML 형식의 데이터로 반환되어 처리된다. REST의 구성 자원(Resource) - URI (엔드포인트) 행위(Verb) - HTTP Method (HTTP 요청 메서드) 표현(representations) -..

3월 넷째 주를 보내며 면접 준비로 정신없는 와중에 3월을 거의 다 보내게 되었다. 😇 👀 Fact 모의 면접과 피드백을 받았다. 오늘의 바다 프로젝트 next.js 마이그레이션을 시도하고 있다. 🙂 Feeling CS 공부를 좀 더 열심히 해야겠다는 생각. 프로젝트 관련 질문들을 미리 좀 생각해 봐야겠다!.. 은근히 까다롭고 어려운.. next.js와 sass의 조합.. 🔍 Finding next.js에서 Sass/SCSS 적용하기 브라우저의 렌더링 과정 💪 Future action 프로젝트 관련 질문 정리 면접 스터디 열심히 하기 프로그래머스 과제전형 문제 풀어보기 👏 Feedback 모의면접에 최선을 다했지만 더 준비해야 할 듯!.. 알고리즘은 정말 쫌쫌따리 풀고 있다. 이론도 열심히 공부 중,,

www.google.com 을 주소창에 입력했을 때 일어나는 일 꼭 구글이 아니더라도, 우리는 어떤 주소를 브라우저의 주소창에 입력했을 때, 페이지가 바로 뜨는 것을 당연하게 생각하고 있다. 어떤 식으로 그 페이지를 불러오는지에 대해 고민해 본 적이 있던가? 브라우저의 렌더링 과정에 대해 다시 공부하다보니 이 과정이 궁금해지기도 했고, 프론트엔드 개발자라면 반드시 알고 있어야 할 내용인 것 같아 한번 정리해보려고 한다. 결국 웹페이지에 우리가 원하는 화면이 보이려면 서버에서 데이터를 가져와야 한다. 데이터를 받아오기 위한 과정을 나열해보자! www.google.com로부터 IP 주소 얻어오기 도메인 도메인이라는 것을 한번쯤 들어봤을 것이다. 쉽게 말하면 각각의 IP 주소에 붙은 이름표 같은 것이다. IP..

3월 셋째 주를 보내며 캠프 수료하고 맞이하는 첫 주말이다 ^^.. 열심히 이력서 손보고, 틈틈이 리팩토링하고, 면접준비도 하고 있는 일상.. 진짜 끝자락 다와가는데 (물론 취뽀가 끝은 아니지만) 좀만 더 힘을 내보자고!! 💪 👀 Fact 내일배움캠프 수료! 이력서 초안을 쓰고 피드백 대기 중... 최종 프로젝트에서 팀 노션에 내가 작성했던 유저 피드백 결과 문서가 우수사례로 다른 트랙에 공유되었다. HTTP의 바이블이라 불리우는.. HTTP 완벽 가이드를 e북으로 구매했다. 🙂 Feeling 이 5개월 가까운 여정이 끝났다니 믿기지 않음... 면접준비 쉽지않다 하지만 했었으니 다시 할 수 있다. 텐션 올려!!! 열심히 문서화한 보람이 있다. 앞으로도 꾸준히 문서화하자! 🥰 한동안 놓고 살았던 책을 다시..

수료 내일배움캠프 4기를 갓 수료를 했다. 취준은 뭐 이제 시작이고 현재 진행형이다. 사실 아직 마인드 세팅이 좀 덜 되어서 그렇지 제대로 준비하면 또 잘할 것이라고 나를 믿는다. (ㅎㅎ) 제목을 왜 저렇게 달아놨냐 함은, 캠프 합류 전에 신청할까 말까 고민하던 시기에 구글링을 무지하게 하는데 글이 별로 없었기 때문이다. 이 글이 누군가에게 도움이 될 수 있지 않을까? 하는 생각에서 솔직하게 작성해 본다. 나는 얼마나 성장했나? 작년 11월 초에 썼던 주간 회고에 요런 내용을 써놨었다. 슬프게도 코딩테스트 빼고는 대부분 얻었다고 본다. (현재 프로그래머스 1단계 중반에 머물러있음,, ㅠㅠ) 특히 여러 번의 협업 프로젝트로 얻은 것들이 정말 많았다. 나는 총 6번의 프로젝트 중에 3번의 팀 리더와 1번의 ..

프로젝트를 마치며 어제의 수료식과 함께 드디어 캠프가 완전히 끝났다 ^0^!... (물론 끝날 때까지 끝난 게 아님) 이번 프로젝트는 나를 열심히 갈아 넣었다고 해도 과언이 아니고.. (다들 그렇겠지만) 밤에 커피도 안마셨는데 똘망한 정신으로 로직을 짜면서 재밌다는 생각을 많이 했던 것 같다. 지금까지 프로젝트 회고를 했듯이 이번 프로젝트에서도 아쉬웠던 점과 좋았던 점을 간략하게 작성해볼까 한다. 아쉬웠던 점 일단 기능적인 면에서는 최선을 다한 것 같다. 팀원들 모두가 멋진 실력을 갖고 있었던 분들이었기 때문에!.. (짱) 코드 일단 타입 스크립트를 깊게 활용하지 못한 점이 아쉽다. 나는 대체로 코드를 짜면서 any를 지양하며 타입을 지정하려 노력했지만, 초기에 타입을 정해두고 프로젝트를 진행하는 것이 ..

3월 둘째 주를 보내며 수료일이 정말 코앞까지 다가와버리고 말았다!... 무언가에 잠시 소속되어 몰입하다가 거친 채용시장에 다시 입성하게 된.. 흑흑 수료 후에는 블로그 카테고리를 좀 정리해서 앞으로도 회고를 계속 써갈 것 같다. 또 내가 이 캠프를 수료하기 전과 후에 어떻게 달라졌는지도 회고해 볼 예정이다. 👀 Fact 최종 발표회를 위한 브로셔 노션 문서를 정리했다. 유저 피드백을 마치고 문서화했다. 상세페이지 하트에 대한 새로고침 시 유지 버그를 수정했다. 최종 프로젝트를 제출했다. (!!) 🙂 Feeling 나는 문서화를 즐기는 사람 같다. 내가 짠 코드가 아니더라도 수정할 수 있고, 있어야 겠다는 생각. 이제 취업시장에 던져졌다 해도 무방하다 ㅎ 🔍 Finding 카카오톡 공유기능 input 태..

Today, What I learned? 내 파트는 아니었지만 급하게 좋아요 관련 버그를 수정하게 되었다. 담당하지 않았던 파트라 코드를 들여다볼 일이 많지 않았는데 오히려 좋아!.. 이번 버그는 새로고침 했을 때 하트가 유지되지 않는 버그였다. 분명 이전에는 되었던 것 같기도 한데 그 사이 수정이 되면서 뭔가 버그가 생긴 듯.. 🤔 원인 파악 myProjects 컬렉션에 현재 프로젝트 id 값이 확인되어야만 하트를 채우는 isLike가 판단될 수 있는데, 새로고침 했을 때 useQuery에서 데이터를 받아오는 시간이 있어서 처음에 undefined로 값이 들어가 버리는 게 문제인 듯했다. 그래서 새로고침하고 하트가 풀리니까 다시 누르면 숫자가 1씩 늘어나는.. 이상한 버그.. 로그를 보면 true로 m..

Today, What I learned? 유저 피드백을 반영하여, 기존의 공유 기능에서 카카오톡 공유를 추가하기로 했다. (아무래도 많이 쓰이니까) 이전 프로젝트에도 구현되어 있던 부분이라 (담당하진 않음) 꽤 많은 참고를 했음에도?.. 조금 다르게 적용하려다 보니 오류가 좀 발생해서 기록.. 사전 작업 일단 카카오 디벨롭스에서 앱 등록과 플랫폼에 도메인 등록이 필요하다. 앱을 등록하면 앱 키를 확인할 수 있고, 여기서 필요한 값은 자바스크립트 키값. env 파일에 추가해 주자! 또 플랫폼에서 Web에 도메인을 추가해 준다. 나는 배포주소랑 로컬호스트를 추가해 주었다. 추가적으로 PR시 vercel 프리뷰에서 확인하고 싶다면 프리뷰 주소를 추가해줘야 한다. index.html index.html의 헤더 ..