전체 글
-
RM과 Pharrell의 대담et cetera/... 2023. 1. 8. 21:07
https://www.youtube.com/watch?v=1H1Mh5KT8LQ P: 우선, 대충 인터뷰에 초대해줘서 고맙다는 뜻 R: 대충 나도 고맙다는 뜻 P: 너도 느끼겠지만, 다른 사람들을 위해 곡을 쓰고 프로듀싱할 수 있는 건 나 자신에게도 개이득이야. 평소의 나라면 안할 것들을 해보기도 하고. 보통, 솔로 아티스트로서 다른 사람의 곡에 기여할 때는 내가 뭘 하고 있는지 알고 작업해. 아마 사람들 대부분은 모르겠지만, 내 모든 솔로 작업물들은 원래는 다른 사람들을 위해서 만들거나 프로듀싱했던 곡들이야. 사실, 나 자신을 위한 곡을 만들거나 프로듀싱하려고 하면 대개는 너무 복잡해지더라고. 보통 최상의 작업물은 나 자신을 살짝 내려놓을 때 나오드라. 너는 어떻든? R: 2005년 즈음, 초딩이었던 나..
-
스크롤을 최적화하고 싶은데..Web/자바스크립트 2022. 12. 30. 17:47
"스크롤 애니메이션이 뭔가 이상해요 😭" 스크롤 애니메이션을 고쳐달라는 요구사항이 새로 들어왔다. 정확히 말하면 애니메이션은 아니고, 스크롤할 때 동작하는 간단한 로직에 문제가 있었다. 문제가 된 스크롤 동작은 fixed 상태인 특정 컴포넌트가 스크롤로 인해 지정된 범위를 벗어나려고 하면 해당 범위의 끄트머리를 넘어서지 않도록 위치를 고정해주는 동작이었다. 사실 요 동작 자체만으로는 문제가 없었지만, 여기에 throttle이 더해지자 문제가 생겼다. 원래는 스크롤을 할 때마다 컴포넌트의 위치를 지속적으로 감시하면서 위치를 고정시켜줘야 하는데, throttle로 인해 로직이 띄엄띄엄 실행되는 바람에 감시를 못하고 놓치는 구간이 발생했다. 그래서 컴포넌트가 범위 밖으로 튀어나갔다가 다시 들어오는 현상이 나타..
-
useEffect가 나를 열받게 했다Web/React 2022. 7. 15. 20:32
이번에 새로운 기능을 개발하면서 상태의 변화에 따른 side effect들을 처리해주기 위해 useEffect를 많이 사용하게 됐다. 기능의 생명 주기를 stage라는 단위로 구분했는데, 원래는 페이지 단위로 사용자의 행동을 구분하는 것이 보편적이겠지만 사실 페이지의 형태도 거의 비슷하고 로직만 약간씩 바뀌는 식이어서 굳이 페이지를 나눌 필요가 없겠다는 생각이었다. 그래서 사용자가 '이번 페이지에서 할 작업을 다 마쳤으니 다음 페이지로 넘어간다' 라는 의도로 '다음' 버튼을 누르면 동일한 페이지 내에서 stage만 바뀌고, stage의 변화에 따라 useEffect에서 여러 작업을 수행하는 방식으로 구현을 했다. useEffect(() => { if (stage === ‘first-stage’) { //..
-
잠Diary 2022. 5. 6. 03:03
잠을 자고 나면, 전날에는 도저히 풀리지 않던 문제들이 술술 풀리는 경우가 많다. 아무리 머리를 쥐어짜내도 도저히 생각나지 않던 문제의 해답이 잠을 자고 나서 조금만 생각하다보면 어느샌가 불쑥하고 떠오르곤 한다. 잠에 들기 직전까지 괴롭게 하는 여러 복잡한 감정들이 잠을 자고 나면 말끔히 정리되드라. 말끔히 정리되고나면 다시 온전한 상태로 되돌아갈 수 있다. 그러면, 그 때서야 전 날의 사건 사고, 혹은 문제들을 침착하게 되돌아볼 수 있게 되는 것 같다. 감정에 휘둘리지 않은 판단을 내릴 수 있게 되더라. 나는 순간순간에 매번 냉철한 판단을 할 수 있는 사람이 아니라서 당일 날 급하게 결정을 내렸다가 바로 다음 날 후회하는 경우가 종종 있다. 앞으로는 올바른 판단을 내리기 힘든 상황이라고..
-
목표의 재설정Diary 2022. 3. 2. 04:14
목표의 재설정이 필요한 시점이 아닐까 싶다. 예상치 못한 계기로 코딩을 며칠간 손에서 놓게 되었고 그로 인해 약간의 현자타임이 왔다. 하지만 사실은 훨씬 전부터, 아마 입사 즈음부터 이미 공부 의욕이 많이 사라졌던 것 같다. 입사 이후에도 팀에서 1인분을 하기 위해 열심히 공부하긴 했지만 의욕 없이 눈 앞에 닥치는 일들만 하나하나 처리하기에 급급한 공부였다. 스스로 뭔갈 찾아서 공부하지 않고, 업무를 받아서 업무와 관련된 공부들만 해치워나갔다. 블로그에는 공들여서 쓴 유익한 글들만 올리자는 처음의 다짐과는 달리 어느 새 TIL이라는 이름의, 나조차도 보지 않는 똥글들만 주루룩 올라오고 있었다. 그러다가 업무가 중단되고 내게 주어졌던 일들이 사라지고 나니, 나는 말 그대로 그냥 퍼져버리고 말았다. 여느 때..
-
부드러운 애니메이션을 위한 FLIP 테크닉Web/CSS 2022. 2. 7. 00:42
height, width, top, left 같은 속성의 변화는 레이아웃(리플로우)을 유발한다. 그러면 브라우저는 다른 엘리먼트에도 레이아웃 변화가 있는지를 재귀적으로 확인해야하고 이를 계산하는 데에는 많은 비용이 든다. 만약 그 계산이 애니메이션의 1 프레임(약 16.7ms)보다 오래 걸리면 애니메이션의 프레임은 제 시간에 렌더되지 못하고 스킵되기 때문에 사용자 입장에서는 버벅거리는 것처럼 보인다. 그래서 height 같은 속성들을 이용한 애니메이션은 종종 버벅거리는 경우가 많다. 부드러운 애니메이션을 위해서는 최대한 적은 변화를 최대한 빨리 계산해야하고, 이를 위해서는 transform과 opacity로만 애니메이션을 구현해야한다. 그리고 FLIP 테크닉은 transform 속성만을 활용하여 애니메이..
-
S.W.R = Stale-While-RevalidateWeb/Network 2022. 2. 5. 00:57
Stale-While-Revalidate 클라이언트는 서버로부터 API를 통해 데이터를 받아온다. 데이터가 클라이언트에 한 번 전해진 이상, 클라이언트는 해당 데이터가 최신 데이터인지 더 이상 알 수가 없다. 이렇게 서버에서 클라이언트로 전해져 최신 데이터인지 알 수 없는, 즉 신선함을 잃은 데이터를 'stale response'라고 한다. stale-while-revalidate는 '캐싱 전략'의 일종이다. (아직 비표준 단계의 HTTP Cache-Control) 데이터가 stale response인지 아닌지는 Cache-Control 헤더에 함께 포함된 max-age로 판단한다. Cache-Control: max-age=600, stale-while-revalidate=30 캐싱된 데이터가 아직 최신..
-
Parcel이 tsconfig의 path alias를 인식하지 못하는 문제et cetera/Trouble Shooting 2022. 1. 22. 19:22
■ 상황 Parcel-bundler를 typescript와 함께 사용하면서, path alias를 사용하기 위해 tsconfig 파일의 'paths' 속성을 다음과 같이 설정했다. { "compilerOptions": { "baseUrl": ".", "paths": { "@src/*": ["src/*"], }, } 하지만 원하는 대로 동작하지 않고 계속해서 에러가 발생하는 상황. ■ 상세 에디터에 컴파일 에러는 발생하지 않는데 빌드 과정에서 에러가 발생하는 것을 보니, tsconfig의 path alias 설정을 parcel은 인식하지 못해서 문제가 발생하는 듯 하다. (tsconfig 파일은 typescript 설정 파일이니깐) 이에 대해, 내가 찾은 해결책은 babel의 plugin을 사용하는 것. ..