본문 바로가기
반응형
[프로그래머스] 모의고사 | JavaScript 모의고사 1등은 누구? 수포자 삼인방이 모의고사를 본다. 이 삼인방은 수학 문제를 일정한 패턴을 가지고 전부 찍으려 한다. 그 패턴은 다음과 같다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지 정답이 순서대로 들어있는 배열 answers가 주어지고 가장 많은 문제를 맞힌 사람을 구하는 완전탐색 알고리즘 문제이다. 제한 조건은 다음과 같다. 시험은 최대 10,000 문제로 구성.. 2021. 4. 11.
[프로그래머스] K번째 수 | JavaScript K번째수 배열을 얼마나 잘 다루는지 보는 테스트이다. 다시 말해 배열의 인덱스, 순서 처리와 정렬 등을 할 수 있는지 보는 테스트인 것 같다. 배열 array의 i번째 숫자부터 j번째 숫자까지 자른 후 정렬했을 때, k번째에 있는 수를 구한다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]이다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]이다. 2에서 나온 배열의 3번째 숫자는 5이다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 .. 2021. 4. 11.
[React.js] 유튜브 API로 인기 동영상 리스트 뽑기 리액트로 유튜브 클론 프로젝트를 진행 중이다. 유튜브 API는 문서화가 엄청 잘 되어 있어서(테스트도 가능하다) 쉽게 할 수 있을 줄 알았는데 생각보다 안보이는 벽이 많았다. API 사용이 처음은 아니지만 Web API인 Fetch API는 처음 사용해봐서 정말 많이 헤맸다. 결국 강의를 통해 해결했고 이를 정리해봤다. 이번에도 개인 키가 필요하다. API 사용에는 항상 개인 키를 발급해야 되나 보다. 몇몇 보안이 강한 OPEN API는 다이렉트로 받아올 경우 서버 자체에서 거부하기 때문에 나도 겪어본 CORS 에러가 발생하는데 이 경우엔 우회하거나 자체적으로 프론트용 서버를 만들어서 해당 서버에서 받아와야 한다고 한다. 다행히 유튜브 API는 그럴 필요가 없다. 유튜브 API에 들어가서 하라는대로 단계.. 2021. 4. 8.
[프로그래머스] 체육복 | JavaScript 탐욕 알고리즘(greedy algorithm) 탐욕 알고리즘은 최적해를 구하는 데에 사용되는 근사적인 방법으로, 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각되는 것을 선택해 나가는 방식으로 진행하여 최종적인 해답에 도달한다. - 위키백과 탐욕 알고리즘의 정의를 보고 네비게이션이 생각이 났다. 아빠가 운전하는 차를 타고 가면서 카카오맵 네비를 쓴 적이 있는데 몇분 간격으로 실시간 교통정보와 경로를 불러오더라. 그걸 토대로 최적의 길과 다른 길로 가게 되면 얼마가 더 걸리는지도 알려준다. 체육복을 빌려줘 🏃🏻‍♂️ 체육시간이 다가오는데, 일부 학생들이 체육복을 도난을 당한 경우다. 다행히 여벌의 체육복을 가져온 학생들이 빌려주기로 한다. 학생들의 번호는 체격 순으로 매겨져 있으며 바로.. 2021. 4. 7.
PostCSS로 모듈화 사용하기 이젠 CSS도 모듈화를 한다..? 자바스크립트로 게임을 만들 때 js 파일을 모듈화 한 적이 있고 리액트도 컴포넌트별로 파일을 나눈다. 토이 프로젝트 수준인데도 불구하고 CSS를 작성할 때마다 조금만 스타일을 추가해도 코드 줄이 길어지고 주석을 추가하고, cmd+f로 클래스 이름을 찾는 나 자신을 보게 되었다. 그런 와중에 리액트를 배우면서 create-react-app으로 프로젝트를 하게 되었고 PostCSS가 기본 탑재 되어있단 것을 알게 되었다. 그럼 예제를 통해 이제 왜 CSS도 모듈화를 하는지 알아보자! 버튼은 두개로 하겠습니다. 근데 이제 서로 다른 스타일을 곁들인 import React from 'react'; import Button1 from './ components/button1'; .. 2021. 4. 4.
[프로그래머스] 신규아이디 추천 | JavaScript 신규아이디 추천 알고리즘 문제를 보고 바로 정규표현식이 생각이 났다. 드림코딩 정규표현식👏 처음엔 '이게 뭐지?' 싶은데 하다보면 쉽고 재미있다. 정규 표현식 연습 사이트👍 new_id가 주어지면 규칙에 맞는지 검사하고 규칙에 맞지 않으면 새로운 아이디를 추천해주는 알고리즘이다. id의 규칙은 다음과 같다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(\_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. 새로운 아이디를 추천해줄 경우 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.).. 2021. 4. 4.
[React.js] 프로젝트를 하며 배운 것들 습관 만들기 😤 결과물을 확인해보세요. 🧑🏻‍💻 그래서 제가 배운 것은요...🏃🏻‍♂️ 1. JSX 왜 써? JavaScript와 UI 개발(HTML)을 한 곳(컴포넌트)에서 프로그래밍 할 수 있다. HTML과 비슷한 문법, 협업에 용이 컴포넌트별로 분류하여 유지보수가 쉬움 2. State 컴포넌트 안에서 정의한 state 오브젝트(데이터를 관리하는 저장소라고 생각한다) state는 얕은 비교를 한다. 최상위 오브젝트의 참조값이 변하지 않으면 render 함수를 호출하지 않는다. setState 함수를 이용해서 새로운 상태의 오브젝트(업데이트 하고자 하는 상태 데이터)를 인자로 전달해 주어야 한다. setState 함수는 비동기 API이다. state 안의 데이터를 직접 수정하지 마! setState 함.. 2021. 4. 4.
반응형