전체 글94 인프콘 2024 2024 인프콘 다녀왔습니다. 작년에 인프콘 신청했던건 떨어졌는데 이번에는 붙어서 행복하네요 ㅎㅎ이렇게 큰 개발자 컨퍼런스에 오프라인으로 참석하는건 처음인데 너무 재밌었습니다. 세션들도 너무 재밌는게 많았고 특히 이동욱님이 발표해주신 "2024~2025 인프런 아키텍쳐" 세션에서는 실무와 바로 연관성 있는 내용들도 많아서 듣는데 이것저것 해보고 싶어서 설랬습니다. 신기한게, 인프콘 듣기 전날에 회사에서 "Tech팀의 미션과 가치" 에 대한 토론을 진행했었는데요."저 펠리컨적 사고 좋아해요" 라고 이야기했던걸 여기서도 들을 줄 몰랐습니다. ㅎㅎ나도 맞는 방향을 가고 있구나! 생각이 들어서 기분이 되게 좋았어요. 네트워킹 자리도 너무 만족스러웠습니다!모두 스탠딩으로 서서 진행했는데, 세션 발표자분들이나 .. 2024. 8. 3. 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. 이전 1 2 3 4 ··· 16 다음
