반응형

2024/03 36

사용자의 검색을 돕는 똑똑한 검색 기능(with Hangul-js)

현재 진행하고 있는 웹사이트에서 검색창을 만들었다. 사실, 검색 기능이란거 우리 생각의 기본대로 하면 된다. input 창에 사용자가 작성하는 글을 event.target.value로 값을 관리하고, 그 값과 일치하는 공연 이름 데이터만 조건식에 맞게 뿌려주면 된다. 코드로 살펴보자. 하지만? 나는 더 똑똑한 검색 기능을 원했다. 먼저 기본 검색 기능먼저 살펴보자. 01. 기본 검색 기능 1) 코드 이 중 useState만 import 하면된다. 함수 내에 밑과 같은 코드를 작성하면 된다. (다른 코드들은 무시 부탁드립니다 ^^) const [searchTerm, setSearchTerm] = useState(""); const handleSearch = (event: React.ChangeEvent) ..

Next.js에서 react-query 활용한 무한스크롤 완전정복(useInfiniteQuery, useLocalStorage)

눈물이 좀 날 뻔 했다. 다른 FE 개발자 분들은 헤매지 마시라고 기록을 남긴다. (...빠이팅! ) 거두절미하고 바로 시작 00. 백엔드에서 가져와야할 데이터 형식 내가 백엔드에서 받아온 데이터 형식은 이렇다. 만약 백엔드에서 가져온 데이터가 pageNo(이 데이터가 몇번째 페이지인지 나타냄)나 totalPages(총 전체 페이지가 몇개인지 나타냄)를 포함하고 있지 않다면 곤란하다. 없다면 공손하게 백엔드 분께 부탁드리자. ! 1) swagger에서 볼 수 있는 response 2) front에서 보는 데이터. (나는 data로 된 이름이 2개여서 이해를 쉽게 돕고자 더 큰 data를 data1, 그 아래 실제 데이터 갖고 있는 data를 data2 로 이야기를 할 예정이다. ) 내 백엔드 분은 다양한..

2024 팀 네이버 신입 공채 Tech 코딩테스트 후기

2024 팀네이버 신입 공채 코딩테스트를 봤다. ### 일정은 아래 사진을 확인하기 ! : 정말 긴 일정이다. ### 코딩 테스트 대상자 많은 사람들이(자격 안되는 사람들도 테스트 겸 보는 등) 코딩 테스트를 보는 걸로 알고 있는데, 네이버가 그런? 것들을 방지하기 위해서 애초에 시험 보기 전에 대상자인지 확인 하는 것 같았다. 서류를 제출하고 난 뒤, "제출하신 지원 내용을 검토한 결과 온라인 코딩테스트 및 기업문화 적합도 검사 대상자임을 안내드립니다." 와 같은 메일이 온다. ### 코딩 테스트 보는 사이트 (프로그래머스)코테 자격을 얻고나면, 또 한 번 메일로 코딩 테스트를 볼 주소를 준다. "메일을 잘 확인할 것" ### 시험 당일 시험은 오전 10:00 - 12:00 2시간동안 치뤄진다. 입실은..

회사 지원 2024.03.23

헷갈리는 객체 키와 값 가져오기 (for...in 반복문 /Object.keys() )

01. for...in 반복문으로 키 가져오기 let obj = { 1: [0, 1, 2], 2: [3, 4, 5], 3: [7, 8], }; for (let key in obj) { console.log(key); } // 1 2 3 02. for...in 반복문으로 값 가져오기 let obj = { 1: [0, 1, 2], 2: [3, 4, 5], 3: [7, 8], }; for (let key in obj) { let value = obj[key]; console.log(value); } 03. Object.keys(obj) 로 키 가져오기 let obj = { 1: [0, 1, 2], 2: [3, 4, 5], 3: [7, 8], }; let keys = Object.keys(obj); consol..

프로그래머스 : 신고 결과 받기 - javascript(구현 , Map)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/92334 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 01. 신고한 거를 2차월 배열로 나타내기 02. 신고 받은거 k이상인 사람 색출 03. 신고 받은 사람을 신고한 사람의 index 값을 +1 해준다. 문제 풀이 코드 function solution(id_list, report, k) { let graph = Array.from({length: id_list.length}, () => new Array(id_list.l..

프로그래머스: 주차 요금 계산 - javascript(구현 , 객체 구조 활용)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/92341 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 01. 주어진 records 배열을 순회하면서 내가 원하는 정보의 형태로 저장할 것이다. => cars라는 객체 생성 후, 차량번호를 key로 설정하고 값으로는 "누적시간"과 IN일 때 임시로 시간(OUT일 땐 저장되어있는 IN 값과 시간 차이를 구하고 누적시간에 더해줄 것임)을 저장할 것. 02. 출차 하지 않은 차량이 있다면 23:59 로 누적시간을 구해줘야 한다. ..

dfs, 완전탐색, 백트래킹 관련 지식 정리

01) - return : 값을 반환하거나, 함수를 종료한다는 뜻 - 이것의 출력은 3 2 1 - 자 봐봐. else { //이 부분은 또 다른 함수로 넘어가기전 해결하고 갈 것을 넣는것이다. DFS(L-1) // } - 이것의 출력은 1 2 3 설명) 모든 함수는 스택에 저장되죠? 콜스택 하잖아요. 함수가 호출되면 스택에 함수 정보가 저장되는 것. 재귀함수도 함수니까 스택에 저장되죠 (스택프레임이라고 한다.) - 스택프레임이란 (매개변수 L에 대한 정보, 지역변수, 복귀주소) 정보를 가지고 있음. - D(3) => D(2) => D(1) => D(0) 순으로 저장된다. - D(0)되자마자 return 으로 함수가 끝난다. - 함수 끝나면 딱 스택프레임이 사라진다. - D(0)이 끝나면서 복귀주소였던 D..

프로그래머스: 두 큐 합 같게 만들기 - javascript(시간복잡도 고려하는 구현문제)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/118667 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 이런 문제가 네이버의 1번으로 나올 수 있다. max값을 설정하면서 N값을 제한하는 생각을 할 수 있느냐, 어떻게 하면 시간 복잡도를 줄일 수 있는가가 관건이 된다. 그 작은 차이가 합/불을 결정한다. 내 코드가 무조건적으로 바꾸면서 시간 초과를 방지하는 것보다는, 어떤 방식으로 시간 초과가 나지 않는지 생각해본다. 01. 최대 시간을 제한 02. 삽입과 삭제의 방식이..

백준 1912: 연속합 - javascript(dp)

문제 출처 https://www.acmicpc.net/problem/1912 1912번: 연속합 첫째 줄에 정수 n(1 ≤ n ≤ 100,000)이 주어지고 둘째 줄에는 n개의 정수로 이루어진 수열이 주어진다. 수는 -1,000보다 크거나 같고, 1,000보다 작거나 같은 정수이다. www.acmicpc.net 문제 n개의 정수로 이루어진 임의의 수열이 주어진다. 우리는 이 중 연속된 몇 개의 수를 선택해서 구할 수 있는 합 중 가장 큰 합을 구하려고 한다. 단, 수는 한 개 이상 선택해야 한다. 예를 들어서 10, -4, 3, 1, 5, 6, -35, 12, 21, -1 이라는 수열이 주어졌다고 하자. 여기서 정답은 12+21인 33이 정답이 된다. 입력 첫째 줄에 정수 n(1 ≤ n ≤ 100,000..

프로그래머스: 택배 배달과 수거하기- javascript(구현)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/150369 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 - 단순 구현 문제다. - 좀 생각할게 있을수록 쪼개서 생각해야 한다. - 조건부터 나열하자. 01. 뒤에서부터 세야 한다. 02. deliver 배열이랑 pickup 배열을 계속 비교해줘야 한다. => 뒤에서부터 비교한 값에서(값이 0이 아닐 때) 더 큰 값을 가진 idx에다가 *2를 해서 answer에다가 더해줘야 한다. 03. 해당 배열의 값이 cap보다 수가 작..

반응형