< Taenylog />

웹 프론트엔드 공부 블로그 / Learn in Public

👀 텍스트노드에도 이벤트핸들러를 추가할 수 있을까?

TL;DR 텍스트노드에 이벤트핸들러를 추가할 수 있음. 근데 텍스트노드에는 click 같은 엘리먼트 이벤트말고 DOMCharacterDataModified 같은 변화 감지 이벤트만 발생함. 텍스트노드에도 이벤트핸들러를 추가할 수 있을까? 라는 막연한 호기심에 텍스트노드에 클릭 이벤트핸들러를 등록해보았다. Node는 EventTarget을 상속받아서 이벤트…

🏕 부스트캠프 챌린지를 마치며

부캠 챌린지 4주차 마지막 후기이다. 시간은 참 빨리갔지만, 4주간 정말 많은 것들을 배웠다. 마지막 후기인만큼 4주차가 아닌 부캠 전체를 리뷰해보려 한다. TMI 모음 #. Series 1. 내가 원하던 교육 2. 지속가능한 성장 3. 기본기가 탄탄한 나다운 개발자 에필로그. 블로그 글을 쓰는 이유 #. Series 1. 꾸준히 성장할 수 있는 개발자 …

멘탈과 체력이 튼튼한 개발자[부스트캠프 2020 챌린지 3주차 후기]

벌써 다음주면 부스트캠프 챌린지가 끝이난다. 시간이 참 빠른듯.ㅠㅠ 이번주도 마찬가지로 느낀점들을 공유해보려한다. (의식의 흐름 주의..!!) TMI 모음 #. Series 1. 프론트도 DB, 백엔드를 알아야하나? 2. 온라인 vs 오프라인 3. 구현먼저 vs 설계먼저 4. Reusable! 5. 코드리뷰 6. 멘탈과 체력이 튼튼한 개발자 #. Seri…

적극적이지만 말랑말랑한 개발자 [부스트캠프 2020 챌린지 2주차 후기]

부스트캠프 챌린지가 2주차로 접어들었다. 1주차도 시간이 빠르게 지나갔는데 이번주는 더 빠르게 지나간 것 같다. 이번주도 마찬가지로 느낀점들을 공유해보려한다. (의식의 흐름 주의..!!) TMI 모음 #. Series 1. 적극적으로 표현하기 2. 처음부터 잘하는 사람은 없다 3. 비교하는 행위 4. 부스트캠프의 미션 5. 적극적인 개발자 6. 말랑말랑한…

꾸준히 성장할 수 있는 개발자 [부스트캠프 2020 챌린지 1주차 후기]

이번주 월요일부터 부스트캠프 챌린지가 시작되었다. 보안 때문에 실제 학습내용은 공유할 수 없지만 1주간의 느낀점들을 공유해보려 한다. (의식의 흐름 주의..!! ) TMI 모음 #. Series 1. 개발 = 구현 + 개선 2. 정답이 없다는 게 정답 3. 가독성 좋은 코드는 무엇일까 4. 온라인의 장점 : 질의응답 5. 남는 건 사람이다 6. 피어세션 …

git 타임머신 타고 여행하기 [2020 오픈소스 컨트리뷰톤]

2020 오픈소스 컨트리뷰톤 멘티선정 발표와 함께 선착순으로 오픈소스101 교육 프로그램을 신청할 수 있었다. 평소 깃을 써보긴했지만, 타임테이블을 보니까 rebase, blame 등 익숙하지 않은 git 기능들도 배울 수 있었고, 평소에 궁금했던 오픈소스 협업 생태계(?)도 알려주신다고 해서 바로 신청하게 되었다. 교육은 리얼리눅스의 송태웅님께서 진행해…

2020년 상반기 회고

올해는 나에게 의미있는 해이다. 처음하는 것도 많았고, 기존에는 폐쇄적으로 공부를 했다면, 앞으로는 개방적으로 공부하기로 마음먹었던 해이기도 하다. 그리고 오늘 부스트캠프 2020 챌린지 합격여부 발표가 났는데, 지난 나를 돌아보고 앞으로 내가 할 것들을 계획하기 좋은 시점이라 생각해서 상반기 회고글을 적기로 마음먹었다. 블로그시작 (2/6~) NAVER…

🤔 웹 그래픽스 탐험기 1주차 후기!

Series 🧙‍♂️ 개발자 2차 전직하기 - Web Graphics Blah Blah 이번주에는 canvas, webgl로 웹에서 이미지를 렌더링,처리하는 연습과 매우간단한 인터랙션도 넣어보는 연습을 해보았다. 데이터를 화면에 촤작 뿌려지는 것을 실시간으로 확인할 수 있다는 게 프론트의 매력인데 단순히 텍스트노드가 아니라 대용량의 이미지나 그래픽을 뿌리는 것…

👀 Canvas cheatsheet (작성중)

1. Basic 1-1. getContext() 1-2. getImageData() 1-3. putImageData() 1-3. 2. Store / Reset 2-1. clearRect() 2-2. save() 2-3. restore() 3. Move 3-1. beginPath() 3-2. moveTo() 4. Draw 4-1. lineTo() 4-2. …

💾 0101 그래픽 데이터 (읽고 쓰고 맛보고 즐기고)

이번 포스팅에서는 컴퓨터가 어떤 방식으로 여러 그래픽 데이터들(이미지나 동영상 등 대용량 파일)을 읽고 쓰고 처리하는지 알아보고 여러 데이터 형식들을 정리해보았다. 1. 파일과 확장자 2. 마크업 파일 2. 이미지 파일 3. 동영상 파일 4. 폰트 파일 5. 참고자료 1. 파일과 확장자 컴퓨터 파일이란 컴퓨터 등의 기기에서 의미 있는 정보를 담는 논리적인…