<현록/>

프로그래머스 0단계 문제인 `옷 가게 할인 받기` 문제를 풀어보았다. 부분점수에만 그쳐서 어떤 부분이 문제였는 지를 파악해보았다. // 나의 코드 function solution(price) { let answer= 0; if (price >= 100000) { answer = Math.floor(price * 0.95); } else if (price >= 300000) { answer = Math.floor(price* 0.9); } else (price >= 500000) { answer = Math.floor(price * 0.8); } return answer; } [배운점] 1. 조건의 순서(가격 큰 순서대로) 현재 조건의 순서로 인해 300,000 이상 또는 500,000 이상의 경우에 첫 ..

(진행배경) 프로그래머스 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 +..

내가 한 딴짓을 검색할 수 있는 기능을 추가해보았다. 검색기능은 이전부터 꼭 학습하고 싶은 영역이었는데 이번 기회에 구현할 수 있게 되었다. 검색 키워드와 저장 키워드가 일치하는 경우에는 키워드를 포함하는 요소의 부모요소(즉 개별 메모 컨테이너)를 삭제할 수 있게끔 구현했다. function filter() { let searchValue = searchInput.value.toLowerCase(); // 대소문자를 구분하지 않는 검색을 위해 소문자 변환 let notes = document.querySelectorAll('.inputDiv'); for (let i = 0; i < notes.length; i++) { if (notes[i].innerHTML.toLowerCase().includes(se..

메모앱 생성시간을 기록 할 수 있는 타임스탬프 기능을 구현해 보았다. 기록 시간이 7:08 와 같이 한 자리수로 떨어질 때는 앞에 0을 붙여서 언제나 두 자리수로 출력되게끔 구현하였다. 타임스탬프는 수정 권한이 없게 하기 위해 지난시간 배운 contenteditable 속성을 활용해 false 값으로 주었다. // ...(중략) let timeBox = document.createElement('div'); timeBox.innerHTML = timeStamp(); // timestamp 호출 timeBox.setAttribute('contenteditable', 'false'); timeBox.className = 'timeStamp'; function timeStamp() { const today =..

// 스코프 체인: 함수에서 어떤 값에 접근이 가능하고 불가한 지 범위 // 라이브러리나 내장함수는 아래와 같이 생각하면 된다 const console = { log() { // 콘솔에 글자 적는 기능 }, }; const x = 'hello'; function c() { const y = 'y'; console.log('c'); function b() { // 2. 여기 b 선언 실행 부분으로 바로 갈 수 있는 것이 아니다. // (uncaught referenceError: b is not defined 발생) 안 되는 경우는 스코프 분석해야 한다. const z = 'z'; console.log('b'); c(); } } function a() { const x = 'bye'; // 스코프가 다르기..

그동안 어렴풋 하게만 알고 있던 콜스택에 대해 강의를 듣고 정리해보았다. // c함수 선언 function c() { const y = 'y'; console.log('c'); } // a 함수 선언 function a() { console.log('a'); function b() { console.log('b'); c(); // c함수 호출 } b(); // b함수 호출 } a(); // a 함수 호출 /출력: a, b, c c(); // c 함수 호출 /출력: c [배운 것] 1. 자료구조 - 스택: 명함집/저금통 FILO or LIFO (가장 처음에 들어온 것이 가장 마지막에 나감) - 큐: 컨베이어 벨트 FIFO (가장 처음 들어온 것이 가장 먼저 나감) 2. 호출과 선언을 명확하게 구분해서 '호..

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

간단한 메모앱 구현을 위해 아래 유튜브 영상에서 설명하는 기본 레이아웃과 로컬스토리지를 활용한 메모 불러오기 및 갱신 기능을 구현하였다. 해당 영상에서는 레이아웃이 좌측으로 쏠려 있는데 개인적으로 중앙에 오는 디자인이 더 좋아서 배열은 다르게 변경했다. [참고사이트] 이모티콘 다운: 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 문제 예방을 위..