darait

자바스크립트의 이벤트 루프는 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘입니다. javascript 에서 단일 스레드 이벤트 루프 동작을 간단히 설명하려고 합니다.   1) 사용자 이벤트 실행 2) 일단 call stack 에 들어감3) 이벤트가 Promise, async/await fetch() 와 같은 작업들이면 Micro task Queue 에 들어가고, setTimeout, setInterval 과 같은 작업들은 web Api 에서 처리되어  Macro task Queue 들어갑니다. 4) Micro task Queue 가 Macro task Queue  보다 우선순위를 가짐으로 이벤트 루프는 콜스택과 tak quequ 를 감시하다가 콜스택이 비어있으면 우선순위에 맞게 콜스택에 보내 ..

2024년 10월 16일 수요일에 숨고에서 처음으로 주최하는 공개 기술 세미나를 진행하는 곳에 당첨되어 다녀왔다.  30명 추첨에 당첨되다니 운이 좋았다.   처음은 숨고의 기술 프레임워크 연대기로 시작되었다.PHP로 2015년에 첫 출시를 진행하였고 그이후에 "Django > Vue2 > Next" 로 프레임워크를 변화하면서 마이그레이션 하면서 성장중에 있다고 한다.  이번 기술 세미나에서는 react-native 에 대한 내용도 있었는데 현재 나는 FE 개발자로 프론트 발표가 더 눈에 들어 왔던것 같다.   "빌드 워크플로우 가속화" (발표자 : 숨고 FE 김현식, 김민철 님) 빌드에 들어가는 비용 계산을 구체적으로 해봤을때 예를 들어 연봉 5천만원인 개발자 기준으로 생각해봤을때, 회사가 빌드비용으로..

참여하고 있는 모각코(모여서 각자 코딩)에서 함께하는분이 발표를 한다고 해서 가게 된 모임이었다. AWSKRUG(https://awskrug.github.io/)는 분야별 혹은 지역별로 다양한 소모임을 만들어 운영하고 있는 곳으로 각 소모임을 활성화 하기 위해 행사 장소 제공, 경비 지원 및 학습용 AWS 크레딧 등을 제공하는 곳이다. 행사는 먼저 피자를 나눠먹고 참여자들끼리 이야기 하는 형식으로 진행되었다. 커뮤니티를 위한 프로그램이 따로 준비되어 있는것은 아니고 전체적으로 아는 사람들과의 교류위주여서 커뮤니티적으로는 조금 아쉬웠지만 Next 프레임워크에 대해서 듣고 배울 수 있는 자리여서 좋은 모임이었던것 같다.발표자: 김승모님 (호두랩스 테크랩팀)주제: Next.js 우아하게 사용하기내용: Next..

디자인패턴 이란? 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. 프론트엔드 개발이 점점 복잡해지면서 재사용성, 코드의 통일성, 확장성을 고려해야 할 때, 이번 번역 글이 여러분의 고민을 해결하는 데 도움이 되기를    Gang Of Four 이외의 패턴 생성 패턴 구조 패턴 행동 패턴 MVC 심플 팩토리(Simple Factory) 어댑터(A..

이동욱님 인프랩 (CTO) 강의 시니어를 뽑기 이전에 좋은 동료를 찾았다. 좋은 동료로서의 기준 - 제품의 이해도가 높고 조직에 대한 비전 및 스스로의 동기부여를 할 줄 아는 사람.좋은 개발 문화소나큐브, 코드레빗 등을 통해서 테스트 커버리지를 측정하고 이것이 낮으면 PR이 실패하도록 한다. 적응 기간을 줄여서 활약 시간을 늘리고 미션을 만들어서 공유하고 적응기간을 줄였다.주니어 서포터 문화(서포터의 개입을 줄이기 위한 장치) metasearch - 듀오링고에서 만든 오픈 소스 임 이걸 사용해서 검색을 하게한다 AI Slack Bot 으로 회사 내부 컨플위키지라 문서 참고해서 답변을 하는 봇을 이용하여 서포터 개입 없이도 주니어가 스스로 답을 찾을 수 있도록 하여 효율성를 높였다.메타서치(Metasear..

이번 연도 처음 참여해본 FEFONF!회사 동료가 표를 양도해줘서 겨우 가볼 수 있었다. 항상 웹 전반적인 내용에 대한 발표를 보다가 fe에 대한 내용만 다루는 행사는 FE 개발자로서 다른 행사보다 들을거리와 볼거리가 많았던 자리였던 것 같다.  Three.js 강의 내용(지용민)이 강의에서 GLSL, 프레이머 에 대해서 개념을 알게 되었던것 같다. GLSL란?GLSL(OpenGL Shading Language)은 3D 그래픽스를 처리하기 위해 OpenGL과 함께 사용되는 고급 셰이더 언어입니다. GPU에서 직접 실행되는 프로그램을 작성할 수 있어 복잡한 그래픽 연산을 빠르게 처리하며, 버텍스 셰이더와 프래그먼트 셰이더를 통해 각각 모델의 위치 변환과 픽셀의 색상 계산을 제어할 수 있습니다. C 언어와 ..

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 저장했을 때, prettire 에 맞게 고쳐주는 설정. }, "eslint.alwaysShowStatus": true, // eslint 상태를 보여주는 상태 "eslint.workingDirectories": [ {"mode": "auto"} ], // eslint code 있는 dir 을 쫒아서 validation 해주는 설정 "eslint.validation": [ "javascript", "typescript" ] }

eslint 설정파일을 생성할때 여러가지 확장자로 만들어도 상관없지만 난 개인적으로 js 확장자로 만드는 것이 편한것 같다. 기본적으로 주석도 달수 있고 다른 파일을 병합할 수 있기 때문이다.

정의 - Algorithm의 시간 복잡도를 나타내는 표기법 O(1) < O(log n) < O(n * log n) < O(n^2) < O(n^3) < O(2^n) < O(n!) O(1) : 상수시간 ( 문제를 해결하는데 오직 한 단계만 처리함 ) O(log n) : 로그시간 ( 문제를 해결하는데 필요한 단계들이 연산마다 특정 요인에 의해 줄어듬 ) O(n) : 직선적 시간 (문제를 해결하기 위한 입력 N 만큼의 단계가 필요 ) O(n log n) : 문제를 해결하기 위한 단계의 수가 N 번에 그 하나의 N번당 필요한 단계들이 연산마자 특정 요인에 의해 줄어듬 O(n^2) : 2차시간 ( 문제를 해결하기 위한 단계의 수는 입력값 n의 제곱 ) O(C^n) : 지수 시간 ( 문제를 해결하기 위한 단계의 수는..

uglifyjs-webpack-plugin vs terser-webpack-plugin 요즘 npm 사용되는 minimization 관련 추세 https://www.npmtrends.com/babel-minify-vs-babel-minify-webpack-plugin-vs-uglifyjs-webpack-plugin-vs-terser terser-webpack-plugin가 2019년도 부터 uglifyjs-webpack-plugin 보다 더 많이 사용되고 있다.