문제해결8 [프로젝트 코드 다시 뜯어보기] axios 인스턴스 까보기(class와 promise 문법을 중심으로) 1. Axios의 클래스와 인스턴스 - axios는 javascript의 클래스를 사용하여 구현되어있다. - axios.get / post 등 모든 메서드는 axios.create()를 통해 생성된 "인스턴스"이다. 2. Axios create의 기본구조 // 기본문법 axios.create([config]) const myAxios = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); // 이제 내가 미리 설정한 myAxios라는 커스텀 인스턴스에 내가 원하는 메서드를 붙여서 HTTP 통신 동작을 수행할 수 있다. const myAxios.post (.. 2023. 7. 2. [리팩토링] 이미지 업로드 : json-data => form-data 문제발생 - 리팩토링 과정에서 RDS에 이미지를 직접 저장하는 로직이 아닌 S3에 저장하여 DB에는 url만 요청하는 방식으로 이미지 업로드 기능을 변경 - 이 과정에서 API 명세서의 data 키에 해당하는 파일 포맷이 변경됨 - 이에 따라 기존의 JSON-data 형식을 Form-data 형식으로 변경 리팩토링 전/후 코드 // 리팩토링 이전 코드 export interface MemberProfileUpdateImageDto { profileImage: string; } // TODO : Member의 프로필 사진의 수정 요청을 보내는 코드 export const updateMemberProfileImage = async ( data: MemberProfileUpdateImageDto ) => { .. 2023. 7. 2. [리팩토링] url 난독화 (utf-8 => base64 encode) 필요성 - utf-8 형식 그대로 쿼리를 요청할 경우, 클라이언트에서 쿼리를 탈취당할 경우 해당 쿼리를 임의로 조작하여 민감정보를 탈취할 위험성이 있음 (ex. /user/id={...} => ...부분을 조작!) - 따라서 쿼리 난독화는 쿼리 탈취시 임의로 조작하여 여러 유저정보를 탈취하는 행위를 방지하는 첫 걸음! # 난독화 이전 "{url}/user/id=1" # 난독화 이후 "L3VzZXIvaWQ9MQo=" 리팩토링 코드 import { Base64 } from "js-base64"; export async function getStudyGroupInfo(id: number, isLoggedIn: boolean) { if (!isLoggedIn) throw new Error("로그인 상태를 확인하.. 2023. 7. 1. 프로젝트 리팩토링 관련 의견 공유 공간 이 공간은 아래의 프로젝트 리팩토링 코드와 진행 과정을 보시고, 자유롭게 의견을 주시는 공간입니다. 과정 중에 궁금하신 점, 혹은 개선하면 좋을만한 방안을 Discussion에 남겨주신다면, 학습하고 개선하는데 큰 도움이 될 것 같습니다! https://github.com/Whaleinmilktea/main-project16-refector_haseong GitHub - Whaleinmilktea/main-project16-refector_haseong: 코드스테이츠 메인프로젝트 리팩토링 기록입니다. 코드스테이츠 메인프로젝트 리팩토링 기록입니다. Contribute to Whaleinmilktea/main-project16-refector_haseong development by creating an a.. 2023. 6. 26. [회고] 메인 프로젝트 / 기술 🎧 글 진행 순서 1. 프로젝트 결과물 & 구현내용 2. API 명세서 제공 이전의 FE 구현 : MSW 3. CRUD 구현 4. 회원 권한에 따른 예외처리 구현 5. apis 기능 분리 : 서버 통신 및 데이터 맵핑을 담당하는 코드의 분리 6. AWS S3 & CloudFront & Route53을 활용한 정적 웹 배포 다사다난했던 프로젝트가 마무리되었다. 이번 프로젝트에서는 배운게 너무 많아서 정리하기도 쉽지 않고, 특별히 팀원분들과 멘토분들의 도움을 많이 받아서 감사한 시간이었다. 그래서, 프로젝트의 회고를 협업회고 / 기술회고로 나눠서 정리해보고자 한다. 기술회고에 대해 짧은 요약을 하자면, "세상은 넓고, 방법은 많고, 라이브러리는 더 많다.. 근데, JS/네트워크/개발이론을 모르면 내 이야기.. 2023. 5. 27. 서버로부터 받은 데이터는 함부로 훼손하지 않는다. // 기존 코드 import styled from "styled-components"; import { useQuery, useMutation } from "@tanstack/react-query"; // 서버의 상태를 관리하기 위한 react-query 라이브러리 사용 import { getMemberInfo, MemberInfoResponseDto } from "../apis/MemberApi"; //apis로부터 서버 요청을 수행하는 기능 호출 import { useState } from "react"; const ProfileInfoSet = () => { const [memberInfo, setMemberInfo] = useState(null); const [isEdit, setIsEdit] =.. 2023. 5. 15. [Trouble Shooting] 경로설정..? 이스케이프 시퀀스..? ESLint 문제해결 : https://whaleinmilktea.tistory.com/82 [Trouble Shooting] Prettier에서 package.json을 자꾸 발목잡을 때 해결방법 + 어찌 해결했더니,,, 또 다른 사실, 본인은 ESlint와 Prettier를 부트캠프에서 "설치하면 좋은 툴" + "코드 일관성 및 유지보수성 확보"라는 소개를 바탕으로 설치했기 때문에 이전 글과 같이 깊이 알지는 못했다. 기본적인 설정이 whaleinmilktea.tistory.com 보통 위와 같은 에러는 파일의 경로가 떴을 경우 많이 확인할 수 있다. 따라서, 터미널에 src/tree를 입력하고 본인이 파일구조를 잘못 파악하고 있는지부터 확인했다. (육안으로 보이는 파일구조에는 아무런 문제가 없어보였.. 2023. 4. 15. 자바스크립트 디버깅(debugging) 해보기(feat. vsc & 개발자도구) 1. Microsoft에서 제시하고 있는 디버깅의 개념 & 코린이에게의 디버깅 링크 : https://learn.microsoft.com/ko-kr/visualstudio/debugger/what-is-debugging?view=vs-2022 디버깅이란 무엇인가요? - Visual Studio (Windows) 앱을 디버그한다는 것의 의미를 알아봅니다. learn.microsoft.com 마이크로소프트에서는 디버깅의 개념을 코드에서 버그를 제거하는 일로 정의한다. 1-2# 하지만 나처럼 개발공부를 시작한지 1달도 채 안된 코린이 입장에서 디버깅이란, 조건문, 반복문 등의 개념을 학습하는 과정에서 '내가 알지 못하는' 자바스크립트가 코드를 읽어가며 산출하는 결과값들을 차례로 살펴보고 코드를 점검하기 위한 .. 2023. 1. 4. 이전 1 다음
