티스토리

igy95

검색하기

블로그 홈

igy95

igy95.tistory.com/m

개발, 음악, 투자, 운동에 관심이 많습니다.

구독자: 0

방명록 방문하기

주요 글 목록

프론트엔드에서 바라보는 추상화 프로그래밍을 하다 보면 '추상화'라는 단어는 늘 주위에 존재한다. 너무 흔하게 사용될 수 있는 용어라 가끔은 의미에 어긋남에도 혼용될 때도 있다. 대충 코드 내에서 중복되는 부분을 발견한 다음 따로 추출하여 공통화하면, 그걸 추상화라고 말하는 경우도 있으니까. 사전적 의미추상화라는 단어를 설명하기 위해 가장 적절한 문장을 고르라고 한다면, 아마 다음과 같을 것이다.복잡한 내부 구현은 감추고 필수적인 기능만을 외부에 노출하여 단순화하는 과정 추상화는 OOP의 대표적인 특징 중 하나로 꼽히는 개념이다. 그렇지만 꼭 프로그래밍 측면이 아니더라도 이 의미는 어디에서든 통용될 수 있다. 가령 어떠한 분야를 공부하면서 전문성을 쌓을 수 있는 까닭은, 밑바닥의 세부 요소를 하나씩 이해해 가면서 그것을 일반화(추상화).. 공감수 2 댓글수 1 2025. 2. 24.
[리팩터링 후기] Model은 View를 아예 몰라야 할까? (feat. View Model) 회사에 복직 후 맡게 된 첫 프로젝트에서 새로운 기능 추가와 더불어 기존 모델을 리팩터링 해보는 게 어떻겠냐는 논의가 팀 내에서 이루어졌다. 으레 배포 일정은 타이트하게 주어지는 게 태반이기에, 처음에는 두 작업을 병렬적으로 가져가는 게 일정 관리 상 괜찮을지 걱정이 앞섰다. 그러나 프로젝트를 잘 마무리하고 보니 이번 업무를 진행한 과정과 구현한 결과물이 꽤 인상 깊게 남아 이 경험을 남겨보고자 글을 쓰게 되었다. 문제 정의 & 해결하고 싶었던 부분현재 회사에서 제공하는 서비스의 특성상 앱 내에서 사용자가 어떤 값을 설정하는 데 필요한 에디터를 제공하는 UI가 많다. 이번 작업 영역도 에디터와 관련성이 높았는데, 기존에 백엔드에서 내려오는 모델은 아래와 같았다.type DraftResponse = { .. 공감수 0 댓글수 0 2025. 2. 1.
요즘 나의 생각들 2024년 회고의 연장선으로, 해당 글을 작성하며 이런 문장을 적었었다. 자세히는, 이전의 내가 내린 선택과 결정들에 대해 왜 그래야만 했는지 이해하고 싶었던 것 같다. 정신없이 달려야만 하는 상황에서 누군가를 탓할 수 없었던 이유는, 처음의 선택은 모두 '내'가 했기 때문일 것이다. 분명 스스로 무의식적으로 되뇔 만큼 중요시했던 가치가 있었다. 다만 그것을 지키는데 몰두하느라 놓친 부분도 더러 존재했다. 그렇게 올해의 시행착오를 겪으면서 지금껏 나를 움직이게 했던 가치들과 앞으로 가져갔으면 하는 새로운 가치들에 대해 고민해 보았고 그 고민의 일부를 나눠보고자 한다. 자율감, 자기효능감, 연결감언젠가 유튜브에서 '인간의 행복을 결정짓는 세 가지 요인'과 같은 제목의 영상을 본 적 있다. 우리가 행복하다.. 공감수 2 댓글수 2 2024. 12. 5.
2024 회고 - 삼십 대 start, 서투르긴 했지만 나이의 앞자리만 바뀐 것 치고는 참 소란스럽게도 올해를 달려왔다. 서른을 앞둔 당시의 나는 이 숫자에 꽤 많은 의미를 부여하며 지난 10년과는 다른 뭔가 멋진 어른이 되어 있길 바랐다. 이로 인해 플래너에는 각기 다른 맥락의 중장기 목표들이 빼곡했고 대부분의 하루는 이 목표만을 완수하기 위해 쉼 없이 움직였던 것 같다. '육각형 인간', '올라운더'라는 단어를 들어본 적이 있는가? 여러 분야에서 평균 이상을 곧잘 수행하는 사람들을 일컫는 말이다. 그리고 올해의 내가 성장하는 데 있어 어떠한 지표로 삼았던 단어이기도 하다. 하나에 깊게 파고들기보다는 두루두루 관심을 갖는 게 지금까지의 내 성향과 맞기도 했고 막연히 멋있어 보였기 때문이다. 또한 사회적인 시선으로도 여러모로 이득을 취하지 않을까 싶었다. 그.. 공감수 2 댓글수 2 2024. 11. 28.
5 - 잔금 처리 아파트 계약을 마친 뒤, 잔금 처리 기간은 통상적으로 한 두 달 정도로 협의를 본다고 한다. (매수자, 매도자의 상황에 따라 짧으면 2주, 길면 6개월까지도 가능함) 나의 경우 계약 후 잔금일을 일주일 뒤(!)로 설정했는데 지금 생각하면 왜 그랬나 싶다. 아무래도 이미 현금 준비를 거의 해둔 상태라 잔금일을 맞추는 과정에서 굳이 미뤄야할 필요를 못느끼기도 했고 곧 내 집이 생긴다는 마음에 막판의 조급함이 올라왔던 것 같다. 상황을 좀 더 잘 이용했다면 하는 아쉬움이 남긴 하지만 이미 지난 일이니 뭐 어쩌겠나. 아무튼 이번 글에서는 아파트 계약 후 잔금 처리를 위해 알아봤던 부분과 잔금 처리 당일 진행되는 과정에 대해 정리해보려 한다. 잔금을 처리하려면집을 매수하기 위해서는 평소에 쓰지 않던 큰 돈을 융통.. 공감수 2 댓글수 0 2024. 8. 2.
4 - 아파트 매매 계약 후기 부동산에서 본계약을 체결하고 돌아오는 길에 잠시 카페에 들러 지금까지의 매매 과정을 복기하고자 한다. 예상은 어느 정도 했지만, 내 집 마련을 준비하고 고민했던 시간에 비해 매수 과정은 참 찰나와 같다고 느낀다. 확실히 공부를 하고 여러 번 시뮬레이션을 돌린 뒤에 거래를 하니 실전에서도 많은 도움이 되었지만, 막상 몸으로 부딪혀보니 예상과 다른 부분도 있긴 하더라. 또 언제가 될지는 모르겠지만, 잘한 점과 아쉬웠던 점을 정리해보면서 다음 매수는 더 잘 준비해 보면 좋을 것 같다.전반적인 과정1. 매수 희망 지역 선정2. 희망 지역 내에서 구매 가능한 매물 정리3. 임장 및 부동산 문의4. 매물 확인5. 계약 1. 매수 희망 지역 선정사실 나는 회사가 서울에 있어 여기서 몇 년 정도 자취를 했지만, 서울 .. 공감수 0 댓글수 0 2024. 7. 27.
3 - 첫 신용대출 부동산 관련 글을 쓴 지도 벌써 반년이 지났다. 그동안 뭘 했냐.. 고 하면 사실 크게 진전은 없다. 그냥 열심히 종잣돈을 모으고 가끔 매수를 원하는 지역의 시세를 파악한 정도? 물론 처음부터 매수 시기를 올해 하반기로 봤던 터라 살짝 여유를 부린 것도 없지 않아 있지만, 현생에 치여 사느라 (ㅠㅠ) 시간이 없기도 했다. 하지만 나날이 상승하는 전세가에 서울의 상급지 아파트 가격은 이미 전고점에 거의 다다랐거나 신고가를 찍고 있으니, 좀만 더 늑장 부리다가는 기회를 놓칠 것만 같았다. 그래서 더 조급해지기 전에 차근히 준비해봐야겠다 싶어 우선 계획만 세워두었던 가용 예산 확보를 진행하려 했다. 이전 글에서 언급했듯 나는 크게 담보대출(청약 통장, 보험)과 신용대출을 실행할 예정이었다. 담보대출은 이전에 .. 공감수 0 댓글수 4 2024. 7. 15.
서평 - 오리지널스 이미지 출처 올해 두 번째로 집어든 책인 '오리지널스'는 그동안 추상적으로만, 선택받은 자들의 전유물로만 여겨왔던 독창성을 다각적인 관점으로 접근하여 풀어낸 점이 흥미로웠다. 이 책은 단순히 독창성을 느낌적인 느낌으로 치부하지 않고 개인, 가정, 조직의 관점에서 어떤 영향으로 인해 특이점이 발현되어 우리가 그걸 '독창적이다'라고 말하는지에 집중한다. (그래서 책 제목도 전체 이야기를 관통하는 '오리지널스'로 지었나 보다) 평소 독창성이라는 표현을 마주할 때면 으레 떠올리던 선입견과는 달리, 책의 단락마다 독창성을 바라보는 새로운 시각을 부여해 주면서 이 개념을 다시금 정립해 보는 계기를 가졌다. 특히 독창적인 방식으로 큰 업적을 이룬 불세출의 인물들도, 사실은 평범한 사람들에 비해 크게 다를 바 없다는 .. 공감수 0 댓글수 1 2024. 1. 24.
2 - 어떻게 집을 살까 (전략, 예산 산정) 내 집 마련 전략 집 매수 여부를 결정하기 위한 나름의 기준을 세운 뒤, 해당 기준을 충족하여 '이제는 집을 사도 되겠다'는 판단이 섰다면 다음은 매수 전략을 세우는 단계라 볼 수 있다. 일반적으로 집을 살 때는 사는 것만 중요하게 생각하기 쉽지만, 매수뿐만 아니라 보유, 매도 전략도 어느 정도 고려를 하는 것이 장기적 관점에서 권장된다. 오죽하면 집을 여러 번 매매해 본 사람들이 '매수가 가장 쉽다'라는 말을 많이 할까. 내가 알고 있는 선에서는 이 정도로 간추릴 수 있을 것 같다. 집 매수 전략 1. 일반 매매 2. 청약 3. 경매 집 보유 전략 1. 주택담보대출을 실행시켜 바로 실거주 2. 실거주 목적의 집을 전세 끼고 매매 후 일정 기간 월세 살이 집 매도 전략 갈아타기를 고려하여 매수 시점부터 .. 공감수 0 댓글수 0 2024. 1. 21.
1 - 집을 사기 전에 고려해봐야하는 것들 앞선 프롤로그에서 집을 바라보는 관점과 방향성을 정리해 보는 시간을 가졌다. 하지만 이것보다 훨씬 중요한 건 집을 사기 위해 실질적으로 고려해봐야 할 내부적인 요인(e.g. 현재의 능력과 미래의 계획)과 외부적인 요인(e.g. 지금이 적절한 매수 시기인지)에 대한 물음이 선행되어야 한다는 것이다. 이러한 이유로 집을 사기 위해 반드시 고려해봐야 하는 항목들을 정리해보려 한다. 내부 요인 1. 가용 자금 (모은 돈 + 대출 가능 한도) 아무리 집을 사기 위한 여러 전략이 있다고 할지언정 기본적으로 집 구매를 위한 자기 자본금은 필요하다. 이러한 자본금은 본인이 모은 돈과 실행하려는 대출의 한도를 계산해서 산출해야 하는데, 일단 보수적으로 접근하기 위해 아래와 같은 기준을 잡았다. 모은 돈 = 내가 가진 모.. 공감수 0 댓글수 0 2024. 1. 20.
내 집 마련 프롤로그. 취업을 했던 순간부터 지금까지 늘 눈앞에 아른거리던 고민거리가 있다. 그건 다름 아닌 '내 집 마련' 문제다. 내 집이 제공하는 여러 이점을 따져보았을 때 집을 사야 한다는 전제가 흔들린 적은 거의 없었다. 다만 이걸 도대체 언제, 어떻게 사야 하느냐에 대한 의문이 매번 실천까지 나아가지 못하고 중도에 발길을 돌리게 하는 장애 요인이었다. 되돌아보면 공부를 한답시고 버릇처럼 계속 반복했던 과정이 있었다. 1. '매수', '무주택자', '부동산 방향' 따위의 키워드로 여러 유튜브, 책, 아티클, 커뮤니티를 알아본다. 2. 매수 시기, 매수 방법, 매수 후 전략까지 많은 정보를 섭렵하며 최선의 선택이 무엇일지 계산한다. 3. 아무리 계산해도 어떤 방법이 나에게 맞는 건지 당최 답을 알 수 없어 머리만 지끈거.. 공감수 0 댓글수 0 2024. 1. 18.
서평 - 마흔에 읽는 쇼펜하우어 이미지 출처 40대 즈음이 되어서야 읽어야 할 것 같은 제목이라 이걸 지금 보는 게 맞을까.. 고민했다. 그렇지만서도 나의 10년 뒤를 먼저 살아가고 있는 이들의 고민을 미리 엿보며 내 삶의 방향성을 상상해보고 싶었다. 또한 평소에도 ‘결핍을 다루는 방식’에 대해 관심이 많았던 터라 이 주제를 깊게 다루고자 했던 쇼펜하우어와 본인의 생각을 비교해보고 싶은 마음에 책을 집어 들었다. 아래에 적어둔 글은 책을 읽고 느낀 점을 흐름에 맞게 정리한 것이라 저자의 의도와는 다소 상이할 부분이 있을 수 있다. (책에서는 독자적인 사유를 강조했으니 그냥 주욱 써본다) 고통의 근원 = 욕망 인간은 기본적으로 욕망하는 존재다. 외부의 자극이든, 내부의 의지이든 간에 현재의 상태에서 더 나아지고자하는 마음이 드는 순간 그.. 공감수 0 댓글수 1 2024. 1. 9.
[23.09.26] 프로젝트의 초기 렌더링 성능 향상시키기 이미지 출처 프로덕트를 만들 때, 프론트엔드 개발자가 최우선으로 고려하게 되는 것 중 하나가 바로 사용성이다. 좀 더 구체적으로 디자이너가 주로 UX 흐름이나 심미적인 부분에서 사용성 증진을 고민한다면, 프론트엔드 개발자는 그것을 받아 서버 데이터와 연결할 때 사용자 관점에서 어떻게 하면 더 쾌적함을 제공할 수 있을지 고민해야 한다. 회사로부터 주어진 프로젝트를 구상할 때 위와 같은 측면에서 주로 고심했던 부분은 각 화면 진입 시 초기 렌더링 방식이었다. 이전의 프로젝트 경험을 비추어 보면, 대부분 로딩 중인 화면을 표현하기 위해 별도의 상태를 선언하고 해당 상태를 보여줄 UI 코드를 작성하며 컴포넌트는 쉽게 비대해졌다. 이런 책임을 분리하기 위해 Suspense라는 솔루션이 나왔지만, 여전히 전체 화면.. 공감수 0 댓글수 2 2024. 1. 9.
[23.08.10] 음악으로 성공한 사람들의 공통적인 사고 방식 1. 좋은 아웃풋을 내기 위해서는 역시 많은 인풋이 필요하다. 음악을 다양하게 많이 들어보기. 2. 일상과 음악을 분리하기보다 일상 속에 음악을 녹여낸다. 멜로디를 자주 흥얼거리거나 일상 속에서 소재를 찾는다. 3. 작업할 때 본인만의 색깔을 뚜렷하게 만드는데 에너지를 쏟는다. 그래서 '나다운 것'을 되게 중요시한다. - 일단 나만의 플레이리스트를 만들어보면 어떨까 싶음 - 본인에게 어울리는 멜로디, 가사에 집착함 - 기술이 발전함에 따라 편집 기술 또한 그 사람의 색깔로 인정받는 듯 (e.g. 플러그인) 4. 가사를 쓸 때는 경험에서 우러나오거나, 가상의 상황을 부여하거나 두 가지의 방향이 있다. - 대부분 핵심 주제 -> 주제를 관통하는 가사 혹은 멜로디 -> 거기서 살을 이어붙이는 식으로 작업을 하.. 공감수 1 댓글수 2 2024. 1. 9.
[23.08.06] 부트캠프 리뷰어의 자세 어느덧 회사를 제외한 여러 학습 기관(우아한테크코스, NEXTSTEP)에서 몇 번의 리뷰어 경험을 얻었다. 처음엔 단순히 업무 외 남는 시간에 소일거리 삼아 참여했던 일이 나름 또 성취감도 있어 꾸준히 기회가 될 때마다 참여하는 중이다. 리뷰어를 진행하며 그동안 느꼈던 감정들과 내가 추구하는 리뷰어의 자세에 대해 짧게나마 남겨두면 어떨까 생각만 하다가, 미뤄두면 또 잊어버릴 것 같아 이렇게 글을 적는다. 우선 나의 관점으로 보았을 때, 회사의 코드 리뷰와 학습 기관의 코드 리뷰는 목적이 약간 다르다. 회사에서 이루어지는 코드 리뷰는 제품을 정해진 기한 안에 최대한 안정적으로 배포하는 것을 목표로 한다. 그렇기 때문에 동료가 올린 PR에서는 1) 요구사항이 잘 동작하는지, 2) 코드의 변경으로 버그를 유발.. 공감수 0 댓글수 0 2024. 1. 9.
[23.07.29] 프론트엔드에서 Route를 확장성있게 관리하기 리팩터링 배경 앱 내의 페이지가 많아지고 기획이 복잡해질수록 각 페이지의 주소를 나타내는 route 또한 심도 있게 관리될 필요가 있다. route의 경로뿐만 아니라 해당 경로로 안내된 페이지가 public 한 지, 해당 route의 하위 route는 무엇인지 등 여러 가지 상태를 표현할 수 있어야 하기 때문이다. 현재 관리되고 있는 route 객체는 이러한 요구사항을 충족시키기에 다소 부족하다는 생각이 들었고 이를 보완하기 위해 확장성을 높이는 방향으로 리팩터링을 시도해보았다. 기존 구조가 가지고 있던 문제점 const Route = { Public: { SignIn: '/signin', }, Private: { Main: '/', Billings: { Orders: '/billings/orders',.. 공감수 0 댓글수 0 2024. 1. 9.
[22.09.03] 실무 프로젝트에서 Virtual Scroll 활용하기 24.01.09) 아래의 글은 작성 시점에 맞추어 쓴 글이며, 현재는 다른 회사에 재직 중입니다. Issue 현재 내가 몸 담고 있는 회사는 SDK를 통한 간편한 데이터 집계와 데이터 기반 의사결정을 도와주는 대시보드 서비스를 제공한다. 서비스 내에서는 연동한 SDK를 통해 이벤트 로그를 보내면 대시보드에서 해당 로그를 확인할 수 있는 구조로 되어 있는데, 문제는 대시보드 화면에 보이는 로그가 점점 많아질수록 대시보드의 반응 속도는 현저히 느려져서 대형 고객사들이나 개발, 테스트를 위해 제품을 가장 활발히 사용하는 우리 팀 또한 불편함을 겪고 있었다는 것이다. 때문에 이 부분을 개선할 필요가 있었고 우선 다음과 같이 제품의 구현 상황과 해결해야할 문제를 정리해보았다. AS-IS 기존의 구현 방식은 api.. 공감수 0 댓글수 1 2024. 1. 9.
[22.04.21] Data Fetching in Next.js Next.js란? The React Framework for Production. 공식 사이트를 타고 들어가면 가장 먼저 확인할 수 있는 문구다. 위 표현 그대로 Next.js는 대규모 서비스에 특화된 구조와 설계를 간편하게 만들 수 있도록 도와주는 리액트 프레임워크라고 할 수 있다. Next.js 내에서는 페이지를 렌더링 하는 다양한 방법을 지원하고 있기 때문에 각각의 장점을 두루 흡수할 수 있는데, 이 글에서는 다음과 같은 렌더링 기법의 특징과 해당 기법을 구현하기 위해 Next.js에서 제공하는 api들을 알아보려 한다. CSR SSR SSG CSR CSR은 Client Side Rendering의 약자로, 데이터의 요청이 발생하면 클라이언트가 데이터를 가져와 html을 다시 그린다. 이는 리액트의.. 공감수 1 댓글수 1 2024. 1. 9.
[22.01.06] JS의 Map vs Object 최근에 알고리즘과 자료구조를 공부하면서 Set, Map을 의식적으로 자주 사용하려 했다. 그 결과, 어떠한 상황에서 이러한 자료구조가 어울리는지 조금 더 알게 되었다. 하지만 Map은 기본 객체와 비교해보았을 때 어떤 부분이 다른지 이해가 잘 되질 않았다. 이번 글을 통해 각 차이점을 살펴보고 각 자료구조를 어떻게 사용하면 좋을지 알아보려 한다. 1. Default Keys Map - default key가 없다. Map 내부의 중복만 방지한다면 어떤 값을 key로 선언하든 상관이 없다. Object - built-in prototype을 가지고 있기 때문에 prototype 객체의 default key와 충돌 가능성이 있는 네이밍은 피해야 한다. (e.g. toString, hasOwnProperty .. 공감수 0 댓글수 0 2024. 1. 9.
[21.12.22] React + TypeScript + Webpack + Babel (2021) 그동안 학습하고 직접 적용해보았던 여러 환경설정들을 정리할 겸 포스팅을 남겨보려 한다. Spec Yarn ESLint Prettier Webpack Babel TypeScript React Package Manager(Yarn) yarn init -y yarn install TypeScript + ESLint 기존의 TSLint는 deprecated 되었기 때문에 ESLint에 TypeScript 지원 설정을 추가해주는 방향이 권장되고 있다. 관련 문서를 참고하여 설정을 그대로 진행하였다. 1. library, parser, plugin 설치 yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin 2... 공감수 0 댓글수 1 2024. 1. 9.
[21.10.22] 초심자를 위한 React Testing Library React Testing Library(이하 RTL)는 구현 기반의 테스트 도구인 Enzyme의 대안으로 자리 잡은 테스트 도구입니다. 따라서 RTL은 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것을 권고합니다. 예를 들어 Hello World라는 코드가 있다면, RTL은 div 태그를 사용하는지보다 Hello World 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 그리고 이와 같이 구현보다 기능에 초점을 맞춘 테스트 방식은 신뢰도를 높임과 동시에 코드 리팩토링 시 테스트 코드 수정 빈도를 줄일 수 있습니다. The more your tests resemble the way your software is used, the more confidenc.. 공감수 0 댓글수 1 2024. 1. 8.
[21.10.02] TCP/IP TCP TCP는 Transmission Control Protocol의 약어로서 인터넷상의 데이터를 주고받는 과정을 제어하는 통신 표준을 의미합니다. 이 프로토콜은 데이터를 교환하는 기기 간 데이터의 무결성(정확성)과 전달의 신뢰성을 보장하기 때문에 거의 모든 애플리케이션 수준의 프로토콜(FTP, SSH, HTTP 등)에서 사용하고 있습니다. IP Internet Protocol이라고 하며 인터넷을 통해 데이터를 전송하기 위해 지켜야 하는 규칙입니다. 이 프로토콜은 183.101.195.193과 같은 IP 주소를 통해 데이터를 전달할 위치를 파악합니다. 쉽게 생각해 우리가 편지를 부칠 때 주소를 적어야 하는 것처럼, 컴퓨터에서 데이터를 전송할 때 전송할 목적지가 필요한데 그 역할을 해주는 매개체가 바로 .. 공감수 0 댓글수 1 2024. 1. 8.
[21.09.12] 비동기 처리 시 race condition 고려하기 프로그래밍을 할 때 비동기 처리는 여간 까다로운 게 아닙니다. 저마다의 어려움이 있겠지만, 대표적으로 그 이유를 '낮은 예측성'에 들 수 있는데요. 아무리 잘 작성된 비동기 코드라 할 지라도 동기 코드에 비해 추론이 힘들 뿐더러 일관된 응답 처리 또한 쉽지 않기 때문입니다. 이번 글에서는 비동기 처리를 어렵게 하는 요소 중 하나인 race condition과 이에 대한 대안책을 함께 알아보겠습니다. Race condition 경합 조건이라고도 하며 이것은 꽤 여러 군데에서 통용되는 개념입니다. 경합 조건은 시스템의 실질적인 동작이 다른 통제 불가능한 이벤트의 순서나 타이밍에 따라 달라지는 전자 장치, 소프트웨어 또는 기타 시스템의 조건이다. - Wikipedia 조금 더 쉽게 풀어보자면, 하나의 처리를 .. 공감수 0 댓글수 1 2024. 1. 8.
[21.08.26] Web Event 웹 개발에서 프론트엔드 영역이 이토록 발전할 수 있었던 가장 주된 이유는 웹의 특성이 단순한 '페이지'에서 '애플리케이션'으로 진화했다는 사실일 겁니다. 그리고 이 말은 곧, 좋은 웹의 기준을 판단할 때 사용자의 행동에 따라 웹이 얼마나 자연스럽게 반응할 수 있는지가 중요함을 나타냅니다. 자연스러운 인터랙션을 위해서는 UI, UX, 성능 등 다양한 요소를 고려해야겠지만 무엇보다 인터랙션 과정의 시작을 알리는 이벤트를 빼놓지 않을 수 없습니다. 그래서 이번 글에서는 이 이벤트라는 개념에 대해 알아보려 합니다. Event 이벤트는 말 그대로 행동 혹은 사건입니다. 이것을 프로그래밍 맥락에서 유추해보면, 코드 내에서 발생하는 행동이라고 볼 수 있겠습니다. 웹을 사용하면서 클릭을 하거나 키보드를 입력해야 할 때.. 공감수 0 댓글수 1 2024. 1. 8.
[21.08.06] 웹의 성능 성능이 좋다는 건 웹 애플리케이션(이하 웹 앱) 구현에 어느 정도 익숙해지는 단계가 되면, 언젠가는 맞닥뜨려야 할 산이 있다. 바로 성능이다. 개발자의 관점에서 성능이 당최 무엇을 의미하는지는 몰라도, 누구든 성능이 좋은 앱을 그렇지 않은 앱보다 선호할 것이다. 그렇다면 여기서 말하는 성능이란 과연 무엇일까? 사전적으로 성능은 '기계 따위가 지닌 성질이나 기능'을 뜻한다. 언뜻 봐도 포괄적이다. 이해를 돕기 위해 웹 앱의 맥락에서 성능이라 칭할 만한 요소 몇 가지를 추려 보자. 콘텐츠를 받아오는 이벤트 혹은 그에 따른 서버의 응답이 안정적으로 실행되는가? 사용자의 이목을 끌 수 있는 콘텐츠가 충분히 렌더링 되는가? 콘텐츠를 받아오는 중이거나 받아온 후에도 여전히 사용자와 상호 작용이 가능한가? 앱 조작이.. 공감수 0 댓글수 1 2024. 1. 8.
[21.06.14] Prototype, 그리고 Class JS에서 프로토타입이란, 객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 메커니즘이다. (엄밀히 말하자면 '상속'이라는 단어는 적절치 않을 수 있다. 그 이유는 밑에서 다시 다루어 보겠지만, 일단은 일관된 이해를 돕기 위해 이 표현을 계속 사용하려고 한다.) [[Prototype]] 간단한 예시 코드를 살펴보자. 여기서 Object.create()는 지정된 프로토타입 객체와 연결된 빈 객체를 반환하는 메서드이지만, 여기서는 서로 다른 두 객체를 이어주는 연결 고리 정도로만 생각해도 좋다. const obj = { a: 2, }; const anotherObj = Object.create(obj); console.log(anotherObj); // {} console.log(anotherObj.a).. 공감수 0 댓글수 1 2024. 1. 8.
[21.05.24] Iteration Protocol ES6가 출현하면서 여러 문법뿐만 아니라 Iteration Protocol이라는 규칙이 추가되었다. 이것은 JS 자체의 독자적인 특징이라기보다는 여러 언어에서 반복 동작을 수행하기 위해 정의하는 방법에 가깝다. 다만 이번 아티클에서는 JS에 한정하여 해당 규칙을 다루어보고자 한다. Table Of Contents Iteration Protocol이 필요한 이유 JS에서 Iteration Protocol을 정의하는 방식 Why? 프로그래밍을 하다 보면, 어떤 구조/객체의 내부에서 반복 동작을 수행하고 싶을 때가 있다. 이때 사용할 수 있는 방법이 for..of문과 spread operator인데, 이 문법을 사용하기 위한 전제가 바로 Iteration Protocol이다. 현재까지 확인된 바로는, yiel.. 공감수 0 댓글수 1 2024. 1. 8.
[21.05.15] React로 생각하기 리액트로 생각하기 제목이 약간은 어색해 보인다. '리액트에 대해서 생각하기'가 더 자연스러울 것 같은데 리액트로 생각하자는 말은 어떤 의미일까? 최근에 리액트를 공부하며 그 방대한 생태계에서 끊임없이 헤매는 중이지만, 그나마 알게 된 사실이 있다면 이것은 그저 '자바스크립트 앱의 구조화를 돕기 위한 도구'라는 점이다. 도구를 잘 사용하기 위해서는 도구의 철학을 이해하는 것 못지않게 시의적절하게 사용할 수 있는 방법에도 초점을 맞추어야 한다고 생각한다. 그래서 좀 더 리액트의 관점으로 프로그래밍 방법론을 바라보고자 위와 같은 워딩을 제목으로 선정하게 되었다. 리액트를 이해하기 A JavaScript library for building user interfaces 리액트 공식문서 초기 화면에서 확인할 수 .. 공감수 0 댓글수 1 2024. 1. 8.
[21.04.25] 호이스팅에 대한 오해와 진실 호이스팅이 뭘까? 솔직히 프로그래밍을 공부한 지 얼마 안 되었을 때는 호이스팅과 호스팅이 똑같은 말인 줄 알았다. 그리고 이 개념에 대한 뜻을 몇 번 훑어보고는 '아, 변수나 함수를 스코프 상단으로 끌어올리는 기술이구나'라고만 이해했다. 과연 그럴까? 지금부터 호이스팅에 관한 몇가지 오해와 이것을 가능하게 하는 메커니즘에 대해 설명해보려고 한다. Just Metaphor 현재의 내가 알고 있는 호이스팅의 뜻을 한마디로 정의 하라고 하면 변수, 함수의 선언부가 위치한 인접 스코프의 최상단에서 해당 식별자의 관측이 가능한 현상이라 얘기할 수 있겠다. 단순하게 바라보자. 어떤 스코프에서 선언한 위치에 상관없이 선언 대상을 확인할 수 있다면 맨 처음에는 무슨 생각이 들까? hoist(); // hoisted! .. 공감수 0 댓글수 0 2024. 1. 8.
[21.08.16] 우아한테크코스 - '혼자'가 아닌 '팀'이 되어 기획은 처음이라 나는 항상 어떤 일을 하게 되면 개인 단위의 작업을 선호한다. 음악을 만들 때도, 글을 쓸 때도. 하다못해 루터회관에 출근해도 주로 숨어서(?) 공부하는 날이 잦다. 사람들과 어울리는 게 싫은 건 아니지만 그래야 집중하는 느낌이 들기 때문이다. 그래서 페어 프로그래밍은 늘 새롭고 어렵다. 그런 나에게 팀 프로젝트는 꽤 쉽지 않은 새로운 도전이다. 아무래도 이 정도 규모의 개발은 처음이다 보니, 긴장과 설렘이 교차하는 복잡한 감정으로 팀 매칭을 기다려온 듯하다. 프로젝트 시작 전 세운 목표는 그리 거창하지 않았다. 그저 열정 있고 성격 맞는 사람들을 만나 프로젝트를 끝까지 잘 마무리 하는 것. 여러 사람과 일을 하며 겪게 되는 갈등 상황은 예전부터 익히 들어왔기에 부디 아무도 상처받지 않았.. 공감수 0 댓글수 1 2024. 1. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.