<현록/>

간단한 메모앱 구현을 위해 아래 유튜브 영상에서 설명하는 기본 레이아웃과 로컬스토리지를 활용한 메모 불러오기 및 갱신 기능을 구현하였다. 해당 영상에서는 레이아웃이 좌측으로 쏠려 있는데 개인적으로 중앙에 오는 디자인이 더 좋아서 배열은 다르게 변경했다. [참고사이트] 이모티콘 다운: https://iconmonstr.com/ 메모앱 구현: https://www.youtube.com/watch?v=n3U4jFbp05M [배운점] 1. contenteditable 속성 HTML5의 모든 엘리먼트는 contenteditable='true'로 설정함으로써 해당 엘리먼트 내부에 텍스트를 작성할 수 있다. 즉, input 외에도 div, span등의 요소도 텍스트 필드로 변화시킬 수 있음을 의미한다. (활용하면 좋..

[기획배경] 개인 토이프로젝트로 간단한 메모앱을 만들어보려고 한다. 형식은 투두리스트를 취하고 있지만, 본질은 'not-todolist' 에 가깝다고 보면 될 것이다. 이 프로젝트에 대한 아이디어는 베스트셀러인 '초집중' 에서 영감을 받았다. 작가는 '딴짓추적표'를 기록함으로써 본짓과 딴짓하는 시간을 구분하고 딴짓 행동에 대한 인지를 강조한다. 이를 통해 끝내 초집중으로 나아갈 수 있음을 말하고 있다. 개발자 취준을 시작하면서 배워야 할것은 너무 많은 가운데 도무지 무엇을 어떻게 시작해야 할 지 눈 앞이 캄캄했다. 휴대폰을 보는 시간이 많아졌고, 무기력한 시간이 계속되었다. 책을 완독한 것은 아니지만 생산성을 높이기 위해서는 해야하는 일을 해내는 것만큼이나 하지 말아야 할 일을 하지 않는 것이 중요함을 ..

(진행배경) 지난 글에 이어 재 배포를 실시하였으나 이번에는 아래와 같은 Mixed Content 에러가 발생하였다. 금방 끝날 줄 알았던 배포가 점점 길어지니 답답할 노릇이었다. [문제 - Mixed Content 에러] (문제 상황) 해당 에러문은 하나의 웹 페이지 안에서 일부는 https로 가져오고, 일부는 http로 리소스를 가져올 때 발생하는 문제라고 한다. (문제 원인) 아래와 같이 로컬 파일에서 API를 요청하는 주소를 모두 살펴본 결과, 소스코드 하나가 http로 리소스를 가져오고 있었다. (해결 방법) 해당 주소를 https로 변경해 주고 다시 git push 하였다. Netlify에서 자동 재배포 된 사이트를 확인하니 정상 로드되었다. (배운점) Mixed Content 문제 예방을 위..

(진행배경) 기존 팀프로젝트로 로컬에서 작업한 웹 애플리케이션을 누구나 접속할 수 있도록 Nelify로 배포하는 작업을 진행하였다. 팀원 모두가 프론트엔드 직무를 희망하면서 단기간에 웹 화면 구현 스킬을 늘리는 데 초점을 뒀던터라, 따로 배포는 진행하지 않아 끝내 아쉬움이 남았었다. 프로젝트 종료 후 3개월이 지난 지금 스스로 배포까지 해보는 경험이 필요할 것 같아 다시 프로젝트를 켰다. 배포가 가능한 사이트는 아주 다양한데 그 중 간편하기로 소문난 Netlify 서비스를 체험해봤다. Netlify 깃허브와 연동하면 내 레포지터리를 모두 불러오고 그 중 원하는 것 선택 배포가 가능해 매우 간편하다. 도메인 주소 변경 역시 가능하다. 배포 방법은 아래 과정을 참고하여 진행하였다. [문제 - 401 에러] ..