개요 console 의 다양한 함수를 써보자. 해보니깐 신기하고 재미나다. Breakpoint 사용해보자 1) 만약 버튼을 만들어 두었다면, Element 탭에서 해당 코드를 우클릭하여 2) Break on >> attribute modification 을 설정해두면 3) 실제로 해당 를 클릭하였더니 breakpoint 가 먹힌다. console.log 사용법 1) console.clear() 를 사용하면 그 이전의 출력이 다 지워진다. 2) console.log() 는 일반적 출력 3) formatting 을 하는 두 방법, `` 와 ${} 를 사용하는 방법 추천 4) %c 를 이용해 style 을 넣어줄 수 있다. 5) warning, error, info 등을 먹일 수 있다. - 나중에 이걸로 필터..
개요 HTML5 Canvas 기능 맛보기 내용 #draw 의 # 은 뭘까 - id 일때에는 # 을 쓰자. 1) hsl 알아보기 - Hue, Saturation, Lightness 이다. - Hue 는 0 to 360 까지의 색깔이다. 빨간색 0, 초록색 120, 파란색 240 이다. - Saturation 은 0%는 그레이, 100% 는 Full color 이다. - Lightness 는 0%는 검정, 100%는 흰색이다. 2) beginPath() 함수 - 새로운 경로를 만든다. - 이후로 이렇게 새로 생성된 경로에 다양한 명령으로 구성하고 만들게 된다. EventListener() 4개 - 마우스가 눌려진 경우에만 그려질 수 있도록 해준다. - 처음 시작할때의 좌표를 눌려진 순간의 좌표로 해준다. -..
개요 Array 관련해서 몇몇 함수들을 더 들여다 보자 이번 편은 매우 짧다. 내용 첫 번째로 가지고 놀 배열 배열의 some() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다. - some() 함수는 파라미터로 들어온 함수가 하나라도 true 를 리턴하면 true 를 리턴 배열의 every() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다. - every() 함수는 파라미터로 들어온 함수가 하나라도 false 를 리턴하면 false 를 리턴 두 번째로 가지고 놀 배열 배열의 find() 함수에 파라미터로 함수를 넣어주는데 - 배열 원소를 파라미터로 받아서, 참 / 거짓을 리턴하는 함수이다...
개요 특정 단어를 포함하는 도시명, 주명을 아래에 리스트로 보여준다. style.css z-index - 정수값이며 (= 음수, 0, 양수) - 여럿을 겹치게 놓을 수 있으며 - 클 수록 앞에 놓이게 된다. → 소스에서는 여기에만 쓰이며, 다른 녀석들보다는 항상 위에 두겠다는 것이다. 검색된 값이 아코디언처럼 보이게 해주는 부분이다. 1) even, odd 로 표현할 수 있는 것이 재미있다. - 자연어에 점점 가까워지는 프로그래밍 언어이다. 2) 각도를 각각 3, -3씩 돌리고, 그에 따라 비어지는 공백을 y 좌표를 조금 내리면서 해결한게 아닐까 싶다. scale 역시 좀더 자연스럽게 보이게 값을 넣어가면서 조절한 것일듯 → 실제 값을 변화시켜가며 확인해보면 될듯 하다. 1) 아무것도 안먹였을때 2) r..
개요 flex 를 활용하여 panel 들이 click 에 멋지게 반응하게 해보자. - flex 에 대하여 참고 링크: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ index-START.html 참고 링크: https://goo.gl/QcRIEX 1) :before, :after - 특정한 것의 앞과 뒤에 이것을 적용한다는 것. - 그런데 * 모든 것이라니 무슨 의미인지 헷갈린다. 2) inherit: 부모의 값을 상속받는다. Selector 참고링크: https://goo.gl/aYHKVb .panel > * .panel 의 직계 자식인 "모든" element 를 선택 .panel p .panel 의 자식인 p element 를 선택 nth-chil..
Array 가지고 이런저런 장난을 쳐보자 inventors 오브젝트 배열을 가지고 놀아보자 1) first, last, year, passed 값을 가지고 있는 구조체가 있고, 2) 그 구조체들로 이루어진 배열이 있다. 이걸로 장난을 쳐보자 Array.prototype.filter() Filter the list of inventors for those who were born in the 1500's → 1500 년대에 태어난 inventor 를 추려내보자 filter() 는 먹여주는 함수가 true 를 return 하는 경우만 추가해서 회신한다. 1) 익명함수로 리턴값이 true 인 경우만 filtering 해서 회신해준다. 2) 화살표 함수로 좀더 간결하게 표현 가능. 하지만 아직은 좀 낯선 방식이..
개요 - 실습의 시작점이 되는 index-START.html, style.css 를 따라 타이핑하고, 이해해보았음 - 이제 동영상 강의를 보며 따라해보고, 정리하자. 동작 index-FINISHED.html 파일을 크롬 브라우저에서 열어서 완성된 동작을 확인해보자. - F12 를 누르면 크롬의 DevTools 가 열린다. 1) A S D F G H J K L 키가 화면에 보인다. - 스타일은 sytle.css 에 정의되어 있는 .key 이다. 2) 그런데 클릭을 해주면 - 스타일이 playing 이 되고 - 소리가 한 번 울려주는 것이다. - 오른쪽의 큰 빨간 네모가 키 영역들이다. - 키를 누르면 class 부분이 key 에서 잠시 playing 이 되었다가 다시 key 로 돌아오는 게 보일것이다. J..
개요 - 제로베이스로 시작하며, 내가 알지 못하는 하나씩을 모두 정리해본다. - 차곡차곡 쌓이면, 다음 강좌로 넘어갈 수록 알아 볼 것들이 줄어들 것이다. 공부방법은 1) index-START.html 을 01.html 로 옮겨 타이핑 하고, 이를 아래와 같이 분석해본다. 2) style.css 역시 style-jhs.css 로 옮겨 타이핑하고 분석한다. 3) 그다음 동영상을 보면서 실습을 따라해본 후 4) 별도의 블로그 포스팅에 실습 내용을 정리한다. index-START.html 알아 볼 것들 링크: https://www.w3schools.com/tags/tag_doctype.asp - 웹브라우저에게 이 파일은 html 이라는 것을 알려준다. - HTML 5 는 죄측과 같이 쓰면 되고, - HTML ..
개요 - Vanilla JavaScript 로 실제 30개의 동작하는 녀석을 만들어보면서, JavaScript 를 공부해보자. - 공식링크: https://javascript30.com/ - GitHub: https://github.com/wesbos/JavaScript30 - 정현석 Fork: https://github.com/nicewook/JavaScript30 목표 참여중인 개발자 슬랙에서 JavaScript 30 코스를 함께 공부하기로 하였다. - 3월 1일부터 공식 시작 - 매일 하루 강의를 보고 프로젝트나 느낀 점을 공유할 것. 결과물 == 1인당 30개글 - 각자 페이스는 다를 수 있어도 목표는 완주. Course Front Page 30 개의 튜토리얼을 30일동안 수행하면서 30개의 바닐..
- Total
- Today
- Yesterday
- 중용
- 영화
- Bug
- intellij
- solid
- Gin
- github
- strange
- websocket
- golang
- go
- ChatGPT
- postgres
- 체호프
- Shortcut
- pool
- API
- folklore
- notion
- 명상
- bun
- ORM
- 클린 애자일
- 2023
- 잡학툰
- OpenAI
- 독서후기
- agile
- 인텔리제이
- 노션
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |