[React] API 통신 - axios

Axios란? React에서 AJAX를 구현하려면 JS 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야함 (HTTP Client - HTTP 상에서 커뮤니케이션하는 자바 기반 컴포넌트) (AJAX - JS를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기능) HTTP Client 라이브러리에는 Fetch API, Axios가 있음 Axios 사용법 • GET: 입력한 URL에 존재하는 자원에 요청 axios.get(url[, config]) 주소에 있는 쿼리스트링을 활용해서 정보를 전달, 값이나 상태를 바꿀 때 사용 X www.server.com/login?id=a&pw=123 이런 식으로 쿼리스트링이 붙여짐 • Post: 새로운 리소스를 생성할..

• format_list_bulleted React
• · 2024. 1. 16.
• textsms

[Programmers]기능개발(42586번)/JS

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/42586 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 접근 방법 100-progresses를 하면 남은 진도가 나오고, 이 값에서 speed를 나눠주면 몇 일 걸리는지 구할 수 있다. 각 기능마다 몇 일 걸리는지 배열에 저장해두고 배열의 이전 값과 현재 값을 비교하면서, 이전 값 >= 현재 값 이면 count+1 을 해주고, 이전 값 < 현재 값 이면 answer 배열에 count의 값을 넣어준다. 마지막으로 현재 count의 값을 a..

• format_list_bulleted Algorithm
• · 2024. 1. 15.
• textsms

[Programmers]할인 행사(131127번)/JS

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/131127 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 접근 방법 map에 key, value로 제품과 수량을 저장하고 1일~10일동안 할인해서 구매할 수 있는 제품을 살펴보고 구매할 수 있는 제품이 있다면 value-1 해준다. 그 후, 1일에 구매했던 제품은 구매 안한걸로 처리해주고 11일에 구매할 수 있으면 구매해준 걸로 처리한다. 이 과정을 마지막 날이 될 때까지 반복해주면서, 가능한 날이 있으면 answer++ 해주면 끝! 코드 설..

• format_list_bulleted Algorithm
• · 2024. 1. 14.
• textsms

[Programmers]n^2 배열 자르기(87390번)/JS

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/87390 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 접근 방법 n*n 이차원 배열을 만들어서 0으로 초기화하고, for문을 돌면서 이차원 배열 값을 채운 다음에 left, right 크기만큼 자르자! function solution(n, left, right) { var answer = []; let arr2 = Array.from(new Array(n), (_)=>new Array(n).fill(0)); for(let i=0;i

• format_list_bulleted Algorithm
• · 2024. 1. 11.
• textsms

[JS] 유효성 검사

입력조건 1. 이름은 필수로 입력해야 한다. 2. 닉네임은 2~5글자로 구성해야 한다. 3. 이메일 형식을 지켜야 한다. 4. 비밀번호는 영어+숫자+특수문자를 조합해야 한다. 5. 비밀번호와 비밀번호 확인 란에 동일한 문자를 입력해야 한다. 이런 기능을 유효성 검사라고 부른다. HTML 코드 회원 가입 이름

• format_list_bulleted HTML,CSS,JS
• · 2023. 12. 30.
• textsms

[React]리액트 훅 & Life Cycle

• 리액트 훅(Hook)의 등장 리액트의 훅은 버전 16.8부터 새로 추가된 기능으로, 클래스형 컴포넌트의 단점을 보완하기 위한 것이다. 먼저 리액트의 컴포넌트는 클래스형과 함수형으로 나뉜다. 클래스형 컴포넌트의 단점으로는 컴포넌트 사이에서 상태 로직 재사용 어려움 render props나 고차 컴포넌트와 같은 패턴을 사용해서 코드 추적이 어려움 복잡한 컴포넌트들은 이해하기 어려움 생명주기 메서드에 관련 없는 로직이 섞여 들어가고, 컴포넌트들을 작게 분리하는 것이 불가능 함 class를 사용하기 위해서는 javascript의 this에 대해 알아야하는데, javascript의 this는 다른 언어에서와는 다르게 작동해서 혼란스러움 위와 같은 단점들을 보완하고자 훅이 등장! Hook의 등장으로 함수형 컴포..

• format_list_bulleted React
• · 2023. 10. 4.
• textsms