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 키 입력으로 진입)"를 잘 활용해야 한다. 개발자 도구 사용의 이점은 다음과 ..

학습동기 최근 웹 프론트엔드 개발에 관심을 가지게 되었다. 프론트엔드 개발은 기본적으로 HTML, CSS, JavaScript 기술을 갖춰야 하고, React, Vue, Angular 와 같은 framework를 다룰 수 있어야 된단다. 또한 하이브리드 앱개발 framework인 React Native도 JavaScript 언어를 기반하고 있어 배워 두면 쓰임새가 많겠다 생각했다. 학습내용 1. 강의영상 https://youtu.be/hLhHFiwhRfA 2. 부트스트랩의 CSS, JS 가져오기 https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 j..