본문 바로가기

front-end50

[HTML5/Canvas] Canvas 공부 1일차 : x축 기본 애니메이션까지 Canvas Day1 Canvas란 Canvas는 HTML5에서 새로 추가된 태그 중 하나로, 페이지에 그래픽 요소를 추가할 때 주로 사용된다. 기본적으로 width, height 속성을 가지고 있는데 이는 레이아웃이 랜더링되어 있기 때문에 CSS로 임의로 크기를 지정할 경우 화면이 왜곡되어 보일 수 있어 비율을 맞춰주어야 한다. 아래 두개의 canvas는 겉으로 보기에는 같은 크기이나 실제 화면에 이미지를 그렸을 때 차이가 난다. Canvas는 일반적인 이미지 속성과 같이 margin, border 등을 줄 수 있지만 실제 캔버스에 그리는 그림에는 영향을 미치지 않는다. 기본적인 사각형 그리기 var canvas = document.getElementById("board_canvas"); var ctx.. 2020. 12. 6.
[css] display:block과 visibility:none의 차이 css의 기능을 사용하여 화면의 어떤 요소를 화면상에 보이지 않게 할 때 보통 display:none를 사용한다. 비슷한 기능으로 visibility:hidden이 있는데 종종 이 두개의 차이점을 묻는 질문을 면접에서 물어볼 때가 있다. 이 두개의 차이는 무엇일까? 먼저 display:inline나 display:block속성을 사용해 보았다면 알겠지만 display는 어떤 요소의 속성 자체를 변화시킨다. 다음은 div{width:200px;height:200px;}를 준 이다. div는 디폴트로 display:block 속성이기 때문에 너비와 높이를 줄 수 있다. 다음과 같은 div 세 개가 나란히 있다고 했을 때 가운데 div에만 display:none을 줘보자. 여기에 display:inline을 .. 2020. 8. 1.
[javascript]자바스크립트 리스트 reverse / 기존 array에 영향을 미치지 않게 하려면? 자바스크립트의 reverse() 기능을 알아봅시다. const arrayOne = ['a', 'b', 'c'] const arrayTwo = arrayOne.reverse() console.log(arrayTwo) //['c', 'b', 'a'] 다른 언어와 마찬가지로, 자바스크립트도 아주 쉽게 reverse() 를 통해 리스트를 역으로 만드는 게 가능합니다. 그런데, 여기서 주의할 점이 있습니다. 요 Array.prototype.reverse() 는 기존 리스트에게 영향을 줍니다. 즉, arrayTwo를 만들어도 arrayOne도 리버스 되어 있다는 소리입니다. 기존 리스트에 영향을 주지 않고 reverse하는 몇가지 방법 slice 사용하기 const arrayOne = ['a', 'b', 'c'];.. 2020. 7. 28.
[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소 HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 않으면 HTML의 문서 흐름을 방해하고... 만약 면접관이 직접 만들어보라고 했을 때 인라인 요소 안애 블록 요소를 넣는다? 당신의 면접에 아주 악영향을 줄 것입니다... 블록요소와 인라인 요소를 구분하자면 다음과 같습니다. 블록요소 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음 블록요소의 종류 address,article,aside,audio,blockquote,canvas,dd,div,dl, fieldset,fi.. 2020. 6. 28.
[vue.js 기초] 뷰에서의 데이터 바인딩 / 이벤트 처리하기 Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용한다. 뷰에서의 템플릿 문법은 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 new Vue({ data: { message: '안녕하세요' } }) {{ message }} 디렉티브 디렉티브는 v-접두사를 사용하는 속성들을 말한다. v-for v-if v-bind v-on v-model new Vue({ data: { items: ['red', 'blue', 'green'] } }) {{ item }} v-bind 이미지 데이터 연결 : v-bind:src 링크를 통한 연결 : v-bind:href 스타일시트 연결 : v-bind:class, v-bind:style 키를 통한.. 2020. 4. 29.
[vue.js 기초] 폼 입력 바인딩 v-model 사용하기 / 한글 문제점 해결 vue의 form 입력 v-model은 input과 textarea에 양방향 데이터 바인딩을 가능하게 한다. 단 , v-model은 form 엘리먼트의 초기 value값을 무시하므로 컴포넌트 데이터 안에 초기값을 선언해줘야 한다. 메시지: {{ message }} new Vue({ el: '#app', data: { message: '' } }); 자세한 예제는 기술문서에 나와있으므로 참고 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 한글 실시간 반영 안되는 문제점 원래 이 속성을 사용하면 메세지가 실시간 반영되도록 할 수 있지만, 중국어, 일본어, 한국어는 특성상 한 글자 느리게 반영된다. 그래서 input 속성으로 사용해 주어야 함. 메시.. 2020. 4. 28.
[vue.js 기초] 뷰 인스턴스(vue instance) vue 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 할 기본 단위이다. 각 뷰 인스턴스는 데이터 객체 안에 있는 모든 속성을 프록시 처리한다.(데이터 변경시 자동으로 DOM을 업데이트함) var vm = new Vue({ //인스턴스에서 사용 가능한 속성과 api들 el: , // DOM의 시작점 template: , // 화면에 표시되는 요소 data: , // 데이터 속성 methods: , // 로직 제어 created: , // 라이프 사이클 관련된 속성 watch: , // data 변경 시 추가 동작을 수행할 수 있도록 함 }); $data // 1. 대이터 객체 생성 var data = {a : 1} // 2. 뷰 인스턴스에 데이터 객체 추가 var vm = new .. 2020. 4. 28.
[JS] MVC 패턴과 MVVM 패턴 MVC 패턴 (이 패턴은 자바스크립트 고유의 것이 아닙니다.) MVC는 Model, View, Controller의 약자입니다. 응용 프로그램을 세가지 구성 요소로 나눈 것입니다. 이렇게 나누는 이유는 영역간 코드의 결합도를 최소화 시키기 위해서 입니다. 위 이미지 처럼 Model, View, Controller가 상호작용을 하며 사용자가 어플리케이션과 상호작용 할 수 있도록 만들어 줍니다. Model 모델은 데이터베이스에 있는 데이터를 가져와 다른 객체에 전달해 줍니다. 또는 외부 객체로부터 데이터를 받아서 DB에 넣어줍니다. View 모델에서 받아온 데이터로 화면을 관리합니다. 사용자가 입력한 데이터를 처리하고, 유저가 생성한 입력 이벤트 데이터를 다른 객체에 전달하는 역할을 합니다. (html, c.. 2020. 4. 26.
[프론트앤드 개발자 면접질문 모음] 01. window 객체란 무엇일까? 안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 그 포스팅이 진짜 면접 때 빠르게 훑어보고 외우기 위해 정리한 것이다 보니 막상 이 포스팅을 보고 면접 전에 빡세게 준비하려는 분들께는 큰 도움이 되지 않을지도 모르겠다는 불안감이 문득 들어 개인적인 회고 겸 해당 포스트에서 작성한 대답들을 최대한 자세히! 공부하는 심정으로! 정리해 보려고 합니다. 만약 다른 질문들을 구글에서 본다면 그 질문에 대해 추가할 예정입니다. 먼제 가장 먼저 window 객체가 무엇일까요?에 대해 알아보도록 하겠습니다. window 객체를 한 마디로 표현하면, 브라우저 객체 모델(BOM)의 핵심이자 브라우저의 인스턴스입니다. 앗.. 2020. 4. 24.

티스토리툴바