전체 글

오늘은 드디어 모던 JS 딥다이브 스터디 모집과 일정 세팅이 끝난 날~!! 스터디를 모집하는건 언제나 신경쓸게 많지만, 그래도 앞으로의 몇 개월의 분위기는 초기 일주일안에 결정되는게 보편적이기에 좀 더 힘을 내려 한다!! 스터디 일정 조율하고 팀 프로젝트 코드 리뷰하고, 스터디 설문 만들고, 팀 프로젝트 맡은 부분 UI 개발하고, 알고리즘 문제 하나까지 푸니 벌써 퇴실하라고 알람이 와서 놀랐다.. 주말을 이용해서 팀 프로젝트를 완성 후딱하고, 개인 공부시간도 챙길 수 있게 시간 조절, 그리고 체력 조절 잘 해야겠다~~  오늘의 일기 끗

팀 프로젝트 + 팀 프로젝트에 적용할 개인 공부 + 스터디 모집 마감 일정을 한 번에 처리하려니 진짜 하루가 부족했다..! 내 시간 어디로 사라진 거지? ※ 웹 폰트 적용하기매번 구글 폰트나 다른 cdn을 사용해서 웹폰트를 다운로드하는 형태로 웹 폰트를 사용했는데, 이번 프로젝트에서는 local에서 서버로 웹 폰트를 올리는 @font-face를 사용해 웹폰트 최적화를 사용하였다. 한 번 최적화에 대해 고민하게 되니, 더욱더 많은 자료를 찾아보게 되었고 가장 도움이 되었던 건 'FE.CONF 2018' 컨퍼런스에서 발표된 웹폰트 최적화 발표 자료였다. 오늘은 자세히 포스팅할 시간이 없어 해당 내용 정리한 것만 기재해 두고, 프로젝트 마감 후 제대로 올려봐야겠다. 아래 내용은 'FE CONF 2018 웹폰트..

내배캠 두 번째 팀 프로젝트가 시작된 날. 이번엔 이전과 달리 개인 과제를 발전시켜 나가는 형태의 팀 프로젝트 주제였습니다. 운명인지 또 mbit i가 6명이 모인 조였는데, 많은 의견들이 나와 나름 성공적인 첫날을 보낸 것 같습니다!!(울 팀 파이팅~)각자의 역할분담을 마치고, 마이페이지 부분을 맡게 되었습니다. 북마크 한 영화와 로그인한 사용자가 작성한 댓글을 모아볼 수 있게 하고, 프로필을 수정하는 기능 등등 별 것 없어 보이지만 생각보다 많은 기능을 포함하고 있는 페이지였습니다. 이번 프로젝트는 localstorage를 사용해 보자는 취지에 맞게, 평소 프로젝트와 달리 백엔드를 사용하지 않고 구현하기로 하였습니다. 이런 경험은 처음이긴 한데, 백엔드 사용하는 것처럼 비슷한 동작원리로 구성하면 잘 ..

바닐라 자바스크립트로 프로젝트 해봐야지... 해봐야지 생각만 하고 미루던 걸, 드디어 이번 기회에 해보았습니다. HTML도 최소화하고(body 태그 안에 단 10줄!), 온전히 자바스크립트 문법만 활용해서 개발했습니다. 많은 추가 기능 구현보다는 코드의 가독성에 가장 중점을 두고 작성하였고, 단일 책임 원칙(Single Responsibility Principle)도 지키려 노력했습니다(그런데 작게 안 나눠지더라고요 ㅠㅠ 더 노력해야겠습니다). 작게는 변수명부터 크게는 함수를 선언하는 위치와 코드를 읽는 시선까지 고민해 봄으로써 유익한 공부가 된 것 같습니다. ※ 개인 미니 프로젝트_영화 검색 사이트(Vanilla JS)  구현 목표 예시 사이트가 있고 꼭 사용해야 하는 '필수 요구사항'과 개인적으로 추..

자바스크립트 딥다이브 스터디 모집 시작  내배캠 본 과정 시작하는 날 매니저님이 지난 기수때는 스터디도 모여서 했다는 걸 듣고 2주 동안 기다렸지만 새로운 스터디가 생기지 않았다! 매일 '내가 올릴까?' ↔ '누군가 멋지게 모아주시지 않을까?'의 무한 챗바퀴를 열심히 타던 중 더 늦으면 최종 프로젝트 때도 딥 다이브 책만 읽고 있을 것 같아 진짜 눈 꼭 감고 올렸다...(글 작성하고 올리는데만 몇 시간이 걸렸어요ㅠㅠ)모던 자바스크립트 딥다이브라는 책은 혼자 읽어도 충분히 유익할테지만, 점차 다른 사람의 코드를 읽어야 하는 시간이 많아지자 타인이 코드의 로직을 짤 때, 혹은 개발자라는 직군을 준비하면서 어떤 생각과 관점을 가지고 있는지 공유하는 것이 상당히 좋은 경험이라는 것을 알게 되었다. 그렇기에 서로..

오늘은 계속 공부 중..이전에 바닐라 자바스크립트에서 웹 컴포넌트를 작성하기 위해서는 반드시 custom-element와 shadow DOM 구조를 이용해야만 하는 줄 알았다. 하지만 그렇게 되면 자바스크립트로 렌더링 되는 게 아닌 HTML 구조만을 이용한 결과가 되기 때문에 내가 생각한 구조와는 조금 달라지겠다는 생각이 들었다. 때문에 더 많은 자료를 구글링 해보면서 새로운 방법을 알게 되었다. 단순히 기능별로 JS파일을 나누는 게 아닌 상태(state)와 컴포넌트 기능별로 어떻게 바닐라 자바스크립트에서 동작하는지 순서대로 포스팅된 황준일 님의 블로그를 알게 되었다. 뭔가 눈에 익을 듯하면서도 살짝 헷갈려 여기에 있는 내용을 좀 더 공부하고 프로젝트에 적용해보려 한다. 요즘 자주 보고 있는 '프롱트' ..

주말 동안 개인 프로젝트 과제를 해보려고 오늘에서야 TMDB 사이트의 API를 만져봤다. 그런데 자꾸 회원가입하려는데 자꾸 가입 안된다고 문의 남기라는 페이지만 자꾸 뜨길래 크롬, 엣지, 크롬 시크릿 탭 왔다 갔다 해봤는데도 계속 오류가 떠서 어이가 없었다. 결국 최후의 방법으로 핸드폰으로 회원가입하니 이게 웬걸 바로 가입되길래 이게 뭐야...로 시작했던 TMDB의 첫인상 TMDB 사용해 보기이번 과제에선 많은 API들 중 Top Rated을 이용하는데, 사용방법을 직관적으론 알 수 없어 이것저것 시도해 봐야 어떤 기능인지 알 수 있었다. FETCH REQUEST에 있는 보일러 코드를 가져와 실행해 보니 직접 REQUEST 요청이 언제 들어왔는지, 성공했는지 여부를 알려주는 RECENT REQUEST는 ..

이전 프로젝트에서 html, css, javascript만을 사용하다 보니, 같은 구조가 반복되는 곳에서 불필요하게 코드가 길어질 수밖에 없었습니다. 적절하게 반복문을 사용하여 구성해도 코드의 길이가 짧아지고 효율적으로 바뀌지만, 다른 곳에서의 재사용 측면에 있어 컴포넌트 개념이 유용하기 때문에 많이 사용되곤 합니다. 때문에 이번 개인 프로젝트에는 React 같은 라이브러리나 다른 프레임워크 없이, 자바스크립트만을 사용해서 컴포넌트를 구현해 보고자 Web Component를 찾아보았습니다.  웹 컴포넌트를 알아보기 위해 MDN docs를 정독했습니다. MDN에서는 웹 컴포넌트를 다음과 같이 정의합니다.※ 웹 컴포넌트: 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱..