개발공부61 Javascript에서의 모듈 시스템이 무엇인가요? Javascript 모듈 시스템모듈(module)은 어플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미한다.보통 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.자신만의 파일 스코프를 갖는 모듈의 모든 자산(변수, 함수 등)은 기본적으로 비공개 상태이다.즉, 캡슐화가 되어있어서 다른 모듈에서 접근할 수 없다.모듈은 개별적인 존재로서 애플리케이션과 분리되어 존재한다.하지만 애플리케이션에서 사용할 수 없는 모듈은 의미가 없기 때문에,모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. === export 라고 한다.이렇게 공개(export)한 모듈의 자산은 다른 모듈에서 재사용 할 .. 2024. 5. 25. [무엇인가요 시리즈] JSConf: Inside of loop // 1번...document.body.appendChild(el)el.style.display = "none"// 2번...el.style.display = "none"document.body.appendChild(el)1번에서 우리는 el이 dom에 append 되고 style을 바꾸면 혹시나 사용자에게 보일까봐 2번처럼 바꾼다.실제 그렇지는 않지만.이벤트 루프 덕분에 1번처럼 코드를 작성해도 style을 바꾸는 코드와 append하는 코드는 서로 "경합"상태가 아니다. 어떻게 이런게 가능할까? 웹페이지에는 메인 스레드가 있다. 보통 코드가 실행될 떄는 코드가 경합될 일이 거의 없지만 메인 스레드가 처리되는 시간이 길어지면(Promise) UI UX는 blocking되는 상태로 보인다. 싱글 스레드 .. 2024. 5. 25. webpack이 무엇인가요? 정의Webpack Document 첫줄에 이렇게 안내하고있다. webpack은 Javascript 애플리케이션을 위한 정적 모듈 번들러 이다.모듈Javascript는 ES6, CJS와 같은 모듈 시스템이 존재하는데, 핵심은 코드의 스코프를 나눠 파일 단위로 관리한다. 이다.번들러"번들" 이라는 것은 무엇을 하나로 묶는 작업이다. XXX 번들러 라고 한다면 XXX 를 하나로 묶는 도구를 말한다. 따라서 Webpack을 풀어쓰면파일 단위로 나뉜 Javascript 코드를 하나의 파일로 묶는 도구 라고 할 수 있다. 여기엔 Javascript 파일 뿐만 아니라 CSS, Image, HTML 파일도 포함이다. 과거 Single Page Application 아닌 여러 HTML 파일로 이루어진 페이지 에서는 각 .. 2024. 5. 25. React에서 Virtual DOM과 재조정(Reconciliation) title: "React에서 Virtual DOM과 재조정(Reconciliation)"published: 2022-08-15T08:24:02.300Zdescription: React의 비교 알고리즘을 만들때 어떤 선택을 했는지 소개하는 글category: Reacttags:ReactFEVirtual DOM리액트는 Virtual DOM을 사용해 렌더링 최적화를 진행합니다.Virtual DOM은 실제 렌더링 되는 DOM의 구조와 똑같은 가상의 DOM입니다.하지만 실제 렌더링 되는 과정은 없고 트리 형태만 갖추고 있기 때문에 실제 DOM을 변경하는 것 보다 훨씬 적은 비용이 듭니다.렌더링하는 과정이 없기 때문이죠.React는 re-rendering 되기 직전의 Virtual DOM과 현재 변경된 Virtua.. 2024. 5. 25. FE개발자의 ECS 전환기 운영 환경의 문제점 인식 처음에 AWS의 Elastic Beanstalk 를 사용했는데 개발자 로컬환경에서 배포하는 형식이였다.이걸 채택한건 다른 인프라 환경을 수동으로 구성하기에는 시간이 없었고, 기존 backend 배포가 이런 형식으로 되어있었기에 배포 환경을 통일하자는 의견에서 나온 선택이였다.EB환경 배포에는 몇가지 문제가 있다.개발자 로컬환경에서 CLI로만 배포가 가능.배포 프로세스가 수동.업로드 가능한 파일 limit이 500MB.Node 16 까지 지원. 1번이 말은 내가 휴가를 가면 다른 사람에게 로컬 배포환경을 인수인계 하고 가야한다. 2번빌드부터 배포까지 모든 과정이 수동으로 이뤄졌기 때문에 실수로 환경변수를 잘못 설정하면 dev 환경으로 배포될 가능성이 충분히 있다. (휴먼에러)3번처.. 2024. 5. 25. FE개발자가 개발서버 12대 인프라 구성한 이야기 나는 첫 직장에서 풀스택 개발자로 일했었다. backend랑 infra에도 관심이 많았고 AWS 자격증도 취득했었다.그래서 그런지 FE개발자로 이직하고 나서도 이것 저것하는걸 되게 좋아했고, 회사의 강요가 없었음에도 내가 하고싶어서 백엔드도 같이 하면 안되냐고 졸랐다.이전 직장에서 backend는 Node로 했는데 이번 직장은 Spring, Django로 구성되어 있었고 사실 실무경험은 전혀 없다고 봐도 무방했다. 예전에 Spring을 공부했던적이 있었지만 Spring 지식은 깊지 않았고 API 찍어낼(?) 정도는 되었다. 감사하게도 우리 리드분들은 날 믿어줬고 작년 말부터 수 개월 동안 backend도 같이 개발했다. 회사의 일하는 체제가 바뀌면서 여러 프로젝트를 동시에 QA 해야하는 상황이 빈번해졌고.. 2024. 5. 25. 이전 1 2 3 4 ··· 11 다음
