G1

에브리프리타임의 핵심은 사실 숫자 하나다. 시간표 셀의 채도가 0.035 이상이면 수업이 있는 칸, 미만이면 빈 칸이다. 에타 파스텔 색은 채도가 0.05~0.11 정도밖에 안 돼서, 임계값이 조금만 어긋나도 수업이 빈 시간으로 잡힌다.지난 글에서 모바일 드래그 버그를 잡으면서 "처음부터 테스트로 확인했으면 헛발질 세 번이 없었다"고 썼다. 그 말을 한 김에 이번엔 테스트 코드를 제대로 붙여보기로 했다. 테스트는 한 번도 써본 적이 없어서, 어디서부터 시작할지부터 막막했다.뭘 테스트해야 할지부터 막혔다처음엔 "앱 전체를 테스트해야 하나?" 싶었다. 그런데 화면이나 서버가 끼면 준비할 게 너무 많아진다. 그래서 입력이 같으면 출력도 항상 같은 순수 함수부터 시작하기로 했다. 숫자만 넣고 결과만 확인하면 된..

시간표 칸 하나 색칠하는 게 왜 이렇게 어려울까 — iOS Safari 드래그 버그 추적기에브리프리타임에는 에타 시간표 스크린샷을 자동으로 분석해서 빈 시간/수업 시간을 판별하는 기능이 있다. 자동 인식 결과가 틀렸을 때를 위해, When2meet처럼 칸을 탭하거나 손가락으로 쓸어서(drag) 직접 수정하는 에디터를 만들어뒀다.로컬에서 잘 돌아가길래 배포했다.며칠 뒤 배포 후 실사용 중, 탭을 손가락으로 쓸어 수정하는 기능이 모바일 사파리에서 안 되는 것을 보고.. 빠르게 수정해야겠다고 생각했다.여기서부터 커밋 6개, 되돌린 접근 3개, 결국 실제 원인을 찾기까지의 기록이다.코드는 이렇게 생겼었다// 칸 하나 { e.preventDefault(); const to = !busy; pain..

궤도는 발사 후에 수정된다로켓은 처음부터 목표 궤도를 향해 비스듬히 날아가지 않는다. 발사 직후에는 거의 수직으로 상승한다. 가장 두꺼운 대기층을 뚫고 올라가야 하기 때문이다.그래서 로켓은 처음부터 완벽한 각도를 찾기보다, 먼저 강하게 위로 올라간다. 그리고 충분한 고도에 도달해 대기 저항이 줄어들면, 그때부터 엔진의 방향을 조금씩 조정하며 궤도에 가까워진다.처음부터 완벽한 경로를 갖고 출발하는 것이 아니라, 발사한 뒤 계속 수정하며 목적지에 도달하는 것이다.요즘 커리어와 기술을 바라보는 내 생각도 이와 비슷해졌다. 처음부터 완벽한 직군을 정하고, 완벽한 기술 스택을 고르고, 완벽한 방향으로 출발하는 것보다 중요한 것은 어쩌면 따로 있다. 일단 시작하고, 만들고, 배우고, 다시 수정하면서 자신만의 궤도를..

이번 SOPT 38기에서 진행한 LINKareer 합동세미나는 단순히 화면을 나누어 구현하는 프로젝트가 아닌 실제 서비스처럼 여러 명이 같은 코드베이스에서 컨벤션을 맞추고 기능을 연결해가는 경험이었다. 나는 홈 화면의 주요 섹션과 공통 컴포넌트, 그리고 후반부에는 채용 상세 페이지의 합격 자료 API 연동을 맡으며 UI 구현부터 데이터 흐름까지 여러 Task들을 경험했다.컴포넌트의 분리가장 많이 배운 부분은 '컴포넌트를 어떻게 재사용 가능하게 만들 것인가'였다. 처음에는 피그마 화면을 그대로 옮기는 데 집중했지만, 작업이 진행될수록 컴포넌트 이름, props 구조, 스타일 파일 위치, 시맨틱 태그 같은 작은 결정들이 팀 전체 개발 속도에 영향을 준다는 것을 느꼈다. 특히 HomeBanner, HomeCu..

issue최근 SOPT에서 링커리어 리디자인 합동 세미나를 진행하면서, 홈 추천 공고 캐러셀을 무한 루프처럼 구현하는 과정에서, 마지막 슬라이드에서 첫 번째 슬라이드로 넘어갈 때 화면이 순간적으로 튀는 문제가 있었습니다.복제 슬라이드에서 실제 슬라이드로 인덱스를 보정할 때 transition을 잠시 끄고 위치를 이동시킨 뒤 다시 켜야 했는데, requestAnimationFrame을 한 번만 사용했을 때는 일부 상황에서 transition이 너무 빨리 다시 활성화되어 여전히 깜빡임이 발생했습니다.const restoreTransitionAfterJump = () => {window.requestAnimationFrame(() => {setIsTransitionEnabled(true);});};cause..

Carousel 구현 뜯어보기이번 캐러셀은 공고 카드가 3초마다 자동으로 넘어가고, 사용자가 직접 스와이프할 수도 있는 구조로 구현했다.핵심은 activeIndex로 현재 보여줄 슬라이드를 관리하고, transform: translateX(...)로 track 전체를 이동시키는 방식이다.기본 상수const SLIDE_INTERVAL_MS = 3000;const SWIPE_THRESHOLD_PX = 50;캐러셀 동작에 필요한 기준값을 상수로 분리했다.SLIDE_INTERVAL_MS는 카드가 자동으로 넘어가는 간격이다. 현재는 3초마다 다음 카드로 이동한다.SWIPE_THRESHOLD_PX는 사용자의 드래그를 실제 스와이프로 인정할 최소 거리다. 현재는 50px 이상 움직였을 때만 다음 또는 이전 카드로 전..

React에서 state로 관리해야 하는 값과 아닌 값이번 SOPT 과제를 진행하면서 로그인, 회원가입, 마이페이지, 회원 조회 기능을 구현했다.구현하면서 가장 많이 고민했던 부분은 “어떤 값을 state로 관리해야 하지?”였다.처음에는 컴포넌트 안에서 쓰이는 값이면 전부 useState로 만들어야 할 것 같았다. 그런데 코드를 작성하다 보니, 모든 값을 state로 관리하는 것이 오히려 불필요한 렌더링과 복잡도를 만든다는 걸 알게 되었다.이번에는 특히 LoginPage에서 버튼 활성화 여부를 만들면서 이 차이를 제대로 느꼈다.처음 생각로그인 페이지에는 아이디 입력값과 비밀번호 입력값이 있다.const [userID, setUserID] = useState('');const [userPW, setUser..

이번주 SOPT 과제는 React 두더지 게임 만들기였다. useRef로 타이머를 구현하는 과정에서 알게 된 점들에 대해 정리해 보았다.(코드: https://github.com/38-lets-sopt-web/JiwonJeong/tree/week3/homework/Week-3/homework/whack-a-mole)useRef와 타이머이번 두더지 게임을 만들면서 제일 헷갈렸던 부분 중 하나가 타이머였다. 처음에는 단순하게 생각했다.“1초마다 state를 줄이면 되는 거 아닌가?” 라고.setInterval(() => { setTimeLeft((prev) => prev - 1);}, 1000);실제로 간단한 카운트다운은 이렇게도 동작한다. 그런데 게임처럼 시간이 끝났을 때 점수를 저장하고, 모달을 띄우고..

기술의 유행은 변해도 결국 본질은 '어떻게 하면 더 깨끗하고 안전한 코드를 짤 수 있는가'로 귀결되는 것 같다. SOPT 2주차 과제를 하며 바닐라 자바스크립트에 현대적인 방법론들을 적용해 보자니, 예전에는 무심코 지나쳤던 작지만 중요한 기법들이 눈에 들어오기 시작했다.오늘은 최근 프로젝트를 진행하며 새롭게 알게 된 것들과 코드의 질을 높여준 점들을 정리해 보려 한다.BEM 방법론 (Block, Element, Modifier)CSS를 작성하다 보면 항상 클래스 명명 규칙(Naming Convention) 때문에 골머리를 앓는다. container, inner, wrapper… 그러다 결국 div > div > p 같은 지옥의 선택자가 탄생하곤 하는데, 이를 방지하기 위한 구조적인 접근법이 바로 BEM이..

웹 개발을 시작한 것이 2021년쯤이니.. 벌써 5년쯤 되었다. 처음 시작할 때는 제이쿼리라는 $ 달린 것이 대세였는데, HTML CSS를 배우면서 JS로 넘어가기도 전에 이미 제이쿼리의 시대가 끝나 버리고 말았다. IT 업계가 그런 곳이니까. 늘상 빠르게 바뀌는 유행하는 기술들을 보며 계속해서 새로운 것을 시도해 보고 싶어서 새로운 것만 나오면 둘러봤다. 그러다 SOPT에 들어오게 되면서 오랜만에 다시 21년도에 만졌던 바닐라 웹을 만져보니 참 불편하면서도 이걸 배울 때 쯤엔 재사용성이니 뭐니 아무것도 몰랐던 나였던 걸 느꼈다. 그래서 개발하다 보니 여기서는 어떻게 현대적인 개발 방법을 적용할 수 있을지 궁금해져서 좀 찾아보았고.. 알게 된 것과 고민을 좀 적어 보려 한다.시멘틱 태그 (Semanti..