본문 바로가기

분류 전체보기61

실전! 리팩토링 배경 회사 내부 일정, 개발팀 일정 꼬여서 예상치 못한 공백이 생겼다. 소규모 인력으로 운영하느라 매번 밀려있던 버그를 처리하기로 했다. 우리 서비스를 이용하는 크리에이터는 영상을 업로드 하고 유저가 동작을 따라할 구간을 설정해야 한다. 바로 이 구간 설정 기능을 손봐야 했다. 목표 바뀐 정책을 반영하고, 자잘한 버그를 수정하자 ! (사실 정책은 작업 도중에 확정되긴 했다) 올해 초 이벤트 진행 중에 발생한 버그였다. 유저가 구간 간격을 너무 밭게 설정하면, 순차적으로 이루어져야 하는 서버와의 실시간 소켓 통신이 네트워크 환경에 따라 꼬여버릴 수 있었고, 유저가 서비스를 정상적으로 이용할 수 없었다. 사실 일종의 엣지 케이스여서 흔히 발생하는 경우는 아니었지만 안정성을 위해서는 개선이 필요했다. UI 상.. 2022. 7. 31.
Serverless + Next.js에 Sentry 도입하기 제목 거창해서 웃기다. 사실상 센트리 도입 과정의 삽질 여정에 대한 기록인데(...). 센트리를 여러 회사에서 도입해서 사용하는 것 같은데 막상 공식 홈페이지의 가이드나 문서는 다국어 지원이 안 보여서 다들 어떻게 쓰고 있는건지 좀 의아했다. 나만 좀 헤맸나 싶었다. 어쨌든 누군가에게는 도움이 되지 않겠나 싶어 기록을 남기기로 했고, 사실상 환경 설정 과 관련된 번역 위주의 설명이 될 것 같다. 배경 우선, 센트리를 도입한 배경. 우리 팀은 Serverless 환경에 배포되고 실행되는 Next.js 기반의 프로젝트를 운영하고 있고, 특별한 계기가 있던 건 아니지만 프로덕트를 성장시키려면 좀 더 체계적으로 관리할 수 있는 조건을 만들어 놓아야 할 필요성을 느껴 팀 내에서 센트리를 한 번 써보자는 결론이 나.. 2022. 6. 30.
[TIR] 2022년 웹 개발 Baseline 우연히 LINE 테크 블로그에서 2022년 웹 개발의 경향과 변화를 분석한 글을 읽게 되었다. 분석적이고 논리적이여서 개인적으로 기술 관련 글쓰기를 할 때 자주 참고할 것 같은 글이었다. 읽다가 새롭게 알게 되거나 기억해야할 부분을 발췌해보려고 한다. 우선 가장 중요한 사건은 역시나 IE의 은퇴였다. 이것은 단순히 이제 IE를 쓰지 않는 것을 넘어 웹 개발 전반의 발전 방향과 변화를 의미한다. 그러한 맥락에서 기존의 웹 표준이었던 IE가 은퇴했으니 새로운 베이스라인을 세워보자는 것이 이 글의 요지이다. 새로운 베이스 라인 사용자 기기(CPU 성능), 각 브라우저의 웹 표준 구현 수준, 모바일 네트워크 가용 상황(4G, 5G)을 근거로 삼아 베이스 라인을 도출하고 정의한 것이 인상적이었다. 차례대로 And.. 2022. 6. 20.
[TIL] Promise, async/await 오늘 처음 배운 개념과 문법은 아니지만 오늘 처음 '제대로' 알게 된 사실들이 있어서 짧게 정리(...) + 볼드 처리 해보았다. Promise let promise = new Promise((res, rej) => { // executor // res() // rej() }); - 프로미스 객체에 전달되는 executor 함수는 프로미스 객체가 생성될 때 자동으로 즉각 실행된다. - 해야할 일들이 이 함수 내부에서 처리되고 -> 그 결과에 따라 자바스크립트가 제공하는 콜백인 resolve 혹은 reject가 호출한다. - resolve, reject는 하나의 인수만 받고 나머지는 전부 무시 - 처리된 settled 프로미스에 resolve, reject를 호출해도 무시 then, catch, final.. 2022. 6. 12.
[TIR] 오랜 프로그래머로부터의 조언 웹 서핑하다가 우연히 "오랜 프로그래머로부터의 조언"이라는 발췌 글을 발견했다. 글을 쓴 Zed Shaw는 20년 이상의 경력을 가진 개발자임에도 불구하고 전혀 비장(!)하지 않게 진심이 전해지는 메세지를 전달한다는 인상을 받았다. 몇 군데 밑줄을 그었다. " 제가 이 과정에서 깨달은 것은, 언어는 전혀 상관이 없고, 언어를 가지고 뭘 하느냐가 상관이 있다는 사실입니다. 사실 그걸 모르는 건 아니었지만 언어에 정신이 팔려서 매번 잊고 있었죠. 이제 저는 더 이상 그 사실을 잊지 않고, 여러분 또한 잊으면 안 됩니다. 당신이 어떤 프로그래밍 언어를 배우고 쓰는지는 아무 상관이 없습니다. 프로그래밍 언어를 둘러싼 종교들에 빠지지 말고, 언어의 참 목적은 재밌는 일을 하는 도구라는 점을 잊지 마세요. 지적 활.. 2022. 6. 10.
크롬 브라우저로 프로세스와 스레드 이해하기 요즘 CS 관련해서 프로세스와 스레드를 설명하는 여러 글들을 읽었는데, 좀 추상적인 개념이다보니 단박에 이해되지 않았다. 프로세스는 "운영체제가 시스템의 자원을 할당하는 작업의 단위"이고, 스레드는 이처럼 "프로세스를 구성하며, 프로세스가 할당 받은 자원을 활용하는 실행 흐름의 단위"라고 한다. 우리가 프로그램이라고 알고 있는 것이 실행되어 운영 체제에 의해 메모리 공간이 할당되면 프로세스가 생성되고 동적인 상태가 된다고 한다. 끙. 사실 여기에서 뭘 더 설명해야 하냐고 하면 할말이 없지만 좀 더 구체적인 정보가 필요했다. 프론트엔드 개발을 하면서 이 개념과 가장 밀접하게 관련이 있을 것 같은 브라우저를 통해 프로세스와 스레드를 이해하는 게 낫겠다 싶었다. 그러다가 NAVER D2에서 "최신 브라우저의 .. 2022. 6. 6.
[TIR] 무례함과 친절 김경일, [CEO 심리학] 직원들의 잦은 실수는 기강해이가 원인 아니라 리더의 무례함 때문이다, 2021. 12. 23 한달 전 쯤 읽었던 기사인데 오늘 비슷한 글을 읽어서 같이 가져왔다. 위의 기사 내용은 제목 그대로이고, 실제 실험으로 증명된 연구 결과 등으로 제목과 관련된 주장이 뒷받침 된다. 그 중에서도 인상적인 결과는 다음과 같다. 아마 내가 이 기사를 그냥 지나치지 못한 이유일 것이다. "포래스 교수의 연구를 요약하자면, 상대방 특히 상사나 리더에게 무례한 지적과 비판을 받은 사람은 상당 기간 동안 업무에 집중하지 못하고 의욕이 떨어진다. 그런데 더욱 심각한 것은 무례함의 피해자가 아니라 그저 단순한 목격자에게도 이 결과가 거의 '유사한 정도'로 나타난다는 것이다." 근무 환경의 분위기라는 게.. 2022. 6. 4.
[220521] 개발자, 프로덕트(디자인) 팀과 협업 한 회사에서 딱 1년을 채우고 나니까 입이 막 터지네. 매일 하고 싶은 말이 떠오른다. 오늘은 동료 디자이너로부터 고마운 피드백을 받았다. 다음 주부터 본격적으로 개발을 실행할 프로덕트가 있어서 오전에 피그마를 보고 디자인 리뷰를 해서 전달 드렸는데, 그 리뷰를 계기로 피드백을 주신 것 같았다. 나한테 디자인 리뷰를 받으면 아이디어가 정리되고 방향이 선명해져서 도움이 되어 감사하다는 내용이었다. (사실 나도 열심히 숨기려고 하지만 머릿 속은 항상 대혼란이라 피드백을 받고 아주 잠시 몸둘 바를 모르긴 했다.) 사실 회사가 소규모다 보니 디자인 팀에서 개발 팀으로 넘어오는 핸드오프가 엄청 체계적이거나 상세하다고는 할 수 없는데, 그래서 디자인에서 개발로 이어지는 흐름에서 중간 단계를 하나 더 놓을 필요성을 .. 2022. 5. 21.
[220520] 문제 해결 문제 해결보다 더 어려운 건 사실 문제를 알아차리고 원인을 정확하게 짚어내는 일인 것 같다. 해결을 찾고 시도하는 하기 위해서는 문제 인식이 선행 되어야 하기 때문이다. 어쩌면 진짜 문제가 뭔지 아는 것 자체가 문제 해결의 일부라고 볼 수도 있겠다. 무언가 잘못 되었다고 '느끼는 것', 이 잘못의 원인이 어디에 있는지 더듬더듬 찾는 것, 뭔가 잡히는 것 같을 때 여러 가설들을 세워서 문제가 제거되는지 확인해보는 것; 1년 차 중반까지만 해도 이런 프로세스를 정확히 이해하지 못했던 것 같다. 지금 생각해보면 1인분의 몫을 하겠다는 강박과 긴장 속에 눈 앞에 놓인 일들을 수행하기 급급했다. 다른 팀에서 오는 요청에 대해 스스로 한번 검토하거나 고민하는 단계 없이 그저 받아서 해치웠다. 그게 내 역할이라고 생.. 2022. 5. 20.
[Next.js] :first-child CSS Selector 경고 Next 환경에서 개발을 하다보면 치명적이지는 않지만 주의하라는 경고들이 가끔 뜨는데 :first-child CSS Selector를 사용하지 말라는 경고도 그 중 하나이다. 저 셀렉터를 수정하지 않는다고 개발 진행이 불가능한 건 아니라서 무시하고 작업을 했다가 코드 리뷰에서 한번 이야기가 나온 적이 있다. 사실 코드 리뷰 받기 전에 다 수정하고 PR 올려야 하는데 내가 놓친 부분이다. 아무튼 동료 개발자도, 나도 개발하다가 저 경고를 본 적이 있었고 수정해야 하지않겠냐는 말이 나왔는데 정작 둘 다 왜 쓰면 안 되는지는 정확히 모르고 있어서 같이 찾아봤다. 정확한 답변은 이 링크에서 확인할 수 있었다. 엄밀히 말하면 Next.js 보다는 emotion 쪽 이슈였다. SSR + emotion 정리해보면 N.. 2022. 5. 15.
[네트워크] HTTPS, TLS/SSL, 인증서 갱신, acme 얼마 전에 브라우저(클라이언트)와 서버 간의 데이터 교환에 관한 글을 읽으면서 잠깐 네트워크 공부를 했는데 머릿 속에서 흩어져있던 지식들이 조금은 맥락을 구성한 것 같아서 기록으로 남겨놓고자 한다. TCP + TLS 브라우저에서 어떤 URL을 입력해서 서버에 요청하는 과정 중 (DNS는 뛰어넘고) navigation 단계에서 TCP 연결이 이루어진다. 클라이언트와 서버 간에 3-way handshaking이 오고 감으로써 세션이 성립되며, 이는 이제 "네트워크를 통해 메세지를 교환"(전송 계층) 할 수 있다는 뜻이다. 그러고 나서 필요한 경우에는 TLS negotiation이 이루어진다. 필요한 경우란 암호화된 데이터 교환을 위해 HTTPS 프로토콜로 통신을 하는 경우에 해당한다. 이 과정을 대략적으로 .. 2022. 5. 14.
[211216] 단상 오늘 여러 수정사항을 업데이트 해서 배포하고 코드리뷰도 받으면서 든 생각. 문제에 대한 해결 방법을 어떻게 찾을 것인지. 효율성 높은 방법을 우선 생각해보지만 최적이라고 할만한 건 없다. 검색도 해본 결과 대충 방법이 몇 가지로 추려지는데 마음에 드는 것도 없음. 이를테면 효율에 큰 차이는 없지만 가독성을 높이거나 라이브러리의 도움을 받거나. 이럴 때는 아예 제3의 방법을 생각해보거나 라이브러리의 원리를 단순하게 이해해서 적용해볼 것. 오늘 옆에서 도움을 받으면서도 스스로 아쉬웠다고 생각한 점이었음. 2021. 12. 16.

티스토리툴바