🐬 긴호흡

한달에 삼만얼마 짜리 요금제를 쓰고 있다. 처음에 제공된 데이터 몇기가를 전부 소진하면 그 이후론 속도제한이 걸린 채 무제한으로 사용할 수 있다. 말이 무제한이지, 웹서핑과 음악 스트리밍을 동시에 못하는 대역폭. 그럴 때 휴대폰으로 두둥을 들어가면 로딩이 굉장히 느려 답답했다. 포스터 이미지를 많이 불러오는 홈화면은 특히 그랬다. 웹 성능 최적화를 해보기로 했다. 그리고 이번 글은 그에 대한 기록. 초기 lightHouse 점수이다. 다행히 막 크게 안좋은 점수는 아니었다. 1. 폰트 최적화 * 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기 웹폰트를 렌더링하는 방식에는 두가지가 있다.  대체 글꼴이 새 글꼴로 바뀜 (FOUT - 스타일이 지정되지 않은 텍스트 플래시). "보이지 않는" 텍스트..

개발자로성장하기 (23.04.06) 제 이름이 소개될때 뭐 두둥 프론트 리드 어쩌구 써있더군요. 창피해서 그거 빼달라고 했는데 결국 안빼준것 같습니다. 부끄. 제가 뭐 대단한걸 만들어서 창업한것도 아니고, 대단한 기업에 취업한거도 아니에요. 심지어 아직 취준이란걸 제대로 시작 안해봤습니다. 취준준생이에요. 말 그대로 취준을 준비하는.. 그래서 주제에 대해서 고민을 좀 했어요. 어떨때는 새내기와 초심자분들이 많아서 기술적인 이야기를 했다간 쉽게 지루해질 수 가 있고요. 경험 많고 잘하시는 분들이 들으시기엔 별로 도움이 되지 않거나, 오히려 번데기 앞에서 주름 잡는 꼴이 될 수도 있겠죠. 어쨌든. 그러다가 대충 개발자로 성장하기 라는 제목을 들고왔습니다. 요즘 유튜브에서 흔히들 희화화 하는 ‘동기부여 강사’..

개발을 할때 새로운 무언가를 맞닥뜨리는 경우가 줄어들어서 그런가, 코드를 이쁘게 짜는 것에 관심이 많아졌다. 두둥을 개발하면서 마주친 고민들을 공유해보려고 한다. 리액트로 개발하다보면 선언적인 코드에 대해서 고민하게 된다. 리액트 자체가 선언형이기 때문일수도. 선언적인 코드 명령형 프로그래밍과 선언형 프로그래밍에 대한 글들에선 흔히 'How'와 'What'의 차이로 설명한다. 반복문을 통해 배열의 원소를 순회하면서 html요소를 생성하고 보여주는 코드이다. 어떤 절차로 이루어지는지가 드러나 있다. const arr = [1, 2, 3, 4, 5]; return ( {arr.map((elem) => ( {elem} ))} ); React에서 jsx 문법을 사용하면 이렇게 표현할 수 있다. 핵심 데이터만 외..

1. 배경 고스락에서 공연을 해오면서 티켓 예매방식에 불편함을 느꼈다. 컴퓨터공학과 학회답게, 작년 3월부터 매 공연마다 고스락 내부 인원들로 예매서비스를 직접 개발해 사용했다. 500명이 넘는 인원이 우리 서비스를 실사용했던 경험이었다. 맨 처음 고스락 티켓을 기획하면서, 우리가 어떤 점이 불편했고 어떤 방식으로 해결하려 했는지에 대해서 기록했었다. https://www.9yujin.site/devlog/gosrock1/idea-220124 작년 3월 첫번째 프로젝트에선 가장 기본적인 기능으로 서비스를 했다. 전화번호와 이름을 별개로 입력받아 문자 인증을 통해 유저를 받았다. 코로나로 인해 최대 입장 가능 인원 제한이 있어 107명의 관객이 이 서비스를 통해 고스락 공연에 와주었다. QR코드 입장 확인..

안녕하세요, 프론트엔드 코어멤버 한규진입니다. 벌써 데브톡이 5회차까지 오면서 양질의 많은 세미나를 들었는데, 그중에 프론트엔드 개발에 관한 이야기가 거의 없다는게 조금 아쉬웠습니다. 저번 발표를 준비하면서도 “개발에 관한 이야기는 해당 파트가 아닌 분들이 듣기엔 지루할 수 도 있겠다” 라는 생각을 했거든요. 그래서 이번 발표에는 프론트 개발할 때는 어떤걸 고민하고 해결하는지, 최대한 라이트하고 재밌게 전달해드리고자 준비해보았습니다. (1) 시작하기에 앞서 간단한 퀴즈같은걸 준비했습니다. 양쪽 두 UI 중에서 어떤게 더 정답일까요? (2) 이번엔 조금 더 어렵습니다. 오른쪽 UI에 있는 구분선이 왼쪽보다 조금 더 두껍습니다. 물론 확실하게 정답이 있는 문제는 아니지만, UI를 디자인하고 구현할땐 이렇게 ..

2022년 10월 13일에 열린 GDSC 홍익대학교 두번째 데브톡 세션 발표 영상입니다. 무슨 얘기를 할까 고민하다가, 그냥 제일 가벼운 얘기로 준비해보았습니다. 개발공부를 시작한지 딱 1년정도 됐어요. 그동안 어떤 고민을 했고, 어떤 길을 걸어왔는지. 여러분들과 제가 GDSC에서 어떤 걸 기대하고 얻어가고 싶은지를 얘기해보려고 합니다. - 로 시작하는 주제로 발표를 진행했습니다.

사용자가 서비스를 사용하며 느끼는 경험의 질은 디테일에서 나온다고 생각한다. 많은 동기들이 프론트앤드를 공부하다 백엔드로 떠난 것도 그 디테일을 챙기느라 지쳐서였다. 반면 나는 그 디테일에 관심이 있었다. 사용자 경험에 대해서 계속 고민하는게 재밌었다. 다행이라고 해야 하나. 덕분에 정말 재밌게 공부하고 있다. 요즘은 컨퍼런스 영상이나 아티클 따위의 컨텐츠를 보면서 상태나 컴포넌트 관리에 특히 관심을 갖고 있다. 중간고사만 끝나면 바로 이 프로젝트에도 도입해보고 싶은 것들이 많다!! 초장부터 말이 샜는데, 뱅키즈에서도 사용자 경험과 관련해 많은 고민을 했다. 앱이지만 대부분의 로직을 웹으로 구현하고 있다. 그렇기 때문에 프로젝트의 레이아웃을 잡을 때부터 최대한 '앱'스럽게 해보고자 했다. 이런 욕심은 뱅..

기존 프로젝트에 페이지 전환 애니메이션을 넣으면서 마주쳤던 쓸모없는 우당탕의 기록. 옛날 코드 보는데 그냥 아무생각없이 멍청하게 생각해서 나온 문제가 대부분이었다. 그래도.. 일기같은 느낌쓰로 적어내려가겠습니다. 기본적인 개념과 방법은 이전 글에 잘 정리해 놓았다. [뱅키즈] 6. React transition group 라우팅 트랜지션 (1) - 도입하기 기존의 라우팅 구조 때문에 생겼던 문제 처음 트랜지션 그룹을 도입했을 때의 코드이다. 트랜지션 그룹 관련 로직을 따로 분리를 하지 않았었다. App.tsx에 그대로 삽입하면 코드가 너무 길어지는 듯한 느낌을 받았어서, 각각 라우팅 관련 컴포넌트에 개별적으로 트랜지션을 적용하려 했었다. 그랬더니 이런 문제가 생겼음. '돈길 걷기'에서 걷고 있는 돈길이 ..