JavaScript 주요 포인트 #7 내장 객체 - Math 객체 Math 객체는 숫자 자료형만 지원하고, 수학적인 상수와 내장 함수를 가진 객체이다. 다른 객체와 달리 생성자가 아니다. round, ceil, floor, trunc, sign, pow, sqrt, abs, min, max, random 함수 ceil은 실무에서 "게시판 페이징시 총페이지 수 계산"을 위해 많이 사용한다. pow, sqrt, abs는 실무에서 많이 사용하지 않았다고 한다. random을 이용한 "범위 내 무작위 수를 반환하는 코드"는 유용하다. 이 코드를 이용해 가위바위보 게임을 간단히 만들어 본다. Math.random 이용한 가위바위보 게임 // Math.random 이용해 작성한 "범위 내 무작위 수를 반환하는 코드..

JavaScript 주요 포인트 #6 내장 객체 - Set 객체 Set 객체는 주로 중복값을 제거하기 위한 용도로 사용한다. 중복값 제거 1(오브젝트 이용) // 중복값 제거 1(오브젝트 이용) 위 코드는 오브젝트가 중복된 키를 가질 수 없다는 점을 이용해 중복값을 제거한 경우이다. if문을 사용하는 것 보다는 좋으나 set과 비교해 성능면에서 좋지 못한 코드이다. Set 객체가 없었을때 주로 사용하던 방식이다. 중복값 제거 2(Set 객체 이용) // 중복값 제거 2(Set 객체 이용) Set은 배열 처럼 데이터의 집합이지만 순서가 없고, 유일한 값을 가진다. Set 객체의 has, delete, clear 함수 // Set 객체의 has, delete, clear 함수 내장 객체 - Map 객체 Ma..

JavaScript 주요 포인트 #5 내장 객체 - Date 객체 자바스크립트에서 날짜와 시간을 다루는 객체이다. Date 생성자 / get 함수 / set 함수 시스템 시간은 개인 PC에서 조작 가능하다. 이는 심각한 문제가 될 수 있다. 따라서 실무에서는 서버에서 날짜 데이터를 가져오는 방식을 사용한다. 실무에서 get 함수는 많이 사용하나 set 함수는 쓸 일이 거의 없었다고 한다. 날짜 계산 함수 코드 오늘 날짜 기준으로 이전 날짜를 구하는 코드이다. 실무에서 많이 사용되는 코드이며, 이 코드를 복사해서 쓰면된다. 윤년도 고려하여 계산된다. 실무에서 날짜 조회 기능의 from ~ to에서 to는 기본적으로 오늘 날짜로 기본값 세팅한다. from의 경우는 담당자의 요구에 따라 일주일, 한 달 전 등..

JavaScript 주요 포인트 #4 내장 객체 - Array 객체 Array 객체는 실무에서 많이 사용하는 매우 중요한 객체이다. join join은 배열의 문자열을 하나의 문자열로 결합하는 기능으로서 실무에서 많이 사용한다. 아래의 코드는 좀 더 구체적인 예이다. 조회 음료 가격 많은 데이터를 다룰 때는 배열에 push한 후 join 함수를 이용해 문자열로 결합니다. 결합되는 양이 적을 때는 +=을 이용한 문자열 결합이 빠르지만, DB에서 데이터를 불러오는 경우라면 상황이 달라진다. 몇천에서 몇만 건이 넘어가는 데이터는 배열을 이용하는 것이 성능면에서 훨씬 유리하다. [그림 1]은 위 코드의 실행 결과이다. 조회 버튼을 누르면 데이터가 표시된다. pop / shift 실무에서는 shift를 pop 보..

JavaScript 주요 포인트 #3 여기에서는 조건문, 반복문, 함수, 내장 객체 String, Number를 다룬다. String 객체의 경우 "padStart / padEnd" 부터는 8차시에 이어서 다룬 내용을 추가하였다. 조건문 const d = new Date(); const day = d.getDay(); // getDay는 요일을 숫자 값으로 반환한다(일 ~ 토까지, 일요일은 0) switch (day) { case 0: dayName = "일요일"; break; case 1: dayName = "월요일"; break; case 2: dayName = "화요일"; break; case 3: dayName = "수요일"; break; case 4: dayName = "목요일"; break; ..

JavaScript 주요 포인트 #2 let person2 = { name: "홍길동", age: 22, tel: "010-0000-0000", isAdult: true, }; // 실무에서 주로 선언하는 방식이다. let person2 = new Object(); //이렇게도 선언 가능하지만 실무에서는 잘 쓰지 않는다. 위의 코드는 오브젝트(object)를 할당하는 예이다. 오브젝트는 매우 중요하다. 자바스크립트는 객체의 집합이다. 자바스크립트의 모든 것이 객체이다. 오브젝트 안에 오브젝트를 넣을 수 있다. let name1 = person.name; // person 오브젝트의 name 키에 접근 let name1 = person["name"]; // 위 코드와 동일한 기능 오브젝트의 키에 접근하는 ..

JavaScript 주요 포인트 #1 html 코드 내에서 자바스크립트의 위치가 중요하다. 실무에서는 사용자가 느끼는 체감 성능을 고려한다. 결론적으로 자바스크립트는 내에 작성하며, 내에서도 html 코드 작성 후 하단에 자바스크립트 코드를 작성한다. 만약 나 html 코드보다 자바스크립트 코드가 위에 위치하고 있다면, 자바스크립트 코드가 다 해석되고 난 이후에 html이 처리되기 때문에 사용자가 웹 화면을 보기 위해 오래 기다려야 하는 문제가 생길 수 있다. 물론 defer 속성을 주어 나중에 렌더링 되도록 할 수 있다. 하지만 의 하단 부에 작성하는 습관을 갖는 것이 더 좋다. 자바스크립트 개발 시에는 "개발자 도구(f12 키 입력으로 진입)"를 잘 활용해야 한다. 개발자 도구 사용의 이점은 다음과 ..

지난 17일, 바람 쐬러 제주도에 갔다. "제주도 사무실에 놀러(?) 오세요", 멘토님이 수업 중 지나가며 하셨던 말씀에 계획하게 된 짧은 여행이다. 나는 백종원의 골목식당에 나왔던 금악마을의 음식을 다 먹어보고 싶었고, 멘토님을 만나고 싶었다. 결론적으로 기대했던 것 이상의 만족스러운 여행이 되었다. 나는 개발자로의 전업을 꿈꾸고 있다. 이에 대한 멘토님의 몇 가지 조언을 들을 수 있었다. 개발분야가 블라인드 채용도 하는 등 배경보다 실력을 중요시 하지만 마흔을 넘긴 나이는 분명 허들로 작용한다. 그럼에도 불구하고 전업을 원한다면 크게 두 가지 접근 방법이 있다. 첫 번째, 그 동안의 실무 경험, 즉 도메인 경험을 최대한 강조하는 전략이다. 이것과 관련된 포트폴리오를 잘 준비해 마치 영업사원이 제품을 ..