Web Front End

[Javascript] 코딩할 때 먼저 고민하면 좋을 10가지

프로젝트를 진행하고 코드리뷰를 받으면서 공통적으로 여러 번 받거나 다수에게 남겨진 코드리뷰 피드백을 정리해 보았다. 경험적으로 지키지 않아 좋지 않은 결과를 가져온 부분에 대해서도 작성했다. 다음 프로젝트에서는 잊지 않고 적용해 보기 위함이다. 1. env(환경변수) 활용하기 dotenv 라는 npm 라이브러리를 설치하고 프로젝트 루트에 .env 파일을 만들어 환경변수를 넣을 수 있다. 이를 활용하여 매직넘버를 줄이자. env에는 API 주소 등이 포함될 수 있다. 2. 커밋 단위를 작게작게 줄이자 함수 하나가 동작이 된다면 커밋을 날리는 습관을 들여 보자. 함수 = 하나의 기능으로 생각하고 함수가 완료되면 커밋을 보낸다면, 커밋 로그를 보다 자세하게 기록할 수 있다. 위의 이미지는 나의 일주일 동안 프..

Windows 10에 VirtualBox로 Ubuntu 18.04 설치하기

Windows 10에 VirtualBox로 Ubuntu 18.04 설치하기 윈도우에 우분투를 설치하기 위해서는 가상환경이 필요하다. 가상환경은 VirtualBox 외에도 Docker, VMWare, Parallels 등이 있다. 자신의 환경에 맞는 가상환경을 설치하면 된다. 나는 그 중 VirtualBox를 사용했다. 가상환경(VirtualBox) 설치하기 1. VirtualBox 설치파일 다운로드 VirtualBox 홈페이지 접속 - Download - Windows host 2. VirtualBox 설치 설치가 완료될 때까지 Next 클릭 중간에 Warning 메시지가 나와도 놀라지 말고 무시해도 된다. 3. 설치 완료 아래와 같은 페이지가 나온다면 설치가 완료된 것이다. 이제 우분투를 시작해 보자!..

clearTimeout이 사용되는 경우(Debouncing)

clearTimeout이란? setTimeout을 취소(초기화)시키는 메소드이다. 그럼 setTimeout이란? setTimeout(callbackFn, TIME); TIMEms 이후에 callbackFn이 실행되는 메소드이다. TIME을 1초로 설정한다면, 1초 뒤에 콜백함수가 실행되는 비동기 메소드이다. setTimeout에 clearTimeout이 꼭 필요할까? 결론부터 말하자면, 특별한 상황이 아니면 꼭 필요하지는 않다. 특정 시간만큼 반복해서 콜백함수를 실행하는 setInterval는 무한적으로 반복되기 때문에 중지하는 시점에서 clearTimeout을 해 줘야 한다. 하지만 한 번만 실행되는 setTimeout을 매번 clearTimeout 을 해 줄 필요는 없다. 그러면 어디에 쓰이는 거지?..

[한빛미디어] <나는 리뷰어다 2020> 도서 서평단 당첨

한빛미디어 도서 서평단 당첨 서평단 모집 글 무려 한 해 동안 한 달에 한 권씩 증정이다. 와우 비루한 블로그지만 당장 신청했다. 당첨 메일 요즘 딱 무슨 책을 읽을지 찾아보고 책에 목말라 있었는데 좋은 책을 많이 읽을 수 있을 것 같다, 읽으면서 느낀 점을 글로 잘 표현하는 연습도 해야겠다. 어떤 책이 리스트에 있을지도 궁금하고 여러모로 기대가 된다 😃

[러닝자바스크립트] 9장. 객체와 객체지향 프로그래밍

9장. 객체와 객체지향 프로그래밍 목차 프로퍼티 나열 객체지향 프로그래밍 다중 상속, 믹스인, 인터페이스 :one: 프로퍼티 나열 배열 vs 객체 비슷한 점: 컨테이너 다른 점 배열 객체 저장 값 *프로퍼티 인덱스 숫자형 문자열, 심볼 순서 있음 보장 안됨 프로퍼티: 키(문자열, 심볼) + 값 객체는 키를 통해 프로퍼티에 접근할 수 있음 프로퍼티 나열 방법 1: for...in 키가 심볼인 프로퍼티는 포함되지 않음 배열에도 사용할 수 있지만 좋은 방법은 아닌 이유 순서를 보장하지 않음 열거할 수 없는 프로퍼티의 존재 (length와 같은 배열 내의 프로퍼티 사용 불가) 프로토타입 상속한 프로퍼티도 나열함 hasOwnProperty() 메소드 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반..

[러닝자바스크립트] 5장. 표현식과 연산자

표현식 값이 되는 것. 대부분 연산자 표현식 표현식의 결과를 변수, 상수, 프로퍼티에 할당 가능. 연산자 우선순위 자바스크립트가 평가식을 표현하는 순서 연산자 값을 만드는 행동 단항 부정과 단항 플러스 자바스크립트에서는 10 % 3.6도 계산 가능함 const a = 5; const x = 3 ### ###a; // x = 8; const b = "5"; const y = 3 + +5; //y = 8; NaN(특별한 숫자형 값) 무엇과도 같지 않음 Nan === Nan; // false Nan == Nan; // false 산술 연산자 let x = 2; const r1 = x++ + x++; // 2 + 3 = 5 const r2 = ++x + ++x; // 5 + 6 = 11 const r3 = x+..