JavaScript26 프로그래머스 코딩테스트 Lv.1 풀이 3 2023.12.31 로또의 최고 순위와 최저 순위 function solution(lottos, win_nums) { let miss = 0 let rank = 1 lottos.forEach((num, index) => { if (num === 0) { miss++ } if (!win_nums.includes(num) && rank < 6) { rank++ } }) return [Math.max(rank - miss, 1), rank]; } lottos에서 숫자가 0인 개수를 miss에 저장하고 민우가 적은 숫자가 틀릴 때마다 rank를 1씩 더함 (rank는 커질 수록 순위가 떨어짐, 최저 순위는 6이므로 6보다 작을 때만 더함) miss가 다 맞았다고 가정하면 최고 순위가 되므로 최고 순위는 rank.. 2024. 1. 11. 프로그래머스 코딩테스트 Lv.1 풀이 2 2023.12.22 이상한 문자 만들기 function solution(s) { const answer = s.split(' ').map((word) => { return word.split('').map((char, index) => { if (index % 2 === 0) { return char.toUpperCase() } return char.toLowerCase() }).join('') }).join(' ') return answer; } 문자열 s를 단어 단위로 자른 후, 각 단어들의 글자들의 index가 짝수면 대문자로(toUpperCase), 아니면 소문자로(toLowerCase) 바꾸고 다시 합쳐서 반환 삼항연산자로 더 간결하게 표현할 수 있었을 거 같아서 아쉬움 크기가 작은 부분문자열 .. 2024. 1. 11. 프로그래머스 코딩테스트 Lv.1 풀이 1 2023.12.11 짝수와 홀수 function solution(num) { const answer = num % 2 === 0 ? 'Even' : 'Odd' return answer; } 나머지를 구하는 % 연산자를 이용해 짝수, 홀수 구분함 문자열을 정수로 바꾸기 function solution(s) { return Number(s); } Number 생성자를 이용해 문자열을 숫자로 바꿈 평균 구하기 function solution(arr) { const total = arr.reduce((acc, curr) => acc + curr, 0) const answer = total / arr.length return answer; } reduce로 arr의 요소들을 모두 더한 후, arr의 개수만큼 나눔.. 2024. 1. 11. 정규표현식 모음 1. 문장 끝에 마침표 없어야 할 때 /[^\.]$/ 2. 숫자만 필요할 때 /^[0-9]+$/ 3. 소수 /^([0-9]+([.][0-9]*)?|[.][0-9]+)$/ 4. 영문, 한글만 필요할 때 /[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ 5. 우편번호 // 우편번호 /\d{5}/ // 구 우편번호 /\d{3}-\d{3}/ // 구/신 우편번호 모두 /(\d{3}-\d{3}|\d{5})/ 6. 휴대폰 번호 /01[01789]-\d{3,4}-\d{4}/ * 정규표현식 패턴 참고: 정규 표현식 - MDN * 정규표현식이란: 정규표현식(Regular Expression) 2021. 4. 16. React with TypeScript create-react-app으로 React+TypeScript 환경을 세팅하고 싶다면 npx create-react-app app-name --typescript 명령을 실행하면 된다. -끝- create-react-app 말고, 기존에 세팅해둔 프로젝트에 TypeScript를 추가하기 위해선 여러 패키지들을 추가로 설치해주어야 한다. TypeScript를 사용하기 위해 typescript, React와 관련된 타입 정의를 사용하기 위한 @types/react, @types/react-dom 패키지를 설치해준다. npm i typescript @types/react @types/react-dom @types/node @types/jest 자바스크립트 테스트 프레임워크 Jest를 위한 타입 정의가 포함된.. 2021. 1. 9. React 세팅하기 (without create-react-app) React 개발 환경 세팅하는 법! create-react-app을 사용한다. 처음부터 직접 세팅한다. create-react-app은 리액트 환경을 빠르게 세팅해주는 패키지이다. 공식으로 제공하는 기능이다. React 공식 홈페이지 Create React App에서 사용 방법을 알 수 있다. 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 강의나 구글링으로 React 세팅 방법을 찾아봤지만 대부분 1번 방법으로 React를 세팅하고 있었다. 그래도 React 공부할 겸 2번 방법을 선택했다. 여기 저기 열심히 찾아보며 겨우 세팅했다... 이제 열심히 세팅한 내용을 정리해보자! (window +.. 2021. 1. 2. React에 대하여 프론트엔드 개발을 더 효율적이게 도와주는 라이브러리, React에 대해 알아보려 한다. 참고로 React 공식 문서를 보고, 좀 더 잘 이해하고자 블로그에 정리하는 것이다. React는 페이스북에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 컴포넌트 단위로 코드를 작성하여, UI를 구성한다. 1. React를 사용하는 이유 상태에 따른 뷰만 간단하게 설계하면 된다. 데이터가 변경될 때 변경되는 컴포넌트만 갱신하고 렌더링하기 때문에 효율적이다. (컴포넌트가 뭘 말하는 것인지는 사용하는 법에 있는 코드를 보면 좀 더 이해가 빠를 것 같다.) 이런 선언적 뷰는 코드를 알아보기 쉽고 디버그하기 쉽게 만들어준다. 또한, React는 컴포넌트 기반으로 개발된다. 이 컴포넌트를 조합하여.. 2019. 10. 29. window.scrollTo를 이용하여 특정 위치로 이동시키기 홈페이지 중에 탭 메뉴를 클릭하면, 특정 위치로 스크롤바가 이동되면서 화면에 보여지는 것을 본 적 있을 것이다. scrollTo() 메서드로 이를 구현할 수 있다. window 객체의 scrollTo 메서드는 문서를 지정된 좌표로 스크롤해주는 기능을 한다. (window는 생략 가능) 1. window.scrollTo 메서드 문법 window.scrollTo()에는 두가지 사용법이 있다. 참고) MDN - Window.scrollTo() 1) window.scrollTo의 문법 중 첫번째는 다음과 같다. window.scrollTo(xpos, ypos) 파라미터로 주어진 xpos는 x좌표, 즉 가로 위치를 말하는 것이고, ypos는 y좌표, 즉 세로 위치를 말하는 것이다. (아래 이동하길 원하는 위치 알.. 2019. 9. 6. 정규표현식(Regular Expression) 정규표현식은 문자열의 특정 패턴을 찾을 수 있는 문법을 말한다. 정규표현식을 이용해 패턴에 맞는 문자열을 추출, 삭제, 치환 등 조작 할 수 있다. 보통 이메일, 주소, 전화번호 같은 일정한 규칙이 있는 데이터가 그 규칙에 맞는지 검증하고, textarea에 입력된 것 중 불필요한 입력값을 추출하고, 트랜스파일링, 개발 도구에서의 문자열 치환 등에 쓰인다. (트랜스파일링은 예전 버전의 브라우저를 지원하기 위해 해당 브라우저에 맞는 문법으로 변환시켜주는 것을 말한다. 개발 도구에서의 문자열 치환은 개발 도구에서 코드의 어떤 부분을 치환한다는 의미로 쓰여졌다.) 1. 정규표현식 기본 사용법 1) 숫자 하나 찾기 var result = "abc3zzz".match(/\d/)[0]; console.log(res.. 2019. 8. 22. 생성자 패턴 (new 키워드와 prototype 객체) 애플리케이션이 복잡해질수록 모듈화가 필요하다. 자바스크립트도 객체로 비슷한 속성과 행위를 묶어서 모듈화 할 수 있다. 이렇게 좀 더 객체지향적인 방법으로 표현하는 방법을 생성자(constructor) 패턴을 통해 이해해보자. 먼저, 자바스크립트의 객체는 객체 리터럴로 쉽게 표현할 수 있다. var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } 이러한 코드를 객체리터럴이라고 하는데, 이 healthObj의 형태를 가진 객체가 여러 개 필요할 때가 있다. name이 "개발자"이고, 운동을 한 시.. 2019. 8. 21. 이전 1 2 3 다음
