Frontend

시작에 앞서, 이 부분을 정말 열심히 고민했고 해결했을 때 진짜!!! 짜릿했다. 백호 개발을 하며 여러 에러 해결과 리팩토링을 진행했지만 그 중에서도 이 이슈가 가장 기억에 남는다. 3차 과제에 트러블슈팅 항목이 있는 걸 보자마자, 무조건 이 이슈를 꼼꼼히 정리해야겠다

이번 글은 백호 개발 초기, UI 작업을 하며 겪은 시행착오들을 정리해보고자 한다. 이 당시 나는 피그마를 어떻게 제대로 봐야하는지도, 요소 사이 간격은 어떻게 확인해야 하는지도, 코멘트는 어떻게 다는지도 제대로 알지 못해 그야말로 감자 그 자체였다. 🥔🥔 세상에.

때는 2차 과제 준비 당시... UI를 얼추 끝냈다고 생각한 나는 점검용으로 화면 크기를 줄여보며 반응형으로 잘 구현이 되었나 테스트 하고 있었는데, 온보딩 마지막 단계 페이지에서 다음과 같은 문제가 발생했다.화면 크기가 클 때는 '속도의 관성을 유지하여 목표를 달성하

워크스페이스 생성 구현 과정에서, 첨부된 사진과 같이 화면에서 사용자가 워크스페이스명을 입력하고 체크 버튼을 누르면, 유효성 검사를 통과했을 때 더 이상 수정 불가하고, 아래에 사용 가능한 워크스페이스 url을 노출하는 기능을 구현했다.

백호 데모데이 직전, 중앙에서 웹 파트 종합 피드백을 받은 적이 있다.그중 가장 눈에 띄었고, 동시에 당장 개선할 수 있겠다고 생각한 부분이 바로 “일관된 상태 처리 관리”였다.이번 글에서는 그중에서도 로딩 스피너를 활용해 UX를 개선했던 경험을 정리해보고자 한다.

DevTalk 세미나 신청에는 기존에 구글폼을 사용해왔지만, 이번에는 신청폼을 프론트엔드에서 직접 구현하게 되었다. 사실 꼭 내가 해야 했던 작업이라기보다는, 한번 직접 만들어보고 싶다는 생각도 있었고, 무엇보다 실사용자를 대상으로 한 페이지를 만들어볼 수 있다는 점

1편에서는 세미나 신청폼의 전체 UI 흐름과, 각 입력 영역을 어떤 기준으로 컴포넌트화했는지를 정리했다. 이번 글에서는 그 UI 위에서 신청 정보가 어떻게 관리되고, 페이지 이동 간에도 입력값을 어떻게 유지했는지, 그리고 최종 신청 버튼을 눌렀을 때 어떤 흐름으로 데이

정신없이 바쁜 3-2를 보내고 종강 후에야 숨을 좀 돌리면서 블로그를 쓰게 됐다. 연합 프로젝트를 하면서 기술적으로도, 협업적으로도 정말 많은 걸 느꼈는데 그중 이번 글에서는 오픈 그래프(Open Graph)와 메타 태그 설정을 통한 SEO 최적화에 대해

UMC 9기 데모데이를 위해 사용자에게 최적의 기기 조합을 제공하는 웹 서비스 Device Life 를 개발 중이다. 이 서비스에는 사용자가 직접 조합 이름을 만들고 기기 검색 단계로 넘어가는 ‘조합 생성’이라는 핵심 플로우가 있다. 단순히 하나의 기능이라기보다는, 사

새로 시작한 프로젝트에서 Next.js 초기 세팅을 맡게 되었는데, 관련 레퍼런스와 블로그 글들을 많이 찾아보며 정리한 덕분에 생각보다 수월하게 세팅을 마칠 수 있었다. 그 과정에서 “이건 나중에 또 쓸 수 있겠다” 싶은 포인트들이 꽤 있어서, 기억이 생생할 때 정리

매일 말로만 듣던 PWA를 이번 큐시즘 밋업 프로젝트 Glit에서 직접 세팅해볼 기회가 생겼습니다. Glit은 가벼운 기록으로 무심코 흘려보내는 업무 경험들을 취업 시장의 언어인 ‘직무 역량 데이터’로 치환해 주는 AI 커리어 아카이빙 서비스입니다.

Organization의 레포지토리를 배포하려면 어떻게 해야할까요? Vercel Pro 버전이 필요합니다. 개인 레포지토리를 배포할 경우 무료로 배포가 가능한데, 이 방법을 이용하면 조직의 레포지토리도 우회하여 무료로 배포가 가능합니다.

신촌IT연합동아리 CEOS 프론트엔드 세션 3~4주차 프-디 협업 과제로 진행한 텔레그램 리디자인 개발 기록입니다.

이번 글에서는 이미 알고 있었지만 다시 한 번 짚어볼 만한 내용들, 그리고 실제로 유용하게 활용한 설정들을 정리해보려 합니다. 1편을 먼저 보고 오시면 더 도움이 될 것 같습니다.

React 19가 2024년 12월 5일 공식 stable 버전으로 npm에 배포되었습니다. 이번 글에서는 React 19의 핵심 변경 사항들을 정리해봅니다.

회원가입 화면을 만들다 보면 어느 순간 이런 상황을 마주칩니다. 이메일 입력, 비밀번호 입력, 추가 정보 입력처럼 화면이 여러 단계로 나뉘는데, 각 단계마다 필요한 데이터가 다르고 뒤로 가기를 누르면 이전 입력값이 날아가고, 어떤 경로로 현재 화면에 왔는지 추적하기도

지난 글에 Next.js PWA 세팅을 완료했는데, 이번엔 그 위에 FCM(Firebase Cloud Messaging)을 활용한 푸시 알림 기능을 구현한 과정을 정리해보려 합니다.