전체 글 (52) 썸네일형 리스트형 시멘틱 마크업이란? 시멘틱 마크업이란? Semantic은 '의미론'이라는 뜻입니다. HTML을 시멘틱하게 마크업한다는 것은 의미론적인 요소를 사용하여 문서를 만든다는 것을 의미합니다. 단순히 div와 span으로 이루어진 문서가 아니라 의미를 가진 태그 요소를 사용해 문서를 만드는 것입니다. 의미론적인 요소들 의미 : 재사용할 수 있는 구획을 나타냄. 예제 : 게시판, 블로그 글, 뉴스 기사 등 의미 : 문서의 주요 내용과 간접적으로 연관된 부분 예제 : 사이드바, 광고 의미 : '열림'상태일 때만 내부 정보를 보여주는 위젯 예제 : summary와 함께 쓰임 의미 : 디테일 요소의 제목 역할 예제 : details 자식으로 상세요소가 열리기 위한 제목 역할 의미 : 부모 요소 콘텐츠의 설명, 범례 예제 : 이미지에 대한 .. display:none 과 visibility:hidden 의 차이 display:none 과 visibility:hidden 의 차이 이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있습니다. 하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 큰 차이점이 있습니다. visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그립니다. 요소를 완전히 없애고 싶은지, 혹은 차지하는 공간은 놔둔채로 사용자 눈에서만 보이지 않고 싶은지에 따라 구분에서 사용하면 됩니다. 아래 예시에서, 버튼을 눌러 차이점을 확인해 보세요. See the Pen xxgJqNJ by leepro (@leepro225) on CodePen. 정리 display:none 은 렌더 트리에서 없어짐 vs visibility:hidden은 렌더 트리에 .. 성공하는 사람들 성공하는 사람들은 자기의 부족함을 인정하고, 부딪히고 깨지면서 성장해 나간다. 반대의 사람들은 상처받지 않기 위해 도전하지 않고, 가능성이 있는 상태에 머문다. 영원히. git 명령어 정리 터미널에 깃이 설치되어 있는 지 확인 git --version window terminer 추천 : cmder git 관련 모든 환경설정 파일 리스트 git config --list 이 파일을 열어 편집하고 싶다면 git config --global -e 현재 경로에 있는 파일을 에디터로 열기 // 에디터에서 설정해줘야함. code . git config --global core.eitor "code" // 문서를 닫을 때까지 터미널 비활성화 git config --global core.eitor "code --wait" 사용자 설정하기 git config --global user.name "haha" git config --global user.email "hoho@gmail.com" git confi.. 알고리즘 필수 개념과 메서드 (프로그래머스 레벨 1) 해시 알고리즘(Hash Algorithm) 해시는 Key-value 쌍으로 데이터를 저장하는 자료구조입니다. key-value를 이용해 어떤 것과 다른 것 사이의 관계를 모형화할 수 있고, 중복을 막을 수 있습니다. 평균적인 경우 해시 테이블은 모든 항목에 대해 O(1)시간(상수 시간)이 걸립니다. 이는 해시 테이블의 크기에 상관없이 항상 똑같은 시간이 걸린다는 의미로, 해시 테이블에서 무언가를 찾을 때 굉장히 빠릅니다. 알고리즘 테스트에서는 해시를 이용하면 더 효율적으로 해결할 수 있는 문제들을 제시합니다. // Object.keys() 오브젝트의 key를 배열로 가져오기 const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object... 프론트엔드 개발자 테스트 과제형 주요 포인트 - HTML, CSS 기본적인 사용 ex) 미디어쿼리, 시멘틱 태그의 사용, 기능 작동 UI(클릭 시 사라진다 같은) - UI 기능 구현 ex) 로딩 시, 실패 시 UI lazy load, 무한 스크롤, 슬라이더, 자동 롤링 배너, 팝업, 각종 이벤트 - 구조화, 모듈화 ex) ES6 module 형태로 프로젝트 구조화, - api ex) 라이브러리를 사용하지 않고 비동기로 백엔드에 데이터를 요청하고, 요청에 대한 처리 [JS] JSON.stringify() 와 JSON.parse() 값이나 객체를 JSON 문자열로 변환하는 JSON.stringify() JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환하는 ES6 문법입니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다. 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다. 열거 불가능한 속성들은 무시된다 console.log(JSON.stringify({ x: 5, y: 6 })); // expected output: "{"x":5,"y":6}" // undefined, 함수, 심볼(symbol)은.. [JS] for/while/switch문 break와 continue 차이 그리고 label for/while/switch문을 바로 빠져 나가는 break break 문은 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다. let i = 0; let text = ''; while (i < 6) { if (i === 3) { break; } text = text + i; } // expected output: '012' break 문은 프로그램이 label 달린 문에서 빠져나오게 하는 선택사항 label을 포함합니다. break 문은 참조되는 label 내에 중첩되어야 합니다. label 달린 문은 어떤 block 문이든 될 수 있습니다. 꼭, loop 문을 달 필요가 없습니다. outer_block: { inner_block: { conso.. 성능 최적화를 위해 고려해야 할 점(feat. 스크립트 태그의 위치는?) 사용하지 않는 CSS를 제거하고, 미디어쿼리를 사용해 CSS를 간단하게 유지하자. 브라우저는 CSSOM이 생성될 때까지 렌더링을 차단합니다. CSS가 없는 페이지는 상대적으로 사용성이 떨어지므로, DOM과 CSSOM이 모두 만들어질 때까지 렌더링을 차단하는 것입니다. 미디어 쿼리나 미디어 유형을 사용해 사용자가 필요한 CSS만 렌더링 되도록하면 성능을 향상시킬 수 있습니다. 불필요한 자바스크립트를 제거하고, 스크립트 태그를 바디를 닫는 태그 앞에 적자. 자바스크립트는 DOM과 CSSOM을 수정할 수 있습니다. 따라서 브라우저는 스크립트가 무엇을 수정할지 모르기 때문에 스크립트 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에 제어권한을 넘깁니다. 자바스크립트 엔진의 실행이 완료된 후 브라.. 웹브라우저 렌더링 원리 브라우저는 어떻게 렌더링할까? 웹사이트가 어떻게 우리 눈앞에 오는지는 지지난번 포스팅에서 살펴보았습니다. 이번에는 웹브라우저가 서버에서 받은 자원을 어떻게 렌더링해서 우리에게 보여주는지 살펴보겠습니다. 브라우저의 구성 요소 User Interface : 사용자의 눈에 보이고, 사용자가 브라우저를 컨트롤 할 수 있는 인터페이스. 예를 들면, 새로고침 버튼, 주소입력창, 뒤로가기 버튼 등이 있습니다. Browser engine : 사용자 인터페이스와 렌더링엔진 사이의 동작을 컨트롤합니다. 예를 들어, 사용자가 주소창에 URL을 입력하고 엔터를 누르면, 해당 요청을 Redering engine에 전달합니다. Rendering engine : 요청받은 내용을 Networking을 이용해 server에 요청하고,.. 뷰 라이프사이클이란? life cycle, 인스턴스의 생명 주기 vue 라이프사이클이란 vue의 인스턴스가 생성된 순간부터 종료될 때까지의 순환되는 주기를 말한다. 인스턴스는 이 과정에서 다양한 단계를 가지고, 개발자는 이를 이용해 화면과 데이터를 컨트롤 한다. 따라서 생명 주기 단계 마다 어떤 일들이 일어나는 지 이해하고 개발하는 것이 중요하다. 라이프사이클 단계 마다 메서드를 사용해 개발자가 원하는 커스텀 로직을 수행할 수 있기 때문에 vue는 따로 Controller를 가지고 있지 않다. 그림으로 보는 라이프사이클 new Vue()뷰 인스턴스 생성 Init Events & Lifecycle이벤트와 라이프사이클 초기화 ① beforeCreate인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자 설정 전에 동기식으로 .. 자바스크립트와 브라우저의 관계 동적인 웹사이트를 위한 언어의 탄생 넷스케이프 브라우저는 모자이크 브라우저에 비하면 이미지가 들어가 조금 더 사용자들에게 fancy한 느낌을 주었지만, 여전히 갈증을 느낀 Marc Andereeson은 웹사이트를 더욱 동적으로 만들고자 했다. 이에 프로그래밍 언어를 브라우저에 추가하고자, Brendan Eich를 영입해 sheme script를 변형해 새로운 언어를 만들었다. 짧은 시간안에 Mocha(1994년)라는 언어를 개발하고 추후 LiveScript로 이름을 바꾼다. 넷스케이프 브라우저 안에 LiveSctipt Interpreter 엔진을 탑재해 내놓게 되고, 이로서 개발자들이 LiveScript를 배워 코드를 작성하면 넷스케이프 브라우저가 해석해 DOM을 조작하는 등의 동적 브라우저를 만들 수 .. 웹브라우저란? 웹브라우저란 웹페이지를 보여주는 창문이다. 이 한 문장으로 비개발자에게는 웹브라우저를 간단 명료하게 설명해 줄 수 있을 것 같다. 모든 웹페이지는 브라우저라는 창을 통해서만 볼 수 있고, 크롬·파이어폭스·오페라 등등 은 각기 다른 기능을 가진 창틀에 해당한다. 웹브라우저는 웹페이지를 다운 받아 렌더링해 사용자에게 보여주는 역할을 한다. 프론트엔드 개발자라면, 다양한 회사들이 만들어낸 웹브라우저가 각기 다른 기능을 가진 창틀이라는 점에 주목해야 한다. 현재는 브라우저들이 웹표준을 지키고자 하여 호환성이 많이 좋아졌지만, 왜 저마다 브라우저가 다르게 보이는 지 알고, 클라이언트를 개발해야만 서로 다른 창틀을 이용하는 사람들에게 내 제품을 완성도 있게 보여줄 수 있다. 브라우저가 작동하는 깊은 원리를 배우기에.. html 특수문자 코드 마크업 하다보면 자주 사용하는 html 특수문자 코드 HTML 마크업을 하다보면 '' 같은 특수문자 사용이 필요하다. HTML 마크업을 위해 이미 예약된 문자들(ex. 태그를 위한 ''), 키보드로 표시할 수 없는 문자(ex. ⓒ, ∞ 등)를 표현하기 위해 엔티티 코드를 사용한다. 아래는 개발자들이 자주 사용하는 엔티티 코드이다. 유니 코드 문자 이름 상징 > 보다 큰 / / 삭감 " " 인용 ' ' 아포스트로피 & & 앰퍼샌드 © © 저작권 ® ® 등록 상표 ° ° 정도 « « 왼쪽을 가리키는 이중 각도 » » 오른쪽을 가리키는 이중 각도 공백 공백 정리 모든 HTML 문자 참조 목록은 World Wide Web Consortium에서 관리한다. 자료 출처 [HTML Character .. ES11 자주 사용하는 문법 정리 옵셔널 체이닝 연산자(Optional chaining) ?. 는 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값을 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.l.. 이전 1 2 3 4 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
