티스토리

보노의 프로그래밍 공장
검색하기

블로그 홈

보노의 프로그래밍 공장

kkomabono.tistory.com/m

풀스택 개발자를 목표로 공부하고 있습니다. https://github.com/kkomabono

구독자
0
방명록 방문하기
공지 보노의 프로그래밍 공장입니다. 모두보기

주요 글 목록

  • 개인정보 취급 ('com.vaco.smartfit'이하 'smartfit')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. ○ 이 개인정보처리방침은 2022년 7월 20부터 적용됩니다. 제1조(개인정보의 처리 목적) ('com.vaco.smartfit'이하 'smartfit')은(는) 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다. 제2조(개인정보.. 공감수 0 댓글수 0 2022. 7. 20.
  • HashTable (해시테이블) 해시테이블? key, value로 데이터를 저장 빠른 검색속도를 제공. O(1) 각각의 key갑셍 해시함수를 적용해 배열의 고유한 index를 생성하고 이 index를 활용해 value를 저장/탐색한다. 해시함수 key를 해시함수에 넣어서 가공하면 index값이 출력된다. 해시함수의 성능이 곧 hastTable의 성능이라고 할 수 있다. Division Method : 나눗셈을 이용. 입력값을 테이블의 크기로 나누어 계산 Digit Folding : 각 key의 문자열을 ASCII코드로 바꾸고 값을 합한 데이터를 테이블 내의 주소로 사용 Multiplication Method : 숫자로 된 key값 0과 1사이의 실수 A, 보통 2의 제곱수인 m을 사용하여 계산. h(k) = (kAmod1) x m Un.. 공감수 0 댓글수 0 2022. 2. 14.
  • LinkedList (연결리스트) 연결리스트? 포인터를 사용해서 데이터(아이템)들이 메모리공간에 연속적으로 있지 않아도 되는 자료구조. 데이터들은 포인터를 통해 데이터 i를 인접항목 i+1과 연결하여 인덱스 0 ~ N-1까지 정렬된다. -> 저장장치에 물리적으로 한 줄로 세우는 것이 불필요. 연결리스트는 노드로 이루어져 있는데, 노드는 데이터, 포인터로 구성된다. head pointer는 a0를 가리킨다. tail pointer는 a(N-1)을 가리킨다(tail item 이후에는 아무것도 없다.) 연결리스트의 동작과 시간복잡도 검색 : head에서부터 원하는 노드가 나올 때 까지 검색. O(N) 추가 : 추가동작만 한다면 O(1). 검색과 추가를 합친다면 O(N). 제거 : 제거동작만 한다면 O(1). 검색과 제거를 합친다면 O(N). .. 공감수 0 댓글수 0 2022. 2. 14.
  • 절대경로와 상대경로 경로를 지정할 수 있는 방법은 절대경로, 상대경로 방법이 있다. 둘 모두 코드를 작성하는데 자주 쓰이므로 모두 익혀두자. 절대경로 특정 웹페이지나 파일이 가진 고유한 경로(주소) c:\file\img.jpg, e:\Diablo2\launcher.exe 등 파일경로와 파일이름을 정확히 알고있으면 바로 실행가능 www.google.com도 도 절대경로이다. 상대경로 '현재 위치한 곳을 기준' 으로 서술하는 경로 - Web을 기준으로 한다면 html파일이 위치한 폴더를 기준으로 한 경로 예를 들어 C:\users\documents\bono라는 폴더 밑에 A폴더와 B폴더가 있고 현재 나는 B폴더에서 작업을 하고 있다고 가정하자. A폴더 안에 index.php파일을 가져오기 위해서는 B폴더를 기준으로 계산을 한다.. 공감수 0 댓글수 0 2022. 1. 8.
  • no such file or directory 에러 VS code로 작업을 하다 no such file or directory 에러가 발생하였다. const fs = require('fs'); let input = fs.readFileSync('./input.txt', 'utf8'); console.log(input); 이 에러가 발생한 시점은 아래의 이미지에서 BOJ탐색기에 inoutExample 폴더를 생성하고 BOJ탐색기에 직접 존재하던 input.js와 input.txt파일을 inoutExample폴더에 옮기면서 발생하였다. 분명 같은 폴더에 있음에도 오류가 발생하였다. 구글링을 해본 결과 작업영역을 추가/변경 (import os, os.getcwd) - typescript 필요 오타수정 크게 두가지의 방법이 나와있었다. 그러나 내가 발생한 에러의.. 공감수 0 댓글수 0 2022. 1. 6.
  • 백준 알고리즘에서 자바스크립트로 문제풀기 바닐라코딩 사전학습과정을 마치고 알고리즘 공부를 해보려고 구글링을 통해 어디가 좋을 지 찾아보았다. 대표적으로 프로그래머스, 백준 BOJ, Leetcode(외국사이트)가 있는데 이 중에 문제가 가장 많고 난이도별로 선택할 수 있는 백준 알고리즘으로 시작하기로 하였다. 그러나 처음부터 난관에 부딪혔는데, 백준 알고리즘은 Node.js를 이용한 입출력을 입력받아서 문제를 풀어야 한다. 제시해주는 입력을 핵심코드만 작성해서 출력을 내는것이 아닌, 입력을 정제(파싱, parsing) 시켜주는 코드를 작성한 후 이 코드의 출력을 입력으로 하는 핵심코드를 작성해야 한다. C++은 white space(' ', \n, \t)를 기준으로 하나씩 입력을 받는 'cin' 키워드를 통해 입력받을 수 있고, 코드작성시에는 조.. 공감수 0 댓글수 0 2022. 1. 6.
  • JavaScript 와 Node.js Javascript는 웹 브라우저(크롬, 파이어폭스, 사파리, 익스플로러)가 있어야만 동작하는 언어이다. 구글이 JS를 발전시키면서 JS와 HTML만을 이용해서 Gmail을 만들었고 이후에 크롬, JS V8엔진등을 만들었다. Node.js는 JS기반으로 만들어진 사이드언어이다. JS의 웹이 있어야만 동작이 가능한 단점을 보완해서 터미널 프로그램(원도우 cmd, mac terminal 등)에서도 node를 입력하여 JS를 사용가능하도록 만들었다. 여기서 중요한 것은 Node.js를 통해 서버를 만들 수 있다는 점에서 차별점이 있다. 이전까지는 server-clint 웹사이트를 만들 때 웹에 표시된 부분은 JavaScript를, 서버는 루비나 자바 등을 이용해야만 했는데, 마침내 한가지 언어(JS)로 전체 .. 공감수 0 댓글수 0 2021. 12. 31.
  • window.onload() JS는 코드를 순차적으로 읽어 들이는 프로그래밍 본연의 작동 방식과, 실행 이전에 여러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해 작성 위치에 따라 에러를 발생시키기도 한다. hi 하지만 가독성이 떨어지므로 사용하는게 window.onload이다. window.onload 사용방법 hi 위의 코드와 같이 window.onload 함수를 오버라이딩(재정의)해주면 onload함수 내의 코드 스크립트는 웹브라우저 내의 모든 요소가 준비가 되어야만 실행이 되도록 할 수 있다. (웹브라우저 자체를 담당하는 window라는 객체가 웹 문서를 불러올 때, 문서가 사용되는 시점에 실행되는 onload라는 함수를 다시 재정의 한다는 개념이다.) window.onload와 페이지의 모든요소들이 로드되어.. 공감수 0 댓글수 0 2021. 12. 30.
  • Calendar ** 자세한 코드는 GitHub kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 에 업로드 아이디어 오늘의 요일, 날짜, 월, 연도 표기 - Date()메서드를 이용해서 현재시간을 받아온 후 textContent로 할당, 요일과 월은 해당 요일과 월이 숫자로 나오므로 함수를 작성해서 숫자로 나올 수 있도록 변환해서 출력하였다. 일~토 요일 라벨링 표기 - 태그를 새로 만들고 부모요소에 추가시켜준다. 이를 for문으로 반복 현재 월의 1일 판단 - 달력은 7일을 한 행으로 만드는 점에 착안해서 오늘 날짜를 받아서 7로 나눈 값과 오늘의 요일을 비교해서 1일을 판단했다. -> 그러나 이후에 좀 더 쉬운 방법을 찾아내어 작성한 코드는 더.. 공감수 0 댓글수 0 2021. 12. 28.
  • Number Baseball **작성한 코드내용은 길이 관계상 GitHub에 업로드하였다. kkomabono/vanilla_practice: Practice for vanilla_prep. (github.com) 1) 게임 시작 버튼 만들기 - HTML로 작성 2) 게임 시작 버튼 클릭시 랜덤한 세 자리 숫자 만들기 - click 이벤트로 연결. Math.random()을 써서 랜덤숫자 생성, 세 자리 숫자이므로 0~9까지 출력하면 되는데 Math.floor()와 조합해서 Math.floor(Math.random())으로 0~9까지의 숫자 생성 3) 게임 시작 버튼을 누르면 2)를 수행하고 바로 숫자 입력칸이 팝업되도록 만들기 - prompt를 이용. 4) 만약 3)에서 잘못된 숫자를 입력하면 제대로 된 숫자를 입력할 때 까지 반복.. 공감수 0 댓글수 0 2021. 12. 28.
  • underscore.js 라이브러리 Koans 퀴즈를 풀다가 var odd = _(numbers).filter(function (x) { return x % 2 !== 0 }); //.filter() _(numbers).filter ... 와 같은 _를 만나게 되었다. _는 언더바 라고 읽는데 MDN에서도 나오지 않았다. 구글링을 해보니 underscors.js라는 자바스크립트 라이브러리였다. underscore.js는 컬렉션, 배열을 처리하는데 유용한 라이브러리를 제공한다. underscore.js의 메서드들이 아래의 블로그에 잘 정리되어 있다. javascript underscore 언더스코어 정리 (tistory.com) javascript underscore 언더스코어 정리 언더스코어란? 용어설명 Context iteratee Co.. 공감수 0 댓글수 0 2021. 12. 28.
  • Prototype 객체 프로토타입이란? JS는 프로토타입 기반 언어이다. 모든 객체는 메서드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수 있다. 그 상위 프로토타입 객체도 마찬가지이다. 이것을 프로토타입 체인(Prototype Chain)이라고 한다. 상속되는 속성과 메서드들은 정확히는 각 객체라 아니라 객체의 생성자의 prototype 속성에 정의되어 있다. JS에서는 객체 인스턴스와 프로토타입 간에 연결(생성자의 prototype속성에서 파생된 __proto__속성으로 객체 인스턴스에 구현하고 있다)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메서드를 탐색한다. ** 객체의 prototype(Obj.. 공감수 0 댓글수 0 2021. 12. 28.
  • JavaScript Koans-master 바닐라코딩 사전학습가이드에서 기본적인 사항을 공부 후에 Koans퀴즈를 추천하였다. Koans퀴즈를 통해 JavaScript를 확인하고 어떻게 사용되는지 학습할 수 있었다. 처음에는 갑자기 길어진 코드와 지금까지는 보지 못했던 테스트코드가 포함되어 있어서 어디서부터 봐야할지도 막막하였다. 하나씩 분석하면서 테스트코드는 어디서부터 어디까지이고 문제는 어디인지 알 수 있었고, 테스트에 대한 기본적인 사항도 알 수 있었다. Koans관련 코드는 GitHub를 통해 GIt에 업로드하였다. 이 글에서는 Koans를 공부하던 중에 더 정리해야 할 사항들을 적고 다른 글에서 정리하겠다. 1) expect expect().tobe() 시리즈 정리, 정규식 정리. https://jestjs.io/docs/expect 2.. 공감수 0 댓글수 0 2021. 12. 28.
  • Windows 객체 Windown 객체란? windows 객체는 두 가지 역할을 한다. 브라우저 안의 모든 요소들이 소속된 객체로 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체' 라고도 부른다. 일반적으로 열고 있는 브라우저의 창(browser window)을 의미하고 이 창을 제어하는 다양한 메서드를 제공한다. 전역객체로써의 window window객체는 window라는 이름으로 접근할 수 있다. 콘솔에서 window를 쳐보면 window내의 다양한 프로퍼티들을 확인할 수 있다. var myName = 'Bono'; function getMyName() { return myName; } console.log(window.myName); // Bono console.log(window.getMyName(.. 공감수 0 댓글수 0 2021. 12. 28.
  • this의 4가지 역할 이 글은 [JS/this] 자바스크립트, this의 4가지 역할 :: Code Playground (tistory.com)를 참조해서 작성하였습니다. [JS/this] 자바스크립트, this의 4가지 역할 Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들 im-developer.tistory.com JS에는 this 라는 키워드가 있다. this는 코드에 따라 다양한 값을 가지는데 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구분된다. 1. 일반 함수 실행 방식 일반함수 실행 방식이란 함수를 선언한 후, 실행.. 공감수 0 댓글수 0 2021. 12. 27.
  • new 예약어 생성자 함수를 작성할 때 new 예약어를 사용해서 작성하게 된다. 그렇다면 new 예약어를 사용하면 무슨일이 일어나는걸까? new 예약어를 사용하면 새로운 빈 객체를 만든다 this를 새로 만들어진 객체에 bind한다 새로 만들어진 객체에 "__proto__""라 불리는 property를 더한다. 이것은 생성자함수의 prototype객체를 의미한다. return this를 함수의 끝에 추가한다. 때문에 객체는 함수로부터 return되어 만들어진 것이다. function Student(name, age) { this.name = name; this.age = age; } Student라는 생성자 함수를 만들었다. 이 함수는 name, age라는 두개의 파라미터를 가진다. 이 인자들은 this의 value에.. 공감수 0 댓글수 0 2021. 12. 27.
  • 객체 생성자 함수 객체 생성자 함수란? 객체의 인스턴스를 생성하는 함수. new 연산자를 사용해서 빈 객체를 생성할 수 있다. const car = new Object(); 생성자 함수를 통해 생성한 객체를 '인스턴스' 라고 한다. 다음과 같이 생성한 인스턴스에 프로퍼티나 메서드를 추가할 수도 있다. car.name = 'K5'; car.start = function () { console.log('Starting up'); }; console.log(car.start()); JS에서는 객체 뿐만 아니라 문자열, 숫자, 불리언, 함수 등을 생성자 함수를 통해 생성할 수 있다. 생성자 함수를 사용하는 이유 객체를 생성할 때는 생성자 함수보다 객체 리터럴을 사용하는 것이 보다 편리하다. 그러나 생성자 함수는 다음과 같이 동일.. 공감수 0 댓글수 0 2021. 12. 27.
  • 메모리 주소는 무슨 타입일까? 메모리 주소는 포인터타입이다. 포인터타입은 primitive자료형이다. 참조) c++ - what data type is an Address? - Stack Overflow what data type is an Address? I have a map that will store a string, and a corresponding address(memory) that contains a integer value or char value. map myMap; //What datatype would address be? I'm not... stackoverflow.com Primitive vs non-primitive data structure - javatpoint Primitive vs non-primi.. 공감수 0 댓글수 0 2021. 12. 27.
  • Primitive / Reference 퀴즈 Q1) const person = { age: 30 }; const something = person.age; person.age = 50; console.log(something); // ? 예상 답 : 30 예상 이유 : person은 참조형타입인 객체이고 person.age는 원시타입인 숫자이다. 따라서 sometihg에도 원시타입인 30이 저장되고 이후에 person.age값이 바뀌어도 따라서 바뀌지 않는다. 정답 : 30 Q2) let one = { name: "one" }; const two = { name: "two" }; const something = one; one = { name: "ONE" }; console.log(something); // ? 예상 답 : "ONE: 예상 이유 :.. 공감수 0 댓글수 0 2021. 12. 27.
  • Call by value / Call by reference Call by value (값의 복사) Call by value는 값이 그대로 복사되는 방식이다. JS에서는 Primitive데이터타입이 Call by value 방식이 사용된다. let a = 50; let b = a; // a의 값을 복사해서 b에 대입 console.log(`a:${a}, b:${b}`); // 50, 50 b = 100; console.log(`a:${a}, b:${b}`); // 50, 100 실제로는 b가 a와 같은 메모리주소값을 갖게되는 것이지만 표면적으로는 값을 그대로 복사해서 가지게 되는 형태이다. function swap(val1,val2) { let temp = val1 val1 = val2; val2 = temp; } let a = 1, b = 2; swap(a,b).. 공감수 0 댓글수 0 2021. 12. 27.
  • 콜스택 / 메모리힙 구조, 데이터저장 / 참조 원리 이 글은 카레유님의 글을 보고 공부한 내용을 작성하였습니다 [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 (tistory.com) 콜스택, 메모리힙이란? JS는 콜스택과 메모리힙이라는 메모리 구조를 통해 데이터 및 코드 실행을 관리한다. 1. 콜스택(Call stack) 원시타입 데이터가 저장된다. 실행컨텍스트(Execution Context)를 통해 1)변수 식별자(이름) 저장 2) 스코프 체인 및 this관리 3)코드 실행 순서관리 등을 수행 2. 메모리힙 참조타입 데이터가 저장된다 힙은 용량이 유연하게 늘어날 수 있다. 콜스택, 메모리힙의 데이터 구조 1. 원시타입 데이터(파란색 변수a) 10이라는 값은 원시타입이므로 콜스택에 저장된다 변수 a에는 10이 저장된 콜스택 메모리의 주소.. 공감수 0 댓글수 0 2021. 12. 27.
  • 메모리 구조 / 변수 생성원리 / 가비지컬렉터 이 글은 카레유님의 글을 참조해서 작성하였습니다. https://curryyou.tistory.com/ 카레유 여행, 맛집, 역사, IT 프로그래밍에 관심이 많습니다. HTML, CSS, JavaScript, Android, Java, Kotlin, Python 을 주로 개발합니다. curryyou.tistory.com 메모리 구조, 데이터 저장/참조 원리 1. 메모리 구성 컴퓨터 메모리는 1byte(8bit) 크기의 메모리셀 여러개로 구성된다. 2. 메모리 셀 각 메모리 셀은 고유한 주소값을 가지며 메모리셀(1byte)단위로 데이터를 저장하고 읽는다. 3. CPU와 메모리 역할 CPU는 메모리에 저장된 값을 꺼내와 연산하고 연산 결과를 다시 메모리에 저장한다. 4. 데이터 저장 방식 용량이 큰 데이터는.. 공감수 0 댓글수 0 2021. 12. 27.
  • Primitive / Reference Primitive 타입 자료형 string Boolean Number NUll undefined symbol Primitive 타입 자료형은 값의 '모양'이 같다면 서로 같은 값이다. let a = 10; const b = a; a = 30; console.log(b); 위의 결과는 10이 나온다. 변수(a)로 할당한 값(b)은 이후에 변수값(a)이 바뀌더라도 되돌아가서 할당한 값(b)을 바꾸지 않는다. let b = a;라도 같은 결과이다. Primitive자료형은 값이 재할당되면(바뀌면) 기존메모리주소에 저장된 값을 변경하는 것이 아니라 새로운 메모리를 확보하여 값을 저장하고 변수에 새로운 값이 입력된 메모리주소를 다시 할당한다. let a = 10; let b = 20; a = 20; 위의 코드는 .. 공감수 0 댓글수 0 2021. 12. 27.
  • Scope Quiz Q1) function foo () { var a = 5; for (var i = 0; i < a; i++) { console.log(a); } console.log(i); // 무엇이 출력될까요? } foo(); 예상 답 : 5 예상 이유 : 함수 foo()가 실행되면 a가 선언되고 5가 할당된다. for문에서 i가 선언되고 a가 필요하므로 a를 찾는다. 같은 scope에 a가 선언되어 있으므로 a의 값을 가져와서 for문을 돌린다. console.log(i)에서 i를 찾게되는데 for문은 함수가 아니기 때문에 i는 console.log(i); 문과 같은 scope에 있다. 따라서 error가 아닌 i가 출력된다. 정답 : 5 Q2) var a = 1; function bar () { function .. 공감수 0 댓글수 0 2021. 12. 27.
  • Hoisting 호이스팅이란? 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것을 말한다. 물리적으로 코드를 끌어올리는 것은 아니다. JS엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. JS엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, function 등)을 스코프에 등록한다. 호이스팅으로 인해 이미 변수선언/함수선언을 한 것으로 취급되어 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. var, let, const의 호이스팅 var로 선언한 변수는 선언문보다 먼저 참조해도 에러가 나지 않는 반면 let과 const는 참조에러(Reference Error)가 발생한다. 이는 let, const로 선언한 변수는 스.. 공감수 0 댓글수 0 2021. 12. 27.
  • Scope, Lexical Scope(정적 스코프) var vscope = 'global'; function fscope(){ console.log(vscope); } fscope(); //결과: global 함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수(global scope)는 애플리케이션 어디에서든 접근이 가능한 변수이다. var vscope = 'global'; function fscope(){ var vscope = 'local'; console.log('함수안 '+vscope); } fscope(); console.log('함수밖 '+vscope); //결과: 함수안 local 함수밖 global 지역변수의 유효범위는 함수 내부이다. var vscope = 'global'; function fscope(){ vscope = .. 공감수 0 댓글수 0 2021. 12. 27.
  • Craousel 아이디어 1) 뼈대를 HTML로 작성 2) 화살표를 누르면 이미지 바뀌도록 JS 작성 2-1) button.addEventListner("click", function ButtonClick(){}) 를 사용해서 화살표를 누르면 다음 이미지로 넘어가도록 작성, 배열에 이미지를 넣어서 배열에 담긴 이미지를 순차적으로 보이도록 해보자. 2-2) 좌우 화살표와 아래 라디오버튼 동기화. -> 3-1)에서 선언한 $input 변수를 이용해서 $input[].checked = "checked";로 라디오버튼을 체크하였다. 3) 아래 버튼에 해당하는 상호작용 JS작성 3-1)버튼을 누를 때마다 배열의 인덱스를 재설정, JS의 number를 index로 지정. 정리할 것 Array() 생성자->배열 리터럴과 비교해서 정.. 공감수 0 댓글수 0 2021. 12. 24.
  • Background Changer 아이디어 1) 해당 웹페이지와 같은 형태를 HTML과 CSS로 작성 2) 랜덤한 Hex color code를 생성하는 함수 작성 2-1)math.random()과 math.floor()를 사용을 사용 2-2)for를 이용해서 6개의 문자열을 합치자 2-3)for문을 돌리고 해당 값을 hex_color에 넘겨 준 후에는 hex_color를 초기화시켜준다. 3) 해당 함수를 적용하여 버튼 클릭 시 랜덤한 Hex color code를 생성하여 페이지의 배경 색깔과 Hex color code수정 정리할 것: Math. 함수, Hex color code, HTML과 JS연결방법, 문자열에 변수 넣기 CLICK ME! const hex = "01233456789ABCDEF"; var hex_color = ""; c.. 공감수 0 댓글수 0 2021. 12. 24.
  • appendChild()와 node참조 두 코드의 차이는? const something = document.createElement("p"); for (let i = 0; i < 5; i++) { something.textContent = i; document.body.appendChild(something); } //결과 : 4 for (let i = 0; i < 5; i++) { const something = document.createElement("p"); something.textContent = i; document.body.appendChild(something); } //결과 : //0 //1 //2 //3 //4 위의 코드는 createElement를 통해 p태그를 만들고 이후에는 반복문이 실행되면서 바뀐값이 appendCh.. 공감수 0 댓글수 0 2021. 12. 24.
  • 크롬 콘솔모드에서 let변수만 재선언이 되는 이유 비주얼 스튜디오 코드를 이용해서 코드를 작성하는 중에 내가 제대로 작성하고 있나 확인할 겸 크롬 콘솔모드에서 코드를 확인하곤 한다. 분명 let으로 선언한 변수는 재선언이 안된다고 했는데 에러메세지없이 그대로 재할당이 되었다! 왜 이러는지 구글링 한 결과 아래와 같은 답을 얻을 수 있었다. 일반 스크립트 실행과 콘솔 모드에는 약간의 문법 차이가 있다. 전자에서는 표준 JS문법을 따르기 때문에 let을 재선언하려고 하면 오류를 출력한다. 후자는 예외적으로 콘솔모드의 interactive한 특징 때문에 재선언을 허용한다. > let a; let a; // 한 줄에 재선언하는 경우는 재선언 불가 < Uncaught SyntaxError: Identifier 'a' has already been declared.. 공감수 0 댓글수 0 2021. 12. 24.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.