DAY06

yejichoi·2022년 11월 19일
0

CodeCamp

목록 보기
7/11
post-thumbnail

1. Algorithm Self Study

같은 숫자는 싫어
배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다.
i.e) arr = [1, 1, 3, 3, 0, 1, 1] => [1, 3, 0, 1] return

function solution(arr)
{
    var answer = [];
    for(let i =0; i < arr.length; i++){
        if( arr[i] !== arr[i + 1] ) { //같지 않을 경우, 새배열 반환
            answer.push( arr[i] )
        }
    }
    
    return answer;
}

핸드폰 번호 가리기
프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

// Reference Code ( for 반복문 )
function solution(phone_number) {
    let answer = '';

    for( let i = 0; i < phone_number.length; i++ ) {
        if( i < phone_number.length - 4 ) {
            answer += '*' // answer = answer + '*'
            
        } else {
						answer += phone_number[i]
            // answer = answer + phone_number[i]
        }
    }
    return answer;
}
//Reference Code ( padStart, slice )
function solution(phone_number) {
    let answer = ""

    answer = answer.padStart( phone_number.length - 4, "*" );
    answer += phone_number.slice( phone_number.length - 4 );
        
    return answer
}
const fullNumber = '2034399002125581';
const last4Digits = fullNumber.slice(-4);
const maskedNumber = last4Digits.padStart(fullNumber.length, '*');

console.log(maskedNumber);
// expected output: "************5581"

padStart(targetLength, padString)

2. Backend Class

Axios

브라우저, Node.js를 위한  HTTP 비동기 통신 라이브러리
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

.then

비동기 통신이 성공했을 경우, .then() 은 콜백을 인자로 받아 결과값을 처리할 수 있음

.catch

.catch() 를 통해 오류를 처리
error 객체에서는 오류에 대한 주요 정보를 확인할 수 있음


axios.get('/hello')
		 .catch(function (error) {
				if (error.response) {
					console.log(error.response.status);
					console.log(error.response.headers);
				}
}

Axios HTTP 요청 메서드 종류

axios.get(url[, config])

서버에서 데이터를 가져올 때 사용하는 메서드
두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간 (timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있음

axios.post(url[, data[, config]])

서버에 데이터를 새로 생성할 때 사용하는 메서드
두 번째 파라미터로 생성할 데이터를 넘김

axios.put(url[, data[, config]])

특정 데이터를 수정할 때 요청하는 메서드
put 은 새로운 리소스를 생성하거나, 이미 존재하는 데이터를 대체할 때 사용
post 와의 다른 점은 post 는 여러 번 호출할 경우, 새로운 데이터가 지속적으로 추가
반면, put 은 한 번 요청을 하거나 여러 번 지속적으로 요청해도 결과값이 동일 예를 들어, 유저의 이름을 ”Iron Man” 으로 수정하기 위해 axios.put 요청을 보냅니다. 이때, put 요청을 한 번 보내거나 여러 번 보내도 유저의 이름은 ”Iron Man” 으로 동일하게 수정됩니다.

axios.delete(url[, config])

특정 데이터나 값을 삭제할 때 요청하는 메서드

동기 : 현재 실행 중인 코드가 완료된 후 다음 코드를 실행
비동기 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행

=> 자바스크립트는 한 번에 하나의 코드만 실행(Single-Thread) 하지만 코드를 실행하고 해당 결과를 기다리지 않고 다음 코드를 실행(Non-Blocking)

Call back

  • 다른 함수의 인자로 이용되는 함수
  • 이벤트에 의해 호출되어지는 함수
    즉, 함수 안에서 쓰이는 다른 함수

Promise

async/await

비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실직적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise로 자동 전환하고 해당 내용이 resolve된 이후에야 다음으로 진행
=> await의 유무로 동기적 함수와 비동기적 함수로 구분 가능

async function getData(url){
  let data = (await axios.get(url)).data;
	return data;
  }

let url = 'https://koreanjson.com/posts/1';

async function dataArr(){
    let data = await getData(url);
    let result = [];
    for(let v of Object.values(data)){
        result.push(v);
    }
    console.log(result);
}

dataArr();

비동기방식의 함수는 데이터를 기다려주지 않고 다음 코드들이 실행되어 Promise { < pending > } 상태로 나타남

비동기적인 작업을 수행하기 위해 콜백함수를 익명함수로 전달하는 과정에서 생기는 콜백 지옥을 Promise, async/await등을 사용해서 방지 할 수 있음

환경변수 분리

3. HW

0개의 댓글