본문 바로가기
반응형
프로젝트 진행 중 내가 한 후회들 회사에서 프로젝트를 하다보면 이런저런 후회들을 하게된다. 이 글은 그 후회들을 공유하며, 나아가 내가 겪은 것들을 회고하고 개선하고자 하는 내용을 담았다. 올해 3월에 시작한 이번 프로젝트는 나에게 의미가 크다. 그 과정에서 내가 한 (약간은 바보 같은) 후회들을 여러분과 공유하려 한다. 그리고 이를 통해 내가 겪었던 것들을 간접적으로 경험하여, 조금이라도 도움이 될 수 있기를 바란다. 1. 기획서를 꼼꼼하게 읽지 않았다 2년 차 개발자이고 여러 프로젝트를 해왔지만, 사실 이번 프로젝트 때 기획서를 처음 받아보았다. 그리고 나는 그 당시에 기획서를 볼 일이 거의 없을 거라 생각했다. 디자이너님이 디테일한 내용은 피그마에 댓글로 남겨 주시기도 했고, '막힐 때마다 기획서를 보면 충분히 구현이 가능할 것 같.. 2023. 8. 6.
React 페이지네이션 UI 직접 만들기 페이지네이션(pagination)은 큰 데이터를 사용자가 보기 편하도록 작은 부분으로 나누어 여러 페이지로 표시하는 것을 뜻한다. 사용자는 이 페이지들을 순차적으로 또는 선택적으로 볼 수 있다. 요즘은 비즈니스나 UX적인 측면에서 무한 스크롤이 더 많이 쓰이는 것 같지만, 사용자가 특정 정보를 찾기 위해 몇 페이지를 건너뛰어야 하거나, 어드민의 데이터 테이블 UI와 같이 내용이 많고 구조화된 정보를 제공해야 하는 경우에는 페이지네이션이 더 적합할 수 있다. 페이지네이션 핵심 로직 이해하기 페이지네이션의 일반적인 예를 들자면, 사용자는 페이지마다 보여지는 데이터의 양을 선택할 수 있고, 원하는 페이지 번호를 클릭함으로써 해당 페이지로 즉시 이동할 수 있다. 또한, 앞뒤 페이지로 쉽게 이동할 수 있는 네비게.. 2023. 8. 2.
React에서 Swiper Element 사용 시 TypeScript 에러 해결하기 스와이퍼 리액트 페이지에 들어가보면 가장 먼저 눈에 띄는 문구가 있다. Swiper React components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead. If you are upgrading from Swiper 8 to Swiper 9, check out Migration Guide to Swiper 9 If you are looking for v8 docs, they are here v8.swiperjs.com 스와이퍼 리액트 컴포넌트는 향후 버전에서 제거될 가능성이 있으니, 웹 컴포넌트로 만든 스와이퍼 엘리먼트로 마이그레이션하라는 것이다. 빨간색 배경에다가 .. 2023. 6. 18.
2년 차 프론트엔드 개발자 상반기 회고 요즘 일이 많아져서 정말 바쁘다. 개발팀 내 부장님, 대리님과 소통하는 것은 물론, 디자인팀과 기획팀과도 더 자주 소통하며 바쁘게 다니고 있다. 개발자로 취업하기 전에 들었던 얘기 중에 프론트엔드 개발자는 '중간 다리' 역할을 잘 해야 한다는, 즉 양쪽 모두와 원활하게 소통해야 한다는 것이 생각난다. 업무에 대한 압박감 의사소통엔 큰 어려움을 느끼지 않았다. 그런데 문제는 서비스 출시 마감일이 너무 빨라서 어려움을 겪고 있다. 이렇게 큰 프로젝트를 처음부터 만드는 일이, 특히 2년 미만의 경력으로 프론트엔드 개발을 모두 소화하기엔 너무 벅찬 일정인 것 같다. 얼마나 압박감이 심했냐하면, 프로젝트 생각만해도 식은땀이 나고 괜히 몸에 열이 올라왔다. 머리까지 아파와서 같이 식사하는 동료들에게 이야기해보니, .. 2023. 6. 5.
[JavaScript] 배열에서 특정 요소 제거하기 프로그래밍을 하다 보면 배열에서 특정 요소를 제거해야할 때가 있다. 이 글에서 자바스크립트 배열의 특정 요소를 제거하는 방법에 대해 알아보자. 배열에서 특정 요소를 제거하는 방법 splice() 메서드 사용 splice() 메서드는 첫 번째 인자로 주어진 인덱스에서 시작해서, 두 번째 인자로 주어진 개수만큼의 요소를 제거한다. splice() 메서드는 요소의 교체 및 추가에도 쓰인다. indexOf() 메서드를 사용하여 제거할 값의 인덱스를 먼저 찾을 수 있다. const array = [1, 2, 3, 4, 5]; const index = array.indexOf(3); // 값 3의 인덱스를 찾는다. if (index > -1) { array.splice(index, 1); // 인덱스 위치에서 1개.. 2023. 5. 20.
[React] null vs empty fragment 리액트에서는 종종 다른 조건에 따라 아무것도 렌더링 하지 않고 싶을 때가 있다. 그럴 때 쓰는 반환값이 바로 null과 empty fragment( )이다. 이 둘 중에 무엇을 쓰는 게 더 나은 선택일까? function Item({ name, isPacked }) { if (isPacked) { return null; // 또는 } return {name}; } null을 사용하는 것이 리액트 렌더링 프로세스에 아무 영향을 끼치지 않기 때문에 성능상으로 좋아서 사용하는 개발자가 있고, "빈 엘리먼트를 반환한다"라는 개념에서 를 의미론적으로 사용하는 개발자도 있다. 이 문제에 대한 힌트가 담긴 내용이 공식 문서에도 나와있다. 역시 이럴 땐 공식 문서 먼저 살펴보는 것이 좋은 것 같다. 공식 문서에서는 '.. 2023. 5. 19.
React에서 셋(Set)으로 체크박스 재정의하기 체크박스 기능 구현, 이게 이렇게나 복잡한 퍼즐이 될 줄은 몰랐다. 그래도 두 개의 구현 방법을 알아내긴 했다. 그 중 하나인 '셋(Set)' 자료구조를 활용한 방식은 신기하고 인상 깊었다. 셋은 알고리즘 공부할 때나 가끔 봤었는데, 예전에 면접에서 써봤다고 괜히 얘기 꺼냈다가 라이브로 관련 문제까지 풀었었던 아찔한 기억이 있다.(물론 떨어졌다.) 그래서 이 글에서는 제대로 이해하고자 체크박스 기능 구현을 통해 알아보려고 한다. 우선, 배열을 사용하여 구현한 방식을 살펴보고, 이를 개선하기 위해 셋을 이용한 방식까지 소개한다. 따라서, 이 두 가지 방식을 비교하고, 셋을 이용한 체크박스 기능 구현이 어떻게 기존의 배열을 사용한 방식을 개선할 수 있는지에 대해 살펴보자. 잠깐, 체크박스 UI란? 체크박스 .. 2023. 5. 14.
반응형

티스토리툴바