minTech

프로젝트를 하면서 내가 맡았던 기능 중에 하나가 바로 무한 스크롤이다. 개인적으로 intersection observer API를 이용하기 위해, 그것을 먼저 이해하고, 내가 원하는 기능으로 구현하려는 것이 어려워서 가장 오래걸렸던 기능이다,, 😭 그래도 어려웠던 만큼 성공했을 때 제일 짜릿했고, 이 과정을 글로 작성하면 나중에 꼭꼭 활용될 것이라는 확신에 바로 정리를 시작해본다. 🕵️‍♀️ Infinite Scroll(무한 스크롤) ? 무한 스크롤이란 사용자가 스크롤 동작을 할 때마다 새로운 데이터를 동작으로 로드하여 컨텐츠를 보여주는 방식을 얘기한다. 기존의 페이지를 새로고침하거나, 별도의 페이지 버튼을 누르지 않고도 사용자가 끊임없이 컨텐츠를 스크롤 하여 볼 수 있게 해주는 기술이다. 특히 무한 스..

😂 문제 상황 이번 프로젝트를 시작하면서 몇 가지 어려움이 있었다. 그 중에 하나는 setter함수와 비동기 함수와의 관계이다. 이번 어려움이 생긴 부분은 'emoji-picker-react' 라이브러리를 이용해 가져온 emoji 선택 컴포넌트를 클릭 시에 이모티콘과 타입을 formdata로 만들어주어 POST 요청을 하는 작업이었다. 본격적인 코드를 작성하기 전, 내가 원하는 구현의 방향성은 다음과 같았다. emoji를 클릭하면 => updateEmojiFormData에 POST 하려는 데이터 형태로 저장한다. -> 저장이 되면, setEmojiFormData에 해당 Formdata가 들어가고 -> 최종적으로 API 의 body에 저장한 데이터 형태로 서버에 POST 요청이 가는 방식이다. 이 부분의 ..

자바스크립트의 동기와 비동기.. 복잡한 개념인 것 같아 배우면서 애를 먹었던 부분이다. 이 두 개념에 대해 이해한대로 정리해보았다. 동기(synchronous) 동기적으로 실행한다는 것은 무엇을 의미하는 것일까? ➡️ 동기 실행이란 한 번 시작한 작업을 다 처리하고 나서야 다음 코드로 넘어가는 것이다. 다음과 같이 변수를 선언해주어 값을 세 번 다른 값으로 할당 후에 중간중간 콘솔로 출력해보았다. let num = 1; console.log(num); num = 2; console.log(num); num = 3; console.log(num); 자바스크립트는 동기식 언어이기 때문에 코드를 위에서 아래로 내려오면서 한줄한줄 실행한다. 따라서 결과는 1,2,3이 차례대로 출력됨을 확인할 수 있다. 🖐️자바..