programming/web

library vs framework

library 개발자가 만든 클래스에서 호출하여 사용 코드에서 라이브러리를 불러와서 사용 framework 프로그래머가 완성시키는 작업 나의 코드를 호출하는 것 vs 제어 흐름에 대한 주도성이 어디에 있느냐 라이브러리는 라이브러리를 가져다 사용하고 호출하는 측에서 사용자에게 주도성이 있으며, 프레임워크는 틀 안에 제어 흐름에 대한 주도성이 내포되어 있다. 라이브러리를 사용하는 코드는 흐름을 직접 제어하며, 능동적으로 라이브러리를 사용한다. 프레임워크는 흐름을 주도하는 중에 개발자가 만든 코드를 사용하도록 만드는 방식으로 제어의 역전 개념이 적용되어 있다. 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작한다.

programming/web 2023.01.31

[CSS] 폰트 적용

폰트 파일을 다운로드 받은 후, 프로젝트 폴더 내 원하는 경로에 넣어준다. CSS 코드에서 경로를 통해 폰트파일을 불러와 적용한다. 폰트 파일 확장자 폰트 파일은 다양한 확장자를 가지며, 확장자 별로 지원하는 브라우저가 다르다. ttf : format('truetype') otf : format('opentype') woff : format('woff') svg : format('svg') eot : format('embedded-opentype') @font-face CSS 명령어를 사용해 웹 브라우저에게 해당 서체를 다운로드 할 것을 알린다. @font-face { font-family:"friends"; /* 사용하고 싶은 font-family */ src: url("fonts/GABRWFFR.TT..

programming/web 2023.01.17

[바닐라 JS] 크롬 앱 만들기 (3)

Math Object round : 반올림 ceil : 올림 floor : 내림 - random 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 random()*10 : 0보다 크거나 같고 10보다 작은 무작위 숫자 반환 document.createElement(tagName) 태그 생성 - tagName 생성할 태그의 유형을 지정하는 문자열 document.body.appendChild/prepend 선택한 문서의 맨 뒤/맨 앞에 추가 JSON.stringify() JavaScript 값이나 객체를 string으로 변환한다. 배열을 전달할 경우 지정한 속성만 결과에 포함한다. JSON.stringify(value[, replacer[, space]]) - value : JSON 문자열로 변환할 값 -..

programming/web 2023.01.15

[바닐라 JS] 크롬 앱 만들기 (2)

interval 매번 반복되어 일어나는 행위 setInterval() 함수 사용 setInterval 첫번째 인자는 실행하고자 하는 함수 두번째 인자는 호출된 함수를 몇 ms(milliseconds)로 할 지 표기 timeout 미리 정해둔 지연된 시간에 도달할 때 발생 setTimeout() 함수 사용 setTimeout 첫번째 인자는 실행하고자 하는 함수 두번째 인자는 기다리고자 하는 ms(milliseconds) 단위 Date Object const date = new Date(); date.getDate() //일 date.getDay() //요일 date.getFullYear() //연도 date.getHours() //시 date.getMinutes() //분 date.getSeconds() ..

programming/web 2023.01.15

[바닐라 JS] 크롬 앱 만들기 (1)

Login form 태그 : required, maxlength Log In input 안에 있는 button을 누르거나, input type이 submit인 input을 누르면 작성한 form이 submit 되고, 페이지가 새로고침 된다. Login 새로고침을 막기 위해서는? 함수의 괄호를 보게 되면 함수를 바로 실행시키기 때문에, addEventListener("submit", 함수이름)의 함수이름 뒤에 괄호를 붙이지 않는다. submit 이벤트가 발생할 때만, 브라우저가 해당 함수를 실행시키게 하기 위해서이다. submit 이벤트가 발생하고, 브라우저가 함수를 실행시킬 때, 하나의 인자를 받는다. 모든 EventListener function의 첫번째 인자는 항상 지금 일어난 일들에 대한 정보이며,..

programming/web 2023.01.15