본문 바로가기

개발일지25

TIL - 2022.10.21 - Closure, 호이스팅, 프로세스 생성과정, HTTPS, TCP ✅ 정리했었던 내용 복습 1️⃣ Closure란? - 외부 함수에 접근할 수 있는 내부 함수 혹은 이러한 원리 - 자신을 포함하고 있는 외부 함수보다 내부 함수가 더 오래 유지가 될 경우, 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저라고 부른다. - 자바스크립트에서는 함수를 리턴할 때 클로저를 형성하는데, 클로저가 형성될 당시의 함수와 함수가 선언될 때의 어휘적 환경의 조합(쉽게 말해, 당시의 관계되는 코드들)의 참조를 유지, 기억한다. 2️⃣ 자바스크립트의 호이스팅 - 코드가 실행되기 전의 변수 선언, 함수 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 - var 변수 선언, 함수 선언에서만 호이스팅이 일어나며 let, cons.. 2022. 10. 22.
TIL - 2022.10.20 - 무한스크롤 고려, CloudFront, useEffect, useLayoutEffect ✅ 정리했었던 내용 복습 1️⃣ 데이터 10,000를 가지고 무한 스크롤 구현 시 가장 중요하게 고려해야 할 점은? - 인스타그램, 페이스북처럼 최신 글을 보고싶어 하는 SNS는 무한스크롤 구현을 통해 교화적으로 최신 글을 보여줄 수 있지만, 그렇지 않은 예전 데이터를 찾아보는 사이트 등은 데이터가 많아질수록 로딩을 계속 해야 하는 번거로움이 발생되어 적합하지 않는다. 2️⃣ CloudFront로 배포하는 이유 - CloudFront는 전 세계에 분포된 엣지 로케이션이라는 데이터 센터의 엣지 서버에서 콘텐츠를 캐싱한다. - 사용자의 위치에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공 받을 수 있도록 한다. - 따라서, CloudFront로 배포를 하면 CDN(콘텐츠 전송 네트워크)을 통해 페이지 응답 .. 2022. 10. 20.
TIL - 2022.10.18 Virtual DOM, useRef, useEffect, var, let, const, Async/Await, Promise ✅ 정리했었던 내용 복습 1️⃣ Virtual DOM과 Real DOM의 차이 - DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델 - DOM은 HTML에 동적인 변화가 있을 경우 전체 페이지(DOM Tree)를 검색해서 해당 부분을 교체한 후 전체 페이지에 대해 리렌더링을 해주어야 하는 문제점이 발생, 이에 대한 문제점을 해결하기 위해 나온 것이 Virtual DOM - Virtual DOM을 사용하면 실제 DOM에 조작하여 접근하는 대신, 추상화한 자바스크립트 객체를 구상하여 사용한다. - DOM의 상태를 메모리에 저장하고 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링 해서 이전 .. 2022. 10. 18.
React 리액트 다음 카카오 주소 검색 API 사용 방법 오늘은 다음 카카오 주소 검색 API 사용 하는 방법을 정리해보려고 한다. 지금까지 사용해봤던 라이브러리 중 가장 간단한 방법이어서 접근하기가 쉬웠다. 이번에 캘린더 라이브러리 사용해보면서 가장 힘들었던 점이 커스텀이었는데 다음 카카오 주소 검색 라이브러리는 커스텀 할 수 있는 부분이 없지만 width 값 조절은 간단해서 쉽게 적용시킬 수 있었다. 1️⃣ 먼저 라이브러리 설치하기 yarn add react-daum-postcode // yarn npm install react-daum-postcode // npm // 그리고 맨 위에import 해주기 import DaumPostcode from 'react-daum-postcode'; 2️⃣ 버튼 클릭했을 때의 이벤트, 주소 선택했을 때의 이벤트 만들기.. 2022. 10. 11.
React 리액트 로그인 토큰 만료됐을 때 모달 띄우는 방법 로그인을 구현할 때 30분, 1시간, 2시간 이렇게 만료 시간을 정해서 로그아웃이 되도록 구현했다! 그런데, 로그아웃이 되었는지 알려주지 않으니까 마이 페이지 들어가서야 아 로그아웃 됐구나 라는 생각이 들었다 ㅠㅡㅠ 그래서 로그아웃이 되었음을 알려주는 모달을 만들었다. 처음 구현해본 거라서, 더 좋은 방법이 있을 것 같은데 있다면 공유해주세요❤️ 1️⃣ 일단, 나는 헤더에 코드를 작성했다. 헤더 컴포넌트는 전 컴포넌트에서 사용하기 때문에, 코드를 여러번 작성하지 않아도 된다. 🔷 먼저 전체 코드 기록하기! 여기까지가 모달 뜨는 부분이고 아래에 헤더 코드 더 있다는 점 참고! // 토큰 만료되면 로그아웃 const navigate = useNavigate(); const token = getCookie('.. 2022. 10. 10.
React 리액트 이미지 수정 하는 법 마이페이지를 내가 구현했는데, 프로필 이미지 수정을 하는 기능을 추가했다! 생각보다 이미지 수정은 간단했다. 🔷 일단 전체 코드는 이렇게 생겼다! //프로필 이미지 PATCH 기능 const [imageUrl, setImageUrl] = useState(''); const imgRef = useRef(); const onChangeImage = async (e) => { const reader = new FileReader(); const file = imgRef.current.files[0]; reader.readAsDataURL(file); reader.onloadend = () => { setImageUrl(reader.result); }; if (e.target.files[0]) { const u.. 2022. 10. 9.

티스토리툴바