본문 바로가기

전체 글99

초등학생도 이해하기 쉬운 자바스크립트 '단축평가' 본격, 자바스크립트 쉽게 설명하며 스스로 이해하기 📝 👩🏻‍🏫 단축 평가란 무엇일까요? 한 마디로 말하자면, 단축 평가는 두 가지 조건 중 하나만 충족되면 결과를 바로 내놓는 것이랍니다. 아직 이 개념이 잘 와닿지 않을 테니 예시를 통해 설명해 볼게요. && : 초콜릿 먹기 🍫 여러분이 초콜릿이 먹고싶어서 자바스크립트 가게에 방문했어요. 가게에는 '킷캣', '킨더', '하리보' 세 가지 상품이 보여요. 첫 번째로 하리보를 집었는데 바구니가 이렇게 말해요. 🛍️: "삐빅, false 입니다! 다시 담아주세요." let 하리보 = false; let 킨더 = true; 하리보 && 킨더 // false 왜일까요? 바로 하리보는 초콜릿(true)이 아닌 젤리(false)기 때문이에요. 바구니는 처음부터 fal.. 2023. 9. 24.
Our Daily Commute 🍎 Today's Expression overlook : fail to notice (간과하다) mundane : boring (평범한, 지루한) take in : full understand something (받아들이다) catch bits of... : hear parts of (지나가는 것을 잡아 듣다) occupy... with : keep busy with something (할애하다) 👩🏻‍🏫 Overall Feedback Great job on today's lesson! I thought you did a great job communicating all your thoughts in a very fluid way that I could understand. You also had cle.. 2023. 9. 23.
Context Switch가 일어날 때는 왜 overhead가 클까? 의문이 든 이유 Context Switch 개념에 대해 공부하다가 아래의 내용을 접했다. User mode에서 Kernel mode로 가는 건 Context Switch가 상대적으로 overhead가 적은 작업이다. Context Switch 없이 CPU 수행 정보 등 context의 일부를 PCB(Process Control Block)에 저장하기 때문이다. 다만, Kernel mode에서 User mode로 갈 때 Context Switch 발생 시에는 그 부담이 훨씬 크다. Cache Memory를 flush 할 때 overhead가 매우 크기 때문이다. 왜 Context Switch가 발생할 때 overhead가 큰 것일까? Context Switch란? Context Switch(문맥 교환)는 .. 2023. 9. 20.
자바스크립트 symbol은 언제 사용하면 좋을까? 의문이 든 이유 자바스크립트 symbol은 ECMAScript6(2015)에 도입된 7번째 타입이라고 들어는 봤지만, 그다지 깊게 파본적이 없었던 것 같아서 깊게 공부하는 중이다. 생각해 보니 (몰라서 그랬을 수도 있지만) 코딩을 할 때도 적극적으로 사용할만한 상황이 없던 것 같다. 하지만 알아두면 나중에 다 쓸 데가 있을 테니 언제 사용하면 좋은지, 사용했을 때의 장점도 한번 정리해 보자. 일단, symbol이란? 책 에 따르면, symbol에 대한 설명은 아래와 같다. 심볼(symbol)은 ES6에서 도입된 7번째 데이터 타입으로, 변경 불가능한 원시 타입의 값이다. 심볼 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다.. 2023. 9. 19.
왜 고차함수에서는 조건문과 반복문을 제거할까? 의문이 든 이유 고차함수 부분을 다시 공부하다가, 아래 네 가지 단어들과 관계성에 대한 의문이 들었다. '고차함수' '함수형 프로그래밍' '순수함수' '불변성' 왜 배열의 고차함수에서 조건문 반복문을 쓰면 좋지 않은 것일까? 사실 아직까지는 알고리즘 문제를 풀든 코딩을 하든 무의식적으로 배열의 메서드들보다 손에 더 익은 조건문 반복문을 쓰고 있는데, 그게 좋지 않다고 하니 의문이 들었던 것 같다. 더불어, 아직 코드 상에서 위의 의문에 대한 해답을 제대로 느껴보지 않아서이기도 했다. 일반적으로 알려진 바로는 함수는 최대한 간결하고 직관적으로 나타내야 한다고 알고 있다. 조건문 반복문을 남발하면 가독성이 좋지 않고, 다른 층의 스코프 블록을 만드는 것이므로 코드 작성 시 실수할 확률도 높아지므로 사이드 이.. 2023. 9. 17.
자바스크립트 앞에 붙는 단어가 궁금해 - '모던' 편 들어가며 자바스크립트를 처음 공부하는 사람들이라면 자바스크립트 앞에 붙는 수식어인 '모던'이 무엇인지 궁금할 것이다. 개발자들은 너무나도 자연스럽게 사용하는 '모던 자바스크립트' 라는 단어를 더 자세히 알아보자. 일반적인 모던 자바스크립트의 의미 모던 자바스크립트란, ECMAScript6(2015) 이후의 방법론을 구현한 자바스크립트다. 한마디로 정의하자면, 모던 자바스크립트에서의 '모던'은 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술을 가리킨다. 이는 ECMAScript 6 (ES6) 이후의 기능과 개선된 개발 방법론을 포함한다. 필자가 이전에 작성한 를 보면 알 수 있듯이, 자바스크립트의 그간 역사에서 ES6를 빼놓고 이야기할 수 없을 정도.. 2023. 9. 15.
알아두면 재미있는 자바스크립트의 역사 아래 내용은 드림코딩: 자바스크립트의 역사와 현재 그리고 미래 영상을 참고한 글입니다. 유익한 내용 전해주신 엘리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다.  자바스크립트의 역사를 왜 알아야 합니까새로운 언어를 배울 때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생 배경에 대해 이해하는 것이 중요하다고 한다.과거를 알아야 현재가 보이고, 미래를 예측할 수 있다고 하지 않나. 자바스크립트가 어떻게 탄생했으며 어떤 문제를 해결하기 위해 만들어졌고, 이 언어를 다룰줄 알면 어떤 분야에 더 활용할 수 있는지 알 수 있기 때문이 아닐까 싶다. 문법 공부보다는 상대적으로 우선순위가 낮을 수 있지만, 알아두면 재미있는 자바스크립트의 역사에 대해 정리해 보자.  태초에 모자이크라는 .. 2023. 9. 10.
왜 ES6부터 클래스 개념이 추가된걸까? 질문의 배경 자바스크립트 ECMAScript의 히스토리와 클래스 개념에 대해 공부하다가 문득, ES5에서도 생성자 함수와 프로토타입을 통해 충분히 객체지향 언어의 상속을 구현할 수 있는데 왜 클래스 개념을 추가했을까 궁금증이 생겼다. 궁금증에 대한 해답을 [문제 정의 - 해결]의 틀로 살펴보자. 문제 정의: 추가되기 전의 상황 자바스크립트의 클래스 개념이 ES6(2015)에서 추가된 이유는 아래와 같다. 1. 쓰는 사람이 어렵다는데 어떡해 ES5까지는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수는 있었으나, 기존 자바나 C+과 같이 클래스 기반의 객체지향 프로그래밍에 익숙한 프로그래머들에게는 혼란을 주었다. 이는 자바스크립트를 어렵게 느끼게 하는 장벽과도 같았다. 2... 2023. 9. 7.
효과적인 개발 공부 방법 - 학습 부채감 해소하기 학습 부채감 부트캠프 6개월 동안 마음속을 떠나지 않았던 단어. 빠른 시간 내에 압축적으로 배우고 적용해야 하는 부트캠프 학습 방식으로 인해 부채감을 자주 느꼈다. 매일매일 과식을 하고 소화를 시키지 못하고 있었던 것이다. 그 어렵다는 고차함수를 하루이틀 안에 배우고, 배우면 배울수록 어려운 게 CSS인데. 나는 정말 겉핥기만 하는 수준이라 공부하는 내내 잘하고 있는 것일까, 불안했다. 불안은 프로젝트 합류 직전에 가장 심했다. 부트캠프의 마지막 과정인 메인 프로젝트. 팀원들과 하나의 서비스를 직접 만들어야 했는데 그동안 답이 있는 과제와 퀴즈를 풀 때는 그냥 넘겼다고 쳐도, 직접 만드는 것은 아예 다른 일이었다. 물론 이런 생각을 가지는 사람들은 나뿐만이 아니었다. 꽤 많은 동기들이 이러한 불안을 느끼.. 2023. 9. 7.
이벤트 루프(Event Loop)의 동작 원리 아래 내용은 우아한테크: [10분 테코톡] 🍗 피터의 이벤트루프 영상을 참고한 글입니다. 유익한 내용 발표해주신 피터 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다.  0. 시작하며,이벤트 루프는 들어봤지만, 어떻게 동작하는지 잘 모를 수 있다. 이해하기 쉬운 예시 코드와 그림을 통해 원리를 샅샅이 파헤쳐보자.  1. 비동기 코드 예시먼저, 아래의 예시 코드를 보자.  console.log('잘 들어갔어?');setTimeout(function() { console.log('똑똑');}, 1000);console.log('들어간거 맞아?'); 중간에 있는 setTimeout은 두 번째 인자로 들어간 시간(단위: ms)만큼 기다린 후에, 첫 번째 인자로 들어간 함수를 실행시키는.. 2023. 9. 2.
JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 👩🏻‍💻 JavaScript 코드를 HTML보다 밑에 작성해야 하는 이유는 무엇인가요? 알림창 Open 💁🏻‍♀️ 요약하자면 , 페이지 로딩 속도를 향상시킬 수 있고, DOM 조작 및 이벤트 처리가 효율적으로 이루어질 수 있기 때문입니다. 1. 로딩 순서 웹 브라우저는 HTML 문서를 위에서 아래로 파싱하며 로딩하는데, HTML 문서 내에 있는 요소들을 만나면 해당 요소들을 순서대로 처리하게 됩니다. 따라서 HTML 문서에 포함된 JavaScript 코드도 순차적으로 처리됩니다. 만약 JavaScript 코드가 HTML보다 위에 위치한다면, HTML 파싱 중에도 JavaScript 코드를 만나게 됩니다. 이 경우 브라우저는 JavaScript 코드를 실행하려면 HTML 파싱을 중단하고 코드를 처리해야 하.. 2023. 8. 29.
[CSS 단위] 아직도 헷갈린다면 이제는 확실히 알아두자. 아래 내용은 우아한테크:  [10분 테코톡] 애슐리의 CSS의 단위 영상을 참고한 글입니다. 유익한 내용 발표해주신 애슐리 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 0. CSS 단위 : length 자료형CSS 단위는 CSS에서 사용되는 값들의 길이나 크기를 나타내기 위한 단위이다. 오늘은 CSS의 단위들 중, length 자료형에 속하는 단위들을 알아보겠다. length는 폰트 사이즈뿐만 아니라 width나 height와 같이 길이값을 나타내는 자료형이다. CSS에서는 길이값을 나타내기 위해서 px, rem, em등과 같은 다양한 단위들이 있는데 그 단위들은 크게 절대 길이 단위와 상대길이 단위로 나뉘게 된다.절대 길이 단위는 px, inch, pt와 같이 고정된 크기.. 2023. 8. 27.

티스토리툴바