오늘은 프론트엔드 개발자로서 매일 마주하지만 깊이있게 들여다보지 않았던 package.json에 대해 이야기해볼 예정이다. 프로젝트를 다룰때마다 항상 핸들링하지만 그 이상으로 깊게 공부하지 않았기에 이번기회에 알아보려한다. package.json은 단순한 의존성 관리를 위한 파일을 넘어서 프로젝트의 전반적인 메타데이터와 설정을 관리하는 핵심 파일이다. 지금부터 package.json에 대해 깊이있게 알아보자 package.json의 생성 과정 package.json은 을 사용해서 생성하는 방법과 수동으로 프로젝트 루트 디렉토리에 직접 JSON 형식으로 생성하는 방법이 있다. JSON 문법에 에러 발생 가능성이 있기에 직접 생성보다는 패키지 라이브러리 init 명령어를 통해 생성하는 것을 추천한다. init을 이용해 package.json이 생성되는 과정을 살펴보자. (본론에서는 기본으로 많이 사용되는 npm을 예시로 설명하겠다.) 운영체제, 컴퓨터 시스템 등등 많은 조건에 따라 p…

useSyncExternalStore useSyncExternalStore는 React 18에서 도입된 Hook으로, 외부 상태 관리 스토어와 React의 동시성 렌더링(Concurrent Rendering)을 안전하게 연동하기 위해 설계됨. 기존 문제점 발생 React의 동시성 렌더링 모드에서 외부 스토어의 상태 변경이 일관성을 해치는 문제 발생 (Tearing 현상) Tearing 현상 React의 Concurrent 렌더링 환경에서 발생할 수 있는 UI 불일치 현상을 의미한다.(간혹 동일한 데이터를 보여주는 UI 컴포넌트들이 서로 다른 값을 표기하는 버그) Concurrent 모드에서 React는 렌더링을 여러 청크로 나누어 처리한다. 그리고 useEffect를 사용한 구독은 비동기적이며, Concurrent 모드에서 렌더링이 중단될 수 있다. 이렇게되면 서로다른 사용자마다 서로다른 데이터를 보게됨(금융, 병원등 데이터 일관성이 중요할 때 치명적 오류) 이런 문제를 useSy…

React에서 상태가 변화하는 과정을 요약하면 위 사진과 같다. 위 내용에 대해 자세히 살펴보자. 1. 초기 트리거 단계 1-1 useState를 이용해 상태를 생성 1-2 업데이트 객체 생성 React는 업데이트가 발생할 때마다 Update 객체를 생성한다. 실제 생성은 아래처럼 된다. 1-3 업데이트 큐에 추가 업데이트 큐는 아래와 같은 구조를 가지게 된다. 큐 처리 과정 큐 처리는 초기화를 우선하고 업데이트를 연결하게 된다. 업데이트 연결을 할 때 첫 업데이트/기존 업데이트 상황에 따라 연결 리스트의 구조가 다르다. 1-4 중요한 특징들 배치 처리 (Batching) 배치 처리는 여러 상태 업데이트를 하나의 리렌더링으로 그룹화하는 프로세스다. 배치 처리를 통해 불필요한 렌더링을 최소화하고, 메모리 할당을 줄이는 등의 장점을 누릴 수 있다. React 18에서는 모든 업데이트가 자동으로 배치 처리된다. 트랜잭션 처리 트랜잭션은 여러 업데이트를 하나의 원자적 단위로 처리하여 일관…

zustand의 공식문서를 살펴보다, “Zustand는 React의 useSyncExternalStore 훅을 사용하여 React의 상태 관리 시스템과 원활하게 통합되어 Concurrent Mode와 호환된다” 는 내용을 보았다. Concurrent Mode라는 낯선 단어를 찾아보게 되었고, 생각보다 면접 질문으로도 쏠쏠하게 등장하기에 정리해보려한다! React 18에서 도입된 Concurrent Mode는 React 애플리케이션의 성능과 사용자 경험을 향상 시키기 위해 생긴 기능이다. 앞으로 Concurrent Mode가 무엇인지, 어떻게 작동하는지, 그리고 개발자들이 이를 어떻게 활용할 수 있는지 자세히보자. Concurrent Mode란 Concurrent Mode는 React가 렌더링 작업을 중단, 재개, 그리고 even 폐기할 수 있게 해주는 새로운 기능이다. React가 브라우저의 메인 스레드를 차단하지 않고 백그라운드에서 컴포넌트 트리의 여러 버전을 준비할 수 있게 …

나는 Zustand가 Provider이 필요하지 않는 상태관리 라이브러리라는 것을 알고 있었다. 하지만 갑자기 생각이 들었다. 왜?? 어떻게 동작하기에 상태관리 라이브러리가 필요하지 않을까? 궁금해서 찾아보다가, 좋은 내용이 많이 보여 공유해보려 한다. React 상태관리 일반적인 React 애플리케이션에서 상태는 아래 그림처럼 동작한다. 컴포넌트 내부 상태는 useState 훅을 사용하여 관리한다. 그리고 컴포넌트 트리를 통한 상태 전달은 props를 통해 하위 컴포넌트로 전달한다. 컴포넌트 외부에 상태를 전달하기 위해서 Context API를 사용하고, Provider 컴포넌트를 사용하여 하위 트리에 상태 제공하게 된다. 이러한 방식들은 모두 “React 컴포넌트 트리 내부에서 상태를 관리” 한다고 표현한다. Zustand로 상태관리하면? Zustand는 flux 패턴으로 동작한다. 클로저 내부의 state가 Store 역할, 사용자 정의 함수들이 Action 역할, se…

8월 2일 삼성역 코엑스에서 인프랩이 주관하는 인프콘이 열렸다. 당연히 나는 광탈했다.. 하지만 인프랩에서 SIPE 부스 홍보의 기회와 네트워킹, 스피커들의 세션에 참여할 수 있는 기회까지 제공해 주셨다. Thank you 인프랩.. 🥰 그럼 인프콘은 어떤 행사이고, SIPE는 어떤 동아리이고, 인프콘을 위해서 SIPE는 어떤 것을 준비했는지와 더 나아가 인프콘에서 듣게 된 세션들을 소개해보겠다!! SIPE의 우당탕 인프콘 참여기 동아리 활동이 막바지로 가고 있는데, 인프랩에서 연락이 왔다! 다름 아니라 SIPE를 인프콘 커뮤니티 부스에서 홍보할 수 있도록 자리를 만들어준다는 것이었다!!!!! 아니 그저 빛.. 우리 같은 아기 동아리에게 이런 행운이.. 급히 동아리 운영진들과 참여에 관해 회의를 진행했다. 2기 활동 마무리를 위해 바쁜 일정이었지만, 다음 기수인 3기 홍보를 위해도 좋다고 판단하여 참여하기로 했다. 그렇게 참여가 결정이 되고, 행사에 관한 내용을 전달받기 위해 …

개발을 진행하다 보면 어떤 문제가 생겼을 때 어떤 기술 스택을 선택해서 구현하고자 하는 목표를 해결하기 위해 고민을 한다. 근래 개발을 하면서 익숙한 것들에 편안해져 고민 없이 선택하고 있다는 것을 느꼈다. 그래서 이번에는 프론트엔드 개발자 관점에서 서비스의 한 부분을 구현할 때 어떤 고민을 해서 기술 스택을 결정하고, 어떤 궁금증을 백앤드, 디자이너, 기획자, 데브옵스 등에게 전달해야 하는지 추론해보도록 하겠다. 주어진 문제 상황은 아래와 같다. 어떤 기술 스택을 선택해야 할까? 기술을 선택하기전에 FAQ 페이지에서 갖춰야 될 특성을 분석해보자. 특정 기능에 대해 분석하고 요구사항에 대한 명세를 만들어주는 것은 개발자의 근본적 역할은 아니라고 생각한다. 아래는 토스와 네이버의 채용페이지 FAQ 페이지 사진이다. 다른 회사의 FAQ 페이지를 더 찾아보면, 다른점이 분명 존재할 수 있겠지만 2개의 회사 공고에 공통적으로 보이는 요소는 페이지네이션, 검색, 상세페이지에서 FAQ를 …

불과 1, 2년 전까지만 해도 상상하지 못했던 일들이 나에게 많이 일어났다. 개발자로 취업하게 되고, 이직을 하고, IT 동아리에 참여해 사람들과 교류하고, 심지어 IT 동아리 운영진까지 해보았다. 누군가에게는 별일 아닐 수 있겠지만, 얼마 전까지 카페에서 일하고, 경영학과로 취업하기 위해 독서실에서 자격증 공부를 하고 있던 나에게는 큰 변화였다. 이번 활동으로 좋은 사람들을 많이 만나고, 운영진으로 활동하며 훌륭한 동료들과 함께 많은 것을 배웠다. 이런 경험이 SIPE 3기 신청을 원하는 분들에게 도움이 될 것 같아, SIPE 2기 활동은 어떻게 했고 어떤 행사를 했는지 회고 형식으로 풀어보려고 한다. SIPE 2기 준비 SIPE 2기를 위해 6명의 운영진들과 함께 우당탕탕 준비를 시작했다. 일정 계획을 잡고, 장소를 대관하고, 행사에 필요한 기획안을 작성했다. 그리고 어떤 분들과 2기를 함께하고 싶은지 의견을 모으고, 모집 폼과 홈페이지를 만들어 게시했다. 준비를 마치고 우…

React와 JavaScript를 사용하는 개발자에게 있어서 import와 dynamic import는 각각 고유한 용도와 특징을 가지고 있다. 그럼 이 두가지는 어떤 차이점이 있을까? Import import는 JavaScript ES6에서 도입된 정적(Static) 모듈 가져오기 방식이다. 코드 작성 시, 모듈을 상단에 명시적으로 선언하고, 모듈을 로드한다. Import는 아래 3가지의 특징을 가진다. 정적 로드: 컴파일 시점에 모든 의존성이 결정되고 로드되어, 빌드 도구가 전체 모듈 그래프를 미리 알 수 있게 해준다. 호이스팅(Hoisting): import 문은 파일의 최상단으로 끌어올려진다. 트리 쉐이킹(Tree Shaking): 불필요한 코드(사용되지 않는 모듈)를 제거하여 최종 번들 크기를 줄일 수 있다. Dynamic Import dynamic import는 ES2020에서 도입된 동적(Dynamic) 모듈 가져오기 방식이다. 이는 함수처럼 호출하여 필요할 때 모듈을…

HMR(Hot Module Replacement)이란? Hot Module Replacement(HMR)는 개발 환경에서 코드 변경 시 브라우저 전체를 새로고침하지 않고도 변경된 모듈만 업데이트하는 기능을 의미한다. 이는 특히 React와 같은 현대 프론트엔드 프레임워크에서 매우 유용하게 사용되고있다. HMR은 Webpack과 같은 모듈 번들러에서 지원하며, 개발 과정에서 생산성을 크게 향상시킨다. 수정사항을 웹에서 바로 확인할 수 있어, 불필요한 시간 소비를 방지할 수 있다. 그럼 HMR은 어떻게 동작할까? HMR이 편하게 해주는 것은 알겠다! 거의 2년여동안 HMR을 자연스럽게 사용하고 있는데, 궁금한적 없어 이참에 알아보자! 우선 개발자가 코드를 수정하고 저장하면, Webpack Dev Server는 변경 사항을 감지한다. Webpack Dev Server는 변경된 모듈만을 포함하는 업데이트를 생성하고 WebSocket을 토해 브라우저에 업데이트 정보를 전송한다. 브라우저는…

사내 프로젝트를 진행하며 build 폴더를 S3에 업로드하는 업무를 진행했다. 이 과정에서 build 폴더의 용량에 따라 시간, 금액이 차이가난다는 것을 알게되었다. 사내에서 프로젝트를 진행하면서 2GB가 넘는 build 폴더를 어떻게하면 효율적으로 S3에 업로드할 수 있을까라는 고민을 하게되었고, 그 과정속에서 압축에 대해 공부한 내용을 기록에 남기려한다. 무손실 압축(Lossless Compression) 무손실 압축은 손실 압축과 달리 데이터 손실 없이 파일 크기를 줄이는 데이터 압축의 한 종류다. 무손실 압축의 핵심 아이디어는 파일에 있는 콘텐츠의 통계적 중복성을 활용하는 것으로 압축하는 동안 긴 기호를 더 짧은 표현으로 대체하여 데이터 크기를 줄인다. 여러가지 방법 중 Dictionary-Based algorithm은 무손실 압축을 수행하는 데 가장 널리 사용되는 알고리즘이다. 이 알고리즘은 포인터가 포함된 dictionary를 구축해 더 작은 포인터로 대체하는 방식이다…

동아리, 회사, 스터디 등등 많이 바쁘다.. 멘토링 끝나고 블로그에 회고 작성하려는 큰 포부를 가졌지만.. 요즈음 과제가 어려워서? 시간이 빠듯해서 잘 못했다ㅠㅠ 그렇기에 오랜만에 회고를 작성해보고 복습해보자! 타입스크립트는 어떻게 컴파일할까? 우선 타입스크립트는 TSC 컴파일러를 통해 바로 컴파일되는 것이 아닌 자바스크립트 코드로 변환된다. 이 과정에서 고수준 언어인 타입스크립트가 저수준 언어인 자바스크립트로 변환되어 트랜스파일이라고 부르기도 한다. 상세한 과정은 아래와 같다. 타입스크립트 소스코드를 타입스크립트 AST로 만들고, 타입 검사기가 AST를 확인하여 타입을 확인한다. (TSC) 타입스크립트 AST를 자바스크립트 소스로 변환한다. (TSC) 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임) AST가 바이트 코드로 변환되고 런타임에 바이트 코드가 평가되어 프로그램이 실행된다. (런타임) 타입스크립트 컴파일러의 구성 요소와 동작 방식 Scanner => Pa…

우선 해당 공부는 docker-test 레포를 이용했습니다. 문서를 열심히 읽어보아도 한 번의 실습이 더 값지다고 생각한다! 그렇기에 간단히 중요한 개념을 복습하고, 자주 사용하는 CRA부터 Elastic Beanstalk + Github Action + S3를 이용해 코드를 구현해보자 중요한 개념을 복습해보자. Dockerfile: 기본 이미지, 종속성 및 실행 명령을 지정하여 Docker 이미지를 빌드하는 지침을 포함 Docker 이미지: 애플리케이션을 실행하는 데 필요한 모든 것(코드, 라이브러리 및 종속성)을 포함하는 경량의 독립 실행형 패키지로, Dockerfile에서 빌드되며 버전을 지정할 수 있다. Docker 컨테이너: Docker 이미지의 실행 중인 인스턴스로, 컨테이너는 서로 격리되어 있고 호스트 시스템으로부터 격리되어 앱을 실행하기 위한 안전하고 재현 가능한 환경을 제공 Docker 레지스트리: Docker 이미지를 저장하고 배포하기 위한 중앙 집중식 리포지토…

한 주 소감 및 복습 내용 힘들게 1차 과제를 마무리했다. 재사용성과 가독성에 대한 고민을 더 해보라는 피드백으로 코드를 열심히 만져보았다. 격렬하게 다루었던 커밋 기록은 여기를 확인해보시면 됩니다. 평소라면 생각해보지 않은, 상태관리 변경 시점과 브라우저 동작방식 등에 대해서 자바스크립트로 코드를 작성하며 구현해보았다. 구현하기 너무 어려워서 구글링을 해본 결과 좋은 자료들도 발견하게 되어 공유 드리니 확인해보시면 좋겠다! 황준일님의 상태관리 시스템 만들기 DaleSeo의 History API 멘토링을 진행하면서 대답하지 못했거나, 더 공부가 필요한 것들에 관해 공부를 시작해보자! 도대체 자바스크립트 킹짱맨은 언제 될 수 있는 건데..ㅠㅠ 버블링과 캡처링 HTML 문서의 각 엘리먼트들은 계층적 구조로 이루어져있다. 이러한 구조 때문에 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어날 수 있다. 이렇게 HTML 요소에 이벤트가 발생할 경우, 이벤트가 연쇄적으로 …

회사에서 요즘 프론트개발자들이 DevOps 작업을 하는 것을 권장하고있다. 그래서 급하게 배포환경도 변경해보고, 자동화 배포도해보았다. 그러던 도중 이론이 너무 부족하다고 생각했는데, 현재 참여하고있는 SIPE 동아리에서 나와 비슷한 니즈가 있는 사람들과 함께 Docker와 DevOps에 대해 스터디 진행하기로 했다. 그런 내용들을 조금씩 기록해보도록 하겠다! 따라배우는 Docker 우선 사내에서 Docker를 사용하고 있는데 왜 사용하는지 모름. 귀여운 고래다. 끝 (필자는 귀여운게 싫다, 귀여운 것들은 이유가 있고 까볼수록 해악스럽기에) 그러던 와중 올리브영에서 진행된 AWSKRUG의 Next.js와 AWS ECS, CI/CD 행사에 다녀왔고, Git Action와 CDN까지 흐름을 살펴보는 시간을 가졌습니다 첫주에는 Docker가 뭐고, 왜 사용해야 하며, 기본적인 개념에는 어떤 것이 있는지 살펴보겠습니다. Docker를 왜 써? 간단하게 이해를 하면, 어떠한 프로그램을 다…

한 주 소감 및 복습 내용 나 마라톤했다? 10K, 나 회사가 엄청 바빳다, 그리고 Event Loop도 만들었고, History API를 열심히 만들고있다! 추가로 공부할 내용들은 아래와 같다. 상태관리 라이브러리를 내부적으로 구현한다고 가정했을 때 상태는 어떻게 트리거하고 UI 반영하게 할 수 있을지 observer와 flux 구조, re-render 시킨다면 어떻게 접근할지 react-router-dom을 구현한다고 가정했을 때 인터페이스를 어떻게 설계할지 Router guard, 는 각각 어떻게 구현할 수 있을지 composite Layers React Virtual Dom과 탐색 알고리즘 브라우저의 Javascript 엔진이 스크립트를 어떻게 파싱하고 실행하는지 추가로 이번주에 react-router가 어떻게 동작하는지 만들어보고, 분석해보자. 아 그리고 프레임워크와 라이브러리 차이와 CSR과 SSR의 차이를 복습해보자! Composite Layers Reflow…

화면 UI는 yiseo0님의 오픈소스를 참고했습니다. 감사합니다! 왜 만들었어!? JavScript을 이용해 Event Loop를 동작해보는 사이트를 만들어보았다. 왜!? 그냥 내가 공부하려고!! 우선은 간단하게 만들어보았는데, 점차 리팩토링도 하면서 해당하는 것들에 관해서 공부하며 추가할 것이다!!! 시연해보기 👉 Event Loop with JavaScript 직접 만들어보고 싶으면 Github Code를 참조하세요 많은 분이 Event Loop에 관해서 공부했을 것으로 생각한다. 그렇기에 내가 이벤트 루프를 만들기 위해서 어떤 내용을 참조했는지, 링크를 남겨두겠다! 추후 업데이트 기록 추가로 공부할 내용을 적어보겠다. 우선은 코드를 더 직관적으로 리팩토링할 예정이다. 6/3 업로드 완료 1차 배포 및 업로드 완료!!! 출처 및 도움되는 링크들 Promise를 만들어보자 JavaScript 동기와 비동기 완벽 가이드 Inpa Dev 왜 만들었어!? 추후 업데이트 기록 6/3…

한 주 소감 및 복습 내용 많은 것을 했고, 많은 것을 하고 있따.. 이것저것 만들고, 공부의 깊이는 더욱 깊어져 주제마다 별도의 페이지로 작성하겠다! 아자아자 화이팅!! 5월 넷째 주 회고 해커톤을 했습니다. 저번에는 참가자로 이번에는 운영진으로 경험해보았습니다. 사람들과 시간이 비어있을 때, CI/CD와 Docker 에 대해 이야기를 나누었습니다. 토요일 점심에 크래프톤에서 코딩테스트가 요청되어 진행했습니다. 주관식 3개 알고리즘 3개 진행했는데, 알고리즘 지식이 부족해 어렵게 느꼈습니다. 이팩티브 디버깅 행사에 다녀왔습니다. 디버깅을 위한 접근 방식에 대해 다른 사람들과 경험을 공유해볼 수 있는 시간이었습니다. 공부를 하다 보니 부족하다고 느껴지는 것이 명확해지고 있습니다. 테스트를 다루는 부분과, 회사에서 현재 다루고 있는데 CI/CD에 대한 지식을 넓히려 합니다. 이번 주 좋은 것과 나쁜 것 이번 주에 개인적으로 잡은 약속 없어서 공부할 수 있는 시간을 많이 가져왔습니…

Next Step의 효율적인 디버깅 모임 Next Step에서 주관하는 효율적인 디버깅을 위한 스터디에 다녀왔다. 코딩을 하면 디버깅은 밥먹듯이 하는 일이라 궁금증을 가지고 행사에 신청했다! 선릉역 테크 살롱에서 행사가 진행되었다. 행사에서는 사람들과 정보를 공유해서 버전1을 만들고, 직접 코드 디버깅을해서 버전2로 수정하고, 최종으로 UI 디버깅을 통해 버전3의 나만의 디버깅 환경을 만들자라는 방향성으로 진행되었다. 내 경험을 공유해보며 버전 1을 만들어보자. 평소 디버깅을 하면서 목적없이 작업을 진행한 경험이 대부분이었다. 어떤것을 어떻게 해결하고자 하는 생각은 없이… 행사가 시작되고, 다른 사람들과 디버깅 경험을 공유해보았다. 아래는 내가 디버깅하는 과정이다. 본격적인 세션 시작 진행해주시는 분께서 위와 같은 원인을 분석하는 것에 대해 방향을 제시해주었다. 단순하다고 생각하지만, 사소한 디버깅이여도 목적과 해결하는 방법에 대해 생각하는 것이 인상적이었다. (뭐 대부분의 경…

Promise를 직접 만들어보자. 앞서 나는 Promise()에 대한 글을 2번 정도 게시했다. 자바스크립트 Promise를 퀴즈로 쉽게 익히기 JavaScript 동기와 비동기 완벽 가이드 위 글을 쓰고 나서 몇 달이 지난 현재, Promise의 내부는 어떻게 동작하고, 어떻게 구성이 되어있는지 궁금했다. 아티클을 읽던 와중에 푸만능님의 JavaScript Promise 객체 직접 구현해보기를 알게 되어서, 위 내용을 실습해보며 내가 새롭게 알게 된 내용들에 대해 공부해보려한다. Promise를 어떻게 만들어볼까? Promise를 만들기 전에, Promise에 대해 이해해보기 위해, 기능 구현 목록을 작성해보자 우선 Promise는 실행 상태를 나타내기 때문에, Pending(실행 전), fulfilled(실행 후 성공 => resolve), rejected(실행 후 실패 => rejected)이 필요하다. 그리고 Promise는 JS 이벤트 루프에서 Microtask Queue…

📢 본 글은 Will WebAssembly Replace JavaScript? 기반으로 작성되었습니다. WebAssembly? “Because apps compiled to WebAssembly can run as fast as native apps, it has the potential to change the way software is written on the web.” WebAssembly로 컴파일된 앱은 네이티브 앱만큼 빠르게 실행될 수 있기 때문에 웹에서 소프트웨어가 작성되는 방식을 바꿀 수 있는 잠재력을 가지고 있습니다. Evan Wallace – CTO and Co-Founder, Figma WebAssembly 또는 줄여서 WASM은 최근 몇 년간 많은 관심을 받고 있는 새로운 기술으로, 스택 기반 가상 머신(VM)을 위한 로우레벨 바이너리 명령어 형식이다. 월드와이드웹 컨소시엄(W3C)의 창설로 등장해서, 2015년에 처음 발표되었고 2년 후인 2017년에 첫…

한 주 소감 및 복습 내용 이번 주부터 과제가 엄청나게 많다. 그리고 이전에 했던 과제들에 대한 복습들도 이루어져야 되기 때문에, 개념적인 공부는 위 과제들을 진행하면서 해당 게시글을 여기에 리포스팅할 예정이다. 이번주에 멘토링을 진행하면서 다시 공부해보면 좋을 것 같은 부분은 아래와 같다. 하나씩 차근차근 천천히 준비하면서 폭 깊은 개발자가 되어보자! 자바스크립트에서 함수의 “동적”이랑 “정적”의 의미를 이해하기 const 호이스팅에 대해서 깊이 학습 좋은 함수에 대해 생각해보기 Promise를 만들어보자 useState를 직접 구현해보자! 자바스크립트 이벤트루프 시뮬레이션 도구를 직접 구현해보자! (추후 링크 참조) 브라우저 렌더링에 관한 아티클들 읽어보자 Naver D2 - 브라우저는 어떻게 동작하는가? Toast UI - 성능 최적화 웹 성능 최적화에 필요한 브라우저의 모든 것 자바스크립트의 함수에서 동적과 정적에 대해 자바스크립트에서 동적(Dynamic) 과 정적(Sta…

으아아아ㅏ 멘토링 두번째 회고 및 복습 시작!!! 복습.. 또 복습 복습은 복숭아다.. (복숭아가 너무너무 먹고싶다.) 이번 주도 어김없이 아는 것을 설명하지 못하고, 계속 반복된 이야기만 했다. 아직 잘 몰라서 그런 것 같다. 미숙하지만 더더더더! 공부하자 We Can Do It const, let, var의 호이스팅에서 차이점 우선 호이스팅이란 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 것을 의미한다. 변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되고, 변수를 선언 및 초기화 하기전에 사용하게 되는 영역을 TDZ(Temporal Dead Zone)라고 한다. var : 선언한 변수는 호이스팅 시 undefined로 초기화되어, 변수 선언 이전에 해당 변수를 참조할 수 있다. 변수 선언과 동시에 unde…

Promise에 대해서 공부해보자 나는 개인적으로 프론트엔드의 꽃은 Promise와 비동기라고 생각한다. 백엔드를 공부하는 친구들이 가장 어려워하는 부분이기도 하고, 나의 러닝 커브가 가장 길었기 때문이다! 어차피 해당하는 내용은 공부를 미리 진행한 적 있어서 블로그 링크를 첨부하고 퀴즈를 통해 작동에 방법을 익히고, 활용해볼 예정이다!! Promise를 이해하기 위한 선행학습자료는 여기에 첨부하니 확인해보시길 권장드립니다. Promise.all() 위 코드의 결과값에서 3번째 Promise.all()에서 1,2,3이 출력되지 않고 error만 출력된 이유는 Promise.all()에서 입력 값으로 들어온 프로미스 중 하나라도 거부당하면 즉시 거부하기 때문이다. Promise.all()의 개념이 더 궁금하면 MDN 자료를 확인해보시면 됩니다. ✔️ Promise Order 위 코드는 어떤 순서로 값이 출력될까? 우선 동기식 코드(synchronous code) 1이 출력되고나서 3,…

나는 SIPE라는 IT 동아리에서 1차 미션으로 YouDontKnowJS 라는 책을 읽고, React의 hook의 작동원리에 대해서 스터디하고 있다. 5주 정도 시간이 흘러 그동안 공부한 내용들을 정리해보려고 한다. 1.avif 앞서 말한 데로 책은 카일 심슨의 YouDontKnowJs Yet(2024.01.12)으로 시작하였다. => 넌 아직 JS를 몰라, ㅋㅋ 아직도!!! 라는 뜻인가?!? 2판인 Yet에서는 자바스크립트에 대한 설명과 코드 패턴들 그리고 의문점들이 추가되었다. 1판만 가지고 계신 분들에게도 좋은 내용이 많으니 구매해서 읽어보시는 것을 추천한다! 책을 읽고 새롭게 알게 된 지식들 JavaScript는 ECMAScript의 스펙을 지원하는 개발언어이며, 하위호환을 존중하는 언어이다. 렉시컬 스코프 스펙을 지원하기 위해 구문 분석과 같은 컴파일이 필요하고 실제 동작은 인터프린터 방식을 취한다. Function에 대한 일급 객체를 지원한다. 클로저, 프로토타입을 활용…

독학으로 공부를 계속하다 회사에 다닌 지 1년이 넘은 현시점에서, 스스로를 객관적으로 돌이켜보기 위해서 멘토링을 신청하게 되었다! 멘토링을 하면서 느낀 경험을 1주일 단위 회고 형식으로 진행해보려 한다. 첫 번째 주차의 회고를 진행해보겠다 (24.04.30 ~ 24.05.06) 일단.. 다시 공부가 필요한 것들 복습하자 돌이켜 생각해보면 잘 몰랐던 것들은 계속 모르거나 헷갈리고 있다. (나 자신을 똥 멍청이라 생각한다ㅠ.. 그래도 천재가 되기 위해서 차근차근 복습해보자) 1.gif 깊은 복사와 얕은 복사의 차이 얕은 복사(Shallow Copy)는 원본 객체의 최상위 수준의 속성들을 복사하고, 내부의 객체는 참조를 공유한다. 즉, 내부 객체에 대한 변경은 복사된 객체와 원본 객체 양쪽에 모두 영향을 주고, 최상위 수준의 속성이 필요한 경우에 사용한다. Object.assign()을 이용한 얕은 복사 Spread 연산자를 이용한 얕은 복사 깊은 복사(Deep Copy)는 원본 객체의…

Linked… 라고 치는데 밑에 LinkedList가 나왔다.. (그 와중에 린다닷컴은 뭐지?) 그 이후에 새로 알게된 내용이 많아 기록을 남겨볼려고한다. LikedList LinkedList는 내부적으로 양방향의 연결 리스트로 구성되어 있어 참조하려는 원소에 따라 처음부터 정방향 또는 역순으로 순회할 수 있다. 적은 양의 데이터를 추가하거나 삭제할 때는 문제가 없지만, 양이 많아질수록 속도가 늦어지는 배열의 단점을 보완하기 위해 LinkedList가 생겨났다. LinkedList는 순차적 접근이고, 해당 위치의 노드를 찾는 데에 시간이 소비되어 검색의 속도가 느리다. 그렇지만 LinkedList는 데이터를 추가·삭제시 가리키고 있는 주소 값만 변경해주면 되기 때문에 ArrayList에 비해 상당히 효율적이고 중간에 있는 노드를 삭제해주면 양쪽에 있는 노드를 서로 이어주면 되기 때문에 ArrayList보다 상대적으로 작업이 빠르다. 단점 데이터를 get 하는 과정에서 ArrayLi…

갑자기 작업하다가 궁금해져서 적는 첫번째 오이소박한 궁금증!! useEffect의 dependency에 useRef를 넣으면? useEffect 의 []에 의존성(dependency)를 넣을 수 있다! 이건 다 알고 있겠죠!? 그러면 리렌더링이 될 때 어느 시점에 의존성이 작동 될 까!? 긴말 말고 예시코드를 보자! 위 코드는 useRef의 current, useState의 state를 handleButtonClick 함수를 이용해서 1씩 올려주는 코드다. useEffect의 dependency에 useRef의 ref와 ref.current 의 값을 넣어보고 동작을 비교해보자~!! [ref] useRef의 ref 객체를 dependency에 직접 넣어주게 되면 useEffect가 변경사항을 감지하지 못하고 리렌더링 되지 않는다.. 하지만 값은 변경된다!!! [ref.current] 그리고 useRef의 ref.current 값 을 dependency에 직접 넣어주게 되면 use…

🚨 해당 게시글은 브라우저 렌더링의 모든 것의 후편이니 읽고 오시면 이해가 더 잘됩니다!! 먼저, 웹 렌더링이란 웹 페이지를 사용자가 볼 수 있는 형태로 변환하는 프로세스를 의미한다. 렌더링 방식에 따라 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라지기 때문에 우리는 방식을 선택할 때 많이 고민할 수 밖에 없다. 고민을 하다보면 CSR,SSR,SPA,MPA,SSG 등등.. 다양한 단축어에 대해 당황하게 된다. 모든 것들에 대해서 살펴보고 어떤 차이점이 있는지 알아보자. 해당 글은 웹 애플리케이션의 특성과 차이점(SPA,MPA) 에 대해 설명을 한 후에 웹 렌더링 방식(CSR,SSR,SSG,ISR,Universal Rendering) 에 대해 설명해보겠다! SPA vs MPA (웹 애플리케이션 특성) 9.gif Single Page Application(SPA) SPA는 하나의 브라우저 내에서 동작하는 애플리케이션이며 사용하는 동한 페이지 로딩을 필요로 하지 않는…

✋ Welcome Unithon 평소와 똑같이 회사, 집을 무한하게 반복하던 삶에서 UNITHON이라는 해커톤에 대한 정보를 듣게 되었다!! 운영진을 해볼까.. 아니면 참여자가 되어볼까.. 고민을 하던 중 아직 경험해보지 않았으니 이번에는 해커톤 참여자를 해보자!! 라는 비장한 다짐과 함께 신청서를 작성했다! 경쟁률이 엄청 높다고 들어서 될까? 라는 걱정이 있었지만.. 근무 중에 산뜻한(!?) 이메일을 받았다!! 아니!!!!!! 이런 말은 부끄럽지만… 요즘 이런저런 생각을 하는 나에게!!!!!! 엄청 오랜만에 합격 이메일이..ㅋㅋㅋㅋㅋ 너무너무너무너무너무 x 1000 기분이 좋았다!!! 3.gif 해커톤 준비 과정 나는 UNITHON의 7조가 되었다! 처음 디스코드에 초대되었을 때 서로에 대한 정보가 없어서 긴장되었다.. 하지만 우리 팀은 해커톤에 대한 열정이 넘쳤다. 미리 기술스택과 주제에 대한 이야기도 해보고 다양한 이야기를 디코에서 나누었다. 민규님께서는 vite+tail…

Web에 대해 공부하면서 렌더링이 무엇이고 어떻게 작동되는가? 에 대한 궁금증을 가지지 못했다. 취업을 해야된다는 막연한 생각때문에 과정없이 면접에 자주나오는 키워드만 암기했다. CS에 기초지식이 없으니 누군가에게 대답하는 형식으로 달달 외우기만 했다. 조금만 응용되어도 이론이 복잡하게 꼬여 버렸다. 그래서 언젠가는 이런 정리 안 된 내 지식을 정리해야지🔥🔥 라는 계획을 하다 이번에 렌더링이라는 키워드를 연관성에 맞춰서 상세하게 기록해보려고 한다. 작은 소망이라면 렌더링, 브라우저, DOM 등 다양한 키워드에 대해 궁금할 때 나의 글이 생각나고 흐름을 파악하면 좋겠다. 웹 렌더링이라는 주제를 정한 후 어떠한 순서로 웹 렌더링에 대해서 글을 써야 할까? 에 대해 많은 고민을 하였다. 이론적인 단계로 쓸 수 있고, 중요한 순서대로도 쓸 수 있다. 하지만 내가 선택한 방법은 내가 공부하면서 느꼈던 키워드의 연관성을 흐름에 맞춰서 기록해보려 한다. 예를들어! 🍎 사과에 대해서 글을 쓰고…

CRA(Create React App) 1.svg 2016년 이전에는 Create React App(CRA)가 등장하기 전에 프론트엔드 개발 환경이 통합되어 있지 않아서, 기존 앱에 리액트를 추가하기 위해 npm에서 import한 후 기존 빌드 구성을 수정하는 번거로움이 있었다고 한다! 여러 도구를 설치하고 JSX를 사용하기 위한 사전 설정을 진행하며, 개발과 프로덕션 환경을 다르게 구성해야 했다. 또한, 린트 설정 등 다양한 작업이 필요했는데, 이는 일반 사용자들에게는 쉽지 않은 작업이었을 것 같다. 시간이 지나 똑똑한 개발자들이 보일러플레이트 저장소를 만들어 공유하고 복제함으로써 시간을 단축할 수 있었지만, 업데이트가 어려워 빠르게 변화하는 생태계에 대응하는 것도 쉽지 않았을 것 같다. 이러한 어려움을 해결하기 위해, CRA(Create React App) 가 등장하게 되었다. CRA를 사용하면 리액트 애플리케이션을 쉽게 생성하고 필요한 설정 작업을 자동화할 수 있다. 이를 통…

첫 회사에서는 Azure 환경으로 배포했고, 개인 프로젝트에서는 클라우드와 인프라에 대한 개념이 부족해 heroku, github, netlify, vercel 등 간단하게 배포해서 프로젝트를 완성했다. 지금 회사에서는 pipeline을 사용하지 않고 pem,ppk로 인증을 한 후에 PuTTY와 winSCP를 이용해서 배포했다. 사용해보니 불편한 점도 너무너무 많아서 점진적으로 바꿔야겠다는 생각이 들게 되어 바꾸었고, FE 개발자의 아등바등 DevOps 경험을 기록으로 남겨볼려고 한다. 사내의 요구사항으로 인해 자동화로 CI/CD를 하지는 않았지만, 반자동화로서 성능과 효율성을 위해 변하는 배포과정을 살펴보자!! 참고로 저는 DevOps, 백앤드에 대한 지식이 부족합니다. 큰 프로젝트는 아니었지만, 필요성을 느껴서 사내 스터디처럼 공부처럼 이루어낸 것이므로 잘못된 정보가 있을 수 있으니, 모든 충고와 조언 감사히 받아들이겠습니다!!   처음에는요.. FE에서 develop에 개발…

난 왜 zustand 공부를 시작했을까?   회사에서 위처럼 회사에서 useState, useEffect, useRef 등 Hook을 하나의 컴포넌트에서 남발해서 사용하고 있다는 것을 알게 되었다. (위 사진은 극히 일부의 코드를 수정해서 보여준란걸..😂) 그렇게 되니 컴포넌트 내부의 요소를 변경하거나, 렌더링이 일어날 때 state, ref의 동적인 값들이 초기화되거나 생각하지 못한 데로 작동하게 되어버리게 되었다. 거기에 새로운 기능 개발을 하게 되었을 때 많은 요소 영향력을 생각해야 되게 되고, useEffect의 의존성 배열이 무한히 추가되는 현실까지 직면하게 되었다. ㅠㅠ 이런 상황까지 되어버리니 회사 내부에서는 프로젝트에 상태관리를 도입해서 렌더링이 발생하는 시점, 변수의 선언, 전역 변수의 props 전달 등 많은 것들을 효율적으로 관리 할 수 있다고 판단해 상태를 중앙에서 변수를 관리하자는 이야기가 나왔다. 이런 회의를 거쳐서 여러 가지 상태관리 라이브러리가 후보군에…

React 19에 도입될 Hooks   use(Promise) & use(Context) Form actions useFormState useFormStatus useOptimistic Bonus: Async transitions 마무리 ✨ 잠깐!!! 모든 코드는 테스트 환경 에서 테스트 가능합니다. (단, React 19에 포함될 예정이지만 최종 release 전에 API가 변경될 수 있음)   use(Promise) & use(Context)   Reference 컴포터는의 호출을 사용하여 Promise 또는 Context 와 같은 리소스의 값을 읽음 use는 if문과 같은 조건문 루프 안에서 호출 가능 use를 호출하는 함수는 컴포넌트 또는 Hook 이어야 함 Promise와 함께 호출될 때, use는 Suspense 및 Error Boundaries와 통합된다. use가 pending 상태일 때 Promise가 전달완료 될 때까지 일시중단되고, use를 호출하는 컴포넌트가…

2023 회고록 사실 이런 거 처음 쓴다. 어색하다. 그런데 회고록을 작성해야겠다고 생각한 이유가 있어서 작성해보려고 한다! 2022년 겨울부터 2023년 1년 전체를 생각해보면 많은 것이 변화했다. 나의 회사, 취미, 대인관계, 삶의 공간 등등.. 너무너무 많은 것들이 변해서 되짚어보고 2024년 계획을 작성해 보려고한다. 많이 솔직하게 작성할 예정이어서, 비공개로 할지 공개를 할지 모르겠다(일단 쓰자) 첫 회사, 이직준비 사실 2021년 초반에 컴퓨터 관련 학원을 다니기도 했고, 국비도 해보았지만 결과도 별로고 시간도 길지 않아서 패스하겠다 제대로 공부를 시작한것은 2021년 12월에 생활코딩, 드림코딩과 같은 유튜브를 보면서 개발공부를 시작하였다. 그 이후에 클론코딩만 주구장창하다가 이대로는 복사기가 될 것 같기도 하고 실력이 멈출것 같아서 OKKY 라는 개발 커뮤니티에서 팀원을 모집해 운동정보 공유 및 기록하는 웹사이트(자칭 : 헬쓰리) 를 만들기 시작했다. 헬쓰리를 만드는…

Singleton Pattern 싱글톤 패턴은 특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하며, 이 인스턴스에 전역적으로 접근할 수 있게 하는 디자인 패턴이다. 싱글톤 패턴은 전역 변수를 사용하지 않고도 전역적인 접근을 제공하여, 공유 자원에 대한 동시 접근을 제어할 수 있어, 자원 관리와 동시성 제어에 중요한 시스템이다. 자바스크립트에서는 클래스를 사용하지 않고도 싱글톤 패턴을 구현할 수 있다. 왜냐하면 자바스크립트는 프로토타입 기반 언어이기 때문에 일반적인 함수와 객체, 클로저를 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시에서 클래스는 처음 생성될 때만 새로운 인스턴스를 생성하며, 이후에는 기존 인스턴스를 반환한다. 와 메서드를 통해 데이터를 가져오고 설정할 수 있다. 또한 자바스크립트의 함수와 프로토타입을 사용하여 싱글톤 패턴을 구현할 수 있다. 그리고 즉시 실행 함수 표현식(IIFE)을 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시는 IIFE를 사용하여…

Dependencies (종속성) 목적: 애플리케이션이 프로덕션에서 실행되기 위해 필수적 설치 방법: 명령어를 플래그 없이 실행할 때 설치 사용 사례: 웹 프레임워크, 유틸리티 라이브러리 등 애플리케이션이 정상적으로 작동하는 데 필요한 패키지를 포함 예시 DevDependencies (개발 종속성) 목적: 개발 및 테스트에만 필요 설치 방법: 또는 명령어를 실행할 때 설치 사용 사례: 테스트 라이브러리, 빌드 도구, 린터 등 프로덕션 환경에서는 필요하지 않은 패키지를 포함 예시 PeerDependencies (피어 종속성) 목적: 패키지를 사용하는 소비자가 특정 종속성을 제공해야 함을 명시 설치 방법: 자동으로 설치되지 않으며, 패키지를 사용하는 프로젝트에서 설치 사용 사례: 플러그인이나 라이브러리가 호스트 애플리케이션이 특정 버전의 종속성을 사용하도록 보장할 때 유용하며, 여러 버전의 동일한 패키지가 사용되는 것을 피할 수 있다. 예시 요약 Dependencies: 런타임에…

모듈은 현대 소프트웨어 개발에서 코드의 재사용성과 유지보수를 높이기 위해 필수적인 요소다. 그리고 자바스크립트에는 CommonJS와 ES 모듈이 있다. 두개가 어떤 차이가 있는지 비교해보자! CommonJS Node.js의 기본 모듈 시스템으로 CommonJs를 사용한다. 를 사용하여 모듈을 로드하고 를 사용하여 변수와 함수를 내보낸다. 동기적 로딩: 모듈을 하나씩 순차적으로 로드하고 처리하므로 성능에 민감한 애플리케이션에서 블로킹이 발생할 수 있다. 유연성: 는 코드의 어디서나 호출할 수 있어 조건부 또는 동적으로 모듈을 로드할 수 있다. ES 모듈 표준화된 포맷: ES 모듈은 자바스크립트 코드 재사용을 위한 공식 표준 문법: 와 문을 사용 비동기적 로딩: 모듈을 비동기적으로 로드하여 고성능 웹 애플리케이션의 성능을 향상시킬 수 있다. 네이티브 브라우저 지원: 모든 최신 웹 브라우저에서 지원하여 서버와 클라이언트 환경 간에 코드를 쉽게 공유할 수 있다. 파일 확장자: 일반적으로…

나는 사실 저 명령어를 써본 적이 없다. 그리고 처음 본다.. git rev-parse는 Git 참조를 구문 분석하고 쿼리하는 데 사용되는 다용도 명령어다. 이해가 안 가니 예시를 보자 git rev-parse HEAD : 현재 브랜치에 있는 최신 커밋의 전체 SHA-1 해시가 반환한다. HEAD 키워드를 태그 또는 브랜치로 변경하면 해당 커밋 ID를 얻을 수 있다. git rev-parse —abbrev-ref HEAD : 현재 브랜치의 이름을 반환 git rev-parse 축약된 커밋명 : 레파지토리 내에서 고유한 전체 커밋 ID 반환 사실 이거 왜 쓰는지 모르겠다고 생각했다. 터미널을 확장해서 쓰면 복잡한 명령어를 작성 안해도 확인 할 수 있으니까! 그런데 다음 예시를 보니 터미널 명령어 내부에서 “조건문을 사용하는데 이런 이유로 사용하는구나” 라는 생각을 했다. 유효성 확인을 위해 아래처럼 사용 가능

함수형 컴포넌트의 상태 관리 pjqnl16lm7 - CodeSandbox 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지 Props 는 react 에서 불변 / this 는 변경가능, 조작가능 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출 render 될 때의 값을 유지 ⇒ 상태를 관리하려면 함수가 다시 호출되었을 때 이전 상태를 기억해야 함 ⇒ useState 는 클로저를 통해 이 문제를 해결 클로저 : 내부 함수에서 상위 함수 스코프의 변수에 접근할수 있는 것을 의미 왜 hooks 를 사용해야 될까? UI 의 상태 관련 동작 및 부수 작용을 캡슐화하는 가장 간단한 방법 고차 컴포넌트(HOC)의 복잡성을 피할 수 있음 props 로 전달되는 속성들이 명확하지 않고 중복됨 컴포넌트 구조의 복잡성을 유발 계층의 변화없이 상태 관련 로직을 재사용할 수 있음 useState 란 무엇인가 React 공식 문서 React 내부에서 상태를 관리하는 방식을 추…

What is Single Thread? javascript 는 Single Thread 기반 언어 ⇒ 한 번에 하나의 작업만 수행 가능 하지만! 동시에 병렬처리 해야 될 때가 있다 그럴 때 javascript는 비동기 함수(setTimeout, ajax, Promise 객체 등)를 이용 동기와 비동기 동기(Synchronous) : 먼저 시작된 작업이 끝날 때까지 기다리다가 새로 시작(한번에 여러작업이 아닌 하나씩) 비동기(Asynchronous): 작업이 끝날때까지 기다리지 않고 다음 작업 수행(한번에 여러작업을 처리함) 자바스크립트의 비동기 내장함수 자바스크립트는 비동기 내장함수를 제공함 ⇒ setTimeout, XMLHttpRequest, fetch() XMLHttpRequest 현재는 잘 사용하지 않음 관련 링크 : https://7942yongdae.tistory.com/67 setTimeout / clearTimeout setTimeout() 함수는 특정 코드를 바로…

Branch 구조와 전략을 세워보자! 코드를 작성하다보면 엄청나게 많은 Branch를 만들어야한다. 어떻게 구조를 잡아야할지 알아보자! Branch Structure(Gitflow 전략) 제품의 안정된 버전을 유지하는 브랜치, 배포 가능한 코드만을 허용하며, 직접적인 작업은 X 개발의 중심이 되는 브랜치, 다른 개발자들과의 협업 및 새로운 기능 개발을 위해 사용 새로운 기능 개발을 위한 branch, 개별 기능 또는 작업 단위로 생성 되며 develop 에서 분기됨 개발이 완료되어 pr 이 merge 되면 해당 feature branch 는 삭제(줄기관리) feature 은 작은 단위의 issue 가 된다. 올바른 branch 관리를 하기위해 각 feature 은 해당하는 이슈의 문제만 해결한다! 배포를 준비하기 위한 branch, 배포 전 마지막 테스트와 버그 수정 진행 develop 에서 분기되며, 완료되면 develop과 master 로 병합. 해당 작업을 진행할때는…

안녕하세요! 2023 AWS Summit 행사 1일차입니다 1일차는 산업 업종별 강연이 주제로서 각 기업들이 어떻게 AWS 를 이용해서 업무를 진행하는지 강연을 진행하고있고, 1층 Hall B에서 EXPO 를 통해 각 기업들의 AWS 적용사례를 실제로 볼 수 있는 부스들로 이루어져 있습니다. 저는 첫째날에 3개의 강연과 EXPO 에서 AWS 의 Cloud 를 다루는 기업들을 살펴보았습니다. 강연 시간표 강연 내용 기조연설 - AWS 모니터링 담당 Nandini Ramani 부사장님, AWS Korea 함기호 대표이사님, 오순영 금융AI센터장님, 야놀자 엔지니어링 수석 이준영 부대표 다양한 AWS의 기술들을 소개했는데 가장 기억에 남는 것은 아무래도 Bedrock 이었다. Bedrock은 AWS에서 제공하는 파운데이션모델이다. 파운데이션모델은 쉽게말해 요즘 핫한 대규모 Generative AI, 즉 ChatGPT와 같은 모델을 뜻하는 듯하다. 요즘 하루가 다르게 오픈소스로…

AWS Summit 2023 2일차입니다. 1일차 행사에서는 AWS 의 기술들을 각 기업들이 어떻게 사용되고 발전되었는지가 주제였다면 이번 2일차에서는 난이도 별로 AWS에 대해서 설명해주고, 발전된 기술을 보여주는 시간을 가졋습니다. 저는 2일차에 참석해서 전문가들의 강연을 듣고 많은 것을 배우며 본 내용을 공유하고자 합니다. 기조연설 윤석찬 AWS 수석 테크 에반젤리스트, 강동한 Flitto CTO, 송주영 LG U+ 연구위원, Holly Mescrobian AWS 서버리스 컴퓨팅 부사장 기조연설에서 윤석찬님과 송주영님, 강동한님의 인터뷰 형식 그리고 AWS Holly Mescrobian 님과 깜짝 출현하신 Werner Vogels AWS CTO 님의 사전 녹화영상으로 이루어졌습니다. 많은 흥미로운 주제중 저는 입문자들이 AWS 를 어떻게 이용해보고 구성해볼지 에 대해서 생각해보자라는 주제가 가장 흥미로웠습니다. 그것에 대해서 말씀하신 강연은 AWS Application Co…

점핏에서 진행하는 FE 북콘테스트가 강남역 모나코스페이스에서 개최되었습니다. 4월 30일에 13:00~17:00 까지 200명의 오프라인 참여자와 2000여명의 온라인 참가자가 참가해 최신 FE 에 대해서 훑어보고, 방향성에 대해서 이야기 Q/A 하는 의미있는 시간이었습니다. 오프라인 참가자에게는 도서와 문구류를 선물로 점핏에서 제공하셧습니다! 강연 목록 13:30 ~ 15:00 #1. 센스있게 일하는 FE 개발자 되기 FE 개발자의 소프트 스킬과 하드 스킬 - 김태곤 협업?! 이렇게 한번해봐(FE 개발자가 타 직군과 대화를 해야하는 이유) - 유동균 15:30 ~ 17:00 #2 Fit한 정보로 성장 부스트업 FE 개발 트렌드(리엑트 개발 생태계와 Next.js까지) - 이인제[소플] 타입스크립트로 FE 개발 레벨업 - 장기효[캡틴판교] 강연 요약 FE 개발자의 소프트 스킬과 하드 스킬 - 김태곤 코드는늙는다 ⇒ 좋은코드를 만든다? 유지보수를 잘한다? 기준이 어떻게 될까 테스트가…