자바스크립트 깔끔한 코딩을 위한 필수 개념

 하나의 function에는 하나의 역할만!! 한 사람은 하나의 역할만 한다. 식당에서 홀은 홀 담당, 주방은 주방 담당인 것처럼 코딩에서 하나의 함수는 하나의 역할만 하게 만드는 것이 중요하다. 그래야 재사용 가능하고, 수정이 용이한 코드를 만들어낼 수 있다. 예제 Example 수정 전 showPrimes ( 20 ) ; function showPrimes ( limit ) { for ( let num = 2 ; num <= limit ; num ++ ) { let isPrime = true ; for ( let factor = 2 ; factor < num ; factor ++ ) { if ( num % factor === 0 ) { isPrime = false ; break ; } } if ( isPrime ) console . log ( num ) ; } } 수정 전 showPrimes 함수에는 2부터 limit까지 숫자를 반복해서 소수이면 출력하는 역할과 들어온 숫자가 소수인지 판단하는 역할, 총 2가지의 역할이 있었다. 이는 가독성이 좋지 못한 코드다. 수정 후 showPrimes ( 20 ) ; function showPrimes ( limit ) { for ( let num = 2 ; num <= limit ; num ++ ) { if ( isPrime ( num )) console . log ( num ) ; } } function isPrime ( num ) { for ( let factor = 2 ; factor < num ; factor ++ ) { if ( num % factor === 0 ) { return false ; } return true ; } ...

자바스크립트 if문 더 간결하게 쓰는 방법, 들여쓰기(indentation) 생략

자바스크립트 if문 더 간결하게 쓰는 방법 들여쓰기 생략하기 첫 글자에 들여쓰기를 하면 모니터로 볼 수 있는 화면이 그만큼 작아지기 때문에 보기 힘들다. 이 때 indentation (들여쓰기)를 생략해주면 좋다. #1 if (수정 전) function checkSpeed ( speed ) { const speedLimit = 70 ; const kmPerPoint = 5 ; if ( speed < speedLimit + kmPerPoint ) console . log ( ' Ok ' ) ; else { const points = Math . floor ( ( speed - speedLimit ) / kmPerPoint ) ; if ( points >= 12 ) console . log ( ' License suspended ' ) ; console . log ( ' Point: ' , points ) ; } } if와 else를 쓰면서 else 뒤로는 다 들여쓰기 가 적용되어 있다. const points = Math . floor ( ( speed - speedLimit ) / kmPerPoint ) ; if ( points >= 12 ) console . log ( ' License suspended ' ) ; console . log ( ' Point: ' , points ) ;

비전공자도 이해하는 자바스크립트 구조분해 할당 (Destructuring Assignment) feat. scrollTop, scrollHeight, clientHeight

이미지
 구조분해 할당과 scrollTop, scrollHeight, clientHeight 스크롤 높이에 따른 ProgressBar 를 구현하는 자바스크립트 튜토리얼 영상을 보던 중이었다. const { scrollTop, clientHeight, scrollHeight } = document.documentElement; 위 처럼 생긴 코드가 있었는데 변 수를 { 중괄호 } 로 감싼 채로 선언하는 것을 본 적이 없어서 신기했다. 구조분해 할당이란다. (Destructuring Assignment) Destructuring Assignment 참고 사이트 느낀 바, 여러가지 객체를 한번에 선언하고 각각에 순서대로 하나씩 할당하는 것이었다. ex) const { a, b, c } = { 1, 2, 3 } // a = 1, b = 2, c = 3 (더 다양한 사용법이 있다.) 즉, 위의 코드는 아래와 같이 이해할 수 있겠다. 1) scrollTop = html 최상단부터 현재 보이는 화면의 상단까지 길이 (얼마나 내려왔는가) 2) clientHeight = html 높이 중 화면에 나타난 부분의 높이 (view port height) 3) scrollHeight = 화면이 보이지 않는 부분을 포함한 전체 html의 높이 const scrolled = scrollTop / (scrollHeight - clientHeight) * 100 (if) scrollTop = 1000, clientHeight = 1000, scrollHeight = 3000 전체 높이가 3000px, 뷰포트의 크기가 1000px인 웹사이트에서 1000px만큼 스크롤했을 때, scrolled는 (1000 / 3000 - 1000) * 100 = 50%가 된다. (if2) scrollTop = 2000, clientHeight = 1000, scrollHeight = 3000 스크롤을 최대로 내려도 clientHeight만큼은 남기 때문에 2000px이 최대이다. (2000 / 3000 - 1...

비전공자가 Chat GPT만 가지고 영작 연습 웹사이트 만들 수 있을까?

이미지
  GPT4로 영작 사이트 만들기 01. 개요 물어보기 - OOO한 웹사이트를 만들 예정이다. - 주 목표는 문장으로 영어를 공부하는 것이다. - MongoDB에 예문을 저장하고 불러올 것이다. (예시) - 데이터베이스에 있는 예문 중 하나를 랜덤으로 불러온다. (한국어) - 유저는 영작을 해야하며, 일치하면 넘어가고 아니면 다시 한다. - 힌트 버튼을 누르면 주어와 동사를 알려준다. (삭제) 어떻게 만들어야할지 상세하게 알려줘라! chatgpt 대화내용