놀러와요 버그의 숲

문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습니다. clothe..

1. 첫번째 시도 -> 실패 function solution(s) { var answer = s .split(" ") .map((word) => word[0].toUpperCase() + word.substr(1)) .join(" "); return answer; } 2. 두번째 시도 -> 실패 테스트1에서 통과를 못했듯이, 일단 소문자로 모두 초기화(toLowerCase()이용)를 한 다음에 메서드를 사용하기로 했다. function solution(s) { var answer = s.toLowerCase() .split(" ") .map((word) => word[0].toUpperCase() + word.substr(1)) .join(" "); return answer; } 3. 세번째 시도 -> ..

아마 문자열과 관련이 되어있는 문제일 듯 해서 문자열 관련 메서드를 찾아보았다. 하단의 블로그를 참조하였다. https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-String-%EB%A9%94%EC%86%8C%EB%93%9C-%E2%9C%8F%EF%B8%8F-%EC%A0%95%EB%A6%AC [JS] 📚 자바스크립트 String 메소드 💯 총정리 자바스크립트 String 메소드 String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다 inpa.tistory.com 또한 문자열의 특정 문자 개수 세는 법을 찾았다. https://deeplify.dev/front..

오늘은 리드미를 작성해보려고 한다. 팀원들을 위해서 대략의 리드미 카테고리를 짜보려고 한다. 1. tree 구조 node modules 빼고 출력하기 tree -I node_modules 2. 깃허브 gif 파일 올리기 하단의 블로그 참조를 했다. https://onlydev.tistory.com/15 깃허브 README.md 파일에 이미지, gif 업로드(feat. VSCode) 코딩에 대한 감을 잃지 않기위해 토이 프로젝트들을 제 깃허브 README.md 파일에 올리려고 합니다. 이미지나 gif를 업로드하면 더 좋을 것 같아서 소소한 방법을 공유 해봅니다..! 1. 깃허브에 로그 onlydev.tistory.com 3. 깃 fetch 관련 CLI 중간에 커밋이 ahead 되었다고 나와있어서 하단의 C..

1. 리액트 useState를 이용한 input 관리 핵심은 onChangeInput이라는 onChange를 감지할 수 있는 속성을 넣어주고, userInput이라는 state안에 여러 정보들이 들어있으면, const nextUserInput = { ...userInput, [e.target.name] : e.target.value }; setUserInput (nextUserInput)을 해주는 것이다. 그리고 ... 스프레드 연산자를 이용해서 기존것을 복사를 해주어야하고, name이라는 속성도 input의 속성으로 넣어주어야 하는것을 잊지 않아야한다. 그리고 useCallback을 사용하여 userInput 값이 변할때만 인지하도록 하였다. const InputStudentNumber = () => ..

1. 개발 도중에 콘솔로그가 두번 찍히는 현상 발생 (GET, POST 요청 마찬가지) index.js 파일안에 있는 가 감싸져있어서 그렇다. 요렇게 만 남겨주면 말끔히 해결된다. StrictMode가 되어있으면 두번씩 렌더링이 되기 때문이다. 이는 리액트 쪽에서 다음 아래와 같은 문제들이 발생했을 때 도움을 주기 위해서라고 한다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 참고 블로그 https://velog.io/@hyes-y-tag/React-useEffect%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%..

1. 숫자로 표현된 것 요일로 변환 여기서 날짜를 달력에서 보내온 날짜와 요일 그대로 업데이트를 해야했다. const week = ['일', '월', '화', '수', '목', '금', '토']; const NowdayConvert = week[NowDay]; 이렇게 배열을 사용해서도 나타낼 수 있다. NowDay에는 숫자가 들어가는데, 이렇게 배열의 넘버링을 통해 요일을 불러올수 있다. 근데 뭔가 비효율적으로 한 느낌이라 useState를 써서 조금 더 효율적으로 할 수 있는 방법이 있는지 궁금하다. 2. Day.js에 대해서 알게되었다. 팀원 분 중 한분이 참조 블로그를 보내주셨다. https://jsikim1.tistory.com/196 day.js 사용 방법 - JavaScript 날짜 라이브러리..

Route 설정하기 initialRoute 프로퍼티는 앱의 시작점을 나타내는 route를 정의하고, routes 프로퍼티는 이용가능한 named route와 해당 route로 이동했을 때 빌드될 위젯을 정의한다. 참고로 home은 initialRoute랑 같기 때문에 둘이 동시에 쓰면 충돌한다. initialRoute를 쓰면 home은 쓰지 말자. String으로만 해버리면 조금이라도 스펠링이 틀릴 시에 앱이 충돌이 날 수 있기 때문에 변수 선언 해준것으로 바꾸어주었다. static을 변수 선언시에 써준 이유는 WelcomeScreen().id로 불러와주게 되면, 전체 Class가 더 불러와지기 때문에 메모리 효율에 있어서 별로 좋지 않다. static을 쓰게 되면 클래스내에서 딱 특정 property ..

1. styled-components props 전달하기 import React from 'react'; import styled from 'styled-components'; import { FaRegBell } from 'react-icons/fa'; import PropTypes from 'prop-types'; const ScheduleListItem = ({ scheduleData }) => { const { title, reservationTime, color } = scheduleData; return ( {title} {reservationTime} ); }; 이번에 styled-components에서 색상값을 props로 전달해서 처음 사용해보았다. (위에 코드에서 color props가..

1. propTypes를 설정안해줘서 생긴 eslint 에러 하단과 같은 에러가 생겼다. 'scheduleData' is missing in props validation eslint (react/prop-types) 하단의 코드처럼 propTypes를 설정해주었더니 괜찮아졌다. ScheduleListItem.propTypes = { scheduleData: PropTypes.shape({ title: PropTypes.string.isRequired, reservationTime: PropTypes.string.isRequired, }), }; 2. 코드에서 변수 선언을 함수보다 밑에 두었을 때 생긴 에러 Uncaught ReferenceError: Cannot access 'ScheduleListIt..