멋쟁이 사자처럼 프론트엔드 스쿨 어느덧 10주차에 이르렀다. 자바스크립트 프로젝트를 앞두고 마지막으로 비동기 v통신을 중심적으로 배우고 있는데, 그에 대한 정리를 해보고자 한다. 동기 통신 과 비동기 통신 Ajax를 다루기에 앞서, 비동기 통신이 왜 필요한 지에 대해 먼저 짚어보고자 한다. 기본적으로,웹에서는 요청과 응답이 순차적으로 이루어지는 방식(동기 통신 방식)을 이룬다. 동기 통신 방식 클라이언트가 서버에 데이터를 요청 => 서버는 해당 요청 처리 후 데이터를 응답 => 클라이언트는 서버의 응답을 받을 때까지 대기 즉, 요청과 응답이 완전히 끝날 때 까지 다음 동작을 실행하지 않고 대기한다. 이런 순서로 작동하는 동기 통신의 단점으로, 1. 응답 대기시간 증가: 서버에서 응답 시간이 오래 걸리는 ..
멋쟁이사자처럼 프론트엔드 스쿨의 7주차를 지나고 있는 시점이다. Javascript의 개념들을 배우고 있는데, 한 번에 이해가 도저히 되지 않던 개념이었던 것중 하나인 Class에 대해 정리해보고자 한다. Class 정의 자바스크립트에서 함수의 한 종류로, 객체를 생성하기 위한 템플릿으로 사용되며, 값으로 사용할 수 있는 일급 객체(다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)이다. 역할 일종의 설계도로, 클래스를 정의함으로써 객체를 만들기 위해 필요한 속성과 메서드의 구조를 미리 정의할 수 있다. 클래스는 생성자(constructor)를 포함하고 있다. 클래스 내부에서 정의된 메서드는 해당 클래스로부터 생성된 모든 객체에서 공유된다. 특징 // 1. 무명의 리터럴로 생성하여, 런타임..
멋사 프론트엔드 스쿨 6기 과정 중 첫 프로젝트(HTML + CSS)를 하던 중, SEO도 고려할 것이라는 조건이 걸려 있어서 찾던 중 메타태그를 적절히 활용해야 접근성 측면에서 성능이 개선된다는 사실을 알았다. 우리는 흔히 html파일을 만들고 !+Tab만 누르면 기본적으로 위와 같은 html 기본 골격을 가진 자동완성을 이용하곤 하지만, head 내에 위치한 meta태그를 보며, 인코딩 방식이 UTF-8이고, 뷰포트를 장치 화면 너비에 맞게 설정한다라는 사실 외에 meta 태그에 대한 궁금증을 품어본 적이 없었던 것 같다. 프로젝트에서는 충분히 메타태그를 공부할 시간없이 구글링을 통해 open graph를 이용해 단순히 해결했지만, 프로젝트가 끝난 김에, 사용했던 메타태그를 기반으로 짧게나마 정리해보..
Float를 연습해보는 시간을 갖던 중, 원하는 대로 요소들을 배치하지 못하고 있단 사실을 깨달았다. 이유를 나름대로 고민해봐서 내린 결론은... 시멘틱 태그들이 어떤 display를 가지고 있는지 확실히 모른다는 것이었다. 그런 의미에서 display의 block, inline, inline-block에 대해 짚고 넘어 가보려 한다. Block 기본적으로, 부모 요소의 너비(width)를 모두 차지하려고 한다. 그렇기에, 블록 레벨 요소들은 새로운 줄에서 시작하며, 너비와 높이, 상하좌우 마진을 설정할 수 있다. 블록 레벨 요소로는 헤딩 태그인 ~, , , , , , , , , , 등이 있다.(주로, 구조나 컨테이너의 역할을 한다.) Inline 기본적으로, 컨텐츠가 가지고 있는 영역만큼의 너비만을 차..
