👉 해당 글은 데이원컴퍼니에서 진행하는 제로베이스 프론트엔드 스쿨의 강의 중 하나인 JS 기초 강의를 제작한 후기를 담은 글입니다 :) 👉 제로베이스 프론트엔드 스쿨의 강의를 맛보고 싶으신 분들은 해당 링크에서 맛보기 강의를 들으실 수 있습니다. ☘️ 첫 연락 데이원컴퍼니에서 링크드인으로 첫 연락을 주시고 꽤 고민을 많이 했더랬다. 처음 하는 교육이기도 하고 스스로 아직 실력이 부족하다고 생각했는데, 처음 공부를 시작하는 제로베이스 학습자를 기반으로 하는 교육이라고 하시길래 자신감을 되찾고 하겠다고 결정했다. 동기 애들이나 초, 중등 학생을 대상으로 코딩 교육은 경험이 있었기 때문에 쉽게 설명하는 건 자신 있었고, 이 분야를 공부하기 전에 정말 아무것도 몰랐던 사람으로 더 공감할 수 있는 부분이 있겠다고..

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...

만일 Typescript로 개발하던 중에 아주 잘 작성된 JS 모듈을 가져와서 쓰고자 한다면, 해당 모듈 내의 함수는 typescript로 정의되어있지 않기 때문에 컴파일 과정에서 오류가 뜬다. 모듈이 해당 속성을 가지고 있음에도 type이 정해져있지 않아서 가지고 있지 않다고 해석하는 것이다. 다음과 같이 declare 키워드를 써서 정의해두면 type이 인식되어 typescript compiler가 해석할 수 있게 된다. declare let module: any 간단히 말해서 컴파일러에게 "이건 이미 존재하고 다른 코드에서 참조할 수 있다."라고 설명하는 것이다.

배경 함수들끼리 데이터를 공유하고 싶다면 어떻게 해야할까? 전역 스코프에 해당 데이터를 둔다면 다른 내부 요소에 의해 망가질 수도 있고, 순서가 뒤엉켜 전역 스코프의 요소가 존재하지 않을 수도 있다. 따라서 모듈이라는 방식을 이용하면 각각 필요한 모듈을 import하여 사용함으로써 어디에서 에러가 나는지 파악하기 쉽다. 모듈을 만들고 import, export 하는 시스템을 모듈 시스템이라 하는데 현재 2가지의 모듈 시스템이 활발하게 사용되고 있다. CommonJS ES modules 차이점 기초 문법 CommonJS const module = require('어쩌구'); const { func } = require('어쩌구'); module.exports = '어쩌구'; // default export..

JS 동작원리 js는 싱글 쓰레드 기반 언어이므로 호출 스택이 하나고 한 번에 한 작업만 처리할 수 있다. 이에 따른 문제는 하나의 로직을 수행하는데에 시간이 오래 걸리면 다른 로직이 멈춰버린다는 것이다. 이를 해결하려면 비동기 콜백을 사용할 수 있다. 런타임 js 런타임은 JS엔진, web api, task queue, event loop, render queue로 되어있다. 엔진 js 엔진의 대표적인 예는 Google의 V8 엔진이다. Chrome과 Node.js에서 이를 사용한다. memory heap : 메모리 할당 call stack : 호출 스택 위의 두가지로 엔진은 구성되어있다. Web API DOM, Ajax, TimeOut 등의 Web API가 잇다. Callstack에서 비동기 함수가 ..

ECMAScript 공부 ES5 이전 ES3 (1999) : 정규표현식, try/catch문 string string.length : 길이 속성 string.indexOf(string, [start]) : 해당 글자의 시작 index 위치 반환 string.lastIndexOf(string, [start]) : 해당 글자의 마지막 시작 index 위치 반환 string.search(string) : indexOf와 비슷하지만 정규표현식 사용 x string.slice(index, index2) : index부터 index2-1까지 자르기 음수 index는 뒤에서부터 셈 string.substring(index, index2) : slice와 비슷하지만, 음수 불가 string.substr(index, l..

후위표기법으로 계산기 만들기 계산기 관련 외주가 들어와서 해보던 중, 예전에 배웠던 후위표기법을 사용해야했다. 그런데 기억이 안나서 검색 없이 혼자 구현하려다 보니 너무 어려웠다... 검색해보니까 stack을 이용해서 후위표기법을 만드는 간단한 방법이 나와있어서 까먹지 않기 위해 기록한다. 후위 표기법 수식 트리 후위 표기법이란 계산식에서 계산을 위해 사용하는 표기법이다. 예제와 함께 살펴보자. 수식 : 9x3+1-3%3 수식이 주어졌을 때 비연산자와 연산자로 나눈 후, 각 항목을 하나의 노드라고 생각하면 트리 형태로 만들 수 있다. 이러한 트리는 수식을 트리라는 자료구조로 만든 것이니 수식트리, 즉 Expression Tree라고 불린다. 트리 순회와 표기법 트리를 순회하는 방식에는 prefix(전위)..

Typescript 참고 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (Typescript 공식 사이트) 배우는 이유 JS에서는 Type이 계속 체크되지 않는다. 1. 이는 암묵적 형변환, hoisting, 복잡성 문제를 일으킬 수 있다. 이러한 코드 상의 예상치 못한 버그를 없애기 위해 typescript를 주로 사용한다. hoisting : 끌어올린다는 뜻. javascript에서 선언문을 끌어올려 코드에서 사용할 때 순서에 상관없이 사용 가능하도록 하는 기술. typescript는 복잡한 예외처리 코드 없이 이를 수행한다. 2. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나..