반응형 호이스팅(Hoisting) 이해하기 호이스팅(hoisting)은 '변수와 함수의 선언부가 각자의 현재 스코프에서 물리적으로 코드 최상단으로 끌어올려지는 것'으로 많이들 알고계시지만 실제로는 그렇지 않습니다. 자바스크립트 엔진 내부적으로 처리를 그렇게 하는 것입니다. 컴파일 단계에서, 여러분이 작성한 코드가 실행되기 바로 직전에 변수와 함수의 선언부들이 쭉 스캔 됩니다. 스캔 된 변수와 함수의 선언부들은 Lexical Environment로 불리는 자바스크립트의 자료구조 메모리상에 추가됩니다. 따라서 메모리에 존재하는 변수와 함수는 실제 선언 이전에 사용될 수 있습니다. - cada님의 벨로그 번역글 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드 그자체는 작성한 위치 그대로 존재합니다. 함수 선언식(function decl.. 2020. 11. 14. <script> 태그의 속성 async와 defer의 차이점 HTML 안에 자바스크립트를 포함 시킬 때 다양한 방법이 존재합니다. 크게 4가지를 알아보겠습니다. 1. 태그 안에 태그를 포함시킨 경우 브라우저는 HTML을 쭉 읽다가 태그를 만나면 스크립트를 먼저 실행해야 되므로 HTML 파싱(DOM 생성)을 멈춥니다. 필요한 .js 파일을 서버에서 받아와 다운로드 후 실행합니다. 다시 HTML 파싱을 시작합니다. 모든 DOM 생성이 완료됩니다. 이런 방식으로 스크립트를 불러오게 될 경우, 스크립트 파일 용량이 크거나 인터넷 환경이 느린 경우에 페이지 로딩이 길어질 수 있는 문제가 발생할 수 있습니다. 또한 태그 아래의 DOM 요소를 접근하는 코드가 있을 경우 JavaScript가 먼저 실행됐기 때문에 DOM 요소에 접근이 불가능합니다. 따라서 좋은 방법은 아니라고 .. 2020. 11. 12. 깃허브 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. 이전 1 ··· 23 24 25 26 27 28 다음 반응형
