CodeStates/JavaScript 33

Section1 / Unit9 : ES6주요문법

코드스테이츠수업 14일차! ES6 문법에 대해 정리해보자 학습목표 spread/rest 문법을 사용할 수 있다. 구조 분해 할당을 사용할 수 있다. 화살표 함수로 함수를 정의할 수 있다. spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 배열에서 강력한 힘을 발휘 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? //6 rest 문법 파라미터를 배열의 형태로 받아서 사용 파라미터 개수가 가변적일 때 유용 function sum(...theArgs) { return theArgs.reduce((previous, cu..

Section1 / Unit9 : 스코프 & 클로저

스코프 학습목표 스코프의 의미와 적용 범위를 이해한다. 스코프의 주요 규칙을 이해한다. 전역 스코프와 지역 스코프의 차이를 이해한다. block scope와 function scope의 차이를 이해한다. 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다. 전역 객체가 무엇인지 설명할 수 있다. 스코프 "변수 접근 규칙에 따른 유효 범위" 변수에 접근할 수 있는 범위 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부른다 스코프의 규칙 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없음 중첩이 가능 가장 바깥쪽의 스코프는 전역 스코프(Global Scope) 전역이 아닌 다른 스코프..

Section1 / Unit9 : 참조 자료형

코드스테이츠 수업 13일차! 정리할 내용 자바스크립트의 자료형 & 얕은 복사와 깊은 복사 JavaScript 자료형(type) JavaScript에서 자료형(type)이란 값(value)의 종류 자료형은 크게 두 가지로 구분할 수 있는데, 바로 원시 자료형(primitive type)과 참조 자료형(reference type) ✔️원시 자료형(primitive type): 6개의 자료형(number, string, boolean, undefined, null, symbol) ✔️참조 자료형(reference type) : 원시 자료형이 아닌 모든 자료형. 배열, 객체, 함수가 대표 원시 자료형과 참조 자료형의 특징 원시 자료형 참조 자료형 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다...

Section 1 / Unit8 : [JavaScript] 객체

코드스테이츠 수업 12일차! 오늘 배운 객체 간단 개념과 코플릿 풀면서 몰랐었던 속성들을 정리해보자 객체 키, 값 쌍으로 이루어져 있음 키, 값 사이는 콜론(:)으로 구분 객체를 사용하는 두가지 방법 ->Dot notation ->Bracket notation let user = { name: 'yeeendy', city: 'Seoul', } //Dot notation user.name; //'yeeendy' //Bracket notation user['city']; //'Seoul' dot/bracket notation을 통해 값을 추가할 수 있음 let user = { name: 'yeeendy', city: 'Seoul', } user['category'] = '공부'; user.isPublic =..

Section 1 / Unit8 : [JavaScript] 배열

코드스테이츠 수업 11일차! 오늘은 JS 배열강의와 코플릿 푸는 시간이었다. js 간단 내용 정리와 문제 풀이 중 모르는 문법?속성이 있어서 남겨둔다. 배열 순서가 있는 값 ->순서는 인덱스라고 부르며, 1이 아닌 0부터 번호를 매김 ->대괄호를 이용해서 배열을 만들고, ->각각의 원소는 쉼표로 구분 .length 속성을 사용하여 배열의 길이를 알 수 있음 let myNumber = [7, 9, 6, 1, 5]; //myNumber[3] = 1 //myNumber 배열의 3번째 인덱스 값은 1 //string도 동일하게 적용 myNumber.length; //5 2차원 배열 let myNumber = [[13,30], [73,8], [44,17]]; //myNumber[1] = [73,8] myNumbe..

Section1 / Unit6 : 웹앱 만들기(계산기 구현하기)

코드스테이츠 수업 9일차! 오늘은 계산기 구현하는 시간이었다. 연산자에 따라 함수만드는 건 Number( )사용하는 거 제외하고 어렵지 않았지만 0 + 0 = 0 에서 누르는 숫자가 출력되게끔 하는 것부터가 아주 큰 관건이었다. buttons.addEventListener('click', function (event) { // 버튼을 눌렀을 때 작동하는 함수입니다. const target = event.target; // 클릭된 HTML 엘리먼트의 정보가 저장되어 있습니다. const action = target.classList[0]; // 클릭된 HTML 엘리먼트에 클레스 정보를 가져옵니다. const buttonContent = target.textContent; // 클릭된 HTML 엘리먼트의 텍..

Section1 / Unit5 : JS 반복문 & 함수

코드스테이츠 8일차! 반복문 코플릿 푸는데 정말 머리가 아찔했다 getMaxNumberFromString 문제 숫자 문자열을 입력받아 문자열을 구성하는 각 숫자 중 가장 큰 수를 나타내는 숫자를 리턴해야 합니다. 입력 인자 1 : str string 타입의 숫자 문자열 출력 string 타입을 리턴해야 합니다. 주의 사항 반복문(for)문을 사용해야 합니다. str.split 사용은 금지됩니다. 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다. 입출력 예시 let output = getMaxNumberFromString('53862'); console.log(output); // --> '8' output = getMaxNumberFromString('4321'); console.log(output);..

Section1 / Unit5 : JS 조건문

코드스테이츠 수업 7일차! JS 조건문을 배웠고 조건문 코플릿을 풀어보았다. 어찌저찌 다 풀긴했지만 참조를 활용하여 다른 방식도 익혀보는 게 좋겠다. converScoreToGradeWithPlusAndMinus 문제 점수를 입력받아 점수에 해당하는 등급을 리턴해야 합니다. 출력 string 타입을 리턴해야 합니다. 각 등급의 최저 점수는 아래와 같습니다. ('F'의 경우 최대 점수를 표기) 90 이상 --> 'A' 80 이상 --> 'B' 70 이상 --> 'C' 60 이상 --> 'D' 60 미만 --> 'F' 주의 사항 만약 주어진 점수가 100을 초과하거나 0 미만인 경우, 문자열 'INVALID SCORE'를 리턴해야 합니다. 각 등급의 최고 점수보다 7점 이하인 경우, 등급과 함께 '-'를 리..

Section1 / Unit5 : JS

코드스테이츠 수업 6일 차! JavaScript 시작! JavaScript 코드 실행하기 *HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동 *Node.js라는 JavaScript 런타임을 컴퓨터에 설치 *StackBlitz에서 JavaScript 코드를 실행 ->index.js파일에 원하는 JavaScript 코드를 작성하고, Terminal에 node index.js 입력 후 엔터 ->작성한 코드가 실행되고 출력 결과 확인 가능 ->Terminal에 node를 입력하면 REPL 사용 가능 ->REPL 종료하려면 .exit 입력 REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간..

Section1 / Unit4 : 복습&계산기 목업 만들기

코드스테이츠 수업 5일차! 첫 페어 과제로 계산기를 만들었다. 기본 지식을 배우는 것이랑 그것을 활용하는 것은 확실히 큰 차이가 있었다. 만들면서 찾은 필요했던 속성 *버튼 기본 세팅 초기화 하는 방법 -> button{all:unset} *:hover 에 ::after을 추가해서 content를 추가할 수도 있었다(마우스를 올리면 글자가 뜨게) *불투명도 조절 -> {opacity: ;} (0~1)로 조절 *그림자 넣는 방법 -> box-shadow (text-shadow 사용하면 글자에 그림자를 넣을 수 있다) 아직 지식이 부족해서 페어한테 많은 도움을 받았고 지식 쌓는데에 큰 도움이 되었다. 여러 수강생들의 작업물을 보면서 처음 보는 속성들이 있어서 메모해둔다. *gap 간격 조절 -> margin..