본문 바로가기

전체 글303

[코어 자바스크립트] 클로저 활용 사례 클로저는 다양한 곳에서 광범위하게 활용된다.'외부 데이터' 흐름에 주목하며 살펴보기클로저 활용 사례① 콜백함수 내부에서 외부 데이터 사용② 정보 은닉③ 부분 적용 함수④ 커링 함수① 콜백함수 내부에서 외부 데이터 사용- 대표적인 콜백함수 : 이벤트 리스너[ver.1]var fruits = ["apple", "banana", "peach"]var $ul = document.createElement("ul");fruits.forEach(function(fruit){ ------ (A) 외부함수 var $li = document.createElement('li'); $li.innerText = fruit; $li.addEventListener('click', function.. 2025. 3. 4.
[코어 자바스크립트] 클로저 개념 클로저클로저는 자바스크립트 고유의 개념은 아니고, 여러 함수형 프로그래밍 언어에서 보편적으로 나타나는 특성이다. - 함수 선언시 만들어지는 유효 범위가 사라진 후에도 그것을 호출할 수 있는 함수- 생명주기 상 끝난 외부함수의 변수를 참조하는 함수 어떤 함수 내부에서 선언된 함수 호출 시 활성화되는 실행 컨텍스트의 L.E (Lexical Environment) 객체는 ┌ environment Record : 식별자 수집 -> 호이스팅 └ outer Environment Reference  : 스코프 체인으로 이루어지는데 그 중 outer Environment Reference 가 함수가 선언되는 환경, 즉 외부 함수를 참조한다.function A(){ var a = 10; function B (){ .. 2025. 3. 4.
[date] Slack - GitHub 웹훅(webhook) 연동하기 이전에 디스코드로 팀플할때도 웹훅을 쓰면서 편리함을 느꼈던 터라 이번에 슬랙을 사용하면서도 웹훅 연동을 해두었다. 가장 쉽게 할 수 있는 방법은 이 블로그를 참조https://ek12mv2.tistory.com/486 [Github Actions] Slack-WebHook을 활용하여 PR 요청할때마다 슬랙메시지 보내주도록하기구현 목표 (구현완료) PR 리뷰요청 이벤트가 발생하면, 슬랙채널에 알림을 보낸다. (아직 진행중) PR 완료후 develop 브랜치에 merge가 완료되면 슬랙채널에 알림을 보낸다. [방법1] 깃헙봇으로 Repositorek12mv2.tistory.com 2025. 3. 4.
[date] changeset 을 추가하자 모노레포의 경우 여러개의 패키지가 동일한 코드베이스에서 관리되기 때문에 아래의 이유들로 인해.. 버전 관리의 중요성이 더 크다패키지간 의존성 관리가 중요하다→ API 호환성 보장중복된 업데이트 방지, 호환되지 않는 패키지 설치 방지버그 해결 시 어떤 버전에서 문제가 시작되었는지 추적 가능함이러한 버전 관리 방법론 중 대표적으로 쓰이는게 Semantic Version (SemVer) 인듯 하다.MAJOR.MINOR.PATCH패키지 설치하다보면 이런 버전 정보를 쉽게 접하게 된다.호환 가능성 여부 X -> major호환 가능성 여부 O -> (기능추가)minor / (버그)patch모든 버전은 1씩 증가, 특정 버전이 올라가면 하위 버전은 0으로 초기화틸드범위(~)MINOR  버전이 지정되어있다면 PATCH.. 2025. 3. 4.
[date] turborepo 로 mono repo 구축하기 2인 프로젝트를 시작하게 되었다. 처음으로 모노 레포를 사용해보기로 했다.  https://turbo.build/repo/docs/getting-started Getting started | TurborepoGet started with Turborepo.turbo.build 패키지매니저로는 pnpm 을 사용하게 되어서 아래와 같이 공식 문서에 나와있는대로 설치했다.pnpm install turbo --global // 생략 가능 (아래 명령어 입력시 전역설치 없이 프로젝트 생성 가능)pnpm dlx create-turbo@latestpnpm add turbo --save-dev --ignore-workspace-root-check 폴더 구조가 위 사진과 같이 자동 세팅 된다. apps 아래 docs, .. 2025. 3. 4.
2025년 2월 회고 (W7 ~ W9) 2월은 가장 짧은 달이지만 어째선지 올해 2월은 길게 느껴졌다. 뭐하고 지냈나 한번 회고해보는 시간W7✅ DO IT 자바스크립트 기본편 완독10일 진도표를 기준으로 4주차에 시작했는데 약간의 딜레이는 있었지만 잘 마쳤다DO IT 자바스크립트 기본 완독 포스팅에도 썼지만 DOIT 스터디룸 네이버 까페가 많은 도움이 되었다 : )  ✅ 한입으로 잘라먹는 타입스크립트 챌린지 신청이정도면 챌린지 중독?ㅋㅋㅋ 한입 커뮤니티에서 눈팅만 하다가 완강 챌린지가 있길래 바로 신청했다!이전에 코드잇에서 제공해주었는데 정작 과제나 프로젝트하느라 강의를 끝까지 듣지는 못했다.프로젝트 하면서 타입스크립트를 계속 쓰긴 했지만, 최소한의 타입 스크립트만 사용했다는 생각이 든다.prop 타입을 interface로 정의하는 정도.,,.. 2025. 3. 3.
[vanilla extract] .css.ts 안에서 코드 작성하기 vanilla extract 를 사용해보려고 한다. 빌드타임때 css파일로 바꿔버리는 Zero-runtime CSS in JS → Runtime CSS in JS 성능상 문제를 해결vanilla-extract로 쓴 코드는 자바스크립트 번들 사이즈에 영향을 주지 않는다. 즉, 브라우저에서 번들 결과를 남기는 것이 아닌 편집하는 동안 코드를 실행vanilla-extract에서는 createVar를 사용하여 컴포넌트 또는 스타일 범위 내에서 CSS 변수를 사용 (로컬 스코프)class name : 컴파일 후에는 고유한 이름(예: button_abc123)이 생성되어 사용됩니다. (로컬 스코프)설치 & 설정pnpm install @vanilla-extract/css @vanilla-extract/next-plu.. 2025. 2. 26.
[코어 자바스크립트] 비동기 제어로 콜백 지옥 탈출하기 콜백 지옥과 비동기 제어- 콜백 지옥 : 비동기 처리를 위해 연속적으로 콜백 함수를 사용할 때, 콜백 함수를 익명 함수로 전달하는 과정이 반복되어코드의 들여쓰기 수준이 매우 깊어지는 현상가독성이 떨어지고 코드를 수정하기 어렵다 . (유지보수가 어렵다) -> 생산성 저하  - 비동기 : 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 보류, 요청, 실행 대기 등과 관련된 코드는 비동기적인 코드이다. 사용자 요청에 의해 특정 시간동안 코드 실행이 보류(setTimeout) 사용자의 직접적인 개입이 있었을때 코드를 실행(addEventListener)웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 응답이 왔을때 실행 (XMLHttpRequest) 반대로 동기적인 코드는, 현재 실.. 2025. 2. 25.
[코어 자바스크립트] 콜백 함수 콜백함수 : 다른 코드의 인자로 넘겨주는 함수 시계를 예시로 들면, 약속 시간이 8시일때 1) 계속해서 8시가 되었는지 (내가) 시간을 확인한다. 2) 8시에 알람을 맞춘다 → 8시가 되면 (시계가) 알람을 울려준다. : 즉 알람을 울리는 제어권이 시계에게 있음 이처럼 콜백함수를 다른 코드에 인자로 넘겨주면, 제어권도 함께 위임하게 된다.콜백함수를 위임받은 코드는 자체적인 내부 로직에 의해 콜백함수를 적절한 때에 실행한다. var count = 0;var cbFunc = function(){ console.log(count); if(++ count > 4 ) clearInterval(timer);}var timer = setInterval(cbFunc, 300); // 제어권이 setInter.. 2025. 2. 25.

티스토리툴바