Web + APP/JavaScript 썸네일형 리스트형 TypeScript Modules 안녕하세요 ! 꼬동입니다. 주말에 할 건 없고, 글이나 쓸까하여 카페에 와보았습니다. 무슨 글을 쓸까 하다가.... 모듈에 관련해서 글을 써야겠다고 생각이 들어서 ! 모듈에 대해 써보겠읍니다. 개발을 하다보면, 모듈이라는 단어를 많이 접하게 됩니다. 추상적으로 해석하면, 모듈이라는 것이 하나의 기능 블록이라고 볼 수 있는데요. 하지만 우리는 전문적인 프로 개발자 어디 가서 "모듈은 하나의 기능 블록" 입니다. 라고 말하기엔 너무 짜치죠. 좀 더 세부적으로 알아보자고요. 애초에 모듈이라는게 건축학 쪽에서 쓰던 단어입니다. 16세기 때부터 써왔던 단어였는데, 이게 컴퓨터 공학 쪽에서도 쓰이게 된것이죠. 사실 개발이라는게 하나의 건물을 짓는거와 다름이 없으니까, 이를 그대로 써도 의미상 크게 다르지 않아서 쓸.. 더보기 setTimeout의 this와 / window.setTimeout을 하지 않는 이유 안녕하세요. 꼬동입니답. 오늘은 setTimeout 메소드에 관련해서 얘기를 해보려 합니다. setTimeout 메서드는 지정한 시간 후에 함수나 지정한 코드를 실행하는 타이머를 설정하는 메서드입니다. 그리고 clearTimeout으로 이를 취소할 수 있죠. 비슷한 함수로는 setInterval이 존재합니다. setTimout에서 this의 경우 여러분 예상과는 다르게 동작할 수 있습니다. 그 이유는 setTimeout이 실행하는 코드는 setTimeout을 호출했던 함수와는 다른 실행 맥락에서 호출되기 때문인데요. 호출 함수의 this 키워드 값을 설정하는 일반적인 규칙이 여기서도 적용되며, this를 호출 시 지정하지도 않았고 bind를 바인딩을 하지 않는 경우 window를 가리키게 됩니다. 이를 .. 더보기 2022년 웹 개발의 기준 안녕하세요. 좋은 글 발견해서 번역하여 (by papago) 글을 작성하려합니다. https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022/ The baseline for web development in 2022 - LINE ENGINEERING TL;DR:The baseline for web development in 2022 is: low-spec Android devices in terms of performance, Safari from two years before in terms of Web engineering.linecorp.com 다양한 기기와 웹 브라우저, 네트워크 등 웹을 좌지우지하는 요소들이 .. 더보기 express 새로고침 시 404 Not Found 해결 안녕하세요. 우선 새해 복 많이 많이 받으세요 ^0^ 글을 하도 안 쓰니 방문자 수가 확 줄었더군요 최근 공연도하고, 설날이라 가족이랑 등산도 가고, PS5를 구매해서 이것 저것 게임을 하고 있습니다 ! 넘나 논거 같아서 ;;;; 찔림 그래서 최근 바닐라 JS로 원하는 페이지를 구성하고 있습니다. 너무 프레임워크에 의지하기 보다는, 기본부터 탄탄히 하려구요. 물론 서버는 express JS를 빌렸지만 ;; 우얐든, router를 연결하고 만들고 페이지 이동하게 만들었는데, 페이지를 이동하고 새로고침을 하니.... 404 Not Found가 뜨더군요. 그래서 원인을 찾아보니, React / Vue 등 JS 기반의 프레임워크 SPA(Single Page Application)를 사용하면 발생하는 문제라고 하.. 더보기 npm sill idealtree buildDeps에서 멈추는 현상 npm i express --save를 했는데, sill idealTree buildDeps 블라블라에서 진행이 안되어서, 어떻게 하면 할 수 있지 알아봤는데 package-lock.json을 삭제하기 => 안됨 npm install --verbose => 안됨 npm set registry http://registry.npmjs.org/ => 됨 이렇게 해결했어용 더보기 프론트엔드 취업 과제 안녕하세요. 꼬동입니다. 제가 최근 프론트엔드 개발자로 전환이 되었는데, 이 과정에서 항상 평가 받았던 것이 있습니다. 바로 프론트엔드 과제였는데요. 알고리즘 문제와는 다르게 정말 과제가 주어집니다. 예를 들어서 "쇼핑몰을 만들어주세요. 다이어리를 만들어주세요. 댓글 창을 만들어 주세요." 등 이런 것들이요. 이러한 과제는 당황스럽기 마련입니다. 왜냐면 실질적인 프로젝트를 하기 전엔 이를 경험할 일이 없거든요. 게다가 이들은 아마 Vanilla JS로만 문제를 해석하라고 할 것임이 분명합니다. 그렇다면 저희는 어떻게 준비해야할까요? 다행히도 제가 좋은 글을 발견해서 이를 기반으로 제 생각을 써보려 합니다. 글의 출처는 아래와 같으며, 아래에서 문제도 풀어볼 수 있더라고요. 굉장히 좋은 경험이라 생각합니다.. 더보기 Iterator / Generator 안녕하세요. 꼬동입니다. 현재 저는 다양한 준비를 하고 있는데, 그 준비과정에서 만난 JS의 Iterator / Generator에 대해서 자세히 알아보려고 합니다. 갑시다 ! 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예인데, 배열에 values 메서드를 써서 이터레이터를 만들 수 있습니다. 이 상태에서 next 메서드를 호출하면 value 프로퍼티와 done 프로퍼티를 반환합니다. const it = [1,2,3].values(); it.next() // {value: 1, done: false} it.next() // {value: 2, done: false} it.next() // {value: 3, done: false} i.. 더보기 실행 컨텍스트와 클로저 안녕하세요 ! 다들 새해 복 많이 받으시고 있나요 !! 안 받으시고 있으시다면, 어서 챙겨가세요 !! 이번 글에선 실행 컨텍스트와 클로저를 배워 보려고 합니다. 저는 항상 클로저라는 개념이 어렵게 다가왔었는데, 그 이유가 실행 컨텍스트라는 개념을 몰라서 어렵게 느껴졌던거 같아요. 그러니 이번엔 '실행 컨텍스트와 클로저'를 같이 배워보려합니다. 정확히는 아래를 배울 거에요 ! 실행 컨텍스트의 개념 활성 객체와 변수 객체 스코프 체인 클로저 시작합니다 ! 실행 컨텍스트 개념 기존에 언어를 공부해보셨다면 Call Stack의 개념을 들어보셨을 거에요. C언어로 예를 들면 함수의 호출 정보, 지역 변수, 인자값 등이 차곡차곡 쌓이는 스택을 의미해요. 그래서 콜 스택의 호출 정보 등으로 코드의 실행 과정을 추적하.. 더보기 이전 1 2 다음
