코딩연습장

프로그래머스 - 대충 만든 자판 어떤 버튼을 반복해서 누르면 keymap의 각 요소대로 순서대로 나온다. (스마트폰 천지인 자판, 피쳐폰 자판)이때 targets의 각 요소마다 몇번의 자판누름이 필요할지 각각 배열에 넣어 리턴하는 함수를 만드는 것이다.다만, keymap 배열로 만들 수 없는 targets요소가 있다면, -1을 리턴해야한다.  처음엔 keymap의 요소를 모두 split시키고, 반복문에따라 targets의 각 요소를 split시켜 비교해 결과를 낼 생각이었다.하지만 코드를 작성하면서 이게 맞나 싶었다. keymap과 targets 배열의 요소가 각각 100개까지 가능했고, 각 원소의 길이도 100까지 가능했기 때문이다.비교하는 과정과 계속 split을 시켜야하는 부분에서 시간적으로 손해일..

이전에 만들었었던 todolist 관리 페이지를 만들고자 한다. 재활치료하는 느낌으로 리액트 props를 내려주고 state를 바꾸고하는 과정들을 연습해보고자하는 의미이다.CRA이후 추가한 라이브러리는 없으며, 기회가 된다면 TodoList를 저장할 firebase나 supabase를 사용해볼 생각이다. 현재까지 진행한 상황은 다음과 같다. 일단 페이지를 먼저 나누어 보았다.제일 위에 있는 Header부분Todo를 추가하기 위한 inputBox부분todo의 상태에 따라 다르게 저장하는 todoList부분 코드 작성을 시작하기 전 inputBox의 input과 inputBox, todoList에 반복되어 사용되는 button, todoList에 반복사용되는 todo, title, todo를 모아두는 tod..

학생의 수n / 체육복을 잃어버린 학생 목록 lost / 여벌의 체육복을 가지고있는 학생목록 reserve 가 인자로 들어온다.여벌의 체육복을 가진 학생의 번호 양옆으로만 체육복을 빌려줄 수 있다.체육복을 가진 학생만 체육수업을 들을 수 있다고 할 때, 가능한 최대의 수는 얼마인지 리턴하는 문제이다. 먼저 작성한 코드function solution(n, lost, reserve) { var answer = n; lost.sort((a,b) => a-b) reserve.sort((a,b) => a-b) let realLost = lost.filter((x) => !reserve.includes(x)) let realReserve = reserve.filter((x) => ..

해당 부분에서 todoArr.length로 만들어지는 id를 리팩토링 해보고자한다.코드의 변경이유는 다음과 같다.현재는 페이지에서 todoArr하나의 배열만 가지고 id를 관리하지만, 만약 두가지 이상의 배열을 가지고 각기 다른 리스트를 만들어 보여주어야 할 때에는 태그의 단순히 배열의 길이를 id로 가지는 태그가 겹칠 것이므로, id값을 생성하는 방식을 바꾸어야했다.  슬랙을 통해 튜터님께 질문드린 결과 crypto.randomUUID를 사용해보라고 추천해주셨다.따라서 해당 기능의 공식문서를 찾아 사용방법을 알아내, 리팩토링을 진행하였다.변수에 self.crypto.randomUUID()로 만들어낸 값을 담아 해당 변수를 사용하면 되는 것 이었다.function addTodoHandler() { ..

input에 할 일을 입력하고 추가 버튼을 누르면 아래 목록에 추가된다.각 목록에는 완료버튼, 삭제버튼이 존재하며 완료버튼을 누르면 해당 부분의 텍스트가 취소선 처리되고, 삭제를 누르면 해당 항목지 없어지는 페이지다. 먼저 틀을 만들었다. 투두 리스트 추가 밥 먹고 가볍게 산책하기 자바스크립트 책 읽기 먼저 완료와 삭제는 추후 구현하는 것으로 하고 추가부터 만들고자 하였다.어떻게 목록에 붙을것인지, 추가하는 모습은 어떻게 보일것인지에 대한 구현이다.  투..

두 정수가 주어질 때 공통으로 들어간 수로 만들 수 있는 가장 큰 정수를 리턴하는 문제이다.공통을 비교할 때 짝꿍의 형태로 같다면 양쪽에서 지워지는 형식이다. 먼저 작성한 코드function solution(X, Y) { var answer = ''; let sortX = X.split('').sort((a,b) => b-a).join('') let sortY = Y.split('').sort((a,b) => b-a).join('') let max = Math.max(sortX, sortY)+'' let min = Math.min(sortX, sortY)+'' do { if (min.length===0 || max.length === 0) { ..

const menuItems = [ { name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' }, { name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' }, { name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' }, { name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' }, { name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }];주어진 문제는 다음과 같다.menuItems 배열이 주어질 때, 각 요소의 description에 '고기'..

문제 해석aya, ye, woo, ma 네가지 단어로만 구성된 배열의 요소를 찾아내라.단, 네가지 단어 중 연속되어 반복되는 것이 포함되어있으면 안된다. ex) ayaaya / yeye/ woowoo / mama해당 조건을 만족하는 요소의 개수를 리턴하라 문제를 처음 이해하고 생각난 것은 네가지 문제를 포함하는 것을 판단한느 정규식이었다.하지만 정규식 사용에 익숙하지 않아 포기하였고, 반복문을 사용하여 판별하려 하였다. 처음 작성한 코드function solution(babbling) { var answer = 0; let arr = ['aya', 'ye', 'woo', 'ma'] for (let i = 0; i발음할 수 있는 단어들을 모아둔 arr 배열을 만들어주었다.반복문을 사용하여 ..

처음 작성한 코드function solution(number, limit, power) { var answer = 0; let arr = []; for (let i =1; ilimit ? answer+=power : answer+=pow } return answer;}아마 정답은 잘 나왔을 것이다. 테스트 코드도 성공했고, 코드실행도 완료는 되었지만, 몇가지가 시간초과로 실패하였다.시간복잡도가 O(N*N)이고, 문제코드 중 입력되는 값이 큰게 있어 시간이 너무 오래걸린 것으로 생각한다.약수를 구하는 방법을 바꿔야겠다. 두번째로 작성한 코드function solution(number, limit, power) { var answer = 0; for (let i =1; ..

기존에 리액트를 배울 때 처음에 했던 방식이 생각나지 않았다.styled-components를 사용하여 오랜기간 학습했고, 최종 프로젝트 때에도 같은 라이브러리를 사용하여 스타일 작업을 하였기 때문이다. 다시 해보면서 느낀점은 매우 불편하다는 것이다.각 컴포넌트마다 return하기 전 style을 미리 객체로 만들어두고, 태그에서 style값을 JSX형태로 준다.  여기서 불편했던 점은 각 스타일 요소마다 자동완성이 되지 않는다는 점이다. 예를들어 styled-components나 html의 style태그에서 작성할 때에는 padding, border-radius 등등 다양한 속성값을 입력할 때에도 자동완성 기능이 제공되어 빠르게 코드를 입력하거나 원하는 속성을 쉽게 얻어낼 수 있었는데, 리액트에서는 객..