본문 바로가기

분류 전체보기76

[생존신고] 번역 하나 했다.. developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Advanced_animations발전된 애니메이션우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.developer.mozilla.org언제까지 공부 안하고 살거니...아무튼 요즘 Canvas에 관심 갖게 되어서 번역 하나 했다. 이거 마지막 예시 번역 하니까 안되던데... 일본어? 가 같은 현상 있는데 이유를 모르겠음 2020. 12. 5.
[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.
[python/nodejs] 5543번 상근날드 1. python burger = [] drink = [] for i in range(3): a = int(input()) burger.append(a) for i in range(2): b = int(input()) drink.append(b) setmenu = min(burger) + min(drink) - 50 print(setmenu) 2. nodejs et fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); let cost = []; input.forEach(function(value) { cost.push(Number(value)); }); let burger = []; for (let i =.. 2020. 4. 25.

티스토리툴바