본문 바로가기

IT 개발85

[JavaScript] 조건문 switch 언제 사용하는지 + 개념정리 조건문에서 if를 사용할 때, else if를 여러 번 반복하는 코드를 작성해야 하는 상황 또는 정해진 데이터를 처리하는 경우에도 switch문을 사용하는 것이 효율적이며 가독성 측면에서도 좋다. switch문은 각 case에 맞는 값을 찾아 해당 case 문의 코드를 실행시킨다. 조건문 switch를 사용해보자! 여기서 a 변수에는 3이라는 값이 할당되어 있다. switch문을 이용하여 a변수값과 같은 값을 갖고 있는 case를 찾은 후, case문의 코드를 출력한다. 위의 예시는 조건이 3개밖에 없어서 if 조건문을 사용해도 좋지만 만약 조건이 점점 추가되는 상황이 생길 수 있거나, 그 이상의 조건들이 있다면 switch를 사용해 주는 게 좋다. 그리고 각 console.log 밑에 brack; 는 .. 2021. 7. 1.
javascript enter key 이벤트 처리 시, 한글 두 번 입력될때 (이벤트 두 번 발생) 최근에 미니 프로젝트로 shopping list를 만들기 시작하였다. + 버튼을 누르면 input에서 사용자가 입력한 텍스트가 그대로 입력되는 걸 구현하는 과정에서 마우스로 버튼을 클릭하는 것처럼 엔터키를 눌러도 똑같이 적용이 될 수 있도록 코드를 작성해봤다 input에 addEventListener로 keydown 이벤트를 주었다 여기서 if문 처리를 안 하면 정말 한 글자 입력하자마자 바로 이벤트가 적용돼버리니 (말 그대로 키 누르면 바로 이벤트가 일어남) if(e.key === "Enter") 처리를 해줘야 엔터키를 눌렀을 때 input에 원하는 이벤트가 발생된다. 코드를 작성하고 테스트하는데 분명 난 '우왕'을 입력했는데 갑자기 밑에 '왕'이 같이 나오고.. '오오'를 치면 또 이벤트가 다시 발생.. 2021. 6. 29.
엘리먼트의 위치 값을 알아내는 getBoundingClientRect()와 Math.random으로 랜덤한 숫자 만들기 자바스크립트 강의 들으면서 위치를 이용해서 함수를 만드는 상황이 많이 생긴다. 엘리먼트의 width, height 또는 위치 관련된 값을 가져오고 싶다면 getBoundingClientRect() 를 사용하여 정보를 얻어올 수 있다. Rect = element.getBoundingClientRect(); 여기서 Viewport는 사용자에게 보이는 화면이며 x,y가 (0,0)으로 좌측 상단을 기준으로 한다. getBoundingClientRect()를 Rect라는 변수에 먼저 할당하고 const x = Rect.width const y = Rect.height 으로 x,y 축 높이와 너비를 할당할 수 있다. function randomNum(min, max) { return Math.random() * (.. 2021. 6. 28.
[GIT & GITHUB] github 원격저장소에 Commit push하기 저번 git add, commit 했던 방법에 이어서이번 포스팅에선 local directory 에서 git remote repository 원격저장소로 보내는 방법에 대해 알아보자  우선 git commit -m 을 통해 커밋 메시지를 "add index.html"로 작성하여 commit 하였다그럼 커밋은 내 로컬 디렉토리에 저장이 된다  만약 현재 나의 branch가 master로 되어있다면git branch -M main을 통해서 현재 git의 메인브랜치 이름인 main 으로 변경한다원래 git 의 메인브랜치는 master였는데 인종차별 관련 이슈로 main으로 변경하였다 그리고 처음에 나의 로컬 디렉토리와 github 원격저장소가 연결이 안되어있으므로git remote add origin명령어를 .. 2021. 6. 27.
[드림코딩]자바스크립트 기초 정리 ⑩ 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs async await ? promise를 조금 더 간결하고 동기적으로 실행되는 것처럼 보이게 만들어준다 프로미스 체이닝(. then. then. then... catch)을 계속하면 코드가 난잡해질 수 있는데 여기에 간편한 API로 async await 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있도록 도와준다. 즉 깔끔하게 프로미스 사용이 가능하다! syntactic sugar : 기존에 존재하던 것 위에 간편하게 사용할 수 있도록 API를 이용하는 것 (ex. class) 여기 프로미스에서 resolve, reject 아무것도 호출하지 않았기 때문에 현재 프로미스 상태는 pending으로 남아있다 (결괏값도 없음) 꼭 resolve, reject로 완료를 해줘야 한다. 프.. 2021. 6. 25.
[드림코딩]자바스크립트 기초 정리 ⑨ 프로미스 Promise 개념 및 활용 Promise 프로미스란? 자바스크립트서 제공하는 비동기 간편하게 처리 가능하게 하는 오브젝트이다 정해진 장시간의 기능을 수행하고 정상적으로 수행됐다면 성공의 메시지와 처리된 결괏값 전달해주고 만약 예상치 못한 문제 발생하면 에러를 전달해준다 드림코딩에서 새로운 강의를 런치할때 미리 수강생을 받기로 했다 (이메일을 통해서 미리 등록받는 시스템) 그래서 한 사람이 등록을 완료하면 몇시간, 며칠 뒤 코스 오픈하면 바로 메일로 공지가 발송된다 이는 준비되기 전 미리 등록해놔서 수업이 완료되자마자 공지를 받은 것이다. 이미 오픈 된 뒤에 다른사람이 강의 신청하면 이미 수업이 오픈되어있어서 기다릴 필요 없이 바로 메일 공지를 받고 바로 수업에 참여가 가능하다. 콜백을 쓰지않고 프로미스 오브젝트를 통해 비동기 코드.. 2021. 6. 24.
반응형

티스토리툴바