데굴데굴

식별자가 유효한 범위 / 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 Quiz. 아래 코드에 존재하는 두 개의 console.log(x)의 결과는 각각 어떻게 될까? var x = 'global'; function foo() { var x = 'local'; console.log(x); } foo(); console.log(x); Answer. 'local' / 'global' 구분 설명 전역 스코프 코드의 가장 바깥 영역 지역 스코프 함수 몸체 내부 전역 변수는 어디서든지 참조가 가능하다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 참조할 수 있다. 지역 변수를 전역 변수에서 참조하려고 하면 ReferenceError가 발생한다. 스코프 체인 스코프가 계층적으로 연결된 것 스코프는..

웹을 구경하다가 자주 보게되는 이것 라이브러리를 쓸 수 있지만 동작하는 원리가 궁금해서 아래 글을 참고하며 간단하게 만들어보았다. How to Build an Animated Counter with JavaScript - Studytonight I am sure at some point in your life, while browsing the web, you have found a web page that shows an animated counter. A counter that starts from 0 and goes all the way up to some given number. Here is an example of how such a counter looks. In this artic www...

⚙️ 오늘 배운 주제 React Props & State 🐹 오늘의 기분 바닐라 자바스크립트에서 DOM과 이벤트 객체로 이벤트를 핸들링했던 것처럼, 오늘은 리액트에서 그렇게 하는 방법을 배웠다. props와 state의 차이가 무엇인지 공부할 때까지만 해도 괜찮았는데 막상 코드를 보니 머릿속이 또 새하얘졌다. 페어활동 전 코드펜 실습부터 어엉? 이러고 있었음. 어제 코치님이 저녁에 올려주신 코드펜 다른 예제들을 보면서 겨우 풀었다. 페어 시간에는 이 Props랑 State를 다루는 코드를 직접 써봐야 했다. 페어분과 같이 하니 생각보다 빨리 진행됐다. 이틀 동안 하는 과제길래 많이 겁먹었었는데 일찍 끝나서 신기함. 버튼 동작에서 막혀가지고 한참 헤맸었는데 애꿎은 원본 데이터를 렌더링하고 있었다는 걸 뒤늦..

⚙️ 오늘 배운 주제 React SPA 🐹 오늘의 기분 클릭할 때마다 위에 주소가 바뀌는 원리가 궁금했었는데 SPA에서는 path 속성 덕분에 가능하다는 걸 배웠다. 오늘은 과제하다가 문득 이렇게 베이스 코드가 다 주어지고 남은 부분만 채워넣는 것도 어려운데, 다음에 솔로 프로젝트나 진짜 프로젝트는 잘 할 수 있을지 걱정이 됐다. 나중에 정말 멘붕오지 않도록 코드를 직접 써보는 연습을 꾸준히 해야겠다는 생각을 다시금 하게 되었다. 🗝 키워드 SPA, MPA, 라우팅, react-router-dom, BrowserRouter, Routes, Route, Link 🗣 스스로에게 설명 SPA, Single Page Application 기존 웹사이트는 페이지 전체를 불러오는 방식으로 작동됐었다. 이는 사용자가..

⚙️ 오늘 배운 주제 React 기초 🐹 오늘의 기분 리액트를 처음으로 접해보았다. JSX 문법이 익숙하지 않아서 코드를 쓰며 많이 헷갈렸다. 페어분이 리액트를 써보신 적이 있어서 덕분에 많이 배웠다. 혼자였으면 어엄청 헤맸을 듯 ㅠㅠㅋㅋㅋㅋ 그리고 오늘 페어 시간에 내 실수로 오류가 생겨서 시간을 조금 많이 잡아먹었다ㅠㅠ.. npm으로 실행하는 모든 명령어가 작동이 안 돼서 테스트도 못하고 페어분이 공유해주시는 화면 보면서 해야 했다. 페어분께서 이해해주셔서 다행이었지만 너무 죄송했다.. 흑흑 그래도 페어 시간 끝나고 해결해서 다행이다. 오전에 너무 피곤해서 집중이 힘들었다. 내일도 오늘과 비슷한 일정인데 부디 내일은 오늘보다 덜 피곤했으면 좋겠다. 영양제도 잘 챙겨먹고 운동도 잘하고 있는데 왜인지 모..

⚙️ 오늘 배운 주제 fetch API 🐹 오늘의 기분 fetch API를 이용한 비동기 마지막 파트 과제를 하고 라이브세션에서 같이 풀이했다. 어제 비동기에게 호되게 혼났기 때문에 오늘은 아침에 조금 일찍 일어나서 어제 과제에 썼던 코드를 싹 지우고 다른 데에 옮겨둔 후에 백지 상태로 다시 작성해봤다. 어제 복습했던 내용을 상기하며 써보려 했는데 그래도 여전히 오류가 많이 발생했다 ㅋㅋ ㅜㅜ 그래도 이렇게 써보니 다음 과제를 할 때는 어제보다 덜 막혔다. 오늘 현업에 계신 수료생 분께서 강연도 해주셨는데 직접 경험하셨던 것들을 기반으로 조언을 해주시니 훨씬 더 와닿았다. 블로깅도 강조하셨는데 놓지 말고 꾸준히 해야겠다는 생각을 했다. 사실 어제 비동기가 너무 어려웠어서 TIL 스킵할까 생각했었는데 꾹 ..

⚙️ 오늘 배운 주제 비동기, Node.js 🐹 오늘의 기분 비동기 실습을 했다. 막상 코드로 써보려니까 도저히 무슨 말인지 모르겠어서 멍하니 화면만 들여다보고 있었다. 근데 오후에는 또 Node.js 모듈을 배우고 그걸 기반으로 비동기 실습을 더 깊게 해서 완전 힘들었다. 에너지가 쫙 빠져서 세션 끝나자마자 20분 잤다. 지금은 유어클래스 개념 영상에 있던 예제 코드들을 전부 직접 쳐보면서 이해하려 노력 중이다. 저번 주에 봤던 영상인데 왜 처음 보는 것 같은 느낌이지 ㅋㅋㅋ ㅜㅜ 볼수록 생소하다. 주말에 이걸 다시 봤어야 했는데! 🗝 키워드 동기, 비동기, setTimeout, 콜백 지옥, Promise, resolve/reject, .then/.catch, async/await, Promise.al..

⚙️ 오늘 배운 주제 고차함수 응용, 비동기 🐹 오늘의 기분 오늘은 거의 하루종일 과제만 했다. 과제에서 멘탈 탈탈 털리고 진빠져있는데 또 비동기까지 공부해야 해서 완전히 넋이 나가버렸던 하루였다. 자바스크립트 라이브러리인 Underscore.js를 모티브로 underbar 라이브러리를 직접 구현해보았다. 여름에 들었던 자료구조 강의에서 자료구조를 직접 구현해보는 게 늘 과제로 있었어서 감이 아예 없진 않았다. 떠오르는 삽질의 기억... 다만 콜백함수를 이용하는 게 아직 익숙하지 않아서 코드를 쓰다가 이게 맞나?하고 머리가 자꾸 멈췄다. 예시 코드와 페어분의 구글링 실력이 없었다면 아예 못 풀었을 것이다. 비동기는 유어클래스에 있는 개념 영상 보기에도 시간이 빠듯해서 코드를 직접 작성해보지 못했다. 그래..