FrontEnd49 canvas에 mouse drawing 작업을 완성하기 위해 걸린 삽질 정리 5일간의 삽질여정 -> vue boostrap modal의 canvas에 마우스로 drawing 을 하려함. (초기) -> 잘 안됨, canvas에 mouse drawing이 전혀 안그려졌음(이걸로 이틀정도 삽질함) -> 방법을 계속 찾다가 vue로 simple하게 mouse로 drawing 해주는 플젝과 참고했던 프로젝트를 비교하면서 canvas의 width, height 지정해주는 부분이 문제가 있다는 것을 발견 (parentElement.clientWidth/Height 로 canvas의 값을 동적으로 잡아주는 건데 modal 에서 하려니 계속 0으로 뜸) https://codepen.io/getflourish/pen/EyqxYE -> 이를 hard하게 값을 넣어주니 잘 됬음 -> 당연히 화면크기나.. 2019. 4. 17. 코드스피츠 s81 2주차 www.bsidesoft.com/jidolstar/study/codegolf/3-3-2.html 추상화와 Recursion은 축소를 했다는 차원에서 같은 개념이다. 더 나아가 아키텍처, 디자인 등은 다 재귀와 같은 개념. (현실을 모델링 화 해서 프로그래밍) Co-Recursion 은 Recursion과 반대 넥슨의 식수 slideshare 검색 재귀로 짤 수 있으면 다 Recursion, 짤 수 없다면 Co-Recursion 정보가 적은데 확장하는 것이 Co-Recursion 그럴듯한 생성 컨텐츠 만들기(넥슨) 2019. 4. 10. 코드스피츠 s81 1주차 2019-04-03 1주차 관찰을 통하여 현상을 분석하고 목적에 부합하는 패턴을 파악한다 (목표를 명확하게 설정한다) 패턴이 없는 것들을 패턴화 시킨다 www.bsidesoft.com/hika/s81/1.html 시간 지연은 인터벌 간격으로 프레임을 쪼개서 비동기적으로 처리를 한다. 재귀함수를 루프로 바꾸는 연습을 꼭 해서 재귀를 루프로 바꿀 수 있는 능력을 기르자, 꼭 할 수 있어야 한다. (재귀함수는 스택을 사용하기 때문에 위험하다, 사용하지 말자) 랜덤함수를 짜보고, 구동이 어떻게 되는지 잘 아는게 정말 중요하다. Math.Random 함수는 비용이 비싸다! 2019. 4. 3. word-break에 대한 개념 정리 word-break에 대한 개념 정리 word-break는 업무상에서 글자를 적정한 위치에서 줄 바꿈해줄 때 사용한다.정확히는 word-wrap 또한 같이 사용되고 이러한 값들이 CJK(Chinese, Japanese, Korean) 및 non-CJK 에 따라 구분되어 적용이 된다. (참고)* CJK(Chinese, Japanese, Korean)* non-CJK (그 외 언어 : 영어, 숫자, 베트남어 등) word-break 개념단어의 분리를 어떻게 할 것인지 결정한다. 예) (공백/띄어쓰기) 날씨가`좋아요예) (음절) 날`씨`가`좋`아`요` work-break 속성 (DOC에 설명된 개념을 적기엔 이해하기 모호한 부분이 있어서 각 속성별로 정리한 표를 첨부함) /* Keyword values */w.. 2019. 3. 22. 코드스피츠 4주차 복습 중요한 원칙, 규칙을 정하면 예외사항을 즉시 알아차릴 수 있다. 2019. 3. 20. 코드스피츠 5주차 수업 정리2 생성자가 extend 하지 않은 것들은 다 주 생성자가 됨. class NormalItem extends Item {... 에선 NormalItem이 부 생성자가 됨. Javascript는 주 생성자의 인스턴스가 부 생성자를 체이닝 시켜주는 식. javascript 언어에선 this 를 데이터 형식으로 넘겨줄 수 있기 때문에 부모 자식 상속 관계에서도 부모로 부터 시작해 자식에게 내려갈 때 데이터를 하나씩 추가해가는 식으로 할 수 있다. ex) Function을 상속받으면 내 인스턴스는 Function. Date을 상속받으면 내 인스턴스는 Date (Object를 상속받은게 아님) Function과 Arrow 함수의 차이 Function : - Function만의 this가 생성됨(this 는 메소드이기.. 2019. 3. 18. vue-i18n pure js 에 적용하면서 생긴 문제 해결 상황:Vue에서 i18n을 적용하는데 pure js에는 vue-i18n 의 t() 메소드가 제대로 적용이 안되고 오류 발생. 해결:- main.js에 위치한 i18n 관련 코드들을 따로 js 파일로 분리(예: i18n.js)- 해당 i18n.js 파일에서 export default new VueI18n({..}) 와 같이 해주기- main.js에서 i18n.js 파일을 import 하고 이를 global.vue = new Vue({.., i18n, ..}) 의 i18n 옵션에 설정(global.vue = new Vue에 i18n을 설정하는 것은 Vue 프로젝트에서 전역으로 사용하겠다는 것)- 사용하려는 pure js에서 i18n.js 를 import 하면 t() 메소드 사용이 되면서 해결. 코드로 과정을.. 2019. 3. 13. 디자인 패턴 5주차 수업 정리 엔지니어링 : 지식이나 과학적 체계를 현실으로 만들어내는 것.리버스엔지니어링 : 만들어진 것을 토대로 청사진이나 설계도면 및 원리를 만들어냄. 디자인 측면에서 공학 : 먼저 어떻게 만들지 구조를 설계하고 이 정해진 설계를 바탕으로 프로그래밍을 함 소프트웨어 공학에선 UML이란 국제표준이 존재. 어려운 구조의 소프트웨어를 짤 때 먼저 설계를 하고 코딩을 해야 함. 우리 코드의 문제? 올바르게 동작을 하는지 판정할 수 없다. 기준이 없기 때문.내가 무엇을 해야하는지 먼저 문서화를 해야 함. 이를 통해 내가 무엇을 해야하는지 명확하게 할 수 있음. 소프트웨어 관리의 가장 중요한 점은 '버전을 픽스'해야 하는 것. 고로 우리는 어디까지 만들지를 문서화해야 하고 이에 대한 설계를 잘 해야 함. -티켓-버전 픽스 .. 2019. 3. 13. 동기, 비동기, blocking, non-blocking, 콜백함수 및 Promise 정리 동기, 비동기, blocking, non-blocking 의 차이? 일반적인 함수는 동기화함수이자 blocking 함수.동기화 함수 : 입력하면 return 값이 반환되는 함수. 순차적으로 실행이 됨.비동기화 함수 : return 값이 반환되지 않고 대신 callback이 return 됨. (callback 을 return 하면 다 비동기화 함수)순차적으로 실행이 되지 않고 중간중간에 jump를 해다님. 컴퓨터는 폰 노이만 머신 기준을 따르므로 계속 명령어를 로딩하여 실행함.블로킹 : 어떤 명령어를 만났을 때 모든 CPU가 정지하고 그 명령어를 실행하고 있는 상태.논블로킹 : 총 수행시간이 16.6 ms, 초당 60 프레임 내에 실행되면 논블로킹 코드로 봄. 블로킹이냐 논 블로킹이냐는 시간이 얼마나 소요.. 2019. 3. 10. 이전 1 2 3 4 5 6 다음