ㅇㅇㅈ Blog

프론트엔드 수행중

0%

없는 숫자 더하기

문제

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다.

numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

제한 사항

  • 1 ≤ numbers의 길이 ≤ 9
    • 0 ≤ numbers의 모든 원소 ≤ 9
    • numbers의 모든 원소는 서로 다릅니다.

입출력 예

numbers result
[1,2,3,4,6,7,8,0] 14
[5,8,4,0,6,7,9] 6

입출력 예 설명

  • 입출력 예 #1

    • 5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다.
  • 입출력 예 #2

    • 1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야 합니다.

solution

  1. 0부터 9까지의 합을 구한다
  2. 주어진 numbers의 합을 구한다
  3. 0부터 9까지의 합에서 numbers의 합을 뺀다
1
2
3
4
5
6
7
8
9
10
11
12
const numbers = [1,2,3,4,6,7,8,0]
function solution(numbers){
let allSum = 0;
let numbSum = 0;
for(let i=0; i <=9; i++){
allSum += i
}
numbers.forEach((el) => {
numbSum += el
})
return allSum - numbSum
}

다른 사람의 풀이를 보자..

1
2
3
function solution(numbers){
return 45 - numbers.reduce((acc, cur) => acc + cur, 0)
}

깔끔쓰..
0부터9까지합 로직은 그렇다 쳐도
reduce는 생각도 못했다

reduce()에 대해 알아보자..

Array.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환한다

말이 어렵다..

1
arr.reduce(callback[, initialValue])

사용 방법

reduce()에는 누산기가 포함되어 있기 때문에, 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할때 용이하다.

1
2
3
4
5
const numbers = [1,2,3,4,5]
const result = numbers.reduce((acc, cur, idx)=>{
return acc + cur
},0)
console.log(result) // 15

예제에서 initialValue 를 0 으로 주었기 때문에 초기값이 0부터 시작해서 하나씩 누적 시켜 나간다
0+1+2+3+4+5 = 15

1
2
3
4
5
const numbers = [1,2,3,4,5]
const result = numbers.reduce((acc, cur, idx)=>{
return acc + cur
},10)
console.log(result) // 25

initialValue 를 10 으로 주었기 때문에 초기값이 10부터 시작해서 하나씩 누적 시켜 나간다
10+1+2+3+4+5 = 15

reduce()의 콜백 함수는 4가지 인수를 받는다

1
2
3
4
5
6
7
8
1. accumulator
- 누산기, 콜백의 반환값을 누적시킨다. initialValue를 제공했을때는 initialValue의 값이다
2. currentValue
- 처리할 현재 요소
3. currentIndex (optional)
- 처리할 현재 요소의 인덱스
4. array (optional)
- reduce()를 호출한 배열

React

  • 유저 인터페이스를 만들기위한 자바스크립트 라이브러리(library)
  • Component based Development

Component

Component Tree => DOM Tree

  • DOM과는 다르게 Component 내장되어 있는 태그들을 조합하고 스타일,동작등을 한 번에 다루는 형태를 만든 다음 재활용하는 방식

Virtual DOM ?

  • DOM을 직접 제어하는 경우
    • 바뀐 부분만 정확히 바꿔야 한다.
  • DOM을 직접 제어하지 않는 경우
    • 가상의 돔 트리를 사용해서 이정 상태와 이후 상태를 비교하여, 바뀐 부분을 찾아내서 자동으로 바꾼다

CSR(React Client Side Rendering)

  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음.
  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 화면이 보이면서 유저가 인터렉션 가능

SSR(React Server Side Rendering)

  • JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용 할 수 없음.
  • JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용 가능
Read more »

무한 루프 이미지 슬라이더

이미지 슬라이더에 대한 이해

  1. 이미지가 실제 보이는 div가 있다

  2. 그 안에 ul로 감싸진 실제 이미지들(li)이 일렬로 정렬되어 있다

  3. ul의 포지션이 움직이면서 다음이나 전의 이미지가 보여진다

HTML 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<div class="kind_wrap">
<div class="kind_slider">
<ul class="slider">
<li>
<img src="https://via.placeholder.com/800x200.png?text=A" alt="" />
</li>
<li>
<img src="https://via.placeholder.com/800x200.png?text=B" alt="" />
</li>
<li>
<img src="https://via.placeholder.com/800x200.png?text=C" alt="" />
</li>
<li>
<img src="https://via.placeholder.com/800x200.png?text=D" alt="" />
</li>
</ul>
</div>
<div class="arrow">
<a href="javascript:void(0)" class="prev">이전</a>
<a href="javascript:void(0)" class="next">다음</a>
</div>
</div>
</body>

style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.kind_wrap {
border: 2px solid black;
width: 100%;
max-width: 800px;
margin: 0 auto;
position: relative;
}
.kind_wrap > .kind_slider {
overflow: hidden;
}
.kind_wrap > .kind_slider .slider {
position: relative;
}
.kind_wrap > .kind_slider .slider li {
float: left;
}
.kind_wrap > .kind_slider img {
vertical-align: top;
}
.kind_wrap .arrow > a.prev {
position: absolute;
left: -50px;
top: 100px;
}
.kind_wrap .arrow > a.next {
position: absolute;
right: -50px;
top: 100px;
}
Read more »

SCSS

CSS 전처리기 (CSS Preprocessor)

  • 전처리기에는 SCSS,Sass,Less,Stylus 등이 있다
  • CSS 문법과 유사하지만 선택자의 중첩, 조건문, 반복문 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성 가능
  • 웹에서는 CSS만 동작하기 때문에 SCSS를 웹에서 동작 가능한 CSS로 컴파일(Compile)해줘야 한다.

SCSS 컴파일 미리보기 사이트
https://www.sassmeister.com/

주석

SCSS에서는 CSS에서 사용하는 주석방식 외에도
// 같은 JS에서 사용하는 주석 방식도 사용 가능하다

  • 주의점 // 로 주석 처리할 시 CSS로 컴파일 하면 내용이 사라진다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
scss
.container {
h1 {
color : royalblue;
// font-size:60px; JS에서 사용하는 주석 방식
/* background-color : orange */ 일반 CSS에서 사용하는 주석 방식. 컴파일시 나타나지 않는다
}
}

css로 컴파일시
.container h1 {
color:royalblue;
/* background-color : orange */
}
Read more »

호이스팅 (Hoisting)

  • 코드가 실행이 되기 전에 먼저 선언해둔 변수&함수를 조사하여 메모리에 저장해둔다(유효 범위의 최상단에 선언한다)
  • 자바스크립트에서 호이스팅시 변수의 선언과 초기화(undefined으로) 같이 시킨다

var & let

var는 전역변수와 지역변수의 개념이 확실치 않다

var

  1. 함수만 지역변수로 호이스팅이 되고 나머지는 다 전역변수로 올라간다
  2. 같은 이름의 변수를 여러번 생성가능하다
1
2
3
4
5
6
7
8
9
10
11
for (var i = 1; i < 5; i++) {
console.log(i)
}
console.log(i)
// 1 2 3 4 5 가 출력된다

var a = 1
console.log(a)
var a = 2
console.log(a)
// 1 2 가 출력된다

let

  1. let도 호이스팅이 된다
  2. Temporal Death Zone(TDZ) 만들어 변수의 선언문이 나오기전까지는 변수에 접근할수 없다
1
2
3
4
5
for (let i = 1; i < 5; i++) {
console.log(i)
}
console.log(i)
// 에러가 발생한다

1
2
3
4
5
let a = 1
console.log(a)
let a = 2
console.log(a)
// 역시 에러가 발생한다

키보드 버튼 추가하기

html구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="game-keyboard">
<div class="first-row">
<button class="key-btn text-btn">q</button>
<button class="key-btn text-btn">w</button>
<button class="key-btn text-btn">e</button>
<button class="key-btn text-btn">r</button>
<button class="key-btn text-btn">t</button>
<button class="key-btn text-btn">y</button>
<button class="key-btn text-btn">u</button>
<button class="key-btn text-btn">i</button>
<button class="key-btn text-btn">o</button>
<button class="key-btn text-btn">p</button>
</div>
<div class="secon-row">
<button class="key-btn text-btn">a</button>
<button class="key-btn text-btn">s</button>
<button class="key-btn text-btn">d</button>
<button class="key-btn text-btn">f</button>
<button class="key-btn text-btn">h</button>
<button class="key-btn text-btn">j</button>
<button class="key-btn text-btn">k</button>
<button class="key-btn text-btn">l</button>
</div>
<div class="thir-row">
<button class="key-btn del">Del</button>
<button class="key-btn text-btn">z</button>
<button class="key-btn text-btn">x</button>
<button class="key-btn text-btn">c</button>
<button class="key-btn text-btn">v</button>
<button class="key-btn text-btn">b</button>
<button class="key-btn text-btn">n</button>
<button class="key-btn text-btn">m</button>
<button class="key-btn enter">Enter</button>
</div>
</div>

버튼 가져오기

1
2
3
let buttons = Array.from(document.querySelectorAll('.game-keyboard .key-btn'))
const delBtn = document.querySelector('.del')
const enterBtn = document.querySelector('.enter')

querySelectorAll로 가져오면 유사배열이기때문에 배열메소드가 안 먹힐때가 있다

Arry.from()으로 배열로 만들어 준다

버튼 클릭 이벤트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
buttons.map((e) => {
e.addEventListener('click', (btn) => {
let btnTarget = btn.target
// event.target 은 누른 버튼이 무엇인지 알려준다
let btnText = btn.target.textContent
// 누른 버튼 안에 들어있는 텍스트를 저장한다
let upperCaseBtn = btnText.toUpperCase()
// html에 버튼을 소문자로 작성 했기때문에 대문자화 해준다
// 정답 단어가 대문자이기 때문에 비교시 대문자여야 한다

if (btnTarget !== delBtn && btnTarget !== enterBtn) {
// querySelectoAll 로 받아온 버튼에 delete와 enter도 포함 되어있다
// del 과 enter 버튼을 제외한 나머지 버튼만 동작 하도록 조건을 만들어준다
if (tileNum < word.legnth) {
let curTile = rowArr[boardRow].children[tileNum]
if (curTile.textContent === '') {
curTile.textContet = upperCaseBtn
tileNum++
}
}
} else if (btnTarget === delBtn) {
if (tileNum > 0 && tileNum <= word.legnth) {
tileNum--
}
let curTile = rowArr[boardRow].children[tileNum]
curTile.textContet = ''
} else if (btnTarget === enterBtn && tileNum === word.legnth) {
gameCheck()
bordRow++
tileNum = 0
}
})
})

안쪽의 로직은 키보드로직과 동일하다

누르는 버튼의 타켓이 del 인지 enter인지 아니면 일반 텍스트 인지만 구분해주면 된다!

중복 단어 제거

n개의 문자열이 입력되면 중복된 문자열은 제거하고 출력한다

1
2
3
4
5
6
7
8
9
10
let textArr = ['5', 'good', 'time', 'good', 'student', '5', 'hello', 'bye']

function solution(t) {
const ans = t.filter((text, index) => {
return textArr.indexOf(text) === index
})
console.log(ans)
}

solution(textArr)

indexOf()

  • 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

filter((element, index, source) => {})

  • 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

element : 요소값
index(optional) : 요소의 인덱스
source(optional) : 순회되는 배열 객체

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

데이터 불변성(Immutability)

  • 원시 데이터 : String, Number, Boolean, undefined, null
    • 원시데이터들은 메모리에 만들어지면 불변한다.
    • 간단히 생긴게 같으면 같은 데이터, 다르면 다른 데이터이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
let a = 1
let b = 4
console.log(a, b, a === b)
// 1 4 false
b = a
console.log(a, b, a === b)
// 1 1 true
a = 7
console.log(a, b, a === b)
// 7 1 false
let c = 1
console.log(b, c, b === c)
// 1 1 true
  • 참조형 데이터 : Object, Array, Function
    • 불변성이 없다. 즉, 가변한다
    • 모양이 같다고 같은 데이터는 아니다
    • 한 쪽을 수정하면 의도치 않게 다른쪽도 수정이 될 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let a = { k: 1 }
let b = { k: 1 }
console.log(a, b, a === b)
// {k:1} {k:1} false
a.k = 7
b = a
console.log(a, b, a === b)
// {k:7} {k:7} true
a.k = 2
console.log(a, b, a === b)
// {k:2} {k:2} true
let c = b
console.log(a, b, c, a === c)
// {k:2} {k:2} {k:2} true
a.k = 9
console.log(a, b, c, a === c)
// {k:9} {k:9} {k:9} true
  • 참조형 데이터를 새롭게 할당해서 완전히 구분지어 사용하고 싶으면
    복사라는 개념을 사용해 메모리상에서 분리해줘야 한다.
    • 복사에는 얕은복사와 깊은복사가 있다
1
2
3
4
5
6
7
8
9
10
11
12
const user = {
name: 'abc',
age: 85,
emails: ['abc@gmail.com'],
}
const copyUser = user
console.log(copyUser === user)
// true
user.age = 22
console.log(user.age) // 22
console.log(copyUser.age) // 22
// 데이터가 둘 다 변했다
Read more »

JS-Destructuring-assignment

구조 분해 할당


객체데이터의 구조분해할당

  • 어떤 객체데이터에서 구조 분해 해서 원하는 속성들만 꺼내서 사용할 수 있는 개념
  • 데이터.속성 으로 표기하는 점표기법과 동일하다
  • 데이터[‘속성’] 인덱싱 방법과도 같다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const user = {
name: 'abc',
age: 85,
email: 'abc@gmail.com',
}

const { name, age, email, address } = user

console.log(`사용자의 이름은 ${name}입니다.`)
// 사용자의 이름은 abc입니다.
console.log(`사용자의 이름은 ${age}입니다.`)
// 사용자의 이름은 85입니다.
console.log(address)
// undefined

const { name, age, email, address = 'korea' } = user
// 기본값을 지정해줄 수 있다.
1
2
3
4
5
6
7
8
9
10
const user = {
name: 'abc',
age: 85,
email: 'abc@gmail.com'
address: 'usa'
}

const { name, age, email, address = 'korea' } = user
console.log(address)
// usa 출력

구조분해 할때 기본값을 지정했어도 데이터 안에 값이 있으면 데이터의 값으로 출력 된다

객체데이터의 속성의 이름을 바꿀때

1
2
3
4
5
6
7
8
9
10
11
12
const user = {
name: 'abc',
age: 85,
email: 'abc@gmail.com',
}

const { name: hello, age, email, address } = user
console.log(hello)
// abc 출력된다

console.log(name)
// name is not defined 에러가 출력된다
Read more »

JS-Object

  • prototype이 붙어있지 않은 메소드는 정적(static) 메소드
  • 정적메소드는 {}.메소드 처럼 직접적으로 사용할 수가 없다.

Object.assign()

  • const returnedTarget = Object.assign(target, source)
  • target이라는 객체에다 source라는 객체를 병합해서 반환한다
  • target의 중복되는 부분은 source부분으로 덮어씌워진다
1
2
3
4
5
6
7
8
9
10
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
1
2
console.log(target === returendTarget)
// true

같은 메모리 주소를 참조하고 있기때문에 true이다.

1
2
3
4
const a = { k : 123}
const b = { k : 123}
console.log(a === b)
// false

생긴건 같지만 서로 다른 메모리 주소를 참조하고 있기때문에 false이다

새로운 객체 데이터를 만들고 싶다면?

  • 출처(source) 객체는 여러개 작성할 수 있다.
  • 첫 번째 인수로 빈 객체리터럴을 작성한다.
    1
    2
    3
    4
    5
    6
    7
    const target = { a: 1, b: 2 };
    const source = { b: 4, c: 5 };

    const returnedTarget = Object.assign({},target, source);

    console.log(target === returnedTarget)
    // false
    새로운 객체를 반환했기 때문에 target과 returnedTarget은 다른 객체이다.

Object.keys()

  • 오브젝트의 key값이 Object.keys를 통해서 key값만 추출되어 새로운 배열데이터로 만들어진다

    Read more »