작은 시작점

하루에 5문제씩 매일 풀고 기록하기

새해니까 꾸준히 해보도록 해야지 작심삼일 제발 노노 ~~

문제가 어려운 건 아닌데 헷갈리고 바로 바로 해결방법이 생각나지 않는다 ..

그래도 꾸준히하면 늘겠지? 알고리즘 실력은 진짜 응애인 것 같다. 응애~

Day3 연산

• 문자열 섞기
• 문자 리스트를 문자열로 변환하기
• 문자열 곱하기
• 더 크게 합치기
• 두 수의 연산값 비교하기

문자열 섞기

문제 설명

길이가 같은 두 문자열 str1과 str2가 주어집니다.
두 문자열의 각 문자가 앞에서부터 서로 번갈아가면서 한 번씩 등장하는 문자열을 만들어 return 하는 solution 함수를 완성해 주세요.

def solution(str1, str2):
    answer = ''
    
    for i in range(len(str1)):
        answer += (str1[i] + str2[i])
    
    return answer

반복문으로 인덱스를 활용해 문자를 하나씩 가져오고 더하기 연산자로 answer 변수에 반복해서 담는다.

이 문제는 다행히?도 내가 푼 방식으로 사람들이 많이 풀었다.

문자 리스트를 문자열로 변환하기

문제 설명

문자들이 담겨있는 배열 arr가 주어집니다. arr의 원소들을 순서대로 이어 붙인 문자열을 return 하는 solution함수를 작성해 주세요.

def solution(arr):
    answer = ''.join(arr)
    
    return answer

join 함수를 이용해서 너무 쉽게 풀 수 있었던 .. 더 짧게 쓰는 사람들은

def solution(arr):
    return ''.join(arr)

이렇게 풀어버린 .. ㄴㅇㄱ

문자열 곱하기

문제 설명

문자열 my_string과 정수 k가 주어질 때, my_string을 k번 반복한 문자열을 return 하는 solution 함수를 작성해 주세요.

def solution(my_string, k):
    answer = ''
    
    for i in range(k):
        answer += my_string
    
    return answer

내가 푼 풀이

def solution(my_string, k):
    return my_string*k

단순하게 생각하면 편하네요

더 크게 합치기

문제 설명

연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다.12 ⊕ 3 = 1233 ⊕ 12 = 312양의 정수 a와 b가 주어졌을 때, a ⊕ b와 b ⊕ a 중 더 큰 값을 return 하는 solution 함수를 완성해 주세요.단, a ⊕ b와 b ⊕ a가 같다면 a ⊕ b를 return 합니다.

def solution(a, b):
    answer = '' 
    ab = str(a)+str(b)
    ba = str(b)+str(a)

    if (ab > ba or ab==ba):
        answer = ab
    else:
        answer = ba

    return int(answer)

저는 이렇게 길게 짰는데요 ...

def solution(a, b):
	return int(max(f"{a}{b}", f"{b}{a}"))

포맷팅, max함수 이용해서 한 줄로 ..

두 수의 연산값 비교하기

문제 설명

연산 ⊕는 두 정수에 대한 연산으로 두 정수를 붙여서 쓴 값을 반환합니다. 예를 들면 다음과 같습니다.12 ⊕ 3 = 1233 ⊕ 12 = 312양의 정수 a와 b가 주어졌을 때, a ⊕ b와 2 * a * b 중 더 큰 값을 return하는 solution 함수를 완성해 주세요.단, a ⊕ b와 2 * a * b가 같으면 a ⊕ b를 return 합니다.

def solution(a, b):
    return max(int(str(a)+str(b)), 2*a*b)

방금 문제를 응용해서 풀어서 쉽게 성공

'주문하기' 페이지에서 사용자가 주문정보를 모두 입력하고 '주문하기'를 누르면! 서버로 주문자의 정보가 넘어간다.

이후 나오는 페이지는 '주문완료' 페이지'에는 주문자정보 + 주문번호, 결제만료일 등의 추가 정보가 필요하다.

서버에서 받은 데이터들을 완료페이지에 뿌려주어야하는 것이다.

그냥 뿌려주는 것이 아니라 받은 데이터를 다음페이지로 가지고 가서 뿌려주어야했다. 

useNavigate, useLocation를 활용해서 데이터를 전달했다. 그리고 생각보다 간단했다.. 

1. POST 메서드를 통해 비동기 방식으로 서버에 데이터 전달

먼저 주문자가 입력한 정보들을 서버에 전송해야 한다.

Axios를 사용하여 비동기적 방식으로 서버에 POST 요청을 보내고, 응답을 기다린다.

/orders/ 엔드포인트로 formData를 전송하고, 서버의 응답에 따라 다른 처리를 하도록 한다.

서버의 응답이 존재한다면, 응답 데이터는 responseData에 저장되고,

navigate함수를 통해 /orderSuccess 페이지로 이동한다.

아래 코드는 Axios를 사용하여 HTTP 요청을 생성하는 함수를 정의한 것이다.

axios.create() 메서드를 사용하여 Axios 인스턴스를 생성하고, 이를 통해 기본 URL과 헤더를 설정한다.

1. baseURL: 'https://www.petinuniverse.com/',: Axios 인스턴스의 기본 URL을 설정한다. 이 기본 URL은 나중에 이 인스턴스를 사용하여 보낼 모든 요청의 기본 주소가 되는 것이다.
2. headers: { 'Content-Type': 'application/json', }: Axios 인스턴스의 기본 헤더를 설정합니다. 여기서는 요청의 컨텐츠 타입을 JSON으로 설정한다.

이렇게 설정된 Axios 인스턴스는 APIClient 함수를 호출함으로써 반환된다.

APIClient 함수를 한번 정의해두면 기본 URL 및 헤더를 가진 일관된 설정을 유지하면서 여러 요청을 쉽게 수행할 수 있어 간편하다.

2. useNavigate 훅을 사용해 응답 데이터와 함께  페이지 이동

위의 코드에서 서버로 보낸 응답이 존재할 때, 응답데이터를 responseData에 담는 것을 보았다.

responseData에는 주문완료 페이지에 뿌려줄 데이터들이 담겨있다. 이 변수를 가지고 다음페이지에 넘어가야한다.

useNavigate는 React Router에서 제공하는 훅으로,
함수형 컴포넌트 내에서 프로그래밍 방식으로 다른 경로로 이동할 수 있게 해주는 역할을 합니다.

사용법은 간단하다.

1. navigate 함수를 사용하기 전 useNavigate 훅을 사용하여 navigate 함수를 얻어온다.

2. navigate 함수 사용

• 첫 번째 인자 ('/orderSuccess'): 이동하고자 하는 경로를 나타낸다. 페이지가 /orderSuccess로 이동하게 된다.
• 두 번째 인자 ({ state: { responseData } }): 옵션 객체로, 이동할 때 함께 전달하고 싶은 데이터를 설정한다. 대표적으로 state라는 키를 사용한다.

이렇게 설정하면 /orderSuccess로 이동할 때 { responseData }라는 데이터가 함께 전달되며,

이 데이터는 이동한 페이지에서 location.state를 통해 접근할 수 있게 된다.

3. 이동한 페이지에서 useLocation으로 데이터에 접근하기

자 이제 서버의 응답도 받았고, 응답데이터와 함께 페이지 이동까지 완료했다.

이제 이동된 페이지인 orderSuccess에 응답데이터를 뿌려주어 주문완료 페이지를 완성하면 된다.

useLocation은 React Router 라이브러리에서 제공하는 훅으로
현재 애플리케이션의 경로(location) 정보를 가져올 때 사용된다.

이 훅을 사용하면 현재 URL과 그와 관련된 정보에 접근할 수 있습니다.

• location.pathname: 현재 경로에 대한 문자열을 반환
• location.search: 현재 쿼리 파라미터에 대한 문자열을 반환
• location.state: navigate 함수를 통해 전달된 상태(state)에 대한 정보가 담겨 있다.

우리의 위의 3개 중 location.state를 활용해 navigate함수를 통해 전달된 상태인 responseData를 얻으면 된다!

1. useNavigate와 마찬가지로 useLocation 훅을 사용하여 현재 경로의 정보를 가져온다.

2.  그 정보 중에서 state 속성을 사용하여 데이터를 추출

Optional Chaining (?.)을 사용하여 location.state가 정의되어 있을 때에만 responseData를 추출하고, 그렇지 않으면 빈 객체로 설정한다. 

3. 추출한 데이터 화면에 렌더링하기

위와 같이 페이지에서 전달받은 responseData의 속성들을 사용하여 사용자에게 필요한 정보를 표시하는데 활용하면, 끝!

PIU 창업동아리 캠페인 플젝으로 웹사이트를 만들고 있다

굿즈 주문하기 > 주문완료 페이지로 넘어가는 중에 에러가 ~~~

AxiosError 400 Bad Request라고 나왔다

이 오류는 클라이언트 측에서 보낸 요청이 서버에서 처리할 수 없거나 잘못된 경우 발생한다고 한다

백엔드 api 정의서와 내가 보낸 값들을 비교해봤다. 역시나 잘못된 부분이 ㅎㅎ

내가 보내는 값들이다.

잘못된 부분

1. agree type 불일치

agree 값이 bool 값이어야 하는데 나는 문자열로 'agree' / 'disagree'를 보내고 있었다. 

이 부분은 백엔드랑 소통하기 전에 임의로 처리해둔 거였는데 수정한다는 것을 잊고 있었던. . 나는 바보~

2. address 객체의 필드 불일치

address 객체에 담긴 필드가 3개여야 하는데 4개가 보내지고 있었다. 콘솔로 찍어보니 4개가 짜잔 ^^..

사실 콘솔로만 이것저것 찍었을 때는 왜 에러가 나는지 잘 몰랐는데 postman을 사용해보니 어디가 잘못된 부분인지 확실하게 알 수 있었다.

이렇게 필드가 3개일 때 status 201로 올바른 요청과 응답이 돌아오는 것을 볼 수 있다.

하지만 이렇게 address 객체 필드가 4개일 때 400 Bad Request가 뜨는 것을 볼 수가 있었다.

요청을 보내는 값들 하나하나 신중하게 확인해야 한다는 것을.. 그리고 백엔드와의 소통이 중요하다는 것을 ..

매번 느끼지만 또 또 느낄 수 있게 에러가 뿅하고 나타나주었다 따봉에러야 고마워 ~

Axios에러를 개발하면서 자주 봤는데 기록하지 않으니 그때 왜그랬더라.. 하며 같은 실수를 반복하는 것 같다

기록이 중요하다는 걸 새삼 느끼고,, 귀찮아도 자주 기록하려고 노력해야겠다