징이의 기록장

개발용 브라우저로 크롬을 사용할 경우 디버깅을 위해 개발자 도구를 활용하는 방법 3가지 정리해 봤다. 1. Sources 소스보기 개발자 도구 중 Sources 탭은 웹페이지에 포함된 모든 리소스(css, javascript, 이미지 등)를 열어볼 수 있는 기능 탭이다. 도메인별로 리소스를 확인할 수 있다. 리소스 보기는 도메인 별로 구분해서 찾기에 어렵고 불편할 수 있다. 이럴 경우 단축키 ctrl+P 를 눌러 검색창에 찾는 파일의 이름을 쉽게 찾을 수 있다. + 압축파일을 확인할 경우 미니마이즈(Minimized)화 된 파일을 포매팅(Formatting)해서 보기 미니마이즈화 된 파일 소스 상단에 "Pretty-print" 또는 소스 하단 { } 버튼 클릭하면 압축을 풀어 쉽게 소스를 확인할 수 있다..

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요! [사진] “웹팩은 팀에 www.inflearn.com 3. 외부 패키지를 관리하는 방법 1. CDN을 이용한 방법 CDN으로 외부 패키지를 가져오면 간단하지만 가져온 라이브러리에 이상이 있거나 제대로 불려 오지 않는다면 우리가 만든 애플리케이션에도 문제가 생길 수 있다. 2. 직접 다운로드하는 방법 우리 프로젝트 폴더에 직접 다운로드 받아 사용하면 장애와 독립적으로 사용할 수 있다. 하지만 라이브러리는 계속 업데이트될 것이고 그때마다 ..

프론트엔드 공부하면서 node, npm, 웹펙 등을 꼭 접하게 되지만 뭔지 모르고 하라고 하니까... 따라하는 경우가 많았다. 그런데 마침 회사에서 인프런 강의를 지원해줘서 좋은 강의를 수강할 수 있게 되었다. 배딜의 민족 프론트엔드 개발자이신 김정환님의 강의를 수강하며 정리해보았다. 1. 강의 소개 강의 제목 : 프론트엔드 개발환경의 이해와 실습 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의 이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요! [사진] “웹팩은 팀에 www.inflearn.com 강의 내용 : 2. 프로젝트 생성 ..

스크린 리더기란❔ 화면을 볼 수 없는 시각장애인들이 컴퓨터를 사용할 수 있도록 화면에 나타나는 정보를 음성으로 출력해주고 도움을 주는 보조기구이다. 화면의 변화를 자동으로 들려주거나 원하는 곳을 다시 읽어주기도 하며 별도의 정보를 호출에 음성으로 들을 수도 있다. 웹접근성을 염두해 두고 제작된 페이지라면 시각장애인들도 일반 사용자와 동등한 수준으로 웹 서핑을 즐길 수 있다. NVDA(NonVisual Desktop Access) 마이크로소프트 윈도우용 무료 오픈소스 스크린 리더로 54개국어가 지원된다. NVDA는 음성과 점자를 지원하여 시각장애를 가진 사용자가 윈도우 운영체제 및 그 밖의 다양한 응용 프로그램을 사용할 수 있도록 한다. NVDA 사용법 1. 설치하기 NV Access(바로가기)에 접속해 ..

쓰면서 이해하는 props와 state😀 Props Immutable Data , 즉 변하지 않는 데이터이다. 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 때 사용한다. props는 상위 컴포넌트에서 의 형태로 사용한다. props를 사용하면 하위 컴포넌트에서 {this.props.props 이름}으로 작성하면 된다. 이해한 대로 적어보자면.. 상위 컴포넌트가 넘겨주는 props를 자식 컴포넌트가 사용하니까 'this.props.props값'이 있는 컴포넌트가 자식 컴포넌트이다. this.props.children❔ 하위 컴포넌트로 감싸진 값이 props.children의 값으로 들어간다. 예) 여기 있는 값이 children이다. defaultProps를 지정할때는 컴포넌트 선언이 ..

#1에 이어서 스타뚜 8. 검색창에 키워드 입력 후 삭제 버튼 클릭 시 초점이 초기화됨 이슈 검색창에 키워드 입력된 상태에서 삭제 버튼 클릭 시, 초점이 초기화되어 스크린 리더 사용자가 웹페이지를 처음부터 다시 탐색해야 하는 이슈가 있었다. 해결방안 검색어가 삭제되면 검색어 입력란으로 포커스를 보내주었다. var resetSearchText = function() { // . . . $('#txtSearch').val(''); $('.form__input-search').focus(); } 9. 탭키를 눌러 이동시 어떤 라디오 버튼인지 확인할 수 없음 이슈 편집창과 라디오 버튼은 폼 컨트롤이기 때문에 Tab키로 이동하는 경우가 많다. 그런데 현재 운영 사이트는 탭키를 눌렀을 때 라디오 버튼의 레이블은 읽..

웹 접근성 관련 업무를 맡아 작업한 것을 정리해 보았다. 피드백이 오면 업데이트할 예정이다. 시멘틱 마크업하여 해결되면 좋겠지만 프로젝트를 진행하다보면 기획단계와 디자인적인 레이아웃, 어찌할 수 없는 어떤..사정(?)으로 인한 웹 접근성 이슈들이 생긴다. 마크업으로 해결 할 수 없는 부분들은 WAI-ARIA를 잘 사용하여 사용자들이 더 나은 경험을 할 수 있도록 하는게 중요하다. 1. 페이지 타이틀을 직관적으로 변경 이슈 여러 페이지 타이틀의 타이틀이 동일하여 직관적이지 못하였다. 해결방안 태그 안에 들어가는 타이틀은 그 문서를 가장 잘 나타내는 주제로 작성해야 한다. 타이틀은 문서 엔진 최적화(search engine optimization, SEO)에 있어서 가장 큰 비중을 차지하고 있다. 웹 문서를..

HTMLCollection? 문서내에 순서대로 정렬된 노드의 컬렉션이다. 가장 쉽게 HTMLCollection을 얻을 수 있는 방법은 엘레먼트의 children 프로퍼티에 접근하는 것이다. console.log(document.body.children); //HTMLCollection(4) [button.modal-toggle, div.modal, div.modal-overlay, script] children과 childNodes의 차이점은 뭘까..? childNodes 현재 노드의 자식 노드가 포함된 Nodelist를 반환한다. 주석과 줄바꿈 같은 비요소 노드까지 출력한다. console.log(document.body.childNodes); //NodeList(8) [text, button.moda..