본문 바로가기

전체 글178

[JS] 코딩 테스트 문제 : 올바른 괄호 [스택] 문제 : 올바른 괄호 문제 설명 괄호가 입력되면 올바른 괄호이면 “YES", 올바르지 않으면 ”NO"를 출력합니다. (())() 이것은 괄호의 쌍이 올바르게 위치하는 거지만, (()()))은 올바른 괄호가 아니다. ▣ 입력설명 첫 번째 줄에 괄호 문자열이 입력됩니다. 문자열의 최대 길이는 30이다. ▣ 출력설명 첫 번째 줄에 YES, NO를 출력한다. ▣ 입력예제 1 (()(()))(() ▣ 출력예제 1 NO 내코드 function solution(s) { let answer = "YES"; let stack = []; // 문자열 길이 만큼 순회 for (const word of s) { // 문자가 ')' 인 경우 if (word === ")") { // stack 에 남은게 없다면 쌍.. 2024. 1. 4.
[React 18. 2] 공식 문서 훑으면서 몰랐던 부분 찾아보기 React 애플리케이션의 성능 측정을 위해 사용되는 컴포넌트 각각의 컴포넌트가 얼마나 자주 렌더링되는지, 렌더링에 얼마나 시간이 걸리는지 등을 측정할 수 있습니다. react-dev-tools 에 profile 탭에서 성능 관련 정보를 확인 할 수 있다. Props id: id onRender: (param) => {} param id: 방금 커밋한 트리 id의 문자열 소품입니다. 이를 통해 여러 프로파일러를 사용하는 경우 트리의 어느 부분이 커밋되었는지 식별할 수 있습니다. phase: "mount", "update"또는 "nested-update". 이를 통해 트리가 처음으로 마운트되었는지 아니면 소품, 상태 또는 후크의 변경으로 인해 다시 렌더링되었는지 알 수 있습니다. actualDuration:.. 2024. 1. 4.
React 에서 이벤트 위임 하지 않는 이유 상황 React 로 개발하던 와중 문득 기존에 개발하던 방식에 의문이 생겼다. 이벤트를 처리할 때 각 요소에 일일이 등록해서 사용했던 점이었다. (아마도 react 를 배우고 개발하면서 봐온 일반적인 코드들의 형태들에 익숙해진 것 같음) 어째서 바닐라 js 로 개발할 때처럼 addEventListener 를 활용한다거나 이벤트 위임하는 방식으로 처리하지 않는지 찾아보게 됐다. 해결 찾아보니 github 에서 비슷한 질문과 답변이 있었다. 답변 중 일부: React doesn't attach your click event handlers to the nodes. It uses event delegation and listens at the document level. (React는 클릭 이벤트 핸들.. 2023. 12. 22.
[JS] 코딩 테스트 문제 : 모든 아나그램 찾기 [해쉬, 투포인터, 슬라이딩 윈도우] 문제 : 모든 아나그램 찾기(해쉬, 투포인터, 슬라이딩 윈도우) 문제 설명 S문자열에서 T문자열과 아나그램이 되는 S의 부분문자열의 개수를 구하는 프로그램을 작성하 세요. 아나그램 판별시 대소문자가 구분됩니다. 부분문자열은 연속된 문자열이어야 합니다. ▣ 입력설명 첫 줄에 첫 번째 S문자열이 입력되고, 두 번째 줄에 T문자열이 입력됩니다. S문자열의 길이는 10,000을 넘지 않으며, T문자열은 S문자열보다 길이가 작거나 같습니다. ▣ 출력설명 S단어에 T문자열과 아나그램이 되는 부분문자열의 개수를 출력합니다. ▣ 입력예제 1 'bacaAacba' 'ab ' ▣ 출력예제 1 3 출력설명: {bac}, {acb}, {cba} 3개의 부분문자열이 "abc"문자열과 아나그램입니다... 2023. 11. 27.
n 번의 비동기 요청 시 Promise 재귀함수 처리 n번의 비동기 요청 시 Promise 재귀함수 처리 상황 공공 API 데이터를 활용 중 최대 1000 개의 데이터만 불러올 수 있는 제한사항으로 인해 전체 데이터를 불러와 데이터를 추출하는 과정에 문제가 생겼다. 다행히 API 요청 결과 데이터 중 전체 데이터의 전체 개수를 나타내는 데이터가 존재해 이를 활용하여 n 번의 요청으로 (n x 1000) 개의 데이터를 가져오도록 설계하기로 했다. 설계 비동기 처리의 실행 순서를 보장하기 위해 async await 키워드를 사용 원하는 만큼의 API 요청하기 위해 재귀함수로 형태를 활용 코드 코드 설명 axios 패키지를 활용해 API 데이터를 처리할 함수를 선언 함수안에 재귀 함수로 활용할 함수 recursiveReq를 async 키워드와 함께 선언 axio.. 2023. 11. 16.
React + Vite + ts 환경에서 path alias 설정하기 Vite 환경에서 path alias 설정하기 상황 Reaect + Vite + ts 환경에서 tsconfig 에 path alis 설정 후 정상적으로 인식하지 못해 Failed to resolve import "@styles/globalStyle" from "src\App.tsx". Does the file exist? 이런 오류메시지가 발생함 "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": ["./components/*"], "@api/*": ["./api/*"], "@hooks/*": ["./hooks/*"], "@assets/*": ["./assets/*"] } ... } 해결 방법 1. vite.config.ts 에서 a.. 2023. 11. 8.
React + ts 정적 파일 저장 위치와 기준 React + ts 정적파일 저장위치와 기준 설명 react + ts 로 개발 중 공공 API 에 사용되는 도시 코드를 정적 파일로 저장해야 하는 상황에서 두 가지 고민이 생겼다. 어디에 저장할 것인가? (public 디렉토리, src 디렉토리 ) 확장자(ts,js,json ...)는 어떤 것으로 할 것인가? 1. public 폴더와 소스코드 폴더에서의 정적 파일 처리의 차이점 react 로 개발하면서 정적파일을 저장하는 곳을 크게 public 폴더와 기타 src 같은 소스코드 폴더 (혹은 소스 코드 내?) 두 가지로 나누어 생각 할 수 있고 이 두 방식은 분명한 차이가 존재한다. 1.1 public 폴더 저장한 파일은 빌드 후에도 애플리케이션의 루트 디렉토리에 그대로 유지된다 이 폴더에 저장된 파일은 .. 2023. 11. 6.
[JS] 코딩 테스트 문제 : 아나그램 [해쉬 맵] 문제 : 아나그램 [해쉬] 문제 설명 Anagram이란 두 문자열이 알파벳의 나열 순서를 다르지만 그 구성이 일치하면 두 단어는 아나그램이라고 합니다. 예를 들면 'AbaAeCe' 와 'baeeACA' 는 알파벳을 나열 순서는 다르지만 그 구성을 살펴보면 A(2), a(1), b(1), C(1), e(2) 로 알파벳과 그 개수가 모두 일치합니다. 즉 어느 한 단어를 재배열하면 상대편 단어가 될 수 있는 것을 아나그램이라 합니다. 길이가 같은 두 개의 단어가 주어지면 두 단어가 아나그램인지 판별하는 프로그램을 작성하세요. 아나그램 판별시 대소문자가 구분됩니다. ▣ 입력설명 첫 줄에 첫 번째 단어가 입력되고, 두 번째 줄에 두 번째 단어가 입력됩니다. 단어의 길이는 100을 넘지.. 2023. 11. 1.
[JS] 코딩 테스트 문제 : 학급 회장 [해쉬 맵] 문제 : 학급 회장 [해쉬 맵] 문제 설명 학급 회장을 뽑는데 후보로 기호 A, B, C, D, E 후보가 등록을 했습니다. 투표용지에는 반 학생들이 자기가 선택한 후보의 기호(알파벳)가 쓰여져 있으며 선생님은 그 기호를 발표하고 있습니다. 선생님의 발표가 끝난 후 어떤 기호의 후보가 학급 회장이 되었는지 출력하는 프로그램을 작성하세요. 반드시 한 명의 학급회장이 선출되도록 투표결과가 나왔다고 가정합니다. ▣ 입력설명 첫 줄에는 반 학생수 N(5 max) { max = value; answer = key; } }); // 맵 결과 console.log(candidateMap); return answer; } let str = "BACBACCACCBDEDE"; 풀이 후보들을 Map 으로 {Key:이름 , .. 2023. 11. 1.
[JS] 코딩 테스트 문제 : 최대 매출 문제 : 최대 매출 문제 설명 현수의 아빠는 제과점을 운영합니다. 현수 아빠는 현수에게 N일 동안의 매출기록을 주고 연속된 K일 동안의 최대 매출액이 얼마인지 구하라고 했습니다. 만약 N=10이고 10일 간의 매출기록이 아래와 같습니다. 이때 K=3이면 12 15 11 20 25 10 20 19 13 15 연속된 3일간의 최대 매출액은 11+20+25=56만원입니다. ▣ 입력설명 첫 줄에 N(5 2023. 10. 31.
[JS] 코딩 테스트 문제 : 연속 부분 수열 2 문제 : 연속부분수열 2 문제 설명 N개의 수로 이루어진 수열이 주어집니다. 이 수열에서 연속 부분 수열의 합이 특정 숫자 M이하가 되는 경우가 몇 번 있는지 구하는 프로그램을 작성하세요. 만약 N=5, M=5이고 수열이 다음과 같다면 1 3 1 2 3 합이 5이하가 되는 연속 부분 수열은 {1}, {3}, {1}, {2}, {3}, {1, 3}, {3, 1}, {1, 2}, {2, 3}, {1, 3, 1}로 총 10가지입니다. ▣ 입력설명 첫째 줄에 N(1≤N≤100,000), M(1≤M≤100,000,000)이 주어진다. 수열의 원소값은 1,000을 넘지 않는 자연수이다. ▣ 출력설명 첫째 줄에 경우의 수를 출력한다. ▣ 입력예제 1 5 5 1 3 1 2 3 ▣ 출력예제 1 10 내코드 functio.. 2023. 10. 30.
[JS] 코딩 테스트 문제 : 연속부분수열1 문제 : 연속부분수열1 문제 설명 N개의 수로 이루어진 수열이 주어집니다. 이 수열에서 연속부분수열의 합이 특정숫자 M이 되는 경우가 몇 번 있는지 구하는 프로그램을 작성하세요. 만약 N=8, M=6이고 수열이 다음과 같다면 1 2 1 3 1 1 1 2 합이 6이 되는 연속부분수열은 {2, 1, 3}, {1, 3, 1, 1}, {3, 1, 1, 1}로 총 3가지입니다. ▣ 입력설명 첫째 줄에 N(1≤N≤100,000), M(1≤M≤100,000,000)이 주어진다. 수열의 원소값은 1,000을 넘지 않는 자연수이다. ▣ 출력설명 첫째 줄에 경우의 수를 출력한다. ▣ 입력예제 1 8 6 1 2 1 3 1 1 1 2 ▣ 출력예제 1 3 내코드 function solution(m, arr) { let answ.. 2023. 10. 25.

티스토리툴바