<현록/>

(진행배경) cocktail 정보를 Open API를 통해 렌더링함에 그간 문제가 없었는데 어느날은 SyntaxError가 발생하였다. 코드를 고치지 않았는데도 문제가 발생한 것으로 보아 일단은 CocktailDB 서버 자체 문제로 간주되었다. 혹여 클라이언트의 문제인지 체크하기 위해 아래와 같이 API 주소를 주소창에 직접 입력해보니 데이터베이스 연결에 실패하고 있다는 에러 메세지를 반환하였다. https://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Coffee_mug [문제-SyntaxError: Unexpected token '

(진행배경) 프로그래머스 0단계 '배열의 평균값' 문제를 하다가 `Cannot read properties of null` 에러를 마주했다. 해당 에러는 자바스크립트 코드를 작성할때마다 종종 겪던 문제인데, 이번 기회에 정리해 두고자 한다. - 프로그래머스 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/120817 [문제 상황 - TypeError: Cannot read properties of null (reading '...') 에러] (문제상황) function solution(numbers) { var sum = 0; var avrg = 0; for (var i = 0; i < numbers.length; i++) { sum +..

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다. [문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제] (문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다. (문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충..

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