2022-05-15 WIL(로그인과 회원가입 , 메소드)

항해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

 

 

 

2022-05-15 02:30 형섭님과 함께한 새벽 공부.