20210312_바닐라 js로 그림판, 기능 추가(현재색 표시, 커서), Nomadcoder
바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 만들기 강의는 모두 끝냈고 내가 더 추가하고자 하는 기능을 구현 해 보았다. 추가적으로 구현한 기능 현재 색 표시 .controls .check { margin-bottom: 30px; width: 50px; height: 50px; border-radius: 25px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } const check = document.getElementById("jsCheck"); check.style.backgroundColor = INITIAL_COLOR; function handleColorC..
20210310_바닐라 js로 그림판 만들기, HTML, CSS (Reset, import, flex, unset, all), Emmet, Canvas, mouseEvent
바닐라 js를 이용한 그림판 만들기 project Nomadcoder 사이트 클릭! 그림판 전체적인 기능 Canvas API를 이용함 굵기 조절 색깔 선택 그리기 채우기 저장 기능 사전에 필요한 것들 깃헙 계정 구글 크롬 VScode Set up HTML CSS, js 파일 연결 전체적인 요소 구현 convas 태그 사용 CSS CSS 초기화 파일 만들기 (reset.css) CSS RESET code RESET CSS을 CSS파일에 연결하기 @import "위치" display : flex flex 속성 알아보기 @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Seg..
20210309_Yalco01 디버그, 컴파일러, 인터프리터, 빌드, 환경변수, REST API, GraphQL, 객체지향,쿠키,세션,캐시, 프로세스, 스레드, 메모리 관리
Yalco 얄팍한 코딩사전이라는 아주 좋은 코딩 유튜버 분이 계시는데 비전공자의 눈높이에 맞게 여러 용어등을 설명해 주시는데 아주 좋다. 오늘은 이러한 것들을 보고 지금까지 배운 내용들과 비교하여 부족한 부분들을 살펴보며 용어에 대해서 검토하는 시간을 갖고자 한다. Yalco 사이트! 클릭 디버그(Debug) : 소프트웨어에 발생하는 문제의 원인을 찾는 것 (개발의 대부분의 과정) 개발 중인 상태(배포와 반대되는 개념) 코드를 직접 돌려서 어디부분에서 문제가 생기는지 알아보고 해결 함 에디터 대부분이 중간에 검문소를 두어 이를 통과하는 값들을 살펴 볼수 있도록 하는 기능(디버깅 툴)을 제공하고 있음 컴파일러(Compiler) vs 인터프리터(Interpreter) 둘다 모두 우리가 개발할때 쓰는 언어들을..
