반응형

2024/04 18

input 글(text) 안써지는 문제

## 01. 문제 상황 input 창을 눌러도 글이 작성이 안된다.  물론 value나, onChange를 이용해서 input 창에 사용자가 작성하는 글을 상태관리하는 코드를 완성했었다. (혹시 모르는 분들 위해 알고가기 쪽에 관련 코드 올려두겠습니당)그런데? 돋보기 아이콘 `IoSearch` 를 추가한 후에 focus가 안됐다. 그러니, 돋보기랑 관련 됐다고 생각했다.  그런데?  애매하게 저 input 창의 테두리를 클릭하면 focus가 된다. (아래 문제를 해결하면서 그 이유를 발견했다.) ###  알고 가기 1. input 창 값을 실시간으로 관리하는 법 1) onChange는 사용자가 입력하는 event를 감지할 수 있도록 돕는다. 2) value는 input 창에 들어가는 값이다. 만약 '1'..

프로그래머스: 문자열 압축 - javascript(반복문 관건)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/60057 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 풀이 힌트 01. 해당하는 s에서 단위가 될 수 있는건 1 ~ Math.ceil(s.length/2) 까지다. => 반복문을 통해 접근02. 해당하는 단위에 따라서 s를 slice를 통해 해당 idx에 해당하는 문자와 그 다음 문자를 구한다. 03. 두 문자를 비교해서 같다면, cnt+1 04. 두 문자를 비교해서 같지 않다면 지금까지 cnt랑 문자를 압축한걸 ..

프로그래머스: 거리두기 확인하기 - javascript(bfs, 규칙찾기)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/81302 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 풀이 힌트  01. places 장소를 반복문을 돌면서 하나의 대기실씩 판단한다.02. 하나의 대기실에서 사람을 'P' 사람을 찾는다. 03. 그 사람의 '상, 하, 좌, 우' 를 살핀다.- 만약 사람이라면 바로 `안전하지 않음`- 만약 파티션이라면 `안전함` - 만약 책상이라면 그 책상 상하좌우를 한번 더 살펴봐야 함.     만약 책상의 상하좌우에  -- 사람이 있다면, `안전하지 ..

프로그래머스: 행렬 테두리 회전하기- javascript(그래프 회전)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/77485 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 01. 2차원 배열 생성 02. 그 배열에다가 숫자를 1부터 차례대로 삽입 03. 해당 사각형 범위에 있는 숫자들을 이동 순서(위, 오른쪽, 아래, 왼쪽)대로 stack에 넣는다 - 여기서 제일 작은 값을 구할 것. - 이 값들을 이용해서 arr값을 채울 것. 04. stack의 맨 뒤에 있는 값을 제일 앞으로 빼준다. (5번에서 arr 값 채울 건데 arr[x1][y1..

프로그래머스: 수식 최대화 - javascript(정규식, 숫자 계산)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/67257 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 정답 풀이 코드 function solution(expression) { //두 숫자와 연산자가 들어왔을 때 계산하는 함수 function calculator(a,b,oper) { if(oper === '+') return a+b if(oper === '-') return a-b else return a*b } //주어진 연산자의 우선순위 조합 const combinat..

프로그래머스: 메뉴 리뉴얼- javascript(재귀 이용한 조합, 객체)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 풀이 힌트 주문 목록과 코스 길이 배열을 기반으로, 각 주문에서 특정 길이의 메뉴 조합을 추출하여 가장 많이 주문된 메뉴 조합을 찾는 문제다. 주문에서 메뉴 조합 생성: 각 주문을 순회하며, 길이 n의 모든 메뉴 조합을 생성합니다. 이때 조합은 사전 순서로 정렬된 문자열로 변환합니다.조합의 빈도수 계산: 생성된 메뉴 조합을 Map에 저장하고, 빈도수를 계산합니다. 조합이 이미 존재하면..

프로그래머스: [1차]프렌즈4블록 - javascript(그래프 이동, concat)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/17679 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 풀이 힌트 그래프를 얼마나 잘 ~ 아는지 확인하는 문제였다.  - 주어진 board를 2차원 배열로 변경 - 2*2 가 다 똑같은 블록인지 체크하기 - 2*2 인 블록은 0으로 채우기 - 위에 문자가 있는 블록이고, 아래 빈 블록이면 문자 블록을 내려주기 .  문제 풀이 코드 function solution(m, n, board) { board = board.map(v => v...

프로그래머스: [3차]파일명 정렬 - javascript(정규식 끝판왕)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/17686 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 풀이 힌트- 파일명을 나누기 세 부분으로 - 그래서 head 기준으로 순서 정하고 (사전순)- number 순으로 순서 정하고 (앞 0 빼고, 숫자 크기 오름차순)- 그마저도 같을 때 기존 순서 유지  정답 풀이 코드 function solution(files) { return files.sort((a, b) => { // a와 b의 head 부분을 정규 표현식을 사용..

프로그래머스: 오픈채팅방 - javascript(replace, Map, switch)

문제 출처 https://school.programmers.co.kr/learn/courses/30/lessons/42888 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 힌트 문제 풀이 코드 function solution(record) { const answer = []; const userInfo = {}; //userInfo를 {} 객체로 생성하여 이름과 값 쌍을로 구성 for (let i = 0; i < record.length; i++) { const [command, uid, nickname] = record[i].split(" "..

반응형