분류 전체보기

📌 Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다. XMLHttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다. Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다. Fetch API - Web API | MDN Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새..

JavaScript의 try catch문처럼 에러로 React가 컴포넌트를 그릴 수 없는 상황을 만들어줄 것이다. 먼저, 아래의 사진처럼 Child 컴포넌트에 throw new Error로 에러를 생성해줬다. ErrorBonudary 자식 안에서 에러가 났으면 Catch Error 해서특정한 화면을 보여주겠다는 영역이다. 아까와 같이 콘솔 창에서는 똑같은 에러가 뜨지만, 화면상에서는 특정 화면을 보여주는 것을 볼 수 있다. 이것을 함수형 컴포넌트로 만들 수 없는 이유는 에러가 났을 때 상태 값을 어떻게 처리하는 함수 자체(getDerivedStateFromError)를 클래스 컴포넌트에서만 제공을 하기 때문이다. 여기서 Fallback이라는 것은 Error가 났을 때 보여줄 컴포넌트를 의미한다.

📌 useRef()로 DOM 다루기 Input Element가 있고 화면이 뜨자마자 focus를 주고 싶다면 useRef() hook을 사용하면 된다. 왜 document.querySelector 류를 사용하지 않고 useRef라는 별도의 방법을 제공할까? Vanilla JS 같은 경우는 document.get ~ / document.query ~ React 같은 경우는 useRef / ref을 사용한다. 태그에 ref props로 넘겨주고 current로 접근하여 사용할 수 있다. 📌 Form 다루기 preventDefault로 submit을 하면 새로고침되는 기본 동작을 없애준다. 그리고 console의 dir을 사용해 target의 elements 모든 속성을 확인해봄으로써 form에 접근할 수 있..

https://programmers.co.kr/learn/courses/30/lessons/43162 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 문제를 딱 보자마자 유니온 파인드 알고리즘이 생각났다. 풀고보니 유니온 파인드의 기본적인 문제이며, 부모 노드의 중복되지 않은 숫자의 개수는 몇 개인지 세면 되는 단순한 문제였다. 풀이 1 #include #include #include using namespace std; int parent[201]; int getParent(int x){ if(parent[x] == x) return x; re..

https://programmers.co.kr/learn/courses/30/lessons/49189 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 이 문제는 다익스트라의 기본 문제이다. 다익스트라 알고리즘을 활용하여 dist 값을 찾아낸 뒤, 가장 큰 값을 찾아 그 값과 일치하는 개수를 세면 된다. #include #include #include using namespace std; const int INF = 1e9; vector dist; vector edge[20001]; priority_queue pq; void dijkstra(int..

https://programmers.co.kr/learn/courses/30/lessons/12949 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 3중 for문에 익숙해지면 풀 수 있는 문제이다. #include #include using namespace std; vector solution(vector arr1, vector arr2) { vector answer; for(int i = 0; i < arr1.size(); i++){ vector v; for(int j = 0; j < arr2[0].size(); j++){ int sum =..

https://programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 이 문제는 (0, 1, 2)(0, 2, 1)(1, 0, 2)(1, 2, 0)(2, 0, 1)(2, 1, 0) 다 돌아보면서 가장 많이 탐험할 수 있는 던전의 수를 세는 것이다. 그러므로, next_permutation 알고리즘과 dfs 알고리즘을 둘 다 쓸 수 있다. 풀이 1 (next_permutation) next_permutation 알고리즘을 쓰기 전에 먼저 정렬을 해준다. k의 수는 순열 ..

https://programmers.co.kr/learn/courses/30/lessons/12936 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 이 문제는 next_permutation 알고리즘으로 풀면 쉽게 풀리지만, 그렇게 해선 시간초과가 나는 문제이다. 해결 방법은 팩토리얼을 사용하여 각 자리의 수를 직접 구해야 된다. 풀이 1 #include #include using namespace std; long long facto(int n){ if(n == 1) return 1; return n * facto(n - 1); } void r..

https://programmers.co.kr/learn/courses/30/lessons/70129 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 단순한 문제인데 생각보다 시간을 많이 뺏긴 문제이다. s가 1이 아닐 때 반복문을 계속 돌려주고, 0의 개수를 세며 전체 길이에서 0의 개수를 뺀 수를 다시 2진수로 만들면 된다. #include #include #include using namespace std; string Binary(int n){ string str = ""; while(n != 0){ str += to_string(n % ..

https://programmers.co.kr/learn/courses/30/lessons/42888 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 과정 map을 활용한다면 쉽게 풀 수 있는 문제이다. record가 문자열로 들어왔기 때문에 편리하게 사용하기 위해 reco라는 이중벡터에 넣어줬다. map은 이미 들어온 key값이 있으면 value 예전 값이 사라지고, 업데이트 되는 식이기 때문에 Enter일때나 Chnage일 때 닉네임을 생성하거나, 업데이트 해주면 된다. 결과는 유저 아이디인 key값을 넣으면 업데이트 된 닉네임 value값이 나오..