전체 글67 [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. [Javascript] 백준 6996: 애너그램 문제 두 단어 A와 B가 주어졌을 때, A에 속하는 알파벳의 순서를 바꾸어서 B를 만들 수 있다면, A와 B를 애너그램이라고 한다. 두 단어가 애너그램인지 아닌지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 테스트 케이스의 개수( { const [word1, word2] = words.split(" "); if (validAnagram(word1, word2)) { console.log(`${word1} & ${word2} are anagrams.`); } else { console.log(`${word1} & ${word2} are Not anagrams.`); } }); 2023. 5. 30. [알고리즘] 자바스크립트 객체와 배열의 시간복잡도 * 해당 글은 [Udemy] JavaScript Algorithms and Data Structures Masterclass 강의 일부를 정리한 내용입니다. 객체의 빅오 1. 객체는 정렬되어 있지않아 빠르다. 2. 삽입(insertion), 제거(removal), 접근(access) O(1) : 앞과 뒤가 존재하지않고 오직 key로 삽입, 제거, 접근을 수행하므로 상수시간이 소요된다. 3. 검색(searching) O(N) : key를 찾는 것이 아니라 value가 어느 속성에 있는지 하나하나 확인하는 작업. n이 늘어남에 따라 시간이 오래 소요됨. 4. 객체의 메서드 빅오 O(N) : Object.keys, Object.values, Object.entries O(1) : hasOwnProperty :.. 2023. 5. 26. [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. 이전 1 2 3 4 5 ··· 12 다음
