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

구정 연휴 직전, 피 말리던 집필이 완료되었다. 이제 개발자의 품격 멘토님께서 취합본을 출판사 비제이퍼블릭에 보내는 작업을 앞두고 있다. 출판사의 편집 작업이 진행되면 즉각적으로 대응해야 하는 일을 남겨두고 있지만 지금 마음은 홀가분하다! 스물여 명의 저자가 모여 작성한 글이다 보니 결 맞추기가 예삿일이 아닐 듯하다. 멘토님의 엄격하지만 유연한 스케줄 관리 덕분에 홀가분한 명절을 보내고 있지만, 한편으로는 취합에 대한 부담으로 명절을 보내셔야 하는 멘토님께 송구한 마음이다! 겁 없이 책 공동집필 프로젝트 신청서를 작성했던 작년 10월의 장면이 종종 떠 오른다. 한참 글을 작성하고 있을 때, 짜낼 글감이 없어 타이핑이 멈췄을 때, 구글링이며 이 책 저 책 살펴봐도 뭔 말인지 모를 때, 그러다가 시계가 새벽..

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

3차시 중반부터 4차시까지 CSS(Cascading Style Sheets)를 다루었다. 멘토님께서는 프론트엔트 개발자의 경우 CSS 학습의 1차 목표를 코드를 처음부터 직접 짜는 수준보다는 보고 이해하는 수준으로 맞추라고 하셨다. 실무에서는 웹퍼블리셔가 기본 작업을 해서 넘겨주기 때문이고, bootstrap의 도움을 받으면 되기 때문이다. 다른 주제이지만 수업 중 DB 테이블 설계 사례를 보여 주셨다. 예전에 근무했던 회사의 MES가 마리아 DB로 설계되어 있었는데 복잡한 테이블 들을 볼 수 있었다. 압도적인 복잡함이 아직도 인상적이다. 설계 방법이 궁금했는데, 이번 부트캠프 과정에서 다룬다고 하니 무척 기대된다. 멘토님은 테이블 설계에 있어서 도메인에 대한 지식이 매우 중요함을 강조하셨다. CSS 주..

1~4차시까지 HTML부터 CSS까지 배울 수 있었다(5차시에 CSS로 자소서 페이지를 만들어 보는 실습이 남아 있기는 하다). 1차시에는 VS Code와 Extension, GitHub Desktop, Node.js 등을 설치 및 세팅한 후 HTML의 기본적인 내용을 약간 다루었다. 그 내용은 "[개발자의품격][부트캠프][1기][1차시] HTML 주요 포인트"에서 간단히 정리하였다. HTML 주요 포인트 2차시부터 본격적으로 HTML 속으로 들어갔다. 텍스트 포맷팅 관련 태그들 중 과 가 있다. 둘 다 이탤릭체로 텍스트를 보여준다. 하지만 용도에는 완전한 차이가 있다. 사람의 눈과 달리 컴퓨터(검색엔진, 스크린 리더)는 이를 명확히 구분한다. 멘토님은 이 점을 매우 강조하셨다(이러한 강조는 CSS가 끝..

HTML 주요 포인트 이 페이지에 정리된 내용은 HTML 첫번째 수업의 전체가 아닌 일부분에 해당한다. 개인적으로 다시보고 기억하고 싶은 주요 포인트만 담았다. 여기에는 포함되어 있지 않지만 GitHub Desktop과 VS Code를 이용한 Git관리는 매우 유용했다. Git을 처음 접했을때 CLI에서 따라했던 기억이 있어 난해하게 여겨졌었는데, GUI에서 쉽게 커밋했다! tag 와 element 는 tag이다. tag를 이용해서 요소(element)를 만든다. tag는 블록 요소(block element)와 인라인 요소(inline element)로 구분된다. empty element empty element : 요소를 가지고 있지 않으므로, 시작 tag만 있고 종료 tag는 없다. img tag에서..