코딩연습장

해당 부분에서 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 등등 다양한 속성값을 입력할 때에도 자동완성 기능이 제공되어 빠르게 코드를 입력하거나 원하는 속성을 쉽게 얻어낼 수 있었는데, 리액트에서는 객..

입력되는 숫자의 배열 중 세가지 숫자를 더하여 해당 수가 소수인 경우를 모두 더해 리턴하는 문제이다. 처음 문제를 봤을 때 세가지 수를 더했을 때 같은 수가 있으면 안된다는 생각으로3중 반복문을 사용하여 모든 가지수의 합을 배열화시키고, new Set()을 사용하여 중복된 수를 제거한 뒤중복수가 제거된 배열을 소수판별하여 리턴하는 형식으로 작성했다. 코드는 다음과 같다. 처음 작성한 코드function solution(nums) { var answer = 0; let sumNums = []; for (let i=0; i하지만 문제에는 중복된 수에대한 예외가 없었다. 단순히 '서로 다른 세가지 수를 더해 나온 수가 소수인지'가 제일 중요한 것이었기 때문에 테스트코드는 잘 작동하였으나..

1. 웹 브라우저를 설치한다. 크롬이 제일 점유율이 높으므로 크롬을 추천한다.https://www.google.co.kr/chrome/ Chrome 웹브라우저더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.www.google.com 2. 개발 툴을 설치한다. 언어에 따라 다르지만, 다양한 언어를 지원하는 vscode를 선택한다.https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Stu..

자바스크립트를 사용하여 페이지를 만들어 볼 것이다.페이지에 진입하면 게임 시작이 되지 않은 페이지만 아래와 같이 보이며, 숫자를 입력하는 칸, 게임 시작버튼, 게임 중 숫자를 제출하는 버튼 세가지가 있다. 숫자 기억 게임 숫자 자리 --> 시작 제출 시작 버튼을 누르면 화면에 1000~9999 범위의 숫자가 무작위로 하나 나타나며, 3초 뒤에 숫자가 사라진다.사용자가 숫자를 입력하고 제출 버튼을 누르면 정답의 유무를 출력한다.  숫자 기억 게임 ..