리덕스 사가(Redux Saga)란 무엇인가?
리덕스(Redux) 리덕스(Redux)의 필요성 리액트(React)는 상태(State)를 가지고 어떻게 돔(DOM)으로 잘 변형할지에 대해 다루고 있습니다. 여기서 상태란 애플리케이션(Application)이 기본적으로 가지고 있는 아주 중요한 요소인데요. 애플리케이션의 규모가 커질수록 상태 즉 데이터를 관리하기가 매우 까다롭기 때문에 상태를 잘 다루고 실제 돔(DOM)으로 업데이트하기까지 이를 도와주는 라이브러리가 필요합니다. 리액트(Reac
FrontendJavaScriptReactTools
TOAST UI
2022-05-12 · 약 4년 전
다음 페인트에 대한 상호작용(Interaction to Next Paint, INP)
응답성(페이지가 사용자의 입력에 얼마나 빨리 응답하는지)은 사용자 경험에 매우 중요하다. Chrome 사용 데이터에 따르면 사용자 시간의 대략 90%가 페이지가 로드된 후에 사용되므로 응답성을 신중하게 측정하는 것이 중요하다. 특히 웹 사이트가 상호작용을 제공하기 위해 자바스크립트에 의존하는 경우가 많아짐에 따라 더 중요해졌다. 이것이 INP가 측정하는 것이며, 이는 페이지의 전체 라이프사이클을 포함한다.
FrontendJavaScriptPerformanceUX/UI
그린데이터
2022-02-18 · 4년 이상 전
E2E Test를 Cypress로 해보자.
JavaScriptTestingTools
hardhat task와 hre 이해하기
BackendJavaScriptTools
Zum Portal Core JS 소개
본 포스트는 줌인터넷 포털개발팀 프론트엔드 파트에서 사용되고 있는 표준화 core package 에 대해 다루고 있습니다. 안녕하세요! 다시 한 달 만에 블로그 포스트를 작성하게 되었습니다. 이번에는 저희 프론트엔드 파트에서 사용하고 있는 zum-portal-core-js에 대해 다뤄볼 생각입니다. zum-portal-core-js 는 서비스를 만들 때 필요한 Frontend config와 uilts, 그리고 backend config 및 ut
FrontendJavaScriptTools
똑똑한개발자
2021-08-22 · 거의 5년 전
[TokTokHan.dev]ES6 문법정리
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Luke 입니다. 👋 똑똑한개발자 똑똑한개발자 프론드엔드 팀은 es6를 기반으로 한 타입스크립트 언어를 활용하여 프로젝트를 진행하고 있습니다. 기존에는 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 코드를 작성하게 되고, es5와 비교했을때 여러 변경사항이 있습니다. 오늘 글에서는 ES6에서 새로 추가된 기능을 모두 설명하기보다는 코드
FrontendJavaScriptTypeScript
똑똑한개발자
2021-07-20 · 약 5년 전
Chart.js 시작하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 ‘구현해야만’ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 C
FrontendJavaScriptTools
똑똑한개발자
2021-07-15 · 약 5년 전
[TokTokHan.dev]Execution Context(실행 컨텍스트)
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다.👋 똑똑한개발자 똑똑한개발자 프론드엔드 팀은 매주 월요일 오후에 javascript 기초에 대한 스터디를 진행하고 있습니다. 자바스크립트의 핵심적인 기본개념과 동작원리에 대해 스터디 구성원 한 사람이 파트 1개씩을 맡아 간단하게 발표하고 그에 대한 의견들을 공유하고 나누는 형태로 진행합니다. 첫 시간에는 자바스크립트의 ‘데이터’와 ‘불변성’에 대해 간략하게 알아보는 시간을 가졌고 이
FrontendJavaScriptPerformanceTesting
주니어 프론트엔드 개발자의 채용 프로세스 참여 후기
본 포스트는 기술적인 내용이 아닌, 주니어 개발자인 필자가 함께 일하게 될 신입 개발자 분들을 모시는 과정에 대해 소개하는 글입니다. 1. 변화, 그리고 모집 올해 들어 줌인터넷에는 굉장히 많은 변화가 있었습니다. 먼저 줌 닷컴의 대대적인 개편이 있었습니다. Spring Boot 로 작성 된 레거시 프로젝트를 버리고, nodejs + vuejs 를 적용하면서 거의 모든 것을 갈아엎었습니다. 개편 전 줌닷컴 현재 줌 닷컴 그리고 줌 닷컴의 개편을
CultureFrontendJavaScriptNode.jsVue
44BITS
2021-04-16 · 5년 이상 전
[뉴스] 비바리퍼블리카, 개발자 컨퍼런스 Slash 21 사전 예약중
토스 서비스의 개발사 비바리퍼블리카에서는 개발자 컨퍼런스 Slash 21 컨퍼런스 사이트를 오픈하고, 사전 예약 신청을 받고 있습니다. 이번 컨퍼런스는 4월 28일부터 30일까지 3일 동안 열리며, SRE, 모니터링, 테스트, 프론트엔드, 자바스크립트(JavaScript), 데이터베이스, 슬랙봇 등을 주제로 3일간 총 19개 세션이 예정되어있습니다.
FrontendJavaScriptMonitoringSRETesting
레모네이드
2021-04-09 · 5년 이상 전
판주야 Redux는…#1
FrontendJavaScriptReact
레모네이드
2021-04-07 · 5년 이상 전
Yarn Workspace를 이용한 Monorepo 구성
JavaScriptNode.jsTools
어반베이스
2021-03-28 · 5년 이상 전
Class vs Factory Function, 더 나은 선택은?
안녕하세요. API 개발팀 이정준 입니다. ECMAScript6 에서 class가 추가되었습니다. Class Function과 Factory Function의 차이를 알아보고, 어떤 Function을 사용할지 생각해 봅시다. 1.기본 사용 방법 기본 사용 방법은 다음과 같습니다. Class Function class TodoModel { constructor(data) { this.todos = []; this.data = data; } add
FrontendJavaScriptTools
크롬 확장프로그램 개발⛏️ 회고
안녕하세요! 최근에 포털개발팀에서 Zum NewTab 이라는 크롬 확장프로그램을 만들었습니다. 4월부터 8월까지의 확장프로그램을 개발, 배포, 검수하는 과정에서의 삽질한 경험을 공유하고자 이렇게 글을 올립니다. 1. 프로젝트 개요 크롬 확장프로그램 확장프로그램은 사용자의 브라우징 경험을 긍정적으로 확장시킬 수 있는 작은 소프트웨어입니다. 이를 통해 사용자는 브라우저의 기능과 동작을 개인의 필요 또는 선호도에 맞게 조정할 수 있습니다. 확장프로그
FrontendJavaScriptTools
Python vs Javascript Array Methods Comparison
JavaScriptPythonTools
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Part1에서는 프론트엔드 단독 개발 모드를 구성하는 방법을, Part2에서는 백엔드 연동 개발 모드를 구성한 방법에 대해 공유합니다. 설명드릴 예제 코드는 Webpack4, Axios를 이용합니다. 목차 들어가기 전에 도입 배경 NPM 스크립트 소개 각 모드별 구성 방법 4-1. publish 모드 4-2. dev 모드 정리 마치며 1~4까지는 Part 1, 5~7은 Part2로 나누어 설명을 진행하겠습니다. 1. 들어가기 전에 최근 Gith
DevOpsFrontendJavaScriptTools
[알쓸신팁-부록] Javascript 성능 저하 방지법
Front 개발을 하다가 작은 실수 하나로 화면의 성능이 확 떨어지게 되는 경우들이 있습니다. 이런 상황을 미연에 방지하기 위하여, 간단한 3가지 방법을 알려드립니다.1. 전역변수 및 Element를 지역변수화 하여 캐싱 먼저 지역변수를 활용하는 방법입니다.(무슨 말인지 0.1도 모르겠네요.ㅠ^ㅠ) 역시 개발자는 코드로 이야기를 해야겠죠~ㅎㅎ위의 코드를 보면, asisFunction의 안에서 document라는 javascript 전역 객체에
FrontendJavaScriptPerformance
자바스크립트의 비동기 처리과정
들어가며안녕하세요. 티몬에서 이제 1년차가 된 신입 개발자입니다! 그 동안 업무를 하면서 배운 것들이 많은데요, 최근에는 티몬의 상품을 관리하는 운영시스템 화면을 개발하면서 자바스크립트를 많이 알게 되었습니다. 안타깝게도 전 자바스크립트를 잘 알지도 못하는 ‘자알못’이었기 때문에 개발하면서 많은 시행착오를 겪었는데요. 특히 기대와 다르게 실행되는 비동기 API 때문에 고생을 했더랬죠. 그래서 이번 포스팅에서는 자바스크립트의 실행 환경에 대해 살
FrontendJavaScriptPerformanceTools