FrontEnd (96) 썸네일형 리스트형 Script태그에 대하여 참고: https://shape-coding.tistory.com/entry/JavaScript-Script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98%EB%8A%94-%EC%96%B4%EB%94%94%EA%B0%80-%EC%A2%8B%EC%9D%84%EA%B9%8C (script태그는 어디에 위치해야 좋은가를 말하는글) HTML 문서를 읽고 파싱하는 과정에서 defer도 async와 비슷합니다. 태그를 만나도 HTML 파싱이 중단되지 않고 javaScript 파일과 함께 파싱됩니다. 하지만 다른 점은 javaScript 코드를 실행하는 시점은 HTML 파싱이 모두 완료된 이후입니다. 이처럼 , , 태그를 상황에 맞게 사용하여 스크립트 파일의 파싱 순서를 제어할 .. SWR 실습: https://github.com/dhflekddy/React-and-ReactHookPractice/commit/1f12eb529ddf3fe278b0dd961c8c91c0321a46ad mutate를 이용한 Optimistic UI: https://steadily-worked.tistory.com/565 useSWR, mutate에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC useSWRInfinite에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC-useSWRInfinite https://moon-ga.github.io.. ****중요****Front에서 Back으로 데이터 요청(fetch, push시 사용되는 Fetch API, axios라이브러리에 대하여 관련 실습 코드: https://github.com/dhflekddy/React-and-ReactHookPractice/commits/main/fetchAndAxios 구체적 실습코드 여기에 모두 있으니 꼭보기, Readme도 꼭 보기fetch사용시 데이터를 서버에 post방식으로 전송시 반드시 지켜야 할 것: https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0그 외에서 웹 애플리케이션 서버로 스프링 부트를 사.. API데이터 전송 확인 툴 postMan 클라이언트와 서버간에 데이터가 잘 전송되는지의 여부를 알기 위해 영상에서 소개하는 postMan이라는 프로그램을 사용해 보았다. 아직까지는 그 필요성을 구체적으로는 느끼지 못하겠다. 그냥 post할때는 서버 파일에 post가 정상적으로 될수 있는지 확인하는 console문구를 해당 함수에 추가하면 되고 Get이 잘 되는지는 브라우저 화면에 res.json혹은 res.send와같은 res.json res.send와 같은 함수를 사용해 주면 되기 때문이다(여기서 클라이언트가 body안에 보낸 값을 확인하기 위해서는 body-parsing middleware인 body-parser를 사용해 주면 된다). nodeJS - req.params, req.query, req.body에 대하여 1. Request Properties 1-1. req.params 예를 들어 /user/:name 경로가 있으면 "name"속성을 req.params.name으로 사용할 수 있다. https://params/user/12341234 일 경우 12341234를 받는다. req.param은 더이상 사용하지 않음 1-2. req.query 이 속성은 경로의 각 쿼리 문자열 매개 변수에 대한 속성이 포함 된 개체다. 예를 들어 https://query/search?searchWord=구글검색 이면 searchWord 매개변수(parameter)의 구글검색 이라는 값(argument)을 가져온다. 1-3. req.body JSON 등의 데이터를 담을때 사용한다. (주로 POST로 유저의 정보 또는 파일 업로드를.. loadable() 이란? 요약: 코드스플리팅은 초기 로딩속도를 향상시키기 위한 것이다. CodeSplitting(코드분할)이란? 필요한 모듈을 정적으로 받아오는 것이 아닌 동적으로 런타임시에 필요할 때 필요한 모듈만을 불러오는 것. 즉 JS 코드 번들을 잘게 쪼개서 필요할 때마다 로드할 수 있도록 사용하는 기술! 즉, 미리 로드해야 하는 코드의 양을 줄여서 초기 로딩 시간을 개선할 수 있다! 코드 예시 import Component1 from "Components/Component1"; const Component2 = loadable(() => { return import("Components/Component2"); }); ... ... 협업하는 팀원이 만들어놓은 App 파일에서 6주차에야 눈에 들어온 loadable(). .. React Hooks - React.memo로 컴포넌트 최적화하기 (useMemo, useCallback) 정리: 리엑트에서는 기본적으로 부모컴포넌트가 랜더링되면 반드시 자식컴포넌트 역시 랜더링된다. 따라서 자식컴포넌트에서는 부모로부터 받는 props에 변화가 생길때만 랜더링이 발생하도록 해주면 최적화에 도움을 준다는 생각을 할 수 있다. 리액트로 개발을 하다보면 굳이 반복해서 렌더링될 필요가 없는 컴포넌트가 계속해서 반복적으로 많이 렌더링이 되는 문제를 한번쯤은 겪어봤을 것이다. 대부분의 경우 컴포너트의 렌더링 문제를 크게 고민할 필요는 없다. 하지만 렌더링이 너무 지나치게 자주 발생하거나 매번 렌더링마다 무거운 로직을 처리해서 성능에 부담을 준다면 이는 컴포넌트 성능에 매우 좋지 않으므로 해결하는 것이 좋다. 이러한 문제를 해결하기 위해 리액트에서 제공하는 React.memo를 알아보자. 더불어 useMe.. React Hooks - useCallback (실습포함) useCallbck과 useMemo의 차이점은? useCallback도 useMemo와 같이 컴포넌트 최적화를 위해 사용된다. 다만 useMemo는 결과로 return된 값을 memoization하지만 useCallback같은 경우 콜백함수 그 자체를 메모이제이션 해준다.(잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback.useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함.useMemo 함수.. 이전 1 2 3 4 5 6 ··· 12 다음
