1. 혼자공부하는 자바스크립트
2. 프로그래머스
3. 개인 과제 해설
1.
32강까지 듣고 문제 풀이 완료
2.
- 직각삼각형 출력하기
const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
let input = [];
rl.on('line', function (line) {
input = line.split(' ');
}).on('close', function () {
solution(Number(input[0]));
});
function solution(n) {
for(let i = 1; i <= n; i++) {
console.log('*'.repeat(i));
}
}readline
readline 모듈은 JavaScript에 내장된 모듈로, readable 스트림에서 한 줄씩 입출력을 처리할 수 있게 도와줌
인풋값을 숫자형변환해서 for문을 돌려서 *을 n개 찍어주는 방식
ㅤ
- n의 배수 고르기
function solution(n, numlist) {
return numlist.filter((el) => el%n === 0)
}ㅤ
- 문자열 정렬하기 (1)
function solution(my_string) {
return my_string.split("")
.filter((el) => !isNaN(el))
.map(Number)
.sort((a,b) => a-b)
}처음에는 필터와 소트만 사용했더니 결과값이 문자열 배열로 나와서 맵으로 숫자형변환 시켜 해결했다
ㅤ
- 가장 큰 수 찾기
function solution(array) {
var answer = [];
const sortedArray = array.slice().sort((a, b) => b - a);
const max = sortedArray[0];
answer.push(max, array.indexOf(max));
return answer;
}처음에는 소트와 푸시(인덱스오브)만 사용했더니 syntexError가 났다.
indexOf 메서드를 sort 배열에서 호출하도록 수정하였다. 같은 에러가 발생했다. 슬라이스를 활용해서 복사 한 배열을 사용해서 해결했다.
ㅤ
ㅤ
- 배열 회전시키기
function solution(numbers, direction) {
let answer = [];
if (direction === 'right') {
answer.push(numbers[numbers.length-1]);
for(let i=0; i < numbers.length-1; i++){
answer.push(numbers[i]);
}
} else {
for(let i=1; i < numbers.length; i++){
answer.push(numbers[i]);
}
answer.push(numbers[0]);
}
return answer;
}처음에는 for of 문을 활용해서 index 값을 밀어서 새로운 배열로 반환하려고 했지만 쉽지 않았다. 다시 생각해보다가 빈 배열에 오른쪽으로 미는 경우 마지막 인덱스부터 담고 인덱스 0부터 막전까지 담기, 왼쪽인 경우 인덱스 1부터 끝까지 담고 0을 맨끝에 담기 를 if문으로 구현해서 해결했다
3.
.prettierrc (저장했을 때 정렬 기준 파일) : 협업할때편하다
Html 파서 : 파싱하는 엔진
Reset.css : 브라우저마다 다른 css를 갖고있으므로 불필요한 고민 없이 어던 브라운저에서도 같은 걸 구현하기 위해 기본값들을
검색창에 reset.css 검색하면 맨위에 나옴 – 복붙
<form></form>
<ul> 순서가 없는 list
<li>: listCtrl +함수 실행명 -> 함수 정의로 바로 감
Fetch: 비동기 : js는 콜스택에 넣지 않고 옆으로 잠깐 빼놓고 우선순위가 뒤에 있으니깐 스코프 안에 있는 동기적 함수 처리한다음에 할려고 순서를 마지막으로 미룸. Async/await를 붙여서 쓰면 동기적 함수처럼 fetch가 넘어오기 전까지 then 아래로 넘어가지 않는다
Results에 바로 구조분해할당
관리자도구 elements ==$0 클릭하면 콘솔에 가져와서 접근할 수 있게됨
.reduce: 누적값을
Alert 이벤트를 붙이는거에 직접 넣음
Form 안에 쓰면 엔터, 검색버튼 둘다 가능
이미지: figure태그
바닐라자바스크립트에서는 addEventListner 권장 (onsubmit 핸들러는 별로. 가독성, 함수 순서)
변수명 언더바:snake_case 뱀이 기어다니는거 같음. camelCase 권장
폴더명이나 url에서는, class명도 kebab-case를 씀
Display grid:
Grid-template-columns: reapeat(auto-
<과제 초반 파일 디렉토리 잡는 순서>
!html
제목
Css, js 파일 분리 Src폴더:main.js/ assets폴더: /style폴더:css
레이아웃: 헤더/폼/ul 세개의 태그 박스로 잡음
Script head태그에 넣고 defer 명령어 입력(지연실행) -> js에서 ul태그 잡기(document.queryselector)
첫 번째 관심사: 영화 정보 받아와서 화면에 뿌리기 movie.js
두 번째 관심사: 영화검색 search.js
관심사별로 파일 구분하기
첫 번째 방법: html에서 main.js,movie.js,search.js 셋다 다운로드 받아오기 => 셋다 같은 스코프에 존재해서 에러 발생가능 => 안 좋음.
스코프 독립적으로 만드는 방법: defer type=module
Export : 변수나 함수앞에 써서 가져다 쓰라고 내놓기
Import: 가져오기 (다른 js파일에서)
변수명 쓰면 vscode가 자동완성해줌 tab 눌러서 가져오기(바닐라자바스크립트는 ./movie 뒤에 .js 파일 확장자까지 적어줘야 알아들음)
Type=”module” 에 지연실행 포함되어있어서 defer 필요x, 엄격모드도 포함되어있음
<js 로직>
Main.js
메인만 봐도 웹 프로그램 전체 구성 대충 알아볼수 있어야 함. 짧은 코드로
실행되면은 화면에 다 뿌려지겠구나
서치인풋에 .포커스 메서드 달아서 새로고침했을 때 자동커서위치
폼태그에 이벤트리스터로 제출이벤트 발생하면 뒤에함수 이벤트헨들러 실행 하겠구나~~~ 예측
영화 뿌리는 함수에 컨트롤로 이동하면 movie.js로 바로 이동
아이디가 카드리스트인 애는 ul태그구나
20번 복사해서 집어넣어서 뿌렸구나
배열에 map 메서드. 형태변환. 세개의 요소를 가지고 돌리면 세개의 요소를 가진 배열로.
이벤트핸들러는 매개변수로 이벤트라는 객체를 받을 수 있음
이벤트의 타겟: 이벤트(클릭)가 발생한 엘리먼트
브라우저가 사용자가 어딜 클릭했는지 다 알고있음
함수명을 쓰면 (이벤트)=>{handleclickcard(event)} 가 생략되있는것
카드마다 알럿 함수 할당해놓으면 메모리 낭비
이벤트 위임: 하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 해줍니다
자식한테 이벤트가 발생했는데 이벤트를 처리해주는건 부모인 것
브라우저:이벤트버블링:자식에서 이벤트발생하면 부모한테 클릭이벤트 발생했어요를 계속 거슬러 올라감. html태그까지도.위에 document에서 발생하는거나 마찬가치 처럼. 때문에 이벤트 위임이 가능
이벤트 타겟, 이벤트 커런트 타겟 이프문을 사용해서 부모요소 하나한테만 이벤트헨들러 하나 할당해놓고 자식요소들은 알아서~
안되는거 요청하면 무시하게끔. 안되는 조건 먼저 써주고 Return; 되는 조건 써주기 :
폼태그이벤트.프리벤트디폴트(): 브라우저는 특정태그에대해 기본동작을 갖고있는 경우가 많은데, 폼태그 같은 경우 기본동작으로 새로고침을 함. 이를 막아줌
