티스토리

ehddkDEV

검색하기

블로그 홈

ehddkDEV

tofu15.tistory.com/m

ehddkDEV 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[JS] 배열 생성하는 방법 1. new Arrayex> new Array('a') 이때 new 없이 Array('a')만 선언해도 똑같이 배열을 생성한다. 2. Array.from()Array.from()은 이터러블객체(반복 가능한 객체)를 인수로 받아 배열로 변환한다.ex> Array.from('food') // [ 'f','o','o','d' ] Array.from([100,200,300] , a=>a+a); // [200, 400 , 600]또한 특정길이의 배열을 만들어서 연속 된 수를 넣을 수도 있다고 한다.Array.from ({length: 길이}, Func(_, i )} -> a 길이의 유사배열객체를 생성한다. ex> Array.from({length: 4}, ()=>[]); // 4 길이만큼.. 공감수 0 댓글수 0 2025. 4. 22.
[react] useWatch vs watch react-hook-form 을 이용해 폼 작성을 구현하는 도중에 이미 기초값이 있는 폼 필드에서 새로운 값으로수정을 하려면 해당 필드를 찾아야 했다. 그래서 처음엔 watch 속성을 사용했다. const counselTime = watch('counselTime') ( field.onChange(e.target.value)} />)} /> watch는 폼의 입력 값이 변경될 때마다 특정 값을 반환한다. 예를 들어 5개의 input이 있을때 하나의 input 값만 바뀌어도 5개 모두 다 리렌더링이 되버려서 성능 최적화에 적합하지 않는다는 것! 공식 문서에도 이렇게 나와있는 걸 볼 수 있다.' watch는 호출될 때 어플리케이션 또는 Form을 전부 리렌더링하므로 성능 이슈가 발생한다면 .. 공감수 0 댓글수 0 2025. 3. 4.
[react] key를 이용해 상태 초기화 이 textinput에 값을 입력하고 추가 버튼을 누르면 해당 필드 값이 초기화가 되어야하는데!!자꾸 안되는거다... 이전 값이 남아있다.. 그래서 어디에서 막힌건지 콘솔값을 찍어봤을때 입력하고 추가버튼을 누르면 ""로 초기화가 잘되고 있는 것 같은데 필드에는 여전히 남아있는 이슈..,, const handleKeywords = () => { if (keyword.trim() === "") { // console.log("키워드가 비어 있음"); return; } if (!keywords.includes(keyword)) { const newKeywords = [...keywords, keyword]; setKeywords(newKeywords); .. 공감수 0 댓글수 0 2025. 3. 3.
[react] "Cannot find module './*.style.scss'" className을 지정한다음 css를 설정하려고 할때import styles from "./TodoItem.style.scss";import cn from "classnames/bind";이 부분에서 "Cannot find module './TodoItem.style.scss'" 에러가 난 적이 있다. 분명 맞는 경로, 파일명도 잘 맞췄다. 근데 모듈을 찾을 수가 없다? 알고보니 타입스크립트는 .scss 같은 CSS 파일을 JavaScript 모듈로 처리하지 않기 때문에 정의 파일 (.d.ts)을 만들어줘야 한다는 것이다. 그래야 타입스크립트가 .scss 파일을 객체 형태의 모듈로 인식한다. // src/types/style.d.tsdeclare module "*.scss" { const conten.. 공감수 1 댓글수 1 2025. 1. 30.
[백엔드]error 처리 기본적인 crud를 다 구현하고 Postman으로 테스트할때 만약 에러가 발생했을 시 어떠한 이유때문에 발생한건지예외처리는 필수다. 안그러면 하나하나 로그를 다 찍으면서 계속 서치해야하기 때문이다. 나는 서비스 레이어에서 HttpException라는 커스텀 에러 클래스를 사용해 에러를 던져줬다.async getUser(id: string): Promise { const user = await this._userRepository.findById(id); if (!user) throw new HttpException(404, "해당 유저가 없습니다."); const dtoUser = await new GetUserResponseDTO(user); return dtoUse.. 공감수 0 댓글수 0 2025. 1. 10.
[백엔드] next(Error)란? 백엔드를 하다보면 예외처리를 필수로 해줘야 한다.주로 try & catch문으로 성공과 실패 처리 로직을 작성해준다.next.js와 node.js를 이용해서 백엔드를 구현했을때를 살펴보자. next(Error)란?-> Express의 에러 처리 미들웨어로 에러를 전달하는 방식 주로 컨트롤러 레이어에서 사용한다.예를 들어 인증 api를 구현할때 /api/auth/controller/auth.controller.tsasync login(req: Request, res: Response, next: NextFunction) { try { const { loginId, password } = req.body; const result = await this._authService.login.. 공감수 0 댓글수 0 2025. 1. 7.
[react] 이벤트 핸들러에 대한 잘못된 나의 생각.! 특정 아이콘을 클릭해서 dialog가 뜨게 하려고 했어서 onClick으로 이벤트를 줘서 거기에 dialog 컴포넌트를 호출하게 하면 되겠다! 했던 나의 잘못된 생각... 일단 동작부터도 안되는 이슈! const handleDialog = () => { return( { setVisible(false); }} > ) }; 이벤트 핸들러는사용자의 상호작용에 반응하여 어떤 "동작"을 수행하기 위한 것이다. React 컴포넌트는 UI를 정의하는 것이지, 이벤트 핸들러의 반환값으로 사용되어서는 안 된다!즉, dialog 혹은 modal 같은 경우 상태로 관리해서 조건부 렌더링으로 설정해줘야 하는 것이다.. const App(){ const [visible,s.. 공감수 1 댓글수 1 2024. 12. 27.
[프로젝트] 파이널 프로젝트 회고 🧶 프로젝트 소개5개의 카테고리로 이루어진 소통 커뮤니티 서비스백: https://github.com/ehddk/final_backend GitHub - ehddk/final_backendContribute to ehddk/final_backend development by creating an account on GitHub.github.com프론트: https://github.com/Yu-Kyeong-Seok/final-front GitHub - Yu-Kyeong-Seok/final-frontContribute to Yu-Kyeong-Seok/final-front development by creating an account on GitHub.github.com 🚩프로젝트 설명 쇼핑몰 마켓컬리.. 공감수 3 댓글수 1 2024. 12. 2.
[mongodb] 메서드 및 문법 정리 1.findByIdAndUpdate()findByIdAndUpdate( id, // 첫 번째 매개변수: 업데이트할 문서의 ID { $set: { ... } }, // 두 번째 매개변수: 업데이트할 내용 { new: true } // 세 번째 매개변수: 옵션) ex> 배송지 등록프로젝트에서 배송지 등록을 구현해야하는 부분이 있어서 서비스 부분에 해당 메서드를 사용해야했다! 배송지를 등록하고 유저 프로필에 업데이트를 해줘야하기 때문이다! async createDelivery(userId: string,delivery:Omit):Promise{ console.log('userId',userId) try{ .. 공감수 1 댓글수 1 2024. 11. 15.
2차 프로젝트 회고 🧶 프로젝트 소개5개의 카테고리로 이루어진 소통 커뮤니티 서비스 https://github.com/ehddk/genesis 🚩프로젝트 설명 커뮤니티라는 큰 주제 속에 어떠한 테마로 해보는 게 좋을 까 하다가 질문과 답변식으로 이루어지는서비스가 좋겠다! 싶은 의견들이 모여 결혼 후에 가장 관심있어 하는 분야를 카테고리로 잡았다.카테고리 분야는 동물, 음식, 게임,육아, 영화로 총 5가지이다. 사실상 이번 프로젝트의 목적은 1차 프로젝트와는 다르게 기획-디자인-개발까지 우리가 스스로 API도 만들고 화면에 직접 렌더링하는작업도 해보는 것이 가장 컸다! 🗓️ 프로젝트 기간2024.09.21 ~ 2024.10.02 (휴일/공휴일을 제외하면 10일) 💻 기술 스택HTML, CSS, JS, Typescr.. 공감수 9 댓글수 2 2024. 10. 31.
[nextjs]영화 프로젝트_ 인피니티 스크롤 구현 영화 목록을 불러올때 자꾸 20개만 불러오는 이슈 발생..구글링도 해보고 네트워크 탭,콘솔로 계속 확인해보고 해도 계속 array는 20개.. 그래서 애초에 api를 불러올때 경로를 보니까 내가 page를 숫자로 고정시켜놨던 것..//현재 상영중export const getMovies = async (page?:number) => { const res = await axios.get( `${BASE_URL}/movie/now_playing?api_key=${api_key}&language=ko-KR&page=1` ); return res.data;} 그러니까 페이지가 1인 영화 목록의 20개만 계속 고정으로,,,, const res = await axios.get( .. 공감수 1 댓글수 0 2024. 10. 31.
[kakaoMapAPI] 마주한 오류 카카오 api를 사용하는 방법은 script태그를 layout.js 파일에 추가하면 전역객체인 window에 등록이 된다.그래서 kakao라는 변수를 별도로 지정해주지 않아도 window내에 있기 때문에 호출이 가능한 것!그래서 막 난 kakao를 쓰지 않았는데.. let kakao = any; 뭐 이런 식으로 삽질을 안해도 된다는 말씀! 그렇게 일단 스크립트를 추가했고 코드를 작성하는 중에 발견한 오류를 정리해봤다! 1. TypeError: kakao.maps.LatLng is not a constructor? TypeError: kakao.maps.LatLng is not a constructor 코드를 실행하는 중에 이런 오류를 발견! kakao.maps.LatLng가 생성자 함수가 아니다.라는.. 공감수 1 댓글수 0 2024. 10. 31.
[js] 배열 내장 메서드(1)_ slice , splice ✂️, fill 배열에서 원하는 요소만을 추가하거나 삭제할때 보통 이 두 함수를 많이 쓴다근데 쓸때마다 헷갈려서 아예 개념을 확실하게 챙겨야겠다! ✂️ slice배열에서 일 부분을 싹둑 잘라내어 새로운 배열을 반환할때 사용한다. const arr=[1,2,3,4];const value = arr.slice(1,3);console.log(value); // [2,3]console.log(arr); // [1,2,3,4] 원본 배열은 그대로 유지됨! slice(처음요소, 마지막요소) 에서 항상 마지막요소의 인덱스 -1 까지만 추출한다. ex> 페이지네이션을 구현하는 코드의 어느 한 부분 async findAllWithPagination({ offset, limit, }: { offset: number;.. 공감수 1 댓글수 0 2024. 10. 21.
[ts] void ,any, unknown, never 타입 📌 voidtype AppsettingContextType={ fontSize: FontSize; theme: Theme; setTheme:(theme:Theme) =>void; setFontSize:(fontSize:FontSize)=>void};이렇게 타입 선언에서 void 타입을 본적이 있을 것이다. void는 typescript에서 반환 타입이 없음을 명시적으로 표현하는 용도의 타입이다.변수의 타입으로 void를 사용하면 해당 변수에는 null 또는 undefined만 할당할 수 있다. 즉, 해당 변수에는 유효한 값이 없음을 나타낸다.그래서 주로 네트워크 요청,로그 출력, 객체 상태 변경 등과 같은 작업을 생성하는 것이 목적인 함수를 호출한 후에 반환된 값을 사용할 필요가 없음을 나.. 공감수 0 댓글수 0 2024. 10. 18.
[js] e.target 과 e.currentTarget의 차이를 알아야 하는 이유 이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보자! e.target.id를 가리켰을때 마케팅 수신 동의 (선택) } id={"marketing"} name={field.name} value={field.value} //선택된 값들의 배열 onClick={(e) => { const isInclude = field.value.includes(e.target.id); // inCludes:배열에 특정 값(e.target.id)이 포함되어 있는지를 확인 field.onChange( isInclud.. 공감수 3 댓글수 2 2024. 10. 16.
[CS] site와 Origin을 아시나요 웹 개발을 하다보면 위와 같은 CORS 에러를 마주한 적(or 마주하게 될)이 있을것이다.. When? 언제 일어나는가?프론트 서버 http://localhost:3000 -> 백서버 http://localhost:4000 로 API요청을 보낼때 우선 CORS란?Cross Origin ReSource로 서로 다른 origin 간 HTTP 요청이 가능하도록 해주는 표준정책이며, Cross-Site HTTP Requests가 가능하다. CORS에러는 다른 출처(origin)에서 리소스를 요청할 때 발생하는 보안 정책 위반이기 때문에이를 해결하려면 각 단어의 의미가 무엇인지 알아야 한다!이제 Origin, Cross, site,same 부터 알아보자. 1. Origin URL에서 path를 제외한 모든 부.. 공감수 2 댓글수 0 2024. 10. 15.
[nextJS] 서버 컴포넌트냐? 클라이언트 컴포넌트냐? next.js 13버전은 페이지 단위로 렌더링 방식을 규정하지 않고 컴포넌트 단위인 서버 컴포넌트, 클라이언트 컴포넌트로 렌더링을 한다. 📌 server 컴포넌트app 폴더 안에 있는 컴포넌트들이 대부분 서버 컴포넌트이다!server 컴포넌트 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공한다.따라서 console log 자체도 브라우저가 아닌 서버 터미널에서 실행된다. 클라이언트로 js 코드를 보내지 않기에 클라이언트 측에서 부하도 없고 웹사이트의 로딩 시간을 줄일 수 있는 장점이 있다. When? 언제 사용하는가? 데이터 패칭이 필요한 컴포넌트: 서버에서 데이터를 가져오고, 클라이언트에 그 데이터를 렌더링할 때.상태나 이벤트 처리가 필요하지 않은 UI: 예를 들어, 정적인 콘텐츠나 .. 공감수 2 댓글수 1 2024. 10. 14.
[js] 웹스토리지와 전역상태 관리 받아온 데이터를 저장하고 화면에 불러오는 작업은 무조건적으로 필요하다.또 새로고침을 했을때 데이터가 휘발되면 안되니까 이럴때 localstorage에 담아두고 불러오곤 했다! 우선 전체적인 개념부터 알아보자 📌웹스토리지? 로컬스토리지? 웹스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 해주며 한마디로 데이터를 저장하는 공간이다.웹스토리지에는 로컬스토리지와 세션 스토리지가 있는데, 브라우저 내에 키-값쌍을 이용하여 저장한다.원래 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStorage로 사용 가능하다! 다음과 같은 메소드를 사용한다. - setItem: key-value 쌍을 보관하고,반드시 문자열로!- getIte.. 공감수 0 댓글수 0 2024. 10. 13.
[react] useState의 구조 분해 할당과 불변성 📌 구조 분해 할당이란?배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 js 표현식 const week = ['Mon','Tue','Wed','Thu','Fri']const day1= week[0]const day2 = week[1]위 배열을 해체해 개별 변수에 담아보면const week = ['Mon','Tue','Wed','Thu','Fri']const [day1,day2,day3,day4,day5] =week; 이렇게 day1,day2 등등을 배열로 할당할 수 있다. 그럼 리액트에서의 구조분해할당에 대해 알아보자! 📌useStateuseState의 기본적인 구성은 다음과 같다.const [state,setState]= useState(initialState);//init.. 공감수 0 댓글수 0 2024. 10. 10.
[react] React Portal? 포탈..? 포탈하면 메이플 포탈만 생각나는데.. 저번 수업에서 페이지 url에 변화가 없는데 새로운 페이지가 나오는 경우 이럴때 보통 포탈을 사용한다고 배웠었다.그래서 포탈이 대체 무엇일까!하고 알아보게 되었다. 1. React Portal 개념react 공식문서에 따르면 React Portal이란, 부모 컴포넌트의 Dom 계층 구조 바깥에 있는 Dom 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 한다. 리액트의 데이터 흐름은 단방향(부모->자식)인데, portal을 사용하면 상태를 공유받되 자식 요소에서 상위로 UI를 렌더할 수 있다. 일반적으로 생각해보면 어떻게 자식요소에서 부모요소에 UI를 나오게 할 수 있을까..?라는 의문이 드는데,이를 portal이 해결해준다! 즉, 자식 컴포넌트를 부모.. 공감수 0 댓글수 0 2024. 10. 9.
[React] useRef useRef는 리액트 hook의 한 종류이며 ,reference(참조)의 줄임말로 특정한 DOM요소에 접근이 가능하면서 불필요한 재렌더링을 하지 않는다. ref는 state와 비슷하게 어떠한 값을 저장하는 공간으로 사용된다고 한다.ref는 UI에 영향을 주지 않고, 특정 이벤트가 트리거 되어있을때 특정 event에 참조가 필요한 경우에 사용한다.폼 제출과 같은 이벤트가 발생 시, input 요소들의 값에 접근하기 위해 ref.current를 사용할 수 있다는 의미이다.ref의 변화가 생기면 렌더링이 일어나지 않아 변수값이 유지되는데, 따라서 렌더링과는 무관하게 값이 유지되어야 할 때 사용. 그럼 useState가 있는데 언제,왜 UseRef를 사용할까? When1. Dom요소에 직접 접근바닐라 JS의 g.. 공감수 4 댓글수 0 2024. 10. 7.
라우터 정의 순서가 중요한 이유 ⭐️ 강사님이 저번에 라우터 정의를 하시다가 해당 페이지의 경로가 아닌 자꾸 다른 페이지로 인식되는 에러를 발견하셨다. 바로 게시글 작성 페이지를 렌더링해야하는데 자꾸 게시글의 세부 페이지로 인식이 되는..게시글 작성 페이지의 라우터 경로는 posts/write게시글 세부 페이지의 라우터 경로는 posts/:postId 이다. express에선 :postId처럼 동적 path보다 write처럼 정적 path를 먼저 선언해줘야한다!!위 경로처럼 서로 depth가 같을때 write가 :postId로 인식되는 경우가 있어서 선언 순서에 유의해야한다. 나도 이번에 강의 생성페이지를 렌더링하는데 자꾸 강의 상세 페이지로 인식을 해버려서이렇게 error가 자꾸 뜨는 것이다.. 강의 생성은 단순히 데이터를 삽입하는 곳.. 공감수 0 댓글수 0 2024. 9. 10.
[Mongoose] Could not connect to any servers in your MongoDB Atlas cluster. 오류 해결 MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster. One common reason is that you're trying to access the database from an IP that isn't whitelisted. Make sure your current IP address is on your Atlas cluster's IP whitelist: https://www.mongodb.com/docs/atlas/se.. 공감수 0 댓글수 0 2024. 9. 5.
미니 프로젝트_회고 📌프로젝트 개요오름캠프 내 미니 프로젝트 기간에 진행하였습니다.기간은 총 2024.08.20~ 2024.08.27 총 7일간 진행되었고, 공공 API를 활용한 미니 앱을 구현해보는 것이 목표였습니다.전 팀장을 맡아 총괄 관리 및 localstorage 연결 및 날씨 영역 마크업 및 기능 구현을 하였습니다. 📌프로젝트 목표1. 오늘의 날씨, 오늘의 할 일, 오늘의 추천 영화를 보여주는 기능 만들어 보기2. git 사용으로 효율적인 협업하기3. API 패칭을 하면서 화면에 데이터 표시하기4. 반응형 익히기5. Scrum 방식 업무를 토대로 집중적으로 개발 작업하기 📌기술 스택HTML,CSS,JS, Typescript, VITE프레임워크 없이 오직 바닐라 스크립트로 진행하는 것이 목표라서 위 스택을 .. 공감수 1 댓글수 0 2024. 8. 29.
[vanilla+ typescript] API 데이터를 화면에 보이기 이제 api 데이터가 잘 받아와지는 것을 확인했으니 화면에 뿌릴 차례! 난 그냥 태그로 해당 데이터가 보이게 할 것이다.이렇게 마크업을 간단하게 해놓고, 각 태그에 고유 Id를 넣었다.그럼 이 id를 가진 엘리먼트를 찾아서 textContent나 innerHTML로 데이터 값을 매칭해서 넣는다. const dustData=await dustService.getDust({ params:{ returnType: 'json', numOfRows:100, pageNo:1, searchDate:today_date, InformCode: 'PM10' }})내가 이렇게 dustData에 이렇게 담은걸 콘솔로 확인해보면, 이 data에서 원하는.. 공감수 0 댓글수 0 2024. 8. 23.
[vanilla+typescript]API 서비스 함수 작성 공공데이터에서 제공하는 미세먼지 api를 호출하여 미세먼지 데이터를 화면에 뿌려줄 것이다.일단 그럼 서비스함수, 인스턴스를 생성해보자. 이뤄지는 과정요청 타입 정의응답 타입 정의서비스 함수 정의해당 ts 파일로 와서 요청하기 우선 api 호출을 했을때 응답값이 잘 반환이 되는지 postman으로 확인해보는 것이 좋다!이렇게 params에 필수 요청 파라미터를 담아서 url로 get 요청을 한다. 그럼 성공적으로 이렇게 응답값이 json형식으로 받아와지는 걸 확인 할 수 있다.이때 내가 returnType을 json으로 했기에 이렇게 나온다.여기서 난 infromCause,informOverall만 추출할것이다. 일단 그럼 요청타입을 먼저 정의해보자!1. dust.type.ts란 파일 생성요청시에는 .. 공감수 0 댓글수 0 2024. 8. 23.
[JS]Promise promise란?결과를 제공하겠다는 약속을 말한다. 비동기 작업이 맞이할 미래의 결과값을 나타낸다.이전에는 콜백함수를 사용함으로써 함수 내부에서 또 다른 함수를 호출해 후속 처리 작업을 했지만 ..가독성도 안좋고 코드 길이도 길어지면서 콜백지옥(callback hell)이 발생하곤했다! 그래서 이를 해결하고자 promise 객체가 등장했다. 🚩생성하기const 변수명 = new Promise((resolve,reject) => { } )promise 생성자 함수로 생성한다.이때 ,resolves는 성공의 상태를 뜻하고 reject는 거부의 상태를 뜻한다. 🚩객체 처리성공하여 resolve(data)를 호출하면,.then() : 성공처리.catch(): rejected된 결과 반환 처리.finall.. 공감수 0 댓글수 0 2024. 8. 23.
[JS] 콜스택 콜스택에 대해 알아보자.흔히 자바스크립트는 싱글 스레드(single thread)라고 하는 걸 한번쯤은 들어봤을 것이다.즉, single call stack = 한 번에 한 가지 수행가능한 동기적이라고 할 수 있다! 🚩스택후입선출즉, 제일 마지막으로 들어온것이 먼저 나간다. 🚩큐선입선출앞뒤가 열려있어 FIFO라고 하며 먼저 들어온것이 먼저 나간다. 콜스택이란 함수 호출을 저장하는 자료구조다.우선 연두색 부분은 우리가 작성한 JS 파일에서 어느 부분이 실행되고 있는지를 알 수 있는 부분이다. 여기서 call이란 함수를 호출하는 것을 의미하는데, 콜을 호출할때마다 스택에 이렇게 차곡차곡 쌓이게 된다.실제적인 값은 메모리 Heap에 저장되고, 콜스택엔 힙의 주소가 저장이된다.(그래서 객체를 비교할때는 주소.. 공감수 0 댓글수 0 2024. 8. 18.
오름캠프 웹 풀스택_(프론트엔드) 회고 프론트엔드 부트캠프를 서치하다가 우연히 '오름캠프 웹 풀스택 실무과정'을 발견했다.수많은 부트캠프 속에서 이 오름캠프를 선택하게 된 이유는 !프론트엔드가 중점이지만 백엔드 과정도 같이 배울 수 있는 풀스택 과정이라는게 제일 먼저 메리트로 다가왔다. 예전엔 그저 프론트엔드면 html,css,js만 잘 다루면 되는거 아닌가?라는 생각이었다.근데, 팀플을 해보니까 어느정도 백엔드 지식도 알아야 프론트상에서 서버한테 어떤 요청을 해야하고,어떻게 받아오는지를 알아야 프로젝트가 수월하다는 것을 알게되었다,, 오름캠프를 pick한 이유🚩온라인 실시간 강의주 5일 9:00~ 18:00 온라인 실시간 zoom 강의로 이루어진다.일단, 집에서도 수업을 실시간으로 참여할 수 있다는게 효율적이라 생각했다. 9:00~ 16:.. 공감수 1 댓글수 0 2024. 8. 17.
[JS] HTTP 메서드 API를 요청할때GET,POST,DELETE,PUT,PATCH,CREATE라는 메서드를 한번쯤은 본 적 있을 것이다!하나씩 살펴보면 GET일반적으로 웹 사이트 형식과 같이 서버로부터 응답으로 정보를 기대하는 요청이다.어떤 데이터를 조회하고 싶을때 주로 get요청을 한다!PUT전체 수정, 전체 추가 요청을 할때 사용하며 클라이언트가 관리한다.POST클라이언트가 서버에 데이터를 제출할 때 사용하는 메서드로클라이언트가 따로 식별자를 추가하지 않는다.서버가 관리하며, 처리가 애매한 것들을 주로 post로 다룬다.PATCH일부를 부분 수정할때 사용한다.PUT과 달리 PATCH는 특정 부분!ex> 이름만 바꾼다던지, 회원의 등급,회원의 활성화상태만을 살짝 바꾸는 API를 요청할때 사용한다!! 예시1] 회원등록/m.. 공감수 0 댓글수 0 2024. 8. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.