코딩연습장

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초 뒤에 숫자가 사라진다.사용자가 숫자를 입력하고 제출 버튼을 누르면 정답의 유무를 출력한다.  숫자 기억 게임 ..

처음 작성한 코드function solution(cards1, cards2, goal) { let answer = [true, true, true] console.log(answer.indexOf(false)) let arr = goal[0] == cards1[0] ? [...cards1].map((x,i) => cards1[i] === goal[i]) : [...cards2].map((x,i) => cards2[i] === goal[i]) let target = arr.indexOf(false) if (target === -1) { target = arr.length } let temp = goal[0] == cards1[0] ? [...cards1] ..