IT 지식
-
[TIL]Day 17. addEventListener 에 대해IT 지식 2020. 9. 23. 19:30
자바스크립트의 활용성이 커짐에 따라 웹에서는 다양한 이벤트를 발생시킬 수 있게 되었습니다. 이러한 이벤트의 발전은 웹 개발을 프론트엔드와 백엔드를 분화시키는데 큰 기여를 하게 되었습니다. 오늘은 자바스크립트의 기능 중 이벤트를 달 때 사용하는 함수인 addEventListener에 대해 알아보도록 하겠습니다. 1. addEventListener란? addEventListener는 앞서 말씀드렸다시피 이벤트를 달때 사용하는 함수입니다. 이 단어를 직역하자면, '이벤트를 듣고 있는 함수를 더해주겠다.'는 의미가 되죠. addEventListener는 개발자가 정한 특정 이벤트를 주시하고 있다가 그 이벤트가 발생할 때 인자로 받은 함수를 실행시켜줍니다. 예시를 들어보면 다음과 같습니다. 요소.addEventL..
-
[TIL]Day 16. HTTP와 DOM의 개념IT 지식 2020. 9. 22. 19:50
이번 포스팅은 http와 DOM의 개념에 대해 알아보도록 하겠습니다. 1. http 1) http의 뜻 http의 단어를 뜯어보면 다음과 같다. 더보기 ht: hyper-text t: transfer p: protocol hyper-text라는 뜻은 문서와 문서가 링크로 연결된다는 뜻입니다. transfer는 전송한다라는 뜻을 가지고 있죠. protocol은 규약이라는 뜻입니다. 즉, 직역하자면 '문서와 문서가 링크로 연결된 묶음들을 서로 전송하는 규약'이라고 할 수 있습니다. 2) http의 두 가지 특징 (1) Request / Response (요청 / 응답) http 통신의 핵심은 요청과 응답입니다. 통신을 한다는 것은 누군가가 메세지를 보내고 또 다른 누군가가 그 메세지를 받는다는 뜻이죠. 다시..
-
[TIL]Day 15. JS 정리(2)IT 지식 2020. 9. 21. 19:14
이번 포스팅에서는 JS와 관련된 기초 개념들을 정리해보는 시간을 가져보도록 하겠습니다. 1. scope -scope는 변수가 선언되고 사용될 수 있는 범위를 의미합니다. -scope와 관련된 용어들은 다음과 같습니다. block: 하나의 함수, 혹은 기능이 작용하는 범위를 의미합니다. global scope: 전역 범위. 활동 범위가 코드 전체로 할당되어 있는 것을 말합니다. global variable: 전역 변수. 변수의 활용 범위가 코드 전체로 할당되어 있는 것을 말한다. block scope: 구역 범위. 함수 혹은 변수의 범위가 특정 구역으로 한정되어 있는 것을 말합니다. local variable: 지역 변수. 변수의 활용범위가 block 단위로 정해져 있는 것을 말합니다. scope poll..
-
[TIL]Day 14. js 정리(1)IT 지식 2020. 9. 16. 18:10
이번 포스팅에서는 js와 관련한 팁들을 정리해보려고 합니다. 1. 변수 설정시 유의사항 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다. 같은 변수 이름을 중복해서 사용한다면 컴퓨터는 그 변수들의 차이점을 인지하지 못해 에러를 발생시킵니다. 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다. 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다. 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다. 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 써야 합니다. cf. camelCase? snake_case? 1) camelCase(카멜 케이스) 카멜케이..
-
[TIL]Day 13-2. Semantic Web에 대하여IT 지식 2020. 9. 15. 17:34
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요." 면접에서 자주 다루는 내용 중에 하나라고 합니다. 이 질문에 대한 대답을 하기 위해선 Semantic Web에 대한 이해가 선결 되어야 합니다. Semantic Web은 현재 W3C에 의해 표준화 작업이 진행되고 있는 개념입니다. 웹의 창시자인 팀 버너스리가 1998년도에 제안을 했다고도 하죠. 도대체 Semantic Web이 무엇이길래 웹의 창시자가 직접 이 개념을 제안할 정도인지 알아보는 시간을 갖도록 하겠습니다. 1. Semantic Web의 정의 더보기 시맨틱 웹(Semantic Web)은..
-
[TIL]Day 13. 레이아웃의 모든 것IT 지식 2020. 9. 15. 16:32
오늘의 포스팅은 html 요소들의 레이아웃에 관한 것입니다. 프론트엔드 개발자라면 레이아웃에 대한 고민을 매일 한다고 해도 과언이 아닐텐데요, 저도 아직까지 자주 헷갈리는 개념인 기본적인 레이아웃에 대해 알아보도록 하겠습니다. 1. position 속성 - relative, absolute, fixed position에는 기본적으로 static, relative, absolute, fixed, 이 네 가지 속성이 존재합니다. 이 중 static은 각요소에 가장 기본적으로 부여되어 있는 속성입니다. 따라서 특별히 쓰이는 일은 잘 없습니다. 그저 이런 속성이 있고, 이것이 디폴트 값이구나 생각해주시면 되겠습니다. 1) position: relative position: relative는 이 자체로는 어떤 기..
-
[TIL]Day 12. html/css 정리(5)IT 지식 2020. 9. 14. 18:38
1. 문자 인코딩 더보기 : 영어 외의 문자가 포함되어 있는 페이지에는 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 문자가 깨지지 않습니다. 얼마 전에 vsc 설정을 건드리다가 한글 문자가 전부 깨져서 나온 적이 있습니다. 그때 문자 인코딩에 관한 자료를 찾아보면서 배우게 된 아주 중요하지만 많이 언급되지 않는 내용입니다. 후에 문자 인코딩에 관한 내용을 포스팅 하겠습니다. 2. 반응형 웹페이지 요소 더보기 : 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미를 전달합니다. 모바일과 pc 두 환경 모두에서 웹사이트가 예쁘게 보이기 위해 필요한 정보입니다. 해당 정보를 추가하지 않으면 어느 한쪽의 환경에서 페이지가 제대로 나오지 않게 됩니다. 3. a 태그의 하이퍼링크를 새 창에서 띄우기 a..
-
[TIL]Day 11. JS - 클래스와 오브젝트IT 지식 2020. 9. 4. 22:40
1. 객체지향 프로그래밍 객체지향 프로그래밍은 실제 세계의 운영방식을 따라하기 위해 추상화를 사용하는 프로그래밍 방식을 의미합니다. 쉽게 말하자면, 객체지향 이전의 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들을 모아놓은 목록이라는 기존의 관점을 뒤어서, 서로간의 관계성이 존재하는 객체들의 집합이라는 관점에서 코딩하는 방식을 말합니다. 예를 들어보죠. 객체지향 이전의 프로그래밍은 지시사항이 잔뜩 들어있는 순서대로 집을 짓는 방식이었습니다. 그 지시사항의 순서를 바꾸거나 다른 곳에서 활용하기 매우 어려운 구조였죠. 하지만 객체지향 프로그래밍이 등장한 이후에는 가공된 목재들을 만들고, 공구 도구들을 만들어서 각각의 요소들을 활용한 집짓기, 상자나 책장 만들기 등의 활동으로 변화되었다고 생각하면 됩..