본문 바로가기

분류 전체보기162

[도서] 리액트를 다루는 기술 #컴포넌트 반복 6.1 자바스크립트 배열의 map() 함수 - 반복되는 코드 형태일 때, 코드양을 더더욱 늘어날 것이며 파일 용량도 쓸데없이 증가하게 된다. - 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대 관리할 수 없다. 1️⃣ 자바스크립트 배열의 map() 함수 - 배열 객체의 "내장 함수" map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 👌 문법 arr.map(callback, [thisArg]); 🔷 callback : 새로운 배열의 요소를 생성하는 함수 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소.. 2022. 10. 28.
TIL - 2022.10.24 - 웹 프로토콜, AJAX, React를 왜 사용할까, 이벤트 버블링, 이벤트 버블링을 막는 방법, 이벤트 버블링 활용 방법, 이벤트 위임, 부모에서 자식으로 이벤트 상속하는 방법 ✅ 정리했었던 내용 복습 1️⃣ 웹 프로토콜이란? - 프로토콜이란, 데이터를 송수신하기 위한 규칙 - 서버와 클라이언트 모두 HTTP를 이용해 통신하기 때문에 HTTP에 대한 지식이 중요하다. - HTTP는 GET, POST, PUT ,HEAD 4가지 요청 형식이 있다. - GET은 문서를 요청하고 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로써 응답한다. - POST는 데이터를 서버로 송신하고 서버는 해당 데이터를 특정 아이템에 덧붙인다. - PUT은 데이터를 서버로 송신하고 서버는 특정 아이템을 완전히 대체한다. - HEAD는 상태 정보를 요청한다. GET과 동일한 형태로 응답을 하지만 문서를 복제하지는 않는다. 2️⃣ AJAX란 무엇인가? - Asynchronous JavaScript An.. 2022. 10. 24.
TIL - 2022.10.23 - 서버 사이드 렌더링, MVC 패턴, 아토믹 디자인 패턴, HTTP/HTTPS 차이점 ✅ 정리했었던 내용 복습 1️⃣ 서버 사이드 렌더링 - 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법 - 검색 엔진 최적화와 빠른 페이지 렌더링에 효과적 - OG태그를 페이지별로 적용하기 위해서는 서버 사이드 렌더링이 효율적 - 서버에서 미리 그려서 브라우저로 보내기 때문에 페이지를 그리는 시간을 단축할 수 있다. - 클라이언트 사이드 렌더링 : 빈 HTML을 받아 브라우저에서 그리는 것 2️⃣ MVC 패턴 - MVC란, Model-View-Controller 의 약자로 애플리케이션을 세 가지 역할로 구분한 개발 방법론 - 사용자가 Controller를 조작하면, Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달.. 2022. 10. 24.
TIL - 2022.10.22 - TCP, UDP, URL 입력시 일어나는 일, Event loop, RESTful API, GET POST 차 ✅ 정리했었던 내용 복습 1️⃣ TCP, UDP 차이점 - 연결방식 : TCP는 연결형 서비스, UDP는 비연결형 서비스 - 패킷교환방식 : TCP는 가상회선 방식, UDP는 데이터그램 방식 - 전송 순서 : TCP는 전송 순서를 보장하지만, UDP는 바뀔수가 있다. - 속도 : TCP는 느리고 UDP는 빠르다. - 신뢰성 : TCP는 신뢰성이 높고 UDP는 신뢰성이 낮다. - 수신 여부 확인 : TCP는 수신 여부를 확인하고 UDP는 확인하지 않는다. - 통신 방식 : TCP는 1:1 통신 방식이지만, UDP는 1:1, 1:N, N:N 방식으로 통신한다. 🔷 UDP : IP를 사용하는 네트워크 내에서 컴퓨터들 간에 메시지를 교환할 때 제한된 서비스만을 제공하는 통신 프로토콜 2️⃣ 브라우저 주소창에 u.. 2022. 10. 22.
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.

티스토리툴바