Web/자바스크립트
-
스크롤을 최적화하고 싶은데..Web/자바스크립트 2022. 12. 30. 17:47
"스크롤 애니메이션이 뭔가 이상해요 😭" 스크롤 애니메이션을 고쳐달라는 요구사항이 새로 들어왔다. 정확히 말하면 애니메이션은 아니고, 스크롤할 때 동작하는 간단한 로직에 문제가 있었다. 문제가 된 스크롤 동작은 fixed 상태인 특정 컴포넌트가 스크롤로 인해 지정된 범위를 벗어나려고 하면 해당 범위의 끄트머리를 넘어서지 않도록 위치를 고정해주는 동작이었다. 사실 요 동작 자체만으로는 문제가 없었지만, 여기에 throttle이 더해지자 문제가 생겼다. 원래는 스크롤을 할 때마다 컴포넌트의 위치를 지속적으로 감시하면서 위치를 고정시켜줘야 하는데, throttle로 인해 로직이 띄엄띄엄 실행되는 바람에 감시를 못하고 놓치는 구간이 발생했다. 그래서 컴포넌트가 범위 밖으로 튀어나갔다가 다시 들어오는 현상이 나타..
-
default export를 피해야 하는 이유?Web/자바스크립트 2021. 12. 4. 02:14
우아한테크코스 크루인 도비의 블로그를 보다가, 기억해두면 좋겠다 싶은 내용이 있어 원문을 읽어본 후 짧게 정리한 글. ES Modules의 default exports는 기존에 존재하던 'CommonJS 모듈 시스템'과의 호환을 위한 타협. 기존의 CommonJS 모듈은 다음과 같은 형태를 띠고 있기 때문이다. (객체로 export하는 형식) 호환성을 위해 지원되는 문법일 뿐, 여러모로 비효율적인 부분들이 많다고 한다. module.exports = function() {...} 1. default exports는 import하는 곳에 따라 자유자재로 이름을 붙여줄 수 있기 때문에, 같은 모듈이더라도 사용처에 따라 이름이 달라질 수 있다. 이는 곧 큰 단위의 리팩토링을 어렵게 만드는 요인이 된다. 반면,..
-
WebSocket 채팅 클라이언트 구현기Web/자바스크립트 2021. 8. 20. 18:19
개인적으로 이번 프로젝트를 시작하기 전에 걱정이 이만저만이 아니었다. 웹소켓을 처음 다뤄보기도 했고, stomp.js에 관한 레퍼런스가 생각보다 너무 없었기 때문. 게다가 리액트까지 더해지니 어떤 식으로 구현을 해야할지 기준이랄 게 딱히 없어서 좀 당황스러웠다. 어떻게 짜야 효율적인 코드인지, 이게 성능적으로는 괜찮은 코드인지 뭐 그런. 그래서 그냥 일단은 돌아가게만 구현을 해야겠다 싶었지. 모 개발자분께서도, 웹소켓은 구현하기 나름이라고 하셔서 그냥 그런가보다 했다. 그래도 우리 팀의 백엔드 크루 '포츈'이 채팅 관련 레퍼런스 코드를 찾아줘서 그걸 기반으로 최대한 리액트에 맞게 이리 고치고 저리 고쳐보려고 노력해봤다. 사실 아직까지도 이게 맞는건가 싶긴 하지만, 뭐 어때. 일단은 잘 돌아간다. 💬 채팅..
-
자바스크립트의 this 👉Web/자바스크립트 2021. 5. 3. 03:34
예전에 자바스크립트의 this에 관해 기초적인 내용을 포스팅한 적이 있는데, 생각보다 this를 아직 잘 모르고 있다는 느낌이 들때가 종종 있었다. 오늘 하브루타 스터디의 주제가 'this'였는데, 진행하는 동안 배운 게 참 많기도 하고 마침 this에 관해 공부를 좀 해봐야겠다는 필요성을 느꼈던 터라, 관련된 내용을 꼭 기억해두고 싶어 이렇게 포스팅을 하게 됐다. 각 문맥에서 this를 출력해 본 결과를 바탕으로 중간중간 나와 스터디 크루들의 뇌피셜을 섞어 정리했으므로 주의할 것. ■ this는 왜 필요한가? 객체는 프로퍼티(객체의 상태)와 메서드(객체 자신의 상태를 조작)로 이루어진다. 메서드를 통해 자신의 상태, 즉 프로퍼티를 조작하기 위해서는 외부의 상태들과 구별되는, 자기 자신의 상태임을 표시해..
-
명령형 vs 선언형 프로그래밍Web/자바스크립트 2021. 4. 8. 18:58
명령형 프로그래밍은 절차적 프로그래밍이라고도 하는데, 최근에 우테코 미션을 하다가 요런 말을 들은 적이 있다. 전반적으로, 너무 절차적 프로그래밍으로 코드를 작성하는 경향이 있습니다. 좀 더 선언적으로 기능을 구현할 수 있게 사고 전환을 해보시면 나중에 큰 도움이 될 거예요. 처음에는 무슨 말인지 정확히 감이 잡히질 않아서 여기저기 찾아보다가 ui.dev라는 사이트에서 Tyler McGinnis라는 분이 작성한 글을 보고 조금씩 이해가 되기 시작했다. 그래서 기분이 좋아져서 번역이나 해봐야겠다 싶었다. 나는 언젠가 분명 '명령적(Imperative) 프로그래밍 vs 선언적(Declarative) 프로그래밍'에 대해 들어본 적이 있다. 저게 무엇을 의미하는지를 당연히 검색해봤지만, 그 때마다 요런 정의 정..
-
객체의 불변성(Immutability)Web/자바스크립트 2021. 3. 21. 16:37
객체의 불변성은 객체가 생성된 이후 해당 객체의 상태를 변경할 수 없는 성질을 의미한다. 이런 성질을 적용해서 코딩을 하면, 원본 객체의 데이터가 변경되거나 훼손되는 것을 방지할 수 있다. 자바스크립트는 객체를 참조 형태로 전달하고 전달 받는다. 그래서 객체를 참조 받는 곳에서 해당 객체의 데이터를 변경하면 원본 객체의 데이터도 변경된다. 결국에는 동일한 하나의 객체를 이곳저곳에서 참조하고 있는 것이기 때문. 자바스크립트에서는 주로 어떤 식으로 객체의 불변성을 적용하는가 하면, 객체의 일부를 변경하는 대신 완전히 새로운 객체를 갈아 끼우는 식으로 적용을 한다. '객체 일부만 변경하나, 전체 객체를 갈아끼우나 어차피 데이터는 똑같이 변경되는 거 아닌가요?' 라고 생각할 수도 있겠지만, 객체의 일부를 변경해..
-
async/await을 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 14:57
■ Promise를 consume함으로써 비동기 자바스크립트를 다루는 것은 물론 코드를 이전보다 훨씬 깔끔하게 만들어주는 역할을 하지만, 여전히 코드의 양이 만만치가 않다. 조금 더 사용법을 간단히 만들 필요가 있겠다고 느꼈는지, ES8(ES2017)에서는 async/await이라는 새로운 consume 방법을 내놓았다. ■ 참고로, async/await은 개발자들이 consume을 더 쉽게 하기 위한 문법이므로 produce와는 전혀 관계가 없다. promise를 produce하는 방식은 이전과 동일하다. ■ Promise에 관한 포스팅에서 다루었던 아래의 예제를 async/await을 사용해서 작성해볼 것이다. const getIDs = new Promise((resolve, reject) => { ..
-
Promise를 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 04:22
■ Promise는 Callbak Hell에서 벗어나, 비동기 자바스크립트를 좀 더 효율적으로 다루기 위해 ES6에서 새로 생겨난 개념이다. 정확히는, 좀 더 깔끔한 비동기 코드를 만들기 위해서 생겨난 개념이다. ■ Promise는 특정 이벤트가 발생했는지 / 아닌지를 추적하는 객체이다. 만약 그 이벤트가 발생하면, Promise는 다음에 무엇(future value, 미래 값)이 발생할지를 결정해준다. 여기서 이벤트는 비동기 이벤트, 즉 타이머 종료나 AJAX 호출로부터 데이터가 오는 등의 이벤트를 의미한다. ■ 만약 우리가 '야, background 에서 서버로부터 데이터 좀 가져와줘' 라고 요청하면 Promise는 우리에게 그 데이터를 가져다 주겠다고 약속(promise)한다. 그러면 우리는 미래에..