자바스크립트 강의 6

HTML, CSS, Javascript로 크롬 시작화면 개발하기

Chrome 브라우저를 사용하는 사람이라면, Chrome Extension(크롬 익스텐션)에 대해 알고 계실겁니다. 크롬 익스텐션은 구글 크롬의 확장 프로그램으로, 크롬 브라우저를 더욱 편리하게 사용할 수 있도록 도와주는데요,html, css, javascript를 사용할 줄 아는 분이라면, 아주 간단하게 '크롬 시작화면'을 개발해 사용할 수 있습니다. 크롬을 사용하면서, 조금 더 사용하기 편한 북마크가 있으면 좋겠다! 라고 생각을 했었기 때문에이렇게 오른쪽 사이드바에 자주 사용하고 있는 웹 사이트들을 저장해놓고 사용하고 있습니다.  내가 만든 웹 페이지를 이렇게 크롬 익스텐션의 시작 페이지로 사용하고 싶다면,코드를 작성한 폴더 안에 manifest.json 이라는 파일을 추가하고, 아래의 내용을 작성해..

개발 이야기 2024.09.24

화살표 모양 함수는 뭐가 다를까?

자바스크립트에는 일반적으로 function 키워드를 사용해서 함수를 선언하는 방법 외에도화살표 모양의 기호를 사용하는 화살표 함수가 있습니다.  차이점 1화살표 함수는 function 키워드로 작성한 일반 함수와 어떤 차이점이 있는지,아래에 작성된 코드를 살펴보면서 살펴봅시다.function Counter() { this.count = 0; setInterval(function () { this.count++; console.log(this.count); }, 2000);}const counter = new Counter(); 코드를 실행하면, setInterval 함수에 전달된 콜백 함수의 this는 생성자 함수를 통해 새로 생성된 Counter 객체를 가리키지..

개발 이야기 2024.09.11

클로저는 도대체 뭘까?

클로저란 무엇일까요? MDN에 클로저가 무엇인지 검색을 해보면, 다음과 같이 설명되고 있습니다.주변 상태에 대한 참조와 함께 묶인 함수의 조합.내부 함수에서 외부 함수의 범위에 대한 접근을 제공. 위의 설명이 잘 와닿지 않으니, 조금 더 자세하게 설명해 보겠습니다.실행 컨텍스트에 대해 잘 모르시는 분들은 이전 포스트를 먼저 읽어주세요🧐실행 컨텍스트 글 바로 보기 코드의 실행 과정클로저는, 자바스크립트 엔진이 아래의 코드를 실행하는 과정을 살펴보면서 이해해 봅시다.let name = '개구리';function makeFunc() {    let name = '고양이';    function displayName() {        console.log(name);    }    return display..

개발 이야기 2024.08.29

인프콘🌱 후기

2024 인프콘에 다녀왔습니다!!추첨은 떨어졌지만,, 다행히 지식공유자로 초대권을 받아서 다녀왔습니다😊 꼭! 오프닝 세션부터 듣고 싶어서 오전 9시 20분쯤 도착했는데요, 정말 일찍 가서 듣길 잘했다는 생각이 드는 오프닝 세션이었습니다. 글로벌로 나가는 인프런! 영상이 자동으로 더빙, 그리고 번역되는 것이 정말 신기했습니다.. 😮 인프콘 발표는 아래의 발표들 외에도 많은 발표를 들었는데요, 너무 몰입해서 듣느라 사진을 못 찍었네요😅이번에는 저번보다 더 다양한 주제들이 있어서 좋았던 것 같습니다. 들었던 발표들에 대해 전부 작성하는 것보다는 가장 인상 깊게 들었던 세션에 대해서, 그리고 네트워킹 후기와 전반적인 느낀 점을 적어보려고 합니다! 우선 가장 인상 깊었던 세션은 바로 '목적 조직 구조 안에서..

일상 이야기 2024.08.06

자바스크립트로 상태 관리하기

이번 강의의 주요 주제 중 하나인 상태 관리에 대해 이야기해보려고 합니다. ‘상태 관리’라는 단어를 들으면 대부분 Redux나 Context API와 같은 상태 관리 라이브러리를 떠올릴 것입니다. 이번 글에서는 라이브러리가 아닌, 순수 자바스크립트로 상태 관리를 하는 방법에 대해 다뤄보겠습니다. 조금 더 자세히 이야기해 보면, 상태는 웹 페이지 내에서 눈에 보이거나, 눈에 보이지 않는 모든 변화하는 데이터를 의미합니다. 예를 들어, 사용자가 입력한 데이터, 버튼, 체크박스, 게시글 등이 상태에 해당합니다. 그리고 이들을 관리하는 것이 바로 상태 관리입니다. 상태는 각각의 화면에서, 혹은 보이지 않는 영역에서 실시간으로 변화하는 값이기 때문에, 상태가 언제, 어떠한 값으로, 어떻게 변경되었는지를 관리하는 ..

개발 이야기 2024.07.31

한 번에 끝내는 자바스크립트 강의를 제작하며

약 1년 만에 새로운 강의를 출시했다.제작 기간이 길었던 만큼 후기를 써보려고 한다. 강의 커리큘럼자바스크립트 입문 강의를 출시한 이후에 어떤 강의를 제작할까 고민이 많았는데,자바스크립트 초보자 강의를 제작하기로 결심했다. 처음에는 자바스크립트 심화 과정의 강의를 준비하려고 했었다.자바스크립트의 독특한 this에 대해, 그리고 렉시컬 스코프와 스코프 체인, 프로토타입, 클로저 개념까지. 실제로 이렇게 아래의 이미지처럼 스크립트와 keynote까지 제작을 했었고,반 이상 녹화 후에 편집까지 마친 상태였다. 준비를 하던 도중에 계속 아쉬웠던 부분이 있었는데, 그게 바로 '프로젝트'였다. 나는 개발에 있어서는 어떠한 기술이든프로젝트를 통해 학습하는 것이 가장 효과적이라고 생각한다.나한테만 맞는 방법일 수도 있..

강의 이야기 2024.07.20