코딩기록

11장 원시 값과 객체의 비교원시타입과 객체 타입의 세가지 차이원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value). 반면 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장.반면 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값(메모리 주소)이 저장.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨. 값에 의한 전달(pass by value).반면 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨. 참조에 의한 전달(pass by reference).   11-1. 원시 값1). 변경 불가능한 값한번 생성된 원시 값은 읽기 전용 값으로..

8장 제어문제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 8-1. 블록문0개 이상의 문을 중괄호 { } 로 묶은 것.코드블록 또는 블록이라 부름.자바스크립트는 블록문을 하나의 실행 단위로 취급.단독으로 사용가능하나 주로 제어문이나 함수를 정의할때 사용. 블록문 끝에는 세미콜론 붙이지 않음.// 블록문{ var foo = 10;}// 제어문var x = 1;if (x  8-2. 조건문주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 불리언 값으로 평가될 수 있는 표현식이다.  1). if ... else 문조건식이 불리언이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 ..

5장 표현식과 문5-1. 값값이란 식이 평가되어 생성된 결과.평가란 식을 해석해서 값을 생성하거나 참조하는 것. 5-2. 리터럴사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.숫자 3 -> 아라비아 숫자가 아니라 숫자 리터럴.자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성.리터럴의 종류정수, 부동소수점, 2진수, 8진수, 16진수, 문자열, 불리언, null, undefined, 객체, 배열,함수, 정규표현식덧) 스터디 질문 Q :리터럴과 값, 표현식의 차이?====강사님 답 A====리터럴 - 값의 가치를 평가 하기 전. 값- 연산돼서 메모리에 저장된 평가(evaluation). 연산의 결과물 = 값. 연산자 = 값을 만들어 내는 것. 5-3...

1장 프로그래밍1-1. 프로그래밍이란?프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이때 요구되는 것이 문제 해결 능력이다.문제 해결  방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 하고 이때 필요한 것이 컴퓨팅 사고(Computational thinking)이다. 사람은 실생활에서 경험하는 익숙한 사항에 대해 당연시하는 안이한 인식이 있는 반면 컴퓨터는 사람과 인지 방식이 다르다. 여기에는 논리적, 수학적 사고가 필요하며, 해결 과제를 작은 단위로 분해하고 패턴화 해서 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다. 1-2. 프로그래밍 언어명령을 수행할 주체인 컴퓨터의 언어인 기계어는 비트 단위로 기술되어 있다.사람이 이해할 수 있는 약속된 구문(..

🎊240708월 - 모던 자바스크립트 Deep Dive 스터디 오티 진행. 📆앞으로 스케줄 기간: 07월 08 ~ 08월 26일  요일: 매주 월수금시간: 14~18 (4H) 시간표: 14~16 러버덕 -조별진행, 발표 및 토의              16~18 질의응답   러버덕 디버깅 이란?  개발자가 코드에서 버그를 찾고 해결하기 위해 마치 자신 앞에 있는 러버덕에게 문제를 설명하듯이 코드를 따라가며 버그를 찾아내는 것을 말한다. 이 방법은 예상치 못한 동작이 발생하는 문제를 발견할 때까지 코드를 오리에게 설명하고 다시 설명하는 과정을 반복한다.  러버덕 디버깅의 유래러버덕 디버깅은 "실용주의 프로그래머"라는 책에서 시작된 개념이다. 이 책은 1999년에 데이비드 토머스와 앤드류 헌트가 공동 저..

검색과 탐색*document.querySelector(선택자) - 선택자로 검색한 요소 하나를 반환. 검색 결과가 없으면 'null' 반환. *document.querySelectorAll(선택자) - 선택자로 검색한 모든 요소를 NodeList 객체로 반환. NodeList 객체는 유사배열이며 '.forEach()' 메소드만 사용 가능. NodeList 객체는 'Array.from()' 메소드를 통해 배열로 변환 가능. *document.getElementById(아이디) HTML 'id' 속성(Attributes) 값으로 검색한 요소를 하나 반환. 검색 결과가 없으면 'null' 반환.  * 노드.parentElement - 노드(요소, 주석, 텍스트)의 부모 요소를 반환.     *요소.previo..

arrayLikeFruits는 객체이지만 배열처럼 사용가능한 유사배열이다.하지만 객체라 배열에만 사용가능한 .map()은 사용불가능하다..from() 을 사용해 객체를 배열로 변경후 .map()을 사용하면된다..   참고제로베이스 - 프로그래밍 입문자를 위한 자바스크립트 기초개념- 04-11 - 표준 내장 객체 - Array 6 - splice, unshift, isArray, from

new가 없을때 function Car(key) { console.log(new.target); this.key = key;}let result1 = Car("Silver Car");console.log(result1);let result2 = new Car("Red Car");console.log(result2);-------undefinedundefined[Function: Car]Car { key: 'Red Car' }  new를 추가하는 코드 function Car(key) { if (!new.target) { return new Car(key); } this.key = key;}let result1 = Car("Silver Car");console.log(result1); //C..

배열을 돌면서 코드를 수행하고 그 결과를 배열로 리턴한다. item 매개변수에 num이 순차적으로 들어가고 * 2를 하면 2, 4, 6, 8, 10 이라는 값이 배열로 들어가 리턴된다. // [2 4 6 8 10]let num = [1, 2, 3, 4, 5];let ex_map = num.map(function (item) { return item * 2;});console.log(ex_map); // [2 4 6 8 10]  map을 사용하면 따로 .push()를 사용할 필요가 없다.    생성자: new Map()개수 확인: Map.size요소 추가: Map.set(key, value)요소 접근: Map.get(key)요소 삭제: Map.delete(key)전체 삭제: Ma..

숫자배열 오름,내림차순 정렬 .sort() 는 오름차순으로  배열값을 정렬한다.문제는 문자열로 치완해서 유니코드 순서에 따라 정렬하기 때문에 우리의 예상과 결과값이 다르다는 것이다. 그것을 보완하는 방법이 고차함수 이다. 아래처럼 ascending_order 이라는 함수를 만들어 사용하면 .sort() 오름차순 descending_order는 내림차순으로 숫자가 정리된다.let nums = [1, -1, 4, 0, 10, 20, 12];console.log(nums.sort()); //[ -1, 0, 1, 10, 12, 20, 4 ]console.log(nums.reverse()); //[ 4, 20, 12, 10, 1, 0, -1 ]// x=1 - y=(-1) = 2 -> x=-1 y=1let..

지난 한달간 좋았던 점단순히 강의만 듣는게 아니라 과제를 하면서 실제로 적용해보고 부딪혀 가며 공부할 수 있다는 점이 가장 좋았다.첫날 작성한 학습 계획표대로 공부하고 있는가 ?(계획대로 안되었다면 이유는 ?)2주까지는 내가 계획한 대로 진행 되었다고 생각했는데 3주차에 과제를 시작하면서 깨달았다. 아! 처음부터 계획을 잘못짰구나❗❗ 과제를 처음부터 시작했었어야 했다. 과제를 늦게 시작하는 바람에 3주차부터 거의 밤을 지새우며 과제를 했고 마감날짜를 이틀이나 지나서 제출했다. 나머지 5개월간의 학습 계획수면시간을 잘 조정해야겠다는 생각이 먼저다. 3주차부터 밤을 새서 현재 수면 패턴이 약간 망했다. 아침 일찍 일어났는데 지금 그 패턴이 무너져서 다시 되찾는게 첫번째고 두번째는 js 과제를 처음부터 살펴보..

a 태그 작성시 href="~~"  만 작성하면 지금 보는 화면에서  "~~" 웹주소로 이동한다. a href="https://ppojjakcoding.tistory.com">a> 새창으로 이동할땐? target="_blank"    를 태그에 추가한다.a href="https://ppojjakcoding.tistory.com" target="_blank">a>  이때 하이퍼링크의 보안 취약점 까지 보완하고 싶다면?rel="noopener"    속성을 추가한다.a href="https://ppojjakcoding.tistory.com" target="_blank" rel="noopener">a>   [ HTML ]         div class="search-wrap">                ..

ul>              li>div class="del">span class="hide">원가span>3,000원div>li> //'목록 항목 수 두개 원가 3천원'              li>div>span class="hide">판매가span>1,000원div>li> // '판매가 천원'            ul>            button>Xbutton> //'엑스버튼'  -알파벳X로 만듬            button class="close">button> //공백 -'버튼'            button class="close">span class="hide">닫기span>button> //아리알기법(과거기법) -'닫기버튼'            button class="clos..

기존에 48*52 과 16*16가 약간 어긋났다.      display: flex;     추가 코드 수정후 48*48 과 16*16 크기가 딱 맞다 [ html ] button class="btn-toggle">                    img src="../assets/images/ico-arrow-gray.svg" alt="">                  button>[ css ]  .btn-toggle {    //이미지와 이미지를 감싼태그가 미묘하게 어긋날때 display:flex; 주면 딱 맞는다.    display: flex;    // 내가준 패딩값 때문에 밀릴때 패딩값 만큼 마이너스 마진값을 주면 된다.    margin: -16px;    padding: 16px;..

body.scroll-off {     // 팝업이 떠있을때는 뒷배경(body)의   overflow-y: hidden;   //스크롤이 움직이지 않도록 함  -ms-touch-action: none;  //.menu-option-popup 옵션선택영역  touch-action: none;}   메뉴추가가상 클라스 ::before  ::after 로 만드는 메뉴추가 +버튼 .ico-add 로 먼저  '메뉴추가'  영역을 만든다   ::before로 가로  ::after로 세로를 만드는데위치는 .ico-add를 부모로 잡고  display: flex 위치 삼총사로 잡았다       position: relative;      display: flex;      justify-content: center; ..

:not(.클래스이름)  가상 클래스 :not:not(.클래스이름) {  ~~~ css 코드  }'  .클래스이름이 아니면 중괄호 안의 css코드 동작을 수행해라  '라는 뜻이다. not 두개를 같이 쓰는건 어떻게 할까?  간단하다  붙여쓴다.:not(.new):not(.popular( {   margin-top: 10px;}-> 클래스 이름이 now, popular가 아니면 마진탑 10px 적용!156번-새로 나온 메뉴, 164번-인기 메뉴는 마진탑 미적용176번-시즈널 메뉴, 185번-시그니처 샐러드는 적용!! 10px 적용되서 노랑 배경색이 보인다.      메뉴 리스트펼쳤을때 아래화살표 ∨    닫았을때 위 화살표 ∧  .menu-list-area { padding: 28px $m-padding..

@mixin (믹스인)은 CSS 스타일 그룹 선언을 정의하는 기능 scss로 css작성시 여러번 반복하는 코드를 사용할때 따로 파일을 만든다.생성방법 -   @mixin 이름 { css내용 } 쓸때 -  @include 이름; 아래 _mixin_common.scss 파일의 내용은 텍스트 한줄 말줄임 표시  '  ...  ' 이다.  한줄 말줄임 표시   ✨잊지말것!✨styles.scss에 scss파일들을 컴포넌트로 분리해서 임포트 해놨다. 새로만든  _mixin_common.scss 파일도 추가하자index.html > link태그 styles.css파일 연결styles.css안에 scss 파일들 @import   멀티 말줄임 표시//한줄 말줄임표시 @mixin ellipse { text-overflo..