<현록/>

// 스코프 체인: 함수에서 어떤 값에 접근이 가능하고 불가한 지 범위 // 라이브러리나 내장함수는 아래와 같이 생각하면 된다 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' 에 가깝다고 보면 될 것이다. 이 프로젝트에 대한 아이디어는 베스트셀러인 '초집중' 에서 영감을 받았다. 작가는 '딴짓추적표'를 기록함으로써 본짓과 딴짓하는 시간을 구분하고 딴짓 행동에 대한 인지를 강조한다. 이를 통해 끝내 초집중으로 나아갈 수 있음을 말하고 있다. 개발자 취준을 시작하면서 배워야 할것은 너무 많은 가운데 도무지 무엇을 어떻게 시작해야 할 지 눈 앞이 캄캄했다. 휴대폰을 보는 시간이 많아졌고, 무기력한 시간이 계속되었다. 책을 완독한 것은 아니지만 생산성을 높이기 위해서는 해야하는 일을 해내는 것만큼이나 하지 말아야 할 일을 하지 않는 것이 중요함을 ..

[구구단 만들기- 함수활용] function timesTable(n) { for(var i=1; i

가장 안쪽 가로가 가장 높은 실행 우선순위 가지고 있음 [주사위 게임] var dice = math.floor(math.random()*6)+1; math.floor --> 내림 math.random --> 0에서 1사이의 임의의 숫자 출력 [예제] function rand(maxNum) { var dice = Math.floor(Math.random() * maxNum)+1; --> 0이 나올 수도 있기에 1을 더해줌. document.write(dice); } rand(6); [소수 출력하기(1과 자기자신으로만 나눠떨어지는 수)] function isPrime(n) { var divisor =2; 2부터 나누기 시작 while(n > divisor) { n이 나누는 수보다 클 때까지 if (% div..

[for 문] for(초기화한 변수값; 조건; 증감 표시) {수행할 명령} : i값 초기화--> i가 10보다 작다가 거짓일때 까지 증감명령 수행 for (var i =0; i

조건문 주어진 조건에 따라 결과값을 출력하는 구문 조건으로는 비교연산자 또는 논리 연산자 사용 [if 문: if(조건){수행할 명령} ] --> 만약 ab) { console.log("a는 b보다 크다."); }else { console.log("a는 b보다 작거나 같다.")' } [else if문] -->여러개의 조건문의 생성할 때 사용 var a=20; var b=40; var c=60; if(a>b) {console.log("a는 b보다 크다."); --> false로 실행하지 X } else if (b>c) {console.log("b는 c보다 크다."); --> false로 실행하지 X } else if (a true로 실행함 } else if (b true로 나왔으므로 추가 실행x } else..

[산술 연산자] console.log(20+10); console.log(20-10); console.log(20*10); console.log(20/10); console.log(20%10); 1씩 감소 var num=10; console.log(++num) --> 플러스하고 넘 출력: 11 console.log(--num) --> 마이너스하고 넘 출력: 10(11에서 1 빼기) console.log(num++) --> 넘 출력 후 플러스1 (10으로 출력되고 보이지 않는 상태에서 1 플러스된채 11로 존재) console.log(num--) --> 넘 출력후 마이너스1 (11로 출력되고 보이지 않는 상태에서 1 마이너스된채 10로 존재) [비교 연산자] (==와 ===차이 유념하기) console.l..