음... 그래요

일단은 아직은 낯선 내용들이지만 차근차근 공부한 것들을 정리해보았습니다.

#1. 호이스팅, TDZ

Javascript 변수 키워드에는 var, let, const가 있다.

자바스크립트가 처음 등장 된 당시 var 제일 먼저 등장하였고,

var가 가지고 있는 문제가 어이가 없어서, 그 문제점을 보안하기 위해 2015년즈음에 let,const 라는 변수 키워드가 새로 등장하였다.

var는 한번 선언된 변수를 다시 선언할 수 있다.  - 다른 언어에서는 말도 안되는 일이다.

var name = 'bob'
var name = 'john'
console.log(name) // 'john'

var는 선언하기 전에 사용할 수 있다. -이게 무슨 일이야

console.log(name) //  undefined
var name = 'john'

이런게 가능한 이유가 바로  호이스팅(hoisting)이 일어나기 떄문이다. (hoist 뜻 : 감아올리다)

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

쉽게 말하면 코드가 실행되기 전에 자바스크립트는 선언에 대한 메모리 부터 할당을 한다.

덕분에 함수를 호추하는 코드를 함수 선언보다 앞서 배치할 수 있었던것.

위의 예시의 결과가 undefined가 발생한 이유는

선언은 호이스팅 되지만, 할당은 호이스팅 되지 않기 떄문이다.

다시 한번 요약하자면, 호이스팅이란 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것을 의미한다.

다음은 let, const의 호이스팅이다.

//let
console.log(name)
let name = 'bob' // ReferenceError
 
//const
console.log(name) // ReferenceError
const name='john'

var와는 달리 let과 const는 ReferenceError 를 보여준다.

let 과 const는 호이스팅되지 않는걸가?

아니다 . let과 const도 호이스팅이 된다.

에러가 나온 이유는 TDZ(Temporal Dead Zone) 때문이다

 var와는 다르게 위의 사진처럼  const와 let은 TDZ의 영향을 받는다.

할당을 하기 전에는 사용할 수 없게 하는 것이다. 

이는 코드를 예측가능하게 하고, 잠재적인 버그를 줄일 수 있다.

예시1)
let age = 30;
function showAge(){
  console.log(age);
}
showAge();

예시1은 문제가 발생하지 않는다.

예시2)
let age = 30;
function showAge(){
  console.log(age);
  let age = 20;
}
showAge();

예시2는 문제가 발생한다.

'let은 호이스팅이 안되는구나' 라고 착각할 수 있지만, 호이스팅은 스코프 단위로 일어나기 떄문이다.

스코프에 대해서는 조금 이따가 나온다.

함수 스코프 내부의 let age = 20; 이 호이스팅을 일으켰다.

만약 호이스팅이 되지 않았다면, 함수 밖에서 선언한 let age = 30 이 정상적으로 찍혀야 했다.

let age = 20; 은 TDZ 아래에 있기 떄문에 오류가 발생하는것.

#2. 변수의 생성과정

변수의 생성과정은
1. 선언 단계
2. 초기화 단계
3. 할당 단계
로 이루어진다.

var

1.선언 및 초기화 단계 (동시에 이루어짐)
2. 할당 단계

let
1. 선언 단계
2. 초기화 단계
3. 할당 단계

const
1. 선언 + 초기화 + 할당 단계 (3개가 동시에 이루어짐)

따라서 const만 선언과 동시에 할당까지 안해주면 오류가 발생한다.

아래에 예시를 보자

let name;
name = 'Mike';

var age;
age = 30;

const gender;
gender = 'male' 
//Uncaught SyntaxError: Missing initializer in const declaration

name과 age는 괜찮지만,

const 로 선언한 gender 부분에서 에러가 발생함.

이유는 선언을하면서 바로 할당을 안했기 때문이다.

#3. 스코프

위에서 호이스팅은 스코프 단위로 일어난다고 언급하였는데, 스코프는 무엇일까?

먼저 var, 와 let,const 로 나눠질 수 있다.

var: 함수 스코프

let,const : 블록 스코프 (함수, if문, for문, while문 등)

여기서 말하는 블록은 중괄호{} 를 의미함.

const age = 30;

if(age>19){
	var text = '성인';
}
console.log(txt); //'성인'

var는 if문 내부에서 선언된 var를 외부에서 접근이 가능하다.  이유는 var는 함수 스코프이기 떄문이다

const age = 30;

if(age>19){
	let text = '성인';
}
console.log(txt); // Uncaught ReferenceError: txt is not defined

이번에는 let으로 선언해보았는데, 

let은 블록 스코프 이기 때문에 블록 안에서만 let에 접근이 가능하며

이경우에는 오류가 난다.

#4 실행 컨텍스트(execution context)

실행 컨텍스트의 개념은 복잡하기에 일단은 부분적으로 공부한다음에 추후 더 공부할 예정이다.

실행 컨텍스트

-자바스크립트 엔진 내에서 함수가 실행되는 환경

함수라는 것은?

-변수, 매개변수, 내장함수, this 이 4가지로 이루어져 있는 것

실행 컨텍스트는 Creation phase(생성 단계)와 Execution phase(실행 단계) 로 나눠져서 만들어진다.

실행 컨텍스트 설명에 앞서 용어 설명부터.

Scope chain = execution context cahin

Lexical environment = lexical scope

-Environment record : 변수와 값을 의미

-Outer environment record : 위쪽 변수, 함수를 의미

var a = 'Hello';
first();

function frist() {
	var  b = 'Hi';
    second();
    
    function second() {   //second함수가 봤을때 first함수는 위쪽에, 즉 first 함수는 outer 스코프가 된다.
		var c = 'Hey';
 		console.log(a+b+c)
	}
}

실행컨텍스트에는 3종류가 있다.

Global execution context = Global Object (Go)

-this object

-window object

Function execution context = Activation Object(AO)

Eval execution context : 신경쓰지 않아도됨.

GO : 빌트인객체 (MATH,STRING 등)과 BOM, DOM , 전역변수

AO : 함수선언, 매개변수, 변수

실행 컨텍스트는  두 단계로 나누어짐

1.Creation phase(생성 단계)

GO,AO,this 형성

-Scopechain(outer scope참조: 변수쉐도잉 발생) 뒤에서 설명

-이 떄문에 호이스팅이 가능

-값이 들어가 있지 않는 초기값(var는 선언과 초기화 , let,const는 선언만)

이렇게 inner scope 에서 outer scope로 가면서 , '이 변수 대체 뭐야?'하는 과정이 scopechain이다.

2. Execution phase(실행 단계)

Go,AO,this 값이 할당

-This는 함수호출패턴 또는 lexical scope에 따라 값이 정해짐

실습은 https://ui.dev/javascript-visualizer 을 참고하여 진행해보자.

과제: 주석을 풀면 오류가 나는 이유

let b = 1;
function hi () {
    const a = 1;
    let b = 100;
    b++;
    console.log(a,b);
}

//console.log(a);
console.log(b);
hi();
console.log(b);

a는 지역변수이기 떄문입니다.

지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킵니다.

이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

추가로 함수의 매개변수 또한 함수 내에서 정의되는 지역 변수처럼 동작합니다.

a와는 반대로, 위 예시에서 b는 전역 변수입니다.

전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킵니다.

이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

아래에는 이와같은 문제를 해결하기 위해, 첫번쨰 줄과 같이 a를 전역 변수로 선언하였습니다.

let a;
let b = 1;
function hi () {
    const a = 1;
    let b = 100;
    b++;
    console.log(a,b);
}

console.log(a); 
console.log(b);
hi();
console.log(b);

#1. 원시형과 참조형

자바스크립트 데이터 타입은 크게 두가지인 원시형(Primitive Type)과 참조형(Reference Type)으로 분리됩니다.

기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가됩ㄴ디ㅏ.

참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며,

ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가되었습니다.

원시형과 참조형의 가장 큰 차이점은 기본형에는 바로 값을 그대로 할당한다는 것이고, 

참조형에는 값이 저장된 주소값을 할당(참조)한다는 것입니다.

이것을 다른 표현으로 원시형 타입은 깊은 복사(deep copy) , 참조형 타입은 얕은 복사(shallow copy)가 일어난다고 보면됩니다.

실제 메모리에 저장되는 자세한 방식은 아래 주소의 글 참고

https://webclub.tistory.com/638

#2. 불변 객체

불변 객체란 '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 것을 의미한다.

JS에서 불변 객체를 만드는 방법은 const 와 Object.freeze() 을 이용하는 것 이다.

먼저 각각만 사용하면 어떻게 되는지 알아보자.

*const를 사용한 불변 객체

const obj = {};

obj.name = 'marry';

console.log(obj);   // {name : marry}

const 로 선언된 obj 변수에는 객체의 속성은 변경가능하다.

아래 예시를 보자

const obj = { name : 'marry'} 

obj = {name : 'bob'} // Uncaught TypeError: Assignment to constant variable.

const 로 선언된 obj 변수에는 재할당이 불가능하다.

즉 , 재할당은 불가능하지만 객체의 속성은 변경이 가능하다.

재할당이 불가능 한 이유 : 변수와 객체 사이의 바인딩 자체가 변경이 되기 때문에 상수인 obj변수는 재할당이 불가능했던 것

객체의 속성이 변경가능 한 이유 : 실제 객체가 변경은 되지만 { name : 'bob' } 객체와 변수(obj)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능했던 것

*Object.freeze()를 사용한 불변 객체

let obj = {name : 'bob'}
Object.freeze(obj) //얼리기
obj.name = 'john'
console.log(obj) // {name : 'bob'}

콘솔창을 보면 객체의 속성 변경은 무시가 되었다.

let obj = {name : 'bob'}
Object.freeze(obj) //얼리기
obj = {age : 26}
console.log(obj) // {age : 26}

콘솔창을 보면 재할당은 가능하다

요약하자면 const를 써서 재할당 불가능하게 + Object.freeze() 써서 객체의 속성 변경을 불가능하게 하면 된다.

즉 const ,Object.freeze() 두개를 아래와 같이 같이 쓰면 된다.

const obj = {name : 'bob'}

Object.freeze(obj)

이렇게 되면 객체 obj 은 재할당도, 객체의 속성 변경도 불가능하게 된 불변 객체가 된 것이다.

그렇다면 우리는 불변 객체를 왜 만드는 것일까?

불변성을 지키는 것이 왜 중요한가요?
-코드의 가독성을 위해서 : 불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고 , 그말은 즉 오류를 발생시키기 쉽기 때문이다.

알고리즘 모의고사가 끝났다
공부한 범위내에서 변형한 수준이라 쉽게 풀었다.bb

알고리즘을 공부하면서 자바스크립트에 대한 공부도 같이 하라고 주제를 던져주셨는데,

주제에 대해서 공부한 것들을 정리해 보았다.

" JavaScript의 자료형과 JavaScript만의 특성은 무엇일까? "

#1 Javascript 자료형의 종류

JavaScript의 타입은 원시 값과 객체로 나눠진다.

-원시 값(Primitive type)  

1.Number : 따옴표 없이 표기한 숫자가 해당

2.String : 작은따옴표(') 혹은 큰따옴표(")로 묶어 나타낸 문자가 해당

3.boolean : 참(true)과 거짓(false)이 여기에 해당

4.Undefined : 변수가 정의되었으나 아무 값도 할당받지 않은 상태

5.Null : 변수가 정의되고 빈 값을 할당 받은 상태

*null은 의도적으로 쓰인다.

'어떤 값이 비어있음'을 의도적으로 표현할때는 undefined 대신 null을 쓴다.

-객체( Reference type​)

1.object(객체) 함수와 속성이 함께 포함된 유형

#2 느슨한 타입(loosely typed)의 동적(dynamic) 언어

-자바스크립트는 느슨한 타입(loosely typed) 혹은 동적(dynamic) 언어 이기떄문에, 타입을 명시할 필요가 없다.

타입은 자바스크립트 내부에서 알아서 파악되기 떄문이다.

-자바스크립트(느슨한 타입 혹은 동적 언어) 와 자바(강력한 타입 혹은 정적 언어)를 비교해보면

*javascriptlet a = 123  //typeof(a) === Numberlet b = 'bbb' //typeof(b) === String

*java(변수선언시 , 타입을 같이 명시해 줘야함)int a = 1String b = 'bbb'

자바스크립트의 이 특성이 편할 수 있다 생각하지만 형변환에 의한 느슨한 타입 체크 때문에 예상치 못한 오류가 발생할 수 있음

*형 변환 : 숫자타입에 문자열을 더하면 결과가 문자열이 되고 문자열에 숫자를 곱하면 숫자타입이 되는 특성이다.

console.log(1+1) //2
console.log(1+1+'1') //21
console.log('1'+'1') // 11

느슨한 타입(loosely typed) 혹은 동적(dynamic) 언어의 문제점을 일치연산자 사용을 이용하여 방지할 수 있다.

let a = 1   // 'Number'
let b = '1'  // 'String'

// ==(동등연산자 사용)
console.log(a == b) // true
//값만 비교한다

// ===(일치연산자 사용)
console.log( a === b ) //false
//값과 값의 종류(Data Type)까지 비교한다

요약 : 형변환에 의한 예상치 못한 오류를 피하기 위해, 일치연산자(===)를 사용하자.

항해99의 쉬는날은 매주 일요일이다.

배울게 많기에 매주 일요일에도 개인적인 공부와 WIL을 작성하면서 배운것들에 대한 회고의 시간을 가져보려 한다.

#1. 4일간의 미니 프로젝트를 진행하면서 배운점( JWT토큰 , API )

미니 프로젝트에서 나는 API 설계 , flask를 이용하여 로그인,회원가입 기능 구현을 담당하였다.
로그인,회원가입의 큰틀을 배운 내용의 범위에서만 정리해보았다.

이전다음

01

또한 앞으로 프로젝트를 할떄에는 다음과 같은 사항들을 준수하여 진행하자. 내 자신아.

-API 설계단계에 더 많은 투자(도식화 , 'DB에서 값 가져올떄 문자열로 오는거 int로 바꾸기' 표시등..)

-조각 기능 구현

참고자료

다음 프로젝트 시작 전 API 공부하기

http://meetup.toast.com/posts/92 

https://spoqa.github.io/2012/02/27/rest-introduction.html

#2. 알고리즘 문제를 풀면서 느낀점

알고리즘을 풀면서 느낀점은 if 문 for문 밖에 몰라 코드가 지저분해지고 길어지는 점이다.

코딩공부를 시작한지 얼마안된 초보자인 나에게는 당연한 결과다.

메소드를 '100% 외우는 것'이 아닌 , '1 ,2 번씩 경험해보고, 이런게 있었지!' 에 초점을 두고 공부방향을 잡았다

하나씩 배워보자

#3. 공부한 메소드들
if문, switch문,조건부 연산자(삼항 연산자), forEach, map, fill, sort, splice, split,reduce 

[ 따옴표가 문자열 중간에 들어 있을 때]
예시) '문자열 안에 작은따옴표(')가 있어요'
왼쪽에서 순서대로 따옴표에 번호를 1,2,3으로 매기면
사람이 생각하기에  작은따옴표를 1 ,3 번 으로 인식하기 쉽지만
JS엔진은 1 ,2 번으로 인식함.

해결법
작은따옴표=> 큰따옴표   or  큰따옴표 => 작은 따옴표로 감싸기
예시) "문자열 안에 작은따옴표(')가 있어요"

메소드 하나하나씩 공부하기에 앞서 정리
분기처리(3개):if , switch( break,default 로 조작) , 조건부 연산자(=삼항 연산자) 
반복문(3개):for, forEach , while

다음은 ※배열※에 관한 메소드들이다 : forEach, map, fill, reduce, sort, splice, split

[ 분기 처리를 담당하는 조건문 : if , switch , 조건부 연산자(삼항 연산자) ]
* switch 문

예시를 출력하면 어떤 값이 나올까 생각해보고 출력값 보기
예시)
let value = 'B'
   switch (value) {
      case 'A' :
         console.log('A')
      case 'B' :
         console.log('B')
      case 'C' :
         console.log('C')
	}
출력값 B
      C

조건에 맞는 케이스 이후의 코드들도 순서대로 실행되는 특이점이 있기에 , break 와 defalut 로 조작해주기.
수정된 예시)
let value = 'B'
   switch (value) {
      case 'A' :
         console.log('A')
            break;
      case 'B' :
         console.log('B')
            break;
      case 'C' :
         console.log('C')
            break;
	}
츨력값 B

defalut 예시)
let value = 'D'
   switch (value) {
      case 'A' :
         console.log('A')
            break;
        default:
            console.log('B등급 이하입니다.')
            break;
    }

출력값 'B등급 이하입니다.'


조건부 연산자(삼항 연산자)
구조 :   조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식
ex ) 5 > 1 ? '참입니다' : '거짓입니다.'
출력값 '참입니다.'

[다양한 배열 메소드]

* forEach (상향된 for반복문 이라 생각하면 편함)
구조 : 배열.forEach( (element , index) => { } )  //각각의 요소(왼쪽)에 오른쪽에 정의된 함수를 적용시킴
숫자야구 예시)
    const answer = [3, 1, 4, 6]
        const value = '3124'
        let strike = 0
        let ball = 0
            for (let i = 0; i < answer.length; i++) {
                const index = value.indexOf(answer[i]); // indexOf(answer[i])의 리턴값은 발견하면 그 자리의 인덱스를
                if (index > -1) {                       //발견 못하면 -1 을 반환한다.
                    if (index === i) {
                        strike += 1;
                    } else {
                        ball += 1;
                    }
                }
            }
결과값 : 변수 strike값은 2를, 변수 ball값은 1을 갖는다.

위의 코드를 forEach 메소드를 이용하여 짤 수 있다.
const answer = [3, 1, 4, 6]
        const value = '3124'
        let strike = 0
        let ball = 0
        answer.forEach((element, i) => {    //각각의 요소(왼쪽)에 오른쪽에 화살표 함수로 정의된 함수를 실행시킴
            const index = value.indexOf(element);       // answer[i] 에서 element로 바뀜
            if (index > -1) {
                if (index === i) {
                    strike += 1;
                } else {
                    ball += 1;
                }
            }
        })




*map , fill
사용 예시: Array(9).fill(0).map( (element , i )=> { } )  map은 forEach 역할을 하면서,return에 적혀져
                                                        있는 함수대로 실행된새로운 배열을 만든다
 참고- Array()는 빈배열 만듬 / fill() 으로 해도됨 이떈 0대신 undefined 가 채워짐
forEach와 map 모두 함수가 들어가고 매개변수로는 element 와 i가 들어간다.
예시) 1~45까지 숫자배열만들기

Array(45).fill(0).map((elemnet , i)=> {
    return 1 + i
})
화살표 함수의 특성처럼 중괄호와 return 이 바로 나오면 생략 가능

Array(45).fill(0).map( (elemnet , i)=> 1 + i )
생략하면 이렇게 됨




*slice(자르기) 와 splice(뜻이 접착인가요?)  ※혼동주의※
1.slice
slice 는 잘려진 덩어리가 반환값으로 나옴
구조 : 배열.slice(시작인덱스(포함) , 끝인덱스(미포함))
특징 : map처럼 원본 배열은 안바뀌고 새로운 배열이 생기는 개념   <= 이런거 따로 외워두는게 좋음

let array = [3,2,8,9,5,3,6,4] 일떄
array.slice(2 , -1 ) //하면 뒤에서 첫번쨰 앞까지 자름
array.slice(4) 하면 [4]부터 끝까지 자름
array.slice(-5 , -1 ) 같이 뒤에서 부터 세는것도 가능
재밌는 점은 다음 특성이다.
array.slice() 는 자기 자신 복제됨 (언제,어떻게 이 특성을 쓰는지는 *sort에서 설명)

2.splice
splice는 원본 배열 바뀜
splice는 (시작인덱스 , 몇개 자를지)  
slice 는 두번쨰 인수로 인덱스를,  splice는 두번째 인수로 개수를 받는 부분에서 다르다.





*sort
array = [3,2,9,7,5,8,6,4,1] 일때
 array.sort( (a,b) => a - b ) 하면 원래의 array 배열이 바뀜 => 따라서 불편
이를 해결하고자 array 대신에  array.slice()를 sort하면 원본 배열은 건들지 않고 새로운 반환값 얻을 수 있음
즉 , sort 처럼 원본을 바꾸는 메소드가 있다면, slice() 붙여 해결하자.
일단은 a - b 하면 오름차순  , b-a 하면 내림차순으로 숫자정렬된다는 것 정도만 알아두기




*reduce (배열안의 여러개의 값을 하나의 값으로 만들어줘서 reduce 라는 이름을 갖음)
-a는 누적값 / c는 배열안 계산이 적용 될 값 / ,옆에 숫자는 초기값자리
-화살표 함수 문법과 동일하게 중괄호+리턴 생략가능

-tip. 아래와 같이 c열 아래에 배열의 값들을 적어두고, a열을 하나씩 계산해서 채워나간다
[1,2,3,4].reduce( ( a , c )=>( a + c ) , 0 )
a: ,  c:1
a: ,  c:2
a: ,  c:3
a: ,  c:4

예시1) 더하기
[1,2,3,4].reduce( ( a , c )=>( a + c ) , 0 )   // ()=>() 는 계산하는 함수  , 0자리는 초기값자리
a: 0 , c:1  //초기값0이 처음 누적값이 된다
a: 1 , c:2
a: 3 , c:3
a: 6 , c:4
return 값으로 10이 나온다

예시2) 곱하기
[1,2,3,4].reduce( ( a , c)=>( a * c ) , 1 )
a:1 , c: 1
a:1 , c: 2
a:2 , c: 3
a:6 , c: 4
return 값으로 24나옴

정리하자면 예시 1처럼 배열 값들의 합을 reduce메소드로 구해놓고  / 총합을 [1.2.3.4].length)로 나눠
평균 구하는것 처럼 응용해서 쓸 수 있다.

심화 학습
reduce로 배열의 매서드를 거의다 구현가능
☆☆배열을 객체 리터럴로 바꿀거 ☆☆
['철수','영희','현영','한솔'].reduce( ( a , c , i )=> { a[i] = c; return a }, {} )   //세번쨰 자리에는 i로 인덱스 자리

// 중괄호랑 리턴 바로 안만나 생략 불가능 (
a:{}               , c:철수   i:0 // reduce메소드 계산할때는 항상 c값을 먼저 적어두고 어떻게 계산되는지 생각하자
a:{0:'철수'}        , c:영희 , i:1
a:{0:'철수',1:'영희'}, c:현영 , i:2
a:{2:'현영'}        , c:한솔 , i:3

리턴값 {0: '철수', 1: '영희', 2: '현영', 3: '한솔'}

오늘의 메소드 공부 끝!!

지금의 시기가 내 인생중 가장 무언가에 몰두하는 시기가 되었다.

다음주도 7기 화이팅

참고 자료: 조현영님의 ES2021

오늘은 9번부터 16번까지 총 8개의 문제를 풀었다.

특히 생각이 나는 문제는 2016년의 월,일을 입력하면 요일이 나오는 난이도 중하 짜리 문제였다.

new Date(날짜문자열).getDay  메소드를 이용하여 풀기도 

심심하고 배운것들을 응용하고자 if문과 딕셔너리를 이용하여 풀어보기도 했다.

그리고 팀원들끼리 각자 맡은 문제를 화면공유하는 상태에서 다 지우고 다시 풀면서 설명하는 시간을 가졌는데

팀원분들의 실력이 쑥쑥 느시는것 같아 기분이 좋았고 동기부여도 되었다.

또한 1일 1로그 100일완성 IT지식책을 항해99로 부터 받아서 자기전에 조금씩 읽는 습관을 들이려 한다.

오늘도 수고했습니다! 

오늘부터 알고리즘 주차가 시작해서 난생 처음으로 알고리즘을 풀어보았다.

알고리즘 문제라해서 너무 걱정했는데 난이도 하하, 하 까지는 반복문,조건문으로만 쉽게 풀렸고,

중하 난이도부터 한 문제에 1시간넘게 붙들고 있어야 했으며 , 아예 못푸는 문제도 있었다.

문제를 풀고 다양한 풀이들도 보았는데 

등차수열일떄 반복문을 이용하지 않고도 총합을  n(n+1)/2 로 구하는것을 보고 이마를 탁 쳤다.

못푸는 문제와 전체적으로 보니 reduce,map 같은 강력한 메소드를 사용하여

8줄 되는 것을 1줄로 바꾸는 거 보니 조금의 현타가 왔다.

그래서 오늘은 reduce 메소드를 내것으로 만드는 시간을 가졌다.

*reduce (배열안의 여러개의 값을 하나의 값으로 만들어줘서 reduce 라는 이름을 갖음)
-a는 누적값 / c는 배열안 계산이 적용 될 값 / ,옆에 숫자는 초기값자리
-화살표 함수 문법과 동일하게 중괄호+리턴 생략가능

-tip. 아래와 같이 c열 아래에 배열의 값들을 적어두고, a열을 하나씩 계산해서 채워나간다
[1,2,3,4].reduce( ( a , c )=>( a + c ) , 0 )
a: ,  c:1
a: ,  c:2
a: ,  c:3
a: ,  c:4

예시1) 더하기
[1,2,3,4].reduce( ( a , c )=>( a + c ) , 0 )   // ()=>() 는 계산하는 함수  , 0자리는 초기값자리
a: 0 , c:1  //초기값0이 처음 누적값이 된다
a: 1 , c:2
a: 3 , c:3
a: 6 , c:4
return 값으로 10이 나온다

예시2) 곱하기
[1,2,3,4].reduce( ( a , c)=>( a * c ) , 1 )
a:1 , c: 1
a:1 , c: 2
a:2 , c: 3
a:6 , c: 4
return 값으로 24나옴

정리하자면 예시 1처럼 배열 값들의 합을 reduce메소드로 구해놓고  / 총합을 [1.2.3.4].length)로 나눠
평균 구하는것 처럼 응용해서 쓸 수 있다.

심화 학습
reduce로 배열의 매서드를 거의다 구현가능
☆☆배열을 객체 리터럴로 바꿀거 ☆☆
['철수','영희','현영','한솔'].reduce( ( a , c , i )=> { a[i] = c; return a }, {} )   //세번쨰 자리에는 i로 인덱스 자리

// 중괄호랑 리턴 바로 안만나 생략 불가능 (
a:{}               , c:철수   i:0 // reduce메소드 계산할때는 항상 c값을 먼저 적어두고 어떻게 계산되는지 생각하자
a:{0:'철수'}        , c:영희 , i:1
a:{0:'철수',1:'영희'}, c:현영 , i:2
a:{2:'현영'}        , c:한솔 , i:3

리턴값 {0: '철수', 1: '영희', 2: '현영', 3: '한솔'}

차근차근 하나씩 내것으로 만들어보자.

화이팅

참고 자료 : 조현영님의 es2021

#1노력의 과정들

이전다음

012

4일간의 미니프로젝트는 오늘 막을 내렸다.

밥먹고 자는시간 외에는 프로젝트 진행에만 몰두하여 샤워마저 제대로 하지 못하였다.

 프로그래밍 경험이 거의 전무한 상태인 4명의 조였기 떄문에, 어설프고 문제도 많았다.

특히 만들어진 코드를 여기저기서 가져다와 쓰는 과정에서 충돌이 많이 일어났다.

겪은 문제점

-로그인창의 작동오류 ----> 해결 실패

-모달창과 로그아웃버튼의 동작을위한  jquery import 끼리의 충돌 (둘중에 하나만 실행해야 했었음)  --->  마이페이지를 하나 만들어 로그아웃을 마이페이지 있는곳에 배치(시간상 구현 포기)

-미흡한 협업툴 사용(소스트리) ----> 파일이 날라가고, 소스트리가 오류가 나고 난리 부르스였지만 다들 긍정마인드로 이것저것 시도하여 프로젝트가 끝날 무렵 ,  협업툴 사용이 손에 익었다. bb

항해99 매니저님이 말씀하신것처럼 미니프로젝트의 목표인 '완성 에 의의를 두기위해,

우리가 처음에 구상한 웹사이트 구현은 시간 관계상 포기하고  필수 기능만 구현하고 배포를 하였다

느렸지만 포기하지 않고 다같이 끝까지 완주해준 팀원들 덕분에

하루종일 컴퓨터 앞에 앉아 있었지만 힘들지가 않았다...☆
9조님들 수고하셨습니다~

긴장반 설렘반으로 대망의 항해99 1일차를 맞이했다.

1일차라고 여유... 그런건 없었다

미리 9조로 배정받았고, 1일차에는 팀원들과 미니 프로젝트를 구상했다.

우리가 정한 건 항해99 7기 교육생들을 타겟으로한 기록 일지 홈페이지이였고, 다들 제대로 된 프로젝트가 이번이 처음이여서 , 많은 부분에서 실수를 했지만, 다같이서 하나하나씩 고쳐가며 즐겁게 프로젝트에 임하였다.

항상 무언가를 배울 떄 '왜 필요하고, 어떻게 응용해야 할 지'를 인지하라는 튜터님의 말씀또한 명심하며 부트캠프에 임하려 한다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

+야심한 밤에 공부를 하다 게더에 움직임이 보여 보니

바로 옆에 계시던 8조분들이 정신줄놓고 춤추시고 계시길래

어떻게 하는지 물어보면서 8조 분들과도 친해졌다.

또하나를 배웠다. '게더타운에서 춤추기는 z'