devCecy

[TIL] Scope 이해하기

Fri, 27 Nov 2020 09:22:21 GMT

1. Scope(스코프)의 의미

*scope란, * '변수'가 선언되고 사용될 수 있는 범위를 의미한다.

JavaScript 코드를 작성하다보면, *** is not defined라는 에러 메시지와 만나게 되는 경우가 있다. 즉, 변수가 아직 선언되지 않았다는 뜻이다. 오잉, 나는 분명 let, const로 변수를 선언해 주었는데 왜 이런 오류 메시지가 뜨는거지? 라는 생각이 든다면, Scope의 개념을 잘 이해할 필요가 있다.

나는 분명 변수 선언을 해주었지만, 예를 들어 console.log가 찍인 위치에서 변수가 선언된 영역(block)에 접근할 수가 없어서 위와 같은 오류가 생기는 것이다.

1-1) Block

block이란 중괄호{}(curly brace)로 감싸진 영역을 말한다. block 내부에 변수가 정의되면 그 변수는 오로지 block 내부에서만 사용이 가능하다.

참고로, block 내부에서 정의된 변수는 local variable(지역변수) 라고 한다.

예를들어,

1) function의 내부는 하나의 block이다.

function block() {
  return 'i am block'; //block 영역
}

2) for문 의 내부도 하나의 block이다.

for (let i = 0; i < 10; i++) {
  count++; //block 영역
}

3) if문의 내부도 하나의 block이다.

if (i === 1) {
  let number = 'one';   //block 영역
  console.log(number);
}

1-2) Global Scope (전역 스코프)

global scope(전역 스코프)는 block밖의 영역을 뜻하며,global scope에서 선언된 변수는 코드 어디서든 접근하여 변수 값을 확인할 수 있다.

참고로,global scope(전역 스코프)에서 만든 변수를 global variable(전역변수)라고 한다.

예를들어, color라는 변수는 global variable(전역변수)이기 때문에 returnColor함수의 block에서도 접근이 가능해 console.log(color)가 찍힌 3곳 모두에서 'red'라는 값을 반환하게 된다.

const color = 'red';
console.log(color);  //'red' 반환

function returnColor() {
  console.log(color);  //'red' 반환
  return color;  
}
console.log(returnColor());  //'red' 반환

2. Scope의 오염

global variable(전역변수)를 선언하면, 해당 프로그램 어디에서나 사용할 수 있는 global namespace를 갖기 때문에, global variable(전역변수)를 너무 남용하면 프로그램에 문제를 일으킬 수 있다.

참고로, namespace는 변수명을 사용할 수 있는 영역을 뜻한다.scope라고도 하지만, 특히 '변수이름'을 얘기할 때는 namespace라고 한다.

예를들어, callMyNightSky함수에서 stars라는 새로운 변수를 선언하고 싶었는데 깜빡하고 let으로 선언해주지 않아 stars에 Sirius라는 값이 재할당이 되었다. 그래서 callMyNightSky을 호출하면 stars변수에 재할당 되었던 값인 Sirius가 반환된다. 이렇게되면, 다른 함수에서 global variable(전역변수)인 stars('North Star')을 사용하고 싶었는데 값이 수정된 stars('Sirius')가 나타나는 문제를 겪게된다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
  stars = 'Sirius';
  return 'Night Sky: ' + satellite + ', ' + galaxy + ', ' + stars;
};
console.log(callMyNightSky());
console.log(stars);

3. 좋은 Scoping 습관

좋은 scoping습관은 global variable(전역변수)는 최소한으로 하고, 최대한 block내에서 let, const를 사용하여 변수를 새로 만들어 사용하는 것이다.

*좋은 Scoping 습관을 갖게되면, *

1) 코드가 block으로 명확하게 구분되기 때문에 코드 가독성이 높아진다. 2) 코드를 오랜만에 보더라도 유지보수가 쉬워진다. 3) block이 끝나면 local variable(지역변수) 사용도 끝이나기 때문에 메모리가 절약된다.

결론, 좋은 Scoping 습관을 갖자. 👻

[JS] Array의 최댓값, 최솟값 구하기

Tue, 24 Nov 2020 01:35:31 GMT

Array안에 있는 값 중 최댓값과 최솟값을 여러 방법으로 구해보자👻

최댓값 최솟값 구하기

방법 1

(1)최솟값 구하기

변수를 선언할 때 기본값으로 const를 사용했으나, let min = arr[0]의 경우 3줄 아래에서 재할당을 해줄 필요가 있으므로 let 을 사용했다.
arr[0]을 min의 기준값으로 잡아주고, 반복문을 i=1; 부터 돌려 값을 비교해준다.
arr[i]의 값이 min(arr[0])보다 크다면 min = arr[i]로 할당해주는 작업을 arr.length만큼 반복한다.
아래 예제의 경우 처음 min값은 20이고, 200부터 반복문을 돌다가 1을 만나면 할당을 하게된다. if문의 조건처럼 20은 1보다 크기 때문에! 계속 해서 반복문을 돌게 되지만 나머지 배열에서 1이 더 큰 경우를 찾을 수 없어 min은 1로 반환된다.

//최솟값을 구할 Array
const arr = [20, 200, 23, 1, 3, 9];

function getMin(arr){
  let min = arr[0];   // 3줄 아래에서 min을 arr[i]로 재할당 해주어야 하기 때문에 let 선언 
  for (let i= 1; i < arr.length; i++){  //arr[0]과 비교해주기위해 i = 1  부터 시작
    if ( arr[i] < min ) 
       min = arr[i];  // 할당 
    }
  return min;
} 

getMin(arr)  //1

(2)최댓값 구하기

최댓값은 최솟값과 조건문만 살짝 수정해주면 도출해 낼 수 있다.

//최댓값을 구할 Array
const arr = [20, 200, 23, 1, 3, 9];

function getMax(arr){
  let max = arr[0];   
  for (let i= 1; i < arr.length; i++){  
    if ( arr[i] > max ) 
       max = arr[i];  ![](https://images.velog.io/images/cecy-coding/post/a0ade87a-a4ec-47a0-aa43-7f61e2c3126c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-11-24%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.34.59.png)
    }
  return max;
} 

getMax(arr)  // 200

방법2

Math.max 와 apply를 이용한 최댓값 구하기 정리할 것 !

[JS] 객체(object)이해하기2

Mon, 23 Nov 2020 04:12:40 GMT

1. 객체의 키를 변수로 접근하기

객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능하다.

information이라는 객체를 먼저 하나 만들고,

const information = {
  name: '김개발'
}

여기에 키와 값을 만들어주고,

const verb = 'developes'  //키
const project = 'facebook'  //값

verb의 값을 키로, project의 값을 그 키의 값으로 할당해준다. [A],[B]방법 모두 할당이 가능하다. [A]의 경우 verb와 project가 어떤 값을 가지냐에 따라 다른 키와 값을 가지게되지만, [B]의 경우는 키와 값이 항상 정해져 있게 된다.

information[verb] = project // [A]
information.developes = 'facebook' // [B]

2. 객체 순회하기

객체도 배열과 같이 순회가 가능하다. 그러나, 배열과는 다르게 명확한 순서가 없기 때문에, 어떤 순서로 객체의 키 값에 접근하게되는지는 알 수 없다. 따라서, 객체의 순회는 "순서가 보장되지 않은 순회" 라고 부른다.

배열 순회시에는 for문을 이용했으나, 객체는 length 키가 따로 주어져있지 않고, 인덱스도 없기 때문에 for문을 이용한 순회는 불가능하다. 대신, 다음의 2가지 방법으로 객체를 순회할 수 있다.

2-1) Object.keys()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다. 더불어, 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드다.

object.keys()의 사용방법을 보자.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

Object.keys()는 배열을 리턴하기 때문에, 이제 반복문을 사용할 수 있게된다!

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값

  console.log(value)
}

새로운 ES6 문법에서 Object생성자의 메소드인 Object.values, Object.entries와 같은 자매품들이 추가되었다.

2-2) Object.values()

Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

2-3) Object.entries()

Object.entries는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 된다.

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2-4) for-in

for-in 문은 반복문인 for문과 같은 종류의 문법이며, 객체와 배열에서 모두 사용가능하다.

//for 문을 사용한 반복문 
const arr = ['coconut', 'banana', 'pepper', 'coriander']

for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
}

// for-in 문을 사용한 반복문 
const arr = ['coconut', 'banana', 'pepper', 'coriander']

for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법으로, for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동 결정한다.

//for-in문을 사용한 객체 순회
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}

이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.??

3. Assignment

getExamResult 함수를 구현해주세요. 인자 scores 는 다음과 같은 객체입니다.객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다.객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다. ('A+', 'A', 'B+', 'B', 'C+', 'C', 'D+', 'D', 'F')

{
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

인자 requiredClasses 는 다음과 같이 문자열로 된 배열입니다.

['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

다음 조건을 만족하는 객체를 리턴하도록 함수를 구현해주세요

scores 객체가 가지고 있는 키들은 새로운 객체에 포함되어야 합니다. 단, 그 값들은 다음 원리에 따라 숫자로 바뀌어 할당되어야 합니다.

A+ => 4.5 A => 4 B+ => 3.5 B => 3 C+ => 2.5 C => 2 D+ => 1.5 D => 1 F => 0

2.requiredClass 배열의 요소로는 존재하지만, scores의 키로는 존재하지 않는 항목이 있다면,해당 요소는 새로운 객체의 키가 되고, 값으로 0을 가져야 합니다.위에서 예시로 묘사된 객체와 배열이 인자로 들어왔다면, 다음과 같은 객체과 리턴됩니다.

{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
}

3-1) 완료 코드

풀이과정

최종 결과값을 넣어줄 빈 객체result를 만들고,
A,B,C..학점을 키값으로, 1,2,3..학점을 벨류값으로하는 객체를 만든다.
먼저, requiredClasses을 for in으로 반복문을 돌려 key값을 얻고, value 값은 0으로 만들어 아까 만들어둔 result 객체에 넣는다.

여기까지하면,

result = {
영어회화 : 0,
기초수학 : 0,
공학수학 : 0,
컴퓨터학개론 : 0
}

이다.

-scores를 for in 반복문을 돌려 반환될 키값을 obj라는 변수에 담아준다.

*- (가장 중요한 부분!!!) *

여기서 obj 값은 'C' 'B' 'B+' 'D+' 'C+' 'A+' 이고,

score의 값은, '생활속의회계' '논리적글쓰기' '독일문화의이해' '기초수학' '영어회화' '인지발달심리학' 이다.

result객체 안에 score값을 키값으로 넣어주면, 일단, result의 키값과 score의 값이 겹치는 경우 그 값의 키값은 undifined가 될것이고, 겹치지 않는 경우 score의 값이 result에 새로 추가될 것이다.

-그렇게 만들어진 result[score]는 numToString[obj]로 할당이 되는데, numToString[obj]는 munToString의 키값과 obj의 값이 겹칠 경우, munToString의 value값인 숫자를 얻게된다.

즉, result[score]가 키값으로 numToString[obj]를 갖게된다!!

const scores = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
};

const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론'];


const getExamResult = (scores, requiredClasses) => {
  const result = {}
  const numToString = {
    'A+':4.5,
    'A':4,
    'B+':3.5,
    'B':3,
    'C+':2.5,
    'C':2,
    'D+':1.5,
    'D':1,
    'F':0
  }
   for (let requiredClass in requiredClasses) {
    const key = requiredClasses[requiredClass];
    result[key] = 0;
  }
  for (let score in scores){
    const obj = scores[score];
    result[score] = numToString[obj];
  }
  return result
}

getExamResult(scores, requiredClasses)

/*
{
  '영어회화': 2.5,
  '기초수학': 1.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0,
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '인지발달심리학': 4.5
}*/

3-2) 오류가 났던 부분

두번째 for in문의 result[score] = numToString[obj]; 부분을 이해하지 못했었다. 할당이라는 개념을 이해하는데 혼동이 있었던 것같다. 할당이라는 개념으로 이 한줄을 해결하고나니 속이 엄청나게 시원했다 ㅠㅠㅠㅠ행복쓰 😭

[JS] ES6. arrow function

Sun, 22 Nov 2020 09:02:18 GMT

arrow function

arrow function은 es6에서 추가된 새로운 함수 표현방법이다.

1) 이름없는 함수 표현

//ES5 - 일반 함수
function() {}

//ES6 - arrow function 
() => {}

2) 이름이 있는 함수 표현

//ES5 - 일반 함수
function getName() {}

//ES6 - arrow function 
const getName = () => {}

3) 함수 호출

두 함수 모두 동일한 방법으로 호출 할 수 있다.

getName()

4) ES5 함수를 변수에 저장하기

ES6의 arrow function은 함수를 이미 getName이라는 변수에 저장한다. ES5의 함수도 getName이라는 변수에 저장이 가능하다.

//ES5 - Function Expression
const getName = function() {}

5) 함수에 인자 받기

ES6의 arrow function은 인자가 하나일 때는 소괄호 생략이 가능하며, 인자가 두 개일 때는 괄호를 생략할 수 없다.

//ES5 
const getName = function(name) {}

//ES6
const getName = (name) => {}
const getName = name => {}

//ES5
const getName = function(name, age) {}

//ES6
const getName = (name, age) => {}

6) 함수 return

//ES5
function hi(text) {
  text += '하세요';
  return text;
}

//ES6
const hi = text => { 
  text += '하세요';
  return text 
};

ES6의 arrow function은 실행내용없이 return만 한다면 return 키워드와 중괄호가 생략가능하다. 화살표 오른쪽에는 리턴될 "값"만 써야 한다.

example 1)

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

example 2)

//ES5
function getFullName(first, family) {
  return first + family;
}

//ES6
const hi = (first, family) => { return first + family };
const hi = (first, family) => first + family;

ECMA Script ?

ES는 ECMA Script의 줄임말로, ECMA Script는 JavaScript를 표준화 시키려고 탄생했다. 현재는 ES10 버전 까지 나왔으며, 현재 주로 쓰이는 것은 ES6이며, ES6은 버전 이름이고 ES 2015라고도 한다.

Assignment

1) ES5 > ES6 로 변환

//ES5
function welcome(name){
  return "안녕하세요" + name
}
welcome(name);

//ES6
const welcome = name => 
{
  return "안녕하세요" + name
};

welcome(name);

1) ES6 > ES5 로 변환

//ES6
const handleBio = (nickname, bio) =>  {
  const user = {
    nickname : nickname,
    bio : bio,
  };
   return user
};

handleBio(nickname, bio);

//ES5
function handleBio (nickname, bio){
  const user = {
    nickname : nickname,
    bio : bio
  }
  return user;
}

handleBio(nickname, bio);

[JS] Class 이해하기

Sun, 22 Nov 2020 08:24:02 GMT

Class 란?

class는 함수다. 함수를 함수표현식과 함수 선언으로 정의할 수 있듯이, class도 class 표현식과 class 선언 두가지로 class는 몸체에 0개 이상의 메서드만 정의할 수 있다. class 몸체에서 정의 할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있다.

1. 생성자 (constructor)

생성자는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. 생성자는 이름을 변경할 수 없다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

Car는 class이름이며 class이름은 항상 대문자로 시작하고, CamelCase로 작성해야 합니다.
Car class의 instance를 생성할 때마다 constructor메서드가 호출된다.
constructor()메서드는 name, price 2개의 argument(인자)를 받는다.
constructor()메서드에서 사용한 this 키워드class의 실행범위(context)에서 해당 instance를 의미합니다.
constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했습니다.
이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부릅니다.
멤버 변수는 this 키워드로 접근합니다.

2. 인스턴스 (Instance)

인스턴스는 class를 통해 생성된 객체이며, class의 property이름과 메서드를 갖는 객체이다. class로 객체를 생성하는 과정을 '인스턴스화'라고 부릅니다.

//인스턴스 생성 
const morning = new Car('Morning', 20000000);
console.log(morning); 

/*생성된 인스턴스 
Car {
  name: 'Morning',
  price: 20000000,
  __proto__: Car { constructor: ƒ Car() }
} */

인스턴스는 class이름에 new를 붙여서 생성한다.
클래스 이름 우측에 ()괄호를 만들고, 내부에는 생성자에 필요한 정보를 인자로 넘겨준다.
그럼, Car라는 클래스의 인스턴스가 moring이라는 변수에 저장된다.

3. 메서드 (Method)

객체의 프로퍼티 값을 함수로 갖고 있는 것을 메서드라고 부른다.

//메서드 생성하여 인스턴스 정보 변경하기 
class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }
  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}
const morning = new Car("morning", 2000);
const newDepartment = morning.changeDepartment("강남지점")

console.log(morning)

/* derpartment의 정보가 "선릉지점" 에서 "강남지점"으로 변경되었다! 
Car {
  name: 'morning',
  price: 2000,
  department: '강남지점',
  __proto__: Car { constructor: ƒ Car(), changeDepartment: ƒ changeDepartment() }
}
*/

4. Assignment

MyMath라는 class를 생성해주세요.

constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
총 4개의 메서드를 구현해주세요. 1) getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2] 2) add: 두 개의 숫자를 더하는 메서드 3) substract: 두 개의 숫자를 빼는 메서드 4) multiply: 두 개의 숫자를 곱하는 메서드

class MyMath {
  constructor(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  getNumber(num1,num2){
    return [this.num1, this.num2];
  }
  add(num1,num2){
    return this.num1+this.num2;
  }
  substract(num1,num2){
    return this.num1-this.num2;
  }
  multiply(num1,num2){
    return this.num1*this.num2;
  }
}

let myNumber = new MyMath(2,5);
console.log(myNumber.multiply());

오류가 났던 부분

새로 생성한 메서드에 this.num1, this.num2가 아니라 num1, num2라고 적어주었던 것. 사실, this.num1대신 왜 num1로 적으면 안되지는 아직 클리어하게 이해하지 못했다. class구조에 대해서 좀 더 명확하게 정리할 필요가 있다!

[JS] Assignment - 배열조합으로 새로운 객체 만들기

Sun, 22 Nov 2020 01:57:55 GMT

1. Assignment

다음 요구사항을 충족하는 객체를 만들어서 return 해주세요. objData가 갖고 있는 property는 3개 입니다. sumAmount: 총 판매량 sumReview: 총 리뷰개수 sumLike: 총 좋아요수

이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다. getData에 배열 세 개를 인자로 넘길 것이고, 이 배열 세 개를 조합해서 하나의 새로운 객체를 만들 것입니다. getData는 세 개의 배열을 인자로 받는 함수입니다.

salesArr: 날짜별 판매량 ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]] reviewArr: 날짜별 리뷰수 ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]] likeArr: 날짜별 좋아요수 ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]

위의 예시로 보여드린 배열은 단지 예일뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다. 위의 예시로 보여드린 배열은 단지 예일뿐,

날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다. 왜 각각 세 개의 배열을 하나의 객체로 구조를 바꿔야 할까요? 위의 배열에서 4월 1일에 판매량, 리뷰수, 좋아요수를 확인하려면 세 개의 배열을 각각 for문으로 반복해서 날짜를 확인해야 하므로 좋은 구조의 데이터라고 할 수 없습니다. (날짜가 365일이라고 하면, 세 개의 배열이 각자 365번 돌아야 하니까요) 그래서 세 개의 배열을 사용하기 좋게 객체로 바꿀 것입니다. 객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.

2. 완성코드

salesArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]];
reviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]];
likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]];


function getData (salesArr,reviewArr,likeArr){
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;

    for (let i in salesArr){
      sumAmount += salesArr[i][1];
  }
   for (let i in reviewArr){
      sumReview += reviewArr[i][1];
  }
   for (let i in likeArr){
      sumLike += likeArr[i][1];
  }
  let objData = {
    sumAmount:sumAmount,
    sumReview:sumReview,
    sumLike: sumLike
  };

  return objData;
}

getData(salesArr,reviewArr,likeArr);

3. 오류가 났던 부분

코드이 오류보다는 문제를 읽고 salesArr,reviewArr,likeArr 배열 속의 각각 겹치는 날짜를 하나로하여, 날짜가 프로퍼티 명이되고, 프로퍼티 값으로 판매량, 리뷰수, 좋아요수를 묶어 나타내라는 것으로 이해해 시간을 많이 할애하고 말았다.😭 그런데 objData가 갖고 있는 프로퍼티는 총3개로 sumAmount, sumReview,sumLike를 가지고 있다는 문장을 보고 내가 생각했던 로직과 일치하지 않아 혼란스러웠다. 그러나 결국 문제에서 정확히 요구하는 것을 도출해 내는것이 관건이였던 것 같다!

[JS] 객체(Object) 이해하기

Sat, 21 Nov 2020 15:52:58 GMT

객체(object)란?

객체(Object)는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 Key(이름)와 Value(값)로 구성된다.

객체(Object)는

{}(중괄호)로 감싸져 있고,
콜론으로 구분된 프로퍼티 이름/프로퍼티값의 쌍들이 쉼표로 분리된 목록의 형태이다.

(1) property 규칙

property 이름은 중복될 수 없다. 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

// 프로퍼티 이름을 중복 선언해 주어 마지막에 선언한 값이 반환되었다.
let myObj = {
    name: "cecy",
        name: "cecilia"
    };

console.log(myObj); //{name: "cecilia"}

property 이름은 식별자 네이밍 규칙을 따르지 않을 경우 반드시 따옴표""를 사용해 줘야한다.

//프로퍼티이름 "my-age"에서 ""를 생략할 경우 -연산자가 있는 표현식으로 인식한다.  
let properties = {
    myName = "cecy",
    "my-age" = 28
    };

property 값으로 모든 type이 가능하다(string, number, array, object, function 등)

let myObj = {
  property1: "hello", //string
  property2: [1,2,3,4,5],  //array
  property3: {
    childproperty: "hi"  //object
  },
  property4: function(){  //function
    console.log("Hi, I'm Cecy")  
  }
};

(2) property값에 접근하기

*객체의 property값에 접근하려면, *

1) 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치시킨다.

또는, 2) 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 넣어준다.

참고로, 마침표로 프로퍼티에 접근하는 것이 더 간단해 보이는데 2)와 같이 대괄호를 사용하여 접근하는 이유는, 대괄호안에는 변수를 넣어 접근할 수 있기 때문에 프로퍼티명을 변수로 선언해준 후 해당 프로퍼티에 접근하고 싶은 경우 사용할 수 있다.

참고1)

//프로퍼티명인 name을 propertyName이라는 변수로 선언해 준 경우, 
let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]); // 'Basic'이 반환된다.

참고2)

let myObj = {
  property1: "hello",
  property2: {
    childproperty: "hi"
  }
};

let name = "property";
console.log(myObj[name+"1"]);  //'hello'가 반환된다. 
console.log(myObj[name+"2"]["child"+name]);  //'hi'가 반환된다. 

console.log(myObj.property1); //'hello'가 반환된다. 
console.log(myObj.property2.childproperty);  //'hi'가 반환된다.

(3) property값 수정 및 생성

1) 이미 존재하는 프로퍼티에 값을 '할당'하면 프로퍼티 값이 수정된다.

let myObj = {
  property1: "hello"
};

myObj.property1 = ["hi", "hello"];  //할당

console.log(myObj); //["hi", "hello"]

2) 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

let myObj = {
  property1: "hello"
};

myObj.property2 = "hi";  // 존재하지 않는 프로퍼티 값 할당

console.log(myObj); //{property1: "hello", property2: "hi"}

(4) property 삭제

delete연산자를 사용하여 프로퍼티를 삭제할 수 있다.

let myObj = {
  property1: "hello"
};

delete myObj.property1;
console.log(myObj); // {} 빈 객체

[TIL] Scope 이해하기

Sat, 21 Nov 2020 05:13:25 GMT

1. Scope(스코프)의 의미

*scope란, * '변수'가 선언되고 사용될 수 있는 범위를 의미한다.

1-1) Block

block이란 중괄호{}(curly brace)로 감싸진 영역을 말한다. block 내부에 변수가 정의되면 그 변수는 오로지 block 내부에서만 사용이 가능하다.

참고로, block 내부에서 정의된 변수는 local variable(지역변수) 라고 한다.

예를들어,

1) function의 내부는 하나의 block이다.

function block() {
  return 'i am block'; //block 영역
}

2) for문 의 내부도 하나의 block이다.

for (let i = 0; i < 10; i++) {
  count++; //block 영역
}

3) if문의 내부도 하나의 block이다.

if (i === 1) {
  let number = 'one';   //block 영역
  console.log(number);
}

1-2) Global Scope (전역 스코프)

global scope(전역 스코프)는 block밖의 영역을 뜻하며,global scope에서 선언된 변수는 코드 어디서든 접근하여 변수 값을 확인할 수 있다.

참고로,global scope(전역 스코프)에서 만든 변수를 global variable(전역변수)라고 한다.

const color = 'red';
console.log(color);  //'red' 반환

function returnColor() {
  console.log(color);  //'red' 반환
  return color;  
}
console.log(returnColor());  //'red' 반환

2. Scope의 오염

global variable(전역변수)를 선언하면, 해당 프로그램 어디에서나 사용할 수 있는 global namespace를 갖기 때문에, global variable(전역변수)를 너무 남용하면 프로그램에 문제를 일으킬 수 있다.

참고로, namespace는 변수명을 사용할 수 있는 영역을 뜻한다.scope라고도 하지만, 특히 '변수이름'을 얘기할 때는 namespace라고 한다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
  stars = 'Sirius';
  return 'Night Sky: ' + satellite + ', ' + galaxy + ', ' + stars;
};
console.log(callMyNightSky());
console.log(stars);

3. 좋은 Scoping 습관

좋은 scoping습관은 global variable(전역변수)는 최소한으로 하고, 최대한 block내에서 let, const를 사용하여 변수를 새로 만들어 사용하는 것이다.

*좋은 Scoping 습관을 갖게되면, *

결론, 좋은 Scoping 습관을 갖자. 👻

[JS] Assignment - 문자열 찾기

Fri, 20 Nov 2020 00:36:18 GMT

1. Assignment

sliceCityFromAddress 함수를 구현해 주세요.

sliceCityFromAddress 함수는 address 인자를 받습니다.
address 인자에는 주소를 나타내는 string이 주어집니다.
주어진 주소가 어느 도시인지를 찾아내서, 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
주소는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.

2. 완성 코드

let address = "경기도 성남시 분당구 중앙공원로 53";
// let address = "서울특별시 강남구 테헤란로 427 위워크타워"

function sliceCityFromAddress(address) {

  let city = address.indexOf("도");
  let bigCity = address.indexOf("시");
  if (city !== -1){ 
    return address.slice(0,city+1) + address.slice(city+5,address.length);
  } else {
   return address.slice(bigCity + 2, address.length);
  }
}

sliceCityFromAddress(address);
//'경기도 분당구 중앙공원로 53'

3. 오류가 났던 부분

1) if 조건문을 return 해주지 않아 값을 만들어 주기만하고 반환하지 않았던 부분.

2)'서울특별시'와 같이 5글자로 늘어나는 지역을 생각하지 않았던 부분.

4. 추가 정리할 부분

indexOf의 개념
slice의 사용

[JS] Array 배열 조작하기

Thu, 19 Nov 2020 12:23:46 GMT

1. 배열조작

1-1)index로 접근

index로 접근 할 경우 꼭 순서대로 접근할 필요는 없다. cities[3] = "대구"; 원하는 순서에 배열에 접근할 수 있다.

let cities = [];
cities[0] = "서울";
cities[1] = "대전"; 
cities[3] = "대구"; 
console.log(cities) //[ '서울', '대전', <1 empty item>, '대구' ]
~~텍스트~~
cities[3] = "대구말고인천!"  //재할당 
console.log(cities)  //[ '서울', '대전', <1 empty item>, '대구말고인천!' ]

1-2)push, unshift 함수로 접근 및 추가

push는 배열의 맨 뒷부분에 요소를 추가해주며, unshift는 배열의 맨 앞부분에 요소를 추가해준다.

cities.push("경주")  
console.log(cities);  //[ '서울', '대전', <1 empty item>, '대구말고인천!', '경주' ]

cities.unshift("전주") 
console.log(cities);  //[ '전주', '서울', '대전', <1 empty item>, '대구말고인천!', '경주' ]

1-3) pop함수로 접근 및 삭제

pop은 배열의 가장 마지막 요소를 삭제해 준다.

cities.pop(); //맨 마지막의 "경주"가 삭제될 예정 
console.log(cities);  //[ '전주', '서울', '대전', <1 empty item>, '대구말고인천!' ]

2. Assignment

divideArrayInHalf 함수를 다음과 같이 구현해주세요.
divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.
array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로,- 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.

2-1) 완성 코드

let array = [1,20,10,5,100];

function divideArrayInHalf(array){
  let length = array.length;
  let result = [];

  for (i=0; i < length; i++){  
    let number = array.pop();
    if (number<=10){
        result.unshift(number);
    } else {
        result.push(number);
      }
    }
   return result;
}                   

divideArrayInHalf(array);   
// 반환 값 [1,10,5,100,20]

2-2) 오류났던 부분

1) let length = array.length;와 let result = [];를 for문 안쪽으로 넣어버린것. {}의 범위를 잘 파악하자.

2) for문안에 array.length를 그대로 넣어주어 array가 pop되면서 length가 줄어들었다. 그래서 기본 array.length만큼 반복하지 못하고 끝나버렸다.🤪 반복문 바깥으로 array.length를 length로 선언해 값을 고정해 주는것을 오류를 해결하였다. 더불어, 위의 문제는 array의 요소가 5개라고 알려주었기 때문에 array.length 대신 5를 넣어줬어도 되지만 array의 길이를 모를경우를 대비하여 위와 같이 해결하였다.

[HTML / CSS] 이미지를 띄워주는 float 속성

Wed, 18 Nov 2020 12:20:20 GMT

float 속성

float 속성은 이미지를 띄워서 텍스트를 이미지 주변에 배치되도록 만들어준다.

float을 사용하지 않는다면?

이미지와 텍스트 사이에 빈 공간이 생기게된다.

float를 사용해주면?

float:left;를 사용해주면, 라이언 이미지가 왼쪽에 뜨게 되고 텍스트들이 그 주변을 감싸준다.

float:right;를 사용해주면 라이언이미지가 오른쪽에 뜨게 되고, 텍스트들이 그 주변을 감싸준다.

[HTML / CSS] Display 속성

Wed, 18 Nov 2020 12:01:33 GMT

Display 속성

css를 통해 레이아웃을 컨트롤할 수 있는 Display 속성 중 가장 많이 사용되고 있는 block, inline, inline-block에 대해서 알아보자!

1) block

block은 한줄의 영역을 모두 사용하는 박스형태이며, 기본적으로 width값이 100%이다. 그렇기 때문에 요소들은 위에서 아래로 차곡차곡 쌓이게된다. 또한, width와 height, margin과 padding값을 지정해 줄 수 있다.

block을 속성으로 갖는 대표적인 태그로는 div, p, header, footer 등이 있다. (block 요소와 margin: 0 auto;가 만나면 중앙정렬 끄읕, 최고!)

2) Inline

inline은 텍스트를 삽입하기 위해 주로 사용하며, 텍스트 값만큼의 width를 갖기때문에 다음 요소 추가시 다음줄이 아닌 같은 줄의 옆으로 차곡차곡 쌓인다. height또한 폰트 크기와 같게 설정이 된다. 따라서, width와 height 값은 따로 지정해 줄 수 없으며, margin-top, margin-bottom은 적용이 되지 않는다.

3) Inline-block

inline-block은 inline과 block의 특징을 모두 가진 요소이다. block처럼 width와 height을 지정할 수 있지만, 만약 width와 height을 지정해 주지 않으면 inline처럼 텍스트 만큼의 영역만 지정이된다. 또한, inline과 같이 줄 바꿈이 이루어지지 않아 옆으로 차곡차곡 쌓이게 된다.

[TIL] Semantic Web과 Semantic Tag 한번에 이해하기!

Tue, 17 Nov 2020 10:41:45 GMT

알고보면 간단한 시맨틱 웹과 시맨틱 태그 한번에 이해하기 👻

1. 시맨틱 웹? 시맨틱 태그?

웹 기술의 발전에 따라 많은 수 많은 정보들이 웹상에 쌓이게 되었는데, 컴퓨터가 그 정보들을 보다 쉽게, 의미있는 해석할 수 있도록하기 위해 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tag)라는 웹 개념이 등장했다.

예를들어, 헤더의 위치를 잡아주기 위해

헤더자리

라고 적었다고 생각해보자.

태그 안에 '헤더자리'라는 내용을 넣어주었기 때문에 '컴퓨터 사용자'는 이 자리가 헤더자리임을 알 수 있지만, 컴퓨터는

태그만으로 이 자리가 헤더자리임을 알 수가 없다. 물론,

태그 안에 id값을 header로 부여하여 헤더자리 이렇게 나타낼 수도 있다. 그러나id값을 부여하기위해서는 의미없는 div태그를 무조건 사용해줘야 한다.

이러한 문제를 개선하고자, HTML5에서는 시맨틱 웹의 개념과 시맨틱웹을 쉽게 구성할 수 있도록 만들어주는 시맨틱 태그가 등장했다. (시맨틱 태그에는 header, nav, article, section,aside, footer,main 등 과 같은 태그들이 존재한다.)

따라서, 시맨틱 웹 환경이 구축된 HTML5를 사용하는 현재는 컴퓨터에게 헤더자리임을 알려주기위해서 header태그를 사용하여

헤더자리

라고 간단하게 적어주면 된다.👍🏻👍🏻

(이미지 출처 - https://eunsukim.me/posts/understanding-semantic-html)

2. 시맨틱 태그 적용 사례

무조건 시맨틱 태그를 사용하는 좋은 것은 아니며, 이는 상황에 맞게 사용해 주면된다. 예시로 웹 페이지에 배경 이미지를 삽입할때, 시맨틱 태그를 사용하는 것과 사용하지 않는 것의 차이점을 알아보자.

img *시맨틱 태그를 사용하는 경우, * 위와 같이 배경이미지를 넣어 줄 수 있으며, alt속성에 해당 이미지에 대한 속성값을 넣을 수 있고 이는 검색엔진에서 인식된다. 따라서, 이미지가 검색엔진에 노출되기 원하면 img시맨틱 태그를 사용해 주면 된다.

*css파일에서 이미지 삽입하는 경우, * .클래스명 { background-image: url("이미지 주소"); } 위와 같이 css를 통해 배경이미지를 넣어주면 어떤 의미있는 값도 컴퓨터에서는 읽을 수 없기 때문에 그저 이미지 삽입에서 그치게된다. 하지만, 웹사이트에서 단순하게 보여주기를 위한 이미지라면 유지보수에 편리한 본 방법을 사용해 주면 된다.

[HTML / CSS] 박스크기의 기준을 정하는 box-sizing

Mon, 16 Nov 2020 09:30:54 GMT

> box-sizing은 박스의 크기를 어떤 값을 기준으로 계산할지 결정하는 속성이다👻

box-sizing

아래 예시를 보자.

노란박스 4개의 가로 사이즈를 모두 300px로 지정해 주었는데 두번째 박스의 가로길이가 더 길다. 그 이유는 두번째 박스의 스타일에 padding과 border 속성을 추가해주었기 때문! css의.second를 보면 왼쪽, 오른쪽 pdding 50px + 왼쪽, 오른쪽 border 10px이 추가되었음을 확인할 수 있다. 따라서 두번째 박스의 가로길이는 현재 (50+50+10+10+300)px = 420px 이다!

//html

      첫 번째 박스, 가로 300px
    

    
      두 번째 박스, 나도 가로 300px
    

    
      new 첫 번째 박스, 가로 300px
    

    
      new 두 번째 박스, 나도 가로 300px

//css
.first {
  width: 300px;
  margin-bottom: 20px;
}

.second {
  width: 300px;
  margin-bottom: 20px;
  padding: 50px;
  border-width: 10px;
}

div {
  background-color: yellow;
}

위와 같이 padding과 border로 인해 width값이 무너지는 현상을 해결하기 위해서는?box-sizing속성을 사용해주면 된다. 속성값으로는 box-sizing: content-box | border-box | initial | inherit이 있으며, 이번 예제에서는 border를 기준으로 박스크기를 정해주었다. (참고로 모든 태그에 적용하기 위해서 선택자를*로 지정해 주었다.)

*{
box-sizing: border-box;
}

그럼 이렇게 border기준으로 예쁘게 박스 가로길이가 통일된다! 얍!

참고) box-sizing의 속성 값

content-box : 콘텐트 영역을 기준으로 크기를 정한다. border-box : 테두리를 기준으로 크기를 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다.

[HTML / CSS] boder 속성 활용

Mon, 16 Nov 2020 09:16:39 GMT

boder 속성 활용

css의 border 속성은 테두리를 만들어주는 역할을 하지만, 테두리의 스타일이나 색, 굵기 등을 커스터마이징 할 수 있기 때문에 이를 이용하여 밑줄이나, 인용문 등으로도 활용할 수 있다.

1) 밑줄 긋는 2가지 방법

text-decoration: underline; 으로 밑줄 긋기

css의 border 속성 이용하여 밑줄 긋기

//html
 border속성으로 그은 밑줄

//css
border-bottom: 2px solid;


밑줄은text-decoration: underline; 로 만들 수 있지만, 실제로 대부분의 개발자는 커스터마이징하기 좋은 border-bottom: 2px solid; 이런식으로 구현한다. 
2) 인용문 만드는 2가지 방법

blockquote태그를 이용blockquote을 이용한 인용문입니다.



css의 border속성 이용
css 속성값을 아래와 같이 주면 인용문 스타일을 만들 수 있다. //html
border이용해 인용문 처럼 만들기!
//css
margin-left: 20px;
border-left: 2px solid;
padding-left: 20px;



[HTML / CSS] FlexBox 정복하기 3
Fri, 13 Nov 2020 10:11:48 GMT
FlexBox 정복하기 3

마지막으로, flex-grow flex-shrink flex-basis를 통해 브라우저 크기가 커지거나 작아질때 요소의 크기도 변화할 수 있도록 만들어보자. 
그리고 진짜 진짜 마지막으로 FLEXBOX FROGGY로 마무리!

(1) 기본틀 만들기
html 파일



    
    
    flex box 연습
    


    
        1
        2
        3
    


css파일
.container {
  background-color: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 80px;
  height: 80px;
}
.item1 {
  background-color: #ffcdd2;
}

.item2 {
  background-color: #e1bee7;
}

.item3 {
  background-color: #d1c4e9;
}


(2) flex-grow & flex-shrink
flex-grow와 flex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink는 창크기가 작아질때 요소크기를 어떻게 변화 시킬지 정해준다!
flex-frow기준으로 확인해보자. 
flex-frow가 적용되지 않는 경우, 아래와 같이 아무리 브라우저 창을 크게 해도 요소의 크기가 달라지지 않는다. 

flex-grow값을 아래와 같이 각각1로 준다면?
.item1 {
  background-color: #ffcdd2;
  flex-grow: 1;
}

.item2 {
  background-color: #e1bee7;
  flex-grow: 1;
}

.item3 {
  background-color: #d1c4e9;
  flex-grow: 1;
}
브라우저 창이 커짐에 따라 박스1,2,3이 같은 비율로 예쁘게 잘 커진다!

1번,3번박스는 flex-grow: 1; 2번박스는 flex-grow: 2;로 적용해주면?
.item1 {
  background-color: #ffcdd2;
  flex-grow: 1;
}

.item2 {
  background-color: #e1bee7;
  flex-grow: 2;
}

.item3 {
  background-color: #d1c4e9;
  flex-grow: 1;
}
2번박스가 1,3번박스보다 2배 큰 비율로 늘어난다~! 

flex-grow와 같은 방식으로 flex-shrink도 동작한다. 
1,3번박스는 flex-shrink: 1;, 2번박스는 flex-shrink: 2;로 적용해보자. 
.item {
  width: 300px;
  height: 300px;
}
.item1 {
  background-color: #ffcdd2;
  flex-shrink: 1;
}

.item2 {
  background-color: #e1bee7;
  flex-shrink: 2;
}

.item3 {
  background-color: #d1c4e9;
  flex-shrink: 1;
}
2번박스가 1,3번 박스보다 2배 더 작아지는것을 확인!

(3) flex-basis
flex-basis는 브라우저 크기 변화에 따라 flex-grow 나 flex-shrink보다 더 디테일하게 요소의 비율을 정해 줄 수있다. 
1번 박스는 20%, 2번 박스 50%, 3번 박스는 30%의 비율을 유지해줘!라고 적었다. 
.item1 {
  background-color: #ffcdd2;
  flex-basis: 20%;
}

.item2 {
  background-color: #e1bee7;
  flex-basis: 50%;
}

.item3 {
  background-color: #d1c4e9;
  flex-basis: 30%;
}
브라우저 크기를 조절해보면 이렇게 20%,50%,30%비율을 유지하며 박스 크기가 달라지는 것을 확인할 수 있다 👍🏻

(4) order
요소들의 순서를 바꿔보자. 
.item1 {
  background-color: #ffcdd2;
  order: 2;
}

.item2 {
  background-color: #e1bee7;
  order: 0;
}

.item3 {
  background-color: #d1c4e9;
  order: 1;
}

1번박스는 2, 2번박스는 0, 3번박스는 1로 순서를 바꿔 주었다. 




[HTML / CSS] FlexBox 정복하기 2
Fri, 13 Nov 2020 10:10:53 GMT
FlexBox 정복하기 2

flexBox 중 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 

(1) justify-content
축의 방향으로 요소들을 정렬시켜준다. 
(기본값)justify-content: flex-first;

justify-content: flex-end; 
요소의 순서는 유지시켜주되 위치만 오른쪽으로 이동시켜 준다. 

justify-content: center; 
예상대로! 무지개 요소들이 중앙에 위치한다. 

justify-content: space-between;
무지개 요소들 사이에'만' 공간이 생긴다. 

justify-content: space-evenly;
무지개 요소 사이사이 뿐만아니라 1번박스와 10번박스 옆에도 동일한 공간이 생긴다. 

justify-content: space-around;
요 아이는 각 무지개 박스 주변에 공간이 생기는건데, 1번박스 왼쪽부분과 오른쪽 부분의 공간의 크기가 다른 이유는 1번박스의 오른쪽여백은 2번박스의 왼쪽여백과 더해진 것이기 때문이다 !! 

(2)align-content
 justify-content와 동일한 속성들을 적용할 수 있으며, 축의 수직방향으로 정렬된다. 
 이번 속성을 확인해 보기 전 먼저, 무지개 박스의 갯수를 늘린 후flex-wrap: wrap;을 적용해 주었다. 
 align-content: flex-first;
 
 align-content: flex-end;
 
 align-content: center;
 
 align-content: space-between;
 
 align-content: space-evently;
 
 align-content: space-around;
 
(3) align-self
요소 하나만 위치를 변경하고 싶으면?  align-self 사용해주기!
박스1에만 align-self: center;를 적용해주면, 
.item1 {
  background-color: #ffcdd2;
  align-self: center;
}

.item2 {
  background-color: #e1bee7;
}

.item3 {
  background-color: #d1c4e9;
}

아래와 같이 1번 박스만 중앙에 위치하게 된다. 

참고링크
 https://www.youtube.com/watch?v=7neASrWEFEM&t=59s



[HTML / CSS] FlexBox 정복하기 1
Fri, 13 Nov 2020 08:30:28 GMT
FlexBox 정복하기 1

flex box를 생성하고(display: flex;), 
요소들의 방향을 설정해주고 (flex-direction),
요소들을 다음줄로 넘겨주는 방법 (flex-wrap) 까지 알아보자. 

MDN에서 가져온 flex model

1. 기본 코드 만들고 시작 !
오늘 사용한 기본 코드는 아래와 같다. 
기본 html코드



    
    
    flex box 연습
    


    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
    


기본 css코드
.container {
  background-color: beige;
  height: 100vh;
}

.item {
  width: 80px;
  height: 80px;
}
.item1 {
  background-color: #ffcdd2;
}

.item2 {
  background-color: #e1bee7;
}

.item3 {
  background-color: #d1c4e9;
}

.item4 {
  background-color: #bbdefb;
}

.item5 {
  background-color: #b2ebf2;
}

.item6 {
  background-color: #c8e6c9;
}

.item7 {
  background-color: #fff9c4;
}

.item8 {
  background-color: #ffe0b2;
}

.item9 {
  background-color: #ffccbc;
}

.item10 {
  background-color: #f5f5f5;
}
위와 같이 html과 css파일을 만들어주면 아래와 같이 예쁜 무지개 박스가 생성된다. 🌈

2. flex box 생성
flex box 모델을 시작하려면 display: flex;로 먼저 시작을 알려주면 된다. 
/* flex box 시작!*/
.container {
  background-color: beige;
  height: 100vh;
  display: flex;
}
그럼 이렇게 촤르륵 옆으로 붙는다. 

(1) flex-direction
flex-direction은 요소의 방향을 잡아 줄수 있다. 
(기본값)flex-direction: row;

flex-direction: row-reverse; 무지개박스가 기본방향에서 반대편은 오른쪽에서 시작된다. 

flex-direction: column; 축의 수직 방향으로 무지개 박스의 방향 변경!

flex-direction: column-reverse; 축의 수직방향이되 기본 값이 위 아래 > 아래 위로 방향 변경!

(2) flex-wrap
 기본값인flex-wrap: nowrap;상태에서는 브라우져 창을 줄이면 무지개 요소들이 창에 맞춰 작아진다. 

flex-wrap: wrap;
이떄, flex-wrap: wrap;을 사용하면 브라우져가 줄어들어도 무지개 요소들이 원래 사이즈를 유지하며 부족한 공간만큼 다음 줄로 무지개 요소를 이동시켜준다. 
 
참고링크
https://www.youtube.com/watch?v=7neASrWEFEM&t=59s



[HTML / CSS] Position 속성 - relative 와 absolute 
Fri, 13 Nov 2020 04:30:26 GMT
1. Position 속성

css의 position 속성 중 relative와 absolute의 차이를 알아보자! 

이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다. 
1) static
static은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static 상태다. 그러므로 우리가 position: stactic;이라고 적어줄 일은 없다. position 속성을 갖지 않은 버튼을 하나 만들어보자. 
/*position 속성을 부여하지 않은 버튼*/
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
        }
그럼, 아래와 같은 버튼이 생성된다. 이미지의 선은 브라우저 상단을 보여주기 위해서 같이 캡쳐했다. 어떤 값도 부여해주지 않았음에도 버튼과 브라우저 사이에 약간의 여백이 있음을 알 수 있다. 이게 모든 태그들이 static 상태에 있다는 증거!  

2) relative
버튼의 위치를 바꿔 여백을 좀 주고싶다면 이제 position: relative;가 등장할 차례다. relative는 static이었을때의 위치를 기준으로 값을 갖게된다.  
/*position: relative속성을 부여하고 top: 100px; 로 지정해 주었다.*/ 
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }
역시나 상단 브라우저창을 함께 캡쳐했다. btn1은 static 상태에서 top: 100px; 만큼 이동했다. 

3) absolute
absolute는 static속성값에 구애 받지 않고 요소를 위치시킬 수 있다. 
/*position: absolute;  top: 100px을 부여해준 버튼 */
.btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }
btn2에position: absolute; top: 100px;값을 부여해주었다. 그럼 아래와 같이 브라우져 상단에서부터 100px떨어진 곳에 버튼이 위치하게 된다. 

relative와 absolute 비교
따로 보니 relative top: 100px; 인 버튼과 absolute top:100px인 버튼의 위치 차이를 느끼기 어려워 동시에 만들어 보았다. 
 btn1에는 position: relative; top: 100px;, btn2에는 position: absolute; top: 100px;을 부여해 주었다. 
       .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }
        .btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }
그럼 아래와 같은 결과가 나오는데, static기본값을 가진 상태에서 top: 100px; 만큼 이동한 btn1이 btn2보다 더 아래에 있는 것을 확인 할 수 있다. 

++참고로 position: fixed; 요 아이도 static속성을 기본으로 갖지 않아 기준점이 브라우저 왼쪽 상단이 된다. 
참고 링크
https://engkimbs.tistory.com/922



[HTML / CSS] 요소의 모든 속성을 초기화 시켜주는 all 속성
Thu, 12 Nov 2020 07:33:02 GMT
all 속성

css 스타일 속성 중 all이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 

예를들어, 아래와 같이 버튼을 생성했다면?

    

이런 버튼이 생성된다. 

여기서 all: unset;스타일 속성을 입혀주면,  
button{
    all: unset; 
        }
이렇게 기본 버튼 모양이 초기화되어, 텍스트만 남게된다. 

스타일이 초기화된 버튼에 배경색을 입혀주면? 
button{
    all: unset; 
        background-color: cornflowerblue;
        }
 이렇게 배경색이 입혀진다! 그말은 즉, 이제 원하는 스타일을 마음껏 적용해주면 된다는 것! 
 
버튼의 폰트 컬러와 여백, 포인터, 동글동글한 모양으로 속성을 입혀주고나면~
button{
    all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 10px;
            cursor: pointer;
        }
 예쁜 버튼 완성! 
 
 아, 참고로 all:unset;속성을 해주지 않으면 기본 스타일과 새로 적어준 스타일이 충돌되어 아래와 같이 안에쁜 모양의 버튼이 생성되니 잘 확인 할 것! 
 
참고
 MDN참고하여 나머지 속성값 정리하기 
 https://developer.mozilla.org/ko/docs/Web/CSS/all