하수도키의 성장일기

개발일기/Javascript

JavaScript - DOM이란?

DOM 이란 뭘까? HTML 태그? JavaScript로 접근 하는 것? Node? 트리구조? 등등 용어만 들었을뿐 정확히 설명을 못했다.(이것뿐만 아니라 공부한 모든것들을 설명할 수가 없어 차근차근 정리해볼 계획이다.) DOM 정의(MDN 참조) 문서 객체 모델(Document Object Model)은 JavaScript Node 개체의 계층화된 트리다. DOM은 HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM이 뭘까? HTML 파일이 쓴 것들이 DOM인가? No 소스보기에 보여지는 것들이 DOM인가? No 크롬 개발자 도구에서 보여주는 것..

책일기

[북리뷰] 미국 주식으로 시작하는 슬기로운 퀀트투자 주린이+코알못도 파이썬으로 쉽게 따라 하는 퀀트투자 레시피

주식 모르고, 파이썬 언어를 모르는사람에게 딱이다. 주식책, 파이썬 책을 각각 사는대신 이 책 한권으로 끝낼 수 있다. 기존과 달리 책의 목차 순으로 리뷰를 작성해보겠다. 1장, 2장에서는 주식에 대한 기본적인 지식들과 구글 콜랩을 사용 환경을 알려준다. 1장에서는 주식이 오르는 이유, 장기투자, 단기투자에 대한 비교, 퀀트투자를 해야 되는 이유 등을 알려준다. 2장에서는 퀀트머신을 사용 가능한 환경인 구글 콜랩을 알려주고 파이썬 언어를 통해 백테스팅 하는법을 알려준다. 이때부터 주식에 대한 용어 설명을 해준다. 간단히 설명을 하고 왜 이렇게 나오는지에 대한 수학 증명도 해주니 본인 기호에 맞게 설명만 듣고 넘어가던지 아니면 증명까지 살펴보면 될것 같다. 3장부터 7장까지는 단기투자의 기술, 가치투자를 ..

개발일기/CSS

[CSS] CSS로 삼각형, 꺽쇠(체크박스), 화살표, 스피너, 햄버거 메뉴 그리기

개요 작업하다 보면 아이콘으로 버튼, 로딩, 메뉴 등을 표현해야 하는 경우가 있다. 예전에는 대부분 포토샵 또는 이미지 파일로 backgroud-image 속성 또는 img 태그를 이용해 작업을 했다. 하지만 CSS 스킬이 발전함에 따라 CSS로 대체 가능한 아이콘들이 생겼다. CSS로 대체하면 image를 로딩해야 하는 리소스, 용량 등에 대한 부담이 줄어들어 퍼포먼스 향상에 도움이 된다. 작업하면서 필요한 아이콘 5개 추려서 정리해봤다. CSS로 도형 그리기 삼각형 만들기 삼각형 만들기 코드를 보면 border 관련 속성들만 사용해서 만들었다. 40px보더를 적용하고 색상은 모두 투명으로 적용했다. 그다음 원하는 화살표 방향에만 red 색상을 적용해 화살표를 만들었다. 꺽쇠 만들기 꺽쇠 만들기 이미지..

개발일기

[앱 개발 방식] 네이티브 앱, 모바일 웹, 모바일 웹앱, 하이브리드 앱, 웹앱이란?

웹 개발을 하다 보면 웹앱, 하이브리드 앱, 웹뷰 등 여러 가지 용어를 듣는다. 단순히 웹만 하면 될 줄 알았는데 웹을 모바일에서 가져가는 순간 용어도 웹앱, 웹뷰, 하이브리드 등 그때 부르고 싶은 대로 부르는 경향이 있었다. '아 웹을 모바일앱에서 볼 수 있게 해주는거구나'하고 이해하고 지나갔다. 이번에 UI/UX 디자인 책을 보면서 관련 설명이 있길래 보면서 정리해보겠다. 네이티브 앱(Native app) 간단하게 모바일에서 설치되어 있는 앱이라고 생각하면 쉽다. iOS는 app store, Android는 google play에서 앱을 검색해서 다운로드하여 설치하면 우선 네이티브 앱이라고 생각하자. (하이브리드 앱있을 수도 있는데 이건 뒤에 설명하겠다.) 웹 개발자 없이 앱 개발자가 만든 거라고 생..

책일기

[북리뷰] 모바일 UX/UI 디자인 강의 with Adobe XD

프론트 개발하면서 모바일 화면, PC 화면, 다양한 뷰포트로 작업할 일이 많다. 그때마다 해상도에 관해 단순히 모바일은 2배수, 3배수로 작업하면 되고 viewport는 device-width를 습관적으로 사용했다. 정확하게 어떤식으로 작동되는지 감으로만 알고 있고 이론은 정확히 파악을 못했었다. 이 책을 통해 이런 부분들을 많이 알 수 있었다. 책 소개 우선 프론트개발자인 내가 이 책의 표지만 봤을 때는 끌리지는 않았다. 하지만 목차를 보고 흥미를 느꼈고 Adobe XD 실습하기 전에 모바일 UX/UI 에 대한 자세한 설명이 도움이 되었다. UX를 단순히 사용자 편의성이라고 생각했는데 책에서 사용자 편의성보다는 경험에서 나온 익숙함을 분석하여 그에 맞는 서비스를 기획하고 디자인 하는것이라고 설명을 해준..