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

짧은 제주도 여행 이후, 만들고 싶은 것이 생겼다. 추후에는 이 아이디어를 웹 방식으로도 만들고 싶지만, 당장은 앱 방식이 필요하다. 사실 앱 만드는 방법은 전혀 모른다. 공부해 본 적이 없다. 그래도 관심은 있어 Flutter를 알고는 있었다. Flutter에서 만들면 안드로이드든 IOS든 플랫폼에 상관없이 배포가 가능하다. 그리고 UI 디자인에 상대적으로 노력을 덜 들여도 완성도 높은 디자인을 뽑을 수 있다(그렇게 들었다). Flutter도 모르고 Dart 언어도 모르지만 무작정 시작하게 된 이유이다. 설치부터, 환경설정부터 몇 가지 에러로 인해 고통받았다. 나의 미래(이놈의 망각 때문에)와 누군가의 미래가 시행착오를 겪지 않도록 그것들이 무엇이었으며, 어떻게 해결했는지 기록해 두고자 한다. flut..

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

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.json 파일 수정으로 Snippet 설정 Manage > User Snippets > html.json 위 json 파일에 아래의 코드를 추가하면, 코드가 포함된 태그를 자동 완성할 수 있다. body에 자동완성할 태그를 작성하되 \n(개행)이나 \t(탭)과 같은 이스케이프 문자를 적절히 사용해야 한다. // HTML5 lang = "ko" 코드 자동완성 "HTML5 lang-en": { "prefix": "html5-ko", "body": [ "\n\n\t\n\t\n" ], "description": "HTML5 lang-ko" }, // ul-li 코드 자동완성 "ul-li": { "prefix": "ul-li", "body": ["\n\t\n"], "description": "ul-li"..

메시지 삭제에 인색한 JANDI ㅠ 회사에서 JANDI를 사용하는데 직원들과 개인적 대화도 하게된다. 정신줄 놓고 민감한 얘기까지 하다보면 재미도 있고 스트레스도 날려 버리지만, 흔적을 지울때가 문제다. 정신을 차리고 보면 오지게도 싸질러 놓았다! JANDI는 카톡 처럼 단번에 삭제하는 기능이 없다. 메시지를 한땀 한땀 찾아내 지워야 한다. 메시지 하나를 지울때 필요한 클릭 수는 3번. 파이썬으로 1번의 클릭으로 삭제하는 코드를 간단히 짜봤다. JANDI에 내가 쓴 메시지 삭제 프로그램 코드(mouse, pyautogui 활용) # JANDI 내가 쓴 메시지 삭제 프로그램 import mouse import pyautogui import time while True: if mouse.is_pressed(..

웹 접근성의 정의 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다. (출처: 위키백과) 웹 문서 설계 시 고려해야 할 이용자 유형 ○ 시각을 통해 정보를 인지할 수 없는 시각 장애가 있는 경우 ○ 청각을 통해 음향 정보를 인지하지 못하는 청각 장애가 있는 경우 ○ 신경계의 마비, 근골격계의 마비 또는 선천성 기형 등으로 신체의 움직임에 제한이 있는 지체 장애가 있는 경우 ○ 읽기나 문장 이해력이 떨어지는 언어 장애가 있는 경우 ○ 키보드나 마우스를 사용할 수 없는 장애가 있는 경우 ○ 시각, 청각 ..