FE26 [GraphQL] graphQL은 왜 사용하는 것일까? 들어가며 새롭게 입사한 회사에서 graphQL을 사용하고 있어서 처음으로 배우고 있다. 본격적인 업무에 들어가기 앞서 graphQL에 대해 공부하며 그 경험과 활용 철학들을 공유받은 입장이다보니 경험은 없으면서 그 내용은 상당히 성숙한 내용들이 있을 수 있다. 이 글은 literally는 당연히 이해하고 쓰는 글이지만, REST API를 사용해서 겪었던 고통들이 무엇인지, graphQL을 도입하는 과정에서 어떤 문제들을 겪고 고민하며 발전시켜왔는지에 대해 상당히 피상적으로 받아들인 부분이 있으므로 어쩌면 추상적으로 적힌 부분이나 잘못 받아들이고 쓴 오류들이 존재할 수 있다. 이 글은 이제 주니어도 아닌 엔트리 레벨의 프론트엔드 개발자가 처음 graphQL에 대해 이론적으로 공부하며 작성한 글임을 꼭 염두.. 2023. 7. 23. [React] 스크롤 특정 요소로 이동하기 스크롤이 있는 페이지에서 특정요소로 이동해야하는 경우가 있습니다. 가령 채팅을 구현할 때는 메세지가 추가될 때마다 추가된 요소에 스크롤이 고정되어야하는 경우가 대표적인 예입니다. 저희 프로젝트에서는 글을 작성할 때 사진을 10개까지 추가할 수 있는데, 사진을 추가할 때마다 스크롤이 맨 뒤에 위치해서 사진 추가버튼이 항상 유저에게 보이도록 하고 싶었습니다. 구현 방법 element.scrollIntoView를 활용하면 원하는 element로 스크롤을 이동시킬 수 있습니다. MDN에서 소개하고 있는 JS에서의 활용 방법입니다. 포커싱하고 싶은 요소를 getElementById로 불러옵니다. behavior같은 옵션을 통해 스크롤을 부드럽게 내리기 등의 설정을 추가할 수 있습니다. 자세한 내용은 MDN을 참고.. 2023. 6. 1. [React] 토스트팝업/스낵바(toast popup/snack bar)직접 구현하기 1차 배포 후 알파테스트를 진행하고 있는데, 제목과 내용이 빈 채로 글이 작성된다는 사실을 발견했습니다. 내용을 필수 입력하도록 설정을 해놓았는데 공백만 입력하는 경우를 고려하지 않았던 것이죠... 글 작성 시 공백으로만 글을 쓸 수 없게 만들고, 그 사실을 유저에게 알려야하는데 로그인 validation 에러메세지 방식으로 하기엔 UI가 좀 어색하다는 생각이 들어서 toast pop-up을 고려하게 되었습니다. (잠시... 기말고사 기간 동안 디자이너분께서 공부를 하러가셨으므로... 직접 어색하지않은 토스트 팝업을 뚝딱뚝딱 만들어 보았습니다. 용도에 따라 배경색을 다르게 쓰는게 좋은데 그건 디자이너 분과 상의해봐야하므로 우선 메인컬러를 사용했습니다.) 토스트 팝업(toast pop-up) / 스낵바(s.. 2023. 5. 24. [React] react-query useInfiniteQuery로 무한스크롤 구현하기 무한스크롤(Infinite Scroll)? 게시판 글 리스트처럼 많은 데이터를 배열로 받아오는 경우, 그 데이터가 너무 방대해지면 api 요청으로 데이터를 받아오는 시간이 오래걸릴 수 밖에 없게됩니다. 우리는 페이지네이션(pagination)으로 데이터를 일정 개수씩 분리해 받아오는 방식을 통해 이러한 문제를 해결해왔습니다. 페이지네이션 또한 좋은 선택지이지만, 오늘 날 모바일 기기를 이용해 웹에 접속하는 경우가 매우 많다보니 터치횟수를 최소화하고 콘텐츠를 끊김없이 보여주는 무한스크롤이 더 좋은 대안이 될 수 있습니다. 무한스크롤 구현방법 무한스크롤은 한 페이지의 스크롤의 바닥(세로 끝부분)에 도달할 때 api를 요청하는 방식입니다. 자 그럼 문제는 '어떻게 스크롤 바닥에 도달했는지 알 수 있는가?' 입.. 2023. 5. 22. [React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법 문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이런 문제가 생긴겁니다!! 문제 원인 찾아보니, 모바일에서는 상하단의 주소창과 네비바의 높이를 스크린 높이에 포함하기 때문에 여백이 생겨버린 것이었습니다. 브라우저별 상하단바의 높이를 고려해서 높이를 정하기는 너무너무너무너무 귀찮기때문에, 상하단바를 제외한 실제 내부 높이를 가져올 방법을 고려해야합니다. 해결 방법 1 : vh 재정의하기 (React에 적용하기) JavaScript의 window.innerHeigh는 현재 뷰포인트의 높이를 가져올 수 있습니다. 이 속성을 이용해서, innerHeight.. 2023. 5. 8. [React] 모바일 웹 스크롤 시 주소창, 하단바 없애기 문제 상황 모바일에서 프로젝트를 볼 때, chrome이나 safari에서 하단바와 주소창이 화면을 너무 많이 가리는 모습입니다. 실제 서비스 중인 사이트들을 확인해보면 거의 대부분 스크롤 시 하단바가 사라지는 것을 확인했는데, 무언가 모바일에 추가설정이 필요한건가? 하는 생각이 들었습니다. 그래서 좀 찾아보니 크롬과 사파리 모두 특정 버전 이후부터는 스크롤 시 주소창과 하단 바가 자동으로 숨겨지는 기능을 가지고 있었습니다. 아니 근데 왜 제가 만든 웹은 자동으로 하단바가 사라지지 않는걸까요?? 한참 서치해봐도 잘 모르겠어서 가만히 제가 만든 걸 들여다보니 뭔가..갇혀있다는 느낌을 받았달까요? 그러니까 화면 자체가 내려가는 게 아니라 내부 박스안에서 스크롤이 되고 있는 느낌이었습니다. 생각해보니 모든 페이.. 2023. 5. 6. 이전 1 2 3 4 5 다음
