본문 바로가기
반응형
깃허브 README.md 파일에 이미지, gif 업로드(feat. VSCode) 코딩에 대한 감을 잃지 않기위해 토이 프로젝트들을 제 깃허브 README.md 파일에 올리려고 합니다. 이미지나 gif를 업로드하면 더 좋을 것 같아서 소소한 방법을 공유 해봅니다..! 1. 깃허브에 로그인을 한 후 업로드 할 저장소에 들어갑니다. 2. Issues 탭에서 New issue를 클릭합니다. 3. 업로드 할 이미지 또는 gif를 드래그 앤 드롭 합니다. 4. README.md 파일에 복붙 후 업로드하면 됩니다. 추가로, 사진은 깃허브 서버에 업로드 된 것이기 때문에 생성하던 이슈의 이미지는 저장하지 않아도 그대로 남는다고 합니다. VSCode 실시간으로 README.md 파일 보기 VSCode의 확장프로그램으로 Markdown Preview Enhanced를 다운 받으시면 README.md .. 2020. 11. 10.
검은화면에 글자 나타내기 17분 동영상을 2시간만에 완성했지만 체감은 17분이었다. 역시나 인터렉티브 개발자 김종민님 유튜브를 보고 따라쳤고, 화면에 글자가 나오는 순간 정말 희열을 느꼈다. 쓰다보니 코드가 상당하다. 따라치면서도 '오, async?! promise?!' 라고 혼자 신기해하면서 즐겁게 따라했다. CSS는 거의 건들지 않고 자바스크립트만으로 저런 결과물이 나온다는게 다시봐도 신기하다. 금방 끝날 줄 알고 잠깐 쉴 겸 시작했는데 어느새 밖은 밤이 되었다. 쉴 때나 심심할 때 게임하듯이 코딩도 할 수 있구나 싶었다. 이제 다시 공부하러 가야겠다. 2020. 11. 6.
Interactive Developer 유튜버 Interactive Developer 김종민님을 아시나요? 이 분 영상을 유튜브 알고리즘에 의해 보게 됐는데 굉장히 창의적이고 능력자이십니다. 좋은 말씀도 많이 하시고 호감형이셔서 계속 영상을 보다가 "나도 한 번 만들어보고 싶다."란 생각을 하게 되었습니다. 그래서 바로 실행해봤습니다. 하지만 현재 공부하고 있는 것도 많고 전문적으로 배우기엔 집중하기 어려울 것 같아서 하루에 조금씩 토이 프로젝트식으로 따라치려고 합니다. 정말 따라치기만 했습니다. 근데 정말 재밌었습니다. 이게 그려지는게 신기하고 힐링하는 기분이었어요. 앞으로도 꾸준히 따라쳐보고, 만들어보고 할 생각입니다. 나중엔 이걸 모아서 웹 페이지를 하나 만들어봐도 재밌을 것 같네요. 취미가 헬스밖에 없었는데 김종민님 덕분에 코딩도 취미가 될 .. 2020. 11. 6.
리액트를 왜 쓰는 걸까? 자바스크립트도 아직 친해지지 못했는데 리액트란 녀석이 눈에 띄기 시작했습니다. 프론트 엔드 3대장 중 가장 인기있고 기업에서 요구하는 스택이기도 합니다. 여러 비교 영상이나 글도 굉장히 많아서 3대장을 쉽게 비교해 볼 수 있었고 결국 리액트로 결정했습니다. 제 개인적인 생각은 무겁고 배우는데 오래걸리는 앵귤러, 배우기는 쉽지만 개인 프로젝트에 적합한 뷰의 절충선이 리액트가 아닌가 싶습니다. 또한 리액트 웹사이트 설명이 굉장히 잘 되어있고 친절합니다. 하지만 결국 이것도 개인적인 생각이고 도구일 뿐입니다. 저희는 사용 방법을 익히고 본인에게 맞는 도구를 사용하면 됩니다. 페이스북은 왜 리액트를 만들었을까? 페이스북은 아마 단일 웹 사이트 중에서 가장 규모가 큰 웹 사이트가 아닐까 싶습니다. 게다가 사용자와.. 2020. 11. 5.
왜 자바스크립트일까? 개인적으로 HTML과 CSS는 정말 재밌게 배웠습니다. 자바스크립트(javascript)도 초반에는 재밌었습니다. 그러나..갈수록 어렵고 깊이가 엄청난걸 느꼈습니다. 이래서 T자형 커리어가 중요한가봅니다. 앞으로 자바스크립트, 리액트를 중점적으로 공부할 생각인데 이 녀석은 제대로 알고가야 사용하면서도 찝찝하지 않을 것 같아서 글로 정리해보려 합니다. 어떻게 탄생하게 되었을까? 넷스케이프에 대해 아시나요? 1994년 마크 앤드리슨은 넷스케이프 내비게이터라는 웹 브라우저를 개발했고, 인터넷 사용자들의 폭발적 반응을 얻어 약 90%의 시장점유율을 차지했었습니다. 마크 앤드리슨은 정적인 페이지에 대해 "어떻게 하면 동적인 웹사이트를 만들 수 있을까?"를 고심하게 되고, DOM 요소를 조작할 수 있는 스크립트 언.. 2020. 11. 4.
개발자가 왜 되고 싶을까? 면접에서 의미있는 질문을 하고 있나요? 개발자 마광휘님의 블로그에서 발견한 글입니다. 개발자 취준생으로서 면접에 대한 글이 있어서 보게 되었는데요. 읽는 내내 생각에 잠기게 하는 글이었습니다. 라이브러리를 사용하는 이유, 이 언어를 사용하는 이유, 더 나아가 내가 개발자가 '왜' 되고 싶은지까지 생각하게 되어 글로 정리하려고 합니다. 나는 개발자가 왜 되고 싶을까? 돌이켜보면 처음 개발자가 되고 싶은 이유는 단순했습니다. 제가 본 책에 나온 성공한 사람들은 현재 익숙한 서비스를 만들어낸 사람들이었습니다. 그곳엔 코딩이라는 주제가 심심치 않게 나왔고 자연스럽게 접하게 되면서 그것에 대한 영상과 책들을 찾게 되었습니다. 일하는 시간은 점점 길어지고 힘겨워졌다. 40시간을 일한 주는 오히려 휴가에 가까웠다. .. 2020. 11. 2.
렌더 트리(Render Tree), CRP(Critical Rendering Path) 렌더 트리(Render Tree)란? DOM과 CSSOM은 독립적인 개체입니다. 하나는 콘텐츠를, 다른 하나는 문서의 스타일 규칙을 설명합니다. 브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계, 최종 보스인 렌더 트리(render tree)에 대해 알아보겠습니다. 렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 됩니다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리가 됩니다. 최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요합니다. 브라우저가 렌더 트리를 생성하기 위해 하는 작업은 대략 다음과 같습니.. 2020. 10. 31.
반응형

티스토리툴바