최근 여러 가지 기업들의 과제를 하다가 느낀 점이 있다. webpack이라는 모듈 번들러는 초기 설정이 매우 번거롭다는 점이다. 물론 한 번 제대로 설정해두면 이후로 크게 변동이 생기거나 하는 일은 드물지만, 일주일만에 끝내야하는 과제테스트의 특성상 번거로운 설정을 하

혹시 "노이즈 이펙터"에 대해서 모른다면 이전 포스팅을 참고하는 것을 추천한다. 이번 글에서는 노이즈 이펙터를 개발하면서 꽤 애를 많이 먹었던 부분인 성능 개선에 대해 내가 겪은 시간 순으로 트러블 슈팅 과정을 적어보려한다.그럼, 시작해보자!노이즈 이펙터의 핵심 기능인

이번에 개인 사이드 프로젝트로 개발을 진행한 “Noise Effector”는 사진에 여러 가지 효과를 적용해 사진을 바꿔주는 사이드 프로젝트이다. 단순한 필터수준의 효과는 아니다. 이전 글인 “글또를 시작하며”의 썸네일도 Noise Effector를 통해 제작했다.

다사다난했던 2022년이 지나고, 2023년이 왔다. 우아한테크코스를 수료하고, 아직 취준생으로 남아있으면서 구직에 성공 하기 위한 여러 노력들을 하고 있다. 글또 또한 그 중 하나이다. 우아한테크코스와 2022년을 함께하면서 스스로의 다짐과 회고가 다소 부실하지 않았

2021년 10월부터 시작된 우아한테크코스 지원부터, 2022년 11월말의 수료까지 우아한테크코스와 함께한 2022년 1년이 끝이 났다. 수료하고 미뤄뒀던 소감과 회고, “우아한테크코스 이전의 나와 지금의 나는 어떻게 달라졌을까?” 와 “앞으로는 무엇을 해나갈 것인가?

얼마 전, 우아한형제들 기술면접에서 “프로토타입의 장점은 무엇인가요?” 라는 질문을 받았다. 나의 답변이 부족한 부분이 많았던 것 같아고 아무래도 자바스크립트의 코어한 개념이기도 한만큼 다시 깊게 파보려고 이 글을 쓰게 되었다. 프로토타입을 장단점을 살펴보기 위해 총

저번에 레벨로그의 타입스크립트 -컴파일 전략- 에서 dev와 prod의 빌드 속도를 개선하는 결과를 얻었다. Github Actions CI prod build 기준으로 약 "32초"에서 "14초" 정도로 개선을 했었다.하지만 이건 레벨로그의 CI build 타임을 보

나는 3차 데모가 끝나고, 늘 우선순위에서 밀리고 밀려 버려져있던 UI/UX를 스프린트4 때 꼭 개선해서 방학이 끝나고 딱 레벨 인터뷰를 하게될 때 우리의 서비스를 사용하도록 하기로 마음 먹었다.지금까지 데모에서 쌓인 UI/UX에 대한 피드백, 기능추가보다 사용성 개선

레벨 3,4기간동안 우아한테크코스의 모의면접 레벨인터뷰를 편리하게 진행하기 위한 "레벨로그" 프로젝트 기간이 10/21을 마지막 끝이 났다. 사실 더 팀 프로젝트를 진행할 수는 있지만 대부분 크루들은 놓아주고 취업를 위한 준비를 하러 떠날 모양인 듯 싶었다.나는 약간

저번에 말했던 “레벨로그의 타입스크립트”의 변천사를 다루어 볼텐데 오늘은 1편이다.주제는 “타입스크립트 컴파일 전략” 이고, webpack과 함께 빌드 환경에 따라 타입스크립트를 어떻게 컴파일 하는지 살펴보도록 하자.혹시 기존의 레벨로그의 타입스크립트 컴파일 전략을 모

먼저 리액트 쿼리가 뭐하는 라이브러리인지를 가볍게 설명하자면, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 라이브러리이다. 이전에 내가 다뤄봤던 Redux와는 다르게 클라이언트 데이터가 아니라 서버 데이터들을 관리하기 쉽게

얼마 전에, 프로젝트에서 사용하는 타입과 타입스크립트 코드의 이유와 기준에 대해서 정리하고 발표까지 하는 시간이 있었다. 이번 글은 그 때 정리된 레벨로그(나의 팀 프로젝트)의 타입스크립트 기준에 대해 적어보겠다.이 글을 적은 이유는 곧 있을 6차 데모에서 타입스크립트

자바스크립트 개발자라면 ECMAScript에 대해서는 모두 들어봤을 것이다. 자세히 알아보는 것은 아래의 목차에서 살펴보고, 이 곳에서는 Javascript와 ECMAScript의 차이만 가볍게 짚고 넘어가자. Javascript는 프로그래밍 언어의 이름이고, ECMA

프론트엔드 성능 개선하기 (로딩편)

오늘 팀 프로젝트를 진행하다가 PR을 보내려고 내가 작업하는동안 변경된 사항들을 반영하기 위해 develop 브랜치에서 pull을 받아와서 작업하던 브랜치에 merge를 하고 있던 중에 무슨 실수를 한 것인지 먼 과거의 커밋 하나가 마지막 머지 커밋으로 붙어 버렸다.코

🤔 브라우저 렌더링 과정에 대해서 자바스크립트의 AJAX에서 살펴본 내용에 의하면 AJAX를 통해 브라우저는 자바스크립트를 사용하여 서버에게 비동기로 데이터를 요청하고, 서버의 응답을 받아, 받은 데이터로 웹페이지를 동적으로 갱신하게 된다는 것을 알게되었다. 이번

ES6 에서 도입된 이터레이션 프로토콜(iteration protocol)은 순회 가능한 자료구조를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6 이전의 순회 가능한 자료구조들은 통일된 규약 없이 각자 나름의 구조를 가지고 다양한 방법으

결론부터 말하고 가자면 React에 의해서 값이 제어되는 컴포넌트를 제어 컴포넌트, React에 의해서 값이 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 한다.우리는 form 이나 input 요소를 다룰 때, 요소에 입력되는 값을 state로 관리하거나 DOM API를

리액트에서 컴포넌트란 마크업, CSS 및 JavaScript를 앱에서 재사용 가능한 UI 요소로 결합한 것을 말한다. 리액트는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaSc

위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장한다.JSX는 React “엘리먼트(element)”를 생성하는 표현식이다.Babe