분류 전체보기66 [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. [Javascript] 백준 1764: 듣보잡 문제 김진영이 듣도 못한 사람의 명단과, 보도 못한 사람의 명단이 주어질 때, 듣도 보도 못한 사람의 명단을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어진다. 이어서 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과, N+2째 줄부터 보도 못한 사람의 이름이 순서대로 주어진다. 이름은 띄어쓰기 없이 알파벳 소문자로만 이루어지며, 그 길이는 20 이하이다. N, M은 500,000 이하의 자연수이다. 듣도 못한 사람의 명단에는 중복되는 이름이 없으며, 보도 못한 사람의 명단도 마찬가지이다. 출력 듣보잡의 수와 그 명단을 사전순으로 출력한다. 예제 입력 3 4 ohhenrie charlie baesangwook obama baesangwook.. 2023. 5. 16. 이전 1 2 3 4 5 ··· 11 다음
