JavaScript27 프로그래머스 코딩테스트 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 세팅하기 (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. 코드에 메모하는 법 - 주석(Comment) 주석은 코드 내에 작성하는 메모라고 생각하면 된다. 주석 처리된 부분은 프로그램이 해석하지 않는다. 사용자와 프로그램에겐 노출되지 않는 부분, 즉, 개발자들을 위한 장치인 것이다. 프로그램이 클 수록 코드를 알아보기가 어려워진다. 특히 협업하는 경우, 주석으로 다른 개발자들을 도와줄 수 있다. 다른 개발자뿐만 아니라, 자신에게도 마찬가지다. 예를 들어, 테스트 코드나 임시로 작성된 코드가 있을 때, 이걸 주석으로 알려주면 좀 더 빠르게 코드를 이해할 수 있을 것이다. 프로그래밍 언어마다 주석 처리하는 방법이 조금씩 다르다. 아래로 HTML, CSS, JavaScript, Java의 주석 처리 방법에 대해 정리하였다. 1. HTML 1) HTML은 다음과 같이 주석을 처리한다. 로 닫는다. 이 사이에 들어.. 2020. 1. 2. React에 대하여 프론트엔드 개발을 더 효율적이게 도와주는 라이브러리, React에 대해 알아보려 한다. 참고로 React 공식 문서를 보고, 좀 더 잘 이해하고자 블로그에 정리하는 것이다. React는 페이스북에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 컴포넌트 단위로 코드를 작성하여, UI를 구성한다. 1. React를 사용하는 이유 상태에 따른 뷰만 간단하게 설계하면 된다. 데이터가 변경될 때 변경되는 컴포넌트만 갱신하고 렌더링하기 때문에 효율적이다. (컴포넌트가 뭘 말하는 것인지는 사용하는 법에 있는 코드를 보면 좀 더 이해가 빠를 것 같다.) 이런 선언적 뷰는 코드를 알아보기 쉽고 디버그하기 쉽게 만들어준다. 또한, React는 컴포넌트 기반으로 개발된다. 이 컴포넌트를 조합하여.. 2019. 10. 29. 로컬 테스트 서버 Python의 SimpleHTTPServer 웹 브라우저에서 로컬 파일 경로로 파일을 열면, 비동기 요청으로 외부 데이터를 읽어올 수 없다. 웹 보안 때문에 다른 경로의 파일에 접근할 수 없다. 하지만 연습이나 테스트를 할 때는 어떻게 해야 할까? 간단하게 로컬 웹 서버로 실행하면 된다. 가장 쉬운 방법이 파이썬(Python)의 SimpleHTTPServer라고 한다. 리눅스, 맥 OS X 사용자라면 이미 시스템에 설치되어 있을 것이다. 윈도우 사용자는 따로 설치해야 한다. 1. Python 설치하기 먼저 Python 홈페이지로 가야 한다. 아래 Download 영역에 있는 Latest:Python 3.7.4(혹은 다른 숫자일 수도 있음) 링크를 클릭한다. 최신 버전 파이썬 다운로드 페이지로 이동한다. 만약 상단의 메뉴로 이동한다면, Downloa.. 2019. 10. 7. 파일 업로드 & 다운로드 파일을 업로드하고 다운로드하는 방법에 대해 알아보려고 한다. 1. 파일 업로드 1) HTML 파일 업로드는 form 데이터로 쉽게 업로드할 수 있다. HTML 태그를 다음과 같이 작성한다. 파일도 이렇게 input 태그로 데이터를 전송할 수 있다. (type은 file이다.) name으로 이름을 지정하면, 서버에선 이 이름으로 데이터를 얻을 것이다. accept는 전송 허용 가능한 파일의 타입을 지정하는 것이다. 예제 코드에서는 모든 이미지 파일을 허용하고 있다. 이런 식으로 이미지 파일 중 png, jpeg 확장자의 파일만 허용하겠다고 할 수도 있다. 콤마로 여러 타입을 지정할 수 있다. 참고로 accept 속성의 브라우저 지원 범위는 별로 좋지 않다. Can I use 사이트에서 더 자세한 내용을 확.. 2019. 9. 13. 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. 이전 1 2 3 다음
