전체 글
-
[TIL]Day 18. 라이브러리? 프레임 워크?IT 지식 2020. 9. 28. 16:31
개발을 하다보면 라이브러리를 활용해야 한다거나 프레임워크를 사용해야 한다는 말을 많이 듣게 됩니다. 문맥상 나에게 필요한 기능을 가져다 쓴다는 것은 알겠는데, 신입 개발자 입장에서 그 둘의 차이점이 뭔지 명확하게 와닿지 않는다는 것이 문제입니다. 오늘은 라이브러리와 프레임워크의 차이점에 대해 알아보는 시간을 가져보도록 하겠습니다. 1. 라이브러리(library) 란? 라이브러리란 영문사전을 찾아보면 도서관이라는 뜻입니다. 왜 이런 이름이 붙었을까요? 우리가 도서관을 가서 하게 되는 일은 우리가 읽고 싶은 책을 찾아서 읽는 것입니다. 경우에 따라서는 읽는 것에서 나아가 그 지식을 실생활에 활용하는 일까지 하게 되죠. 라이브러리는 이처럼 우리가 개발을 하다가 필요한 기능이 생겼을 때, 다른 사람들이 미리 구..
-
[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..