개발 일지 (84) 썸네일형 리스트형 useRef 함수형 컴포넌트에서 useRef 를 사용하면 ref 오브젝트를 반환해준다. const ref = useRef(value) // {current: value} 반환된 오브젝트는 컴포넌트의 생애주기를 통해 유지가 된다. 그말은 컴포넌트가 계속 렌더링 되어도 컴포넌트가 언마운트 되기 전까지는 값을 그대로 유지할 수 있다는 것이다. 그럼 useRef는 언제 사용할까? 1. useRef 는 state와 비슷하게 어떠한 값을 저장해두는 저장공간의 용도로써 사용된다. state의 경우 state값이 바뀌면 -> 렌더링을 하고 -> 컴포넌트 내부 변수를 초기화 한다. state를 사용할때 우리는 원치않는 렌더링 떄문에 곤란해 질떄가 있다. 이떄 useRef를 사용하면 불필요한 렌더링를 막을 수있다. Ref의 값이 변경.. Parameter 와 Argument 매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다. parameter는 함수 혹은 메소드 정의에서 나열되는 변수 명이다. argument는 함수 혹은 메소드를 호출할 때 전달 혹은 입력되는 실제 값이다. const foo = (파라미터1, 파라미터2) =>{ return 파라미터+1 파라미터2 } const foo2 = foo(아규먼트1,아규먼트2) 호이스팅 과 TDZ 호이스팅에 대해 이야기 하기전에 먼저 변수에 대해 말해보겠습니다. 변수에는 let, const, var 가 있습니다. (사실 const 는 상수이지만 변수라고 묶어서 표현하겠습니다.) let 과 const 는 ES6 부터 생긴 문법입니다. 그런데 굳이 var 가 있는데 왜 let 과 const 를 만들었을까요? var 와 let 은 크게 다르지 않습니다. 대부분의 경우에는 둘을 바꿔서 사용해도 문제되지 않습니다. 그럼에도 불구하고 굳이 let을 쓰라는 이유가 뭘까요? var 는 한번 선언된 변수를 다시 선언할 수 있습니다. var name = "Kim"; console.log(name); var name = "Park"; console.log(name); 반대로 let은 한번 선언된 변수를 다시 선언할 .. REST API가 뭔가요 REST API 는 무엇이냐 서버를 만들때 REST API 에 의거하여 만들어야 좋다고 한다. 이게 뭐냐면 일단 API (Application Programing Interface) 웹개발에서 API 는 서버와 클라이언트 간의 소통방법 이다. 어떻게 통신을 할지 정한 규약 server.js 에 써놓은 코드가 API다. 이것을 Restful 하게 짜면 REST API 임 그럼 어떻게 restful 하게 짜야하냐? Roy Fielding 이란 개발자가 만든 잘 짜여진 원칙에 의해서 쓰면 좋을것 같다 라고 논문을 썻는데 이게 유명해져서 정론으로 받아들여짐 논문 내용중에 있는 REST 원칙 6개 1. Unuform interface 하나의 자료는 하나의 URL로 URL 하나를 알면 둘을 알 수 있어야함 요청과 .. 웹페이지가 브라우저에 렌더링 되는 과정 당 포스팅은 유튜브 채널 Code ON 코드온 의 영상내용을 정리한 내용입니다. 출처: https://www.youtube.com/watch?v=hITJM_t1WWY 브라우저의 주요 기능 -사용자가 요청한 HTML페이지, PDF, 이미지 등을 서버에서 요청해 보여주는것입니다. 이것을 어떻게 보여주나면, 브라우저가 화면에 나타나는 요소를 렌더링 할때 파이어폭스 - 개코 사파리 - 웹킷 크롬 - 블링크 라는 각각의 렌더링 엔진을 사용합니다. 이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줌 예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 겁니다. 총 6단계의 과정을 거치는데요 DOM 트리 구축 -> CSSOM트리 구축 -> 자바스크립트 실행 -> 렌더링 트리 구축 ->.. [Next.js] styled-component 적용하기 문제 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제 발생 Header 부분 표시하려고 스타일 컴포넌트 적용하니 오류 발생 원인 자바스크립트 코드가 적용이 되지 않은 페이지가 미리 렌더링되기 때문에 CSS-in-JS 로 스타일링을 하면 스타일이 적용되지 않은 html 코드가 먼저 렌더링 되는 문제가 발생하게 된다. Next.js는 첫 페이지 로드가 SSR로 동작 ⇒ 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라진다. 해결 html 파일에 CSS-in-JS 형식으로 작성된 스타일 요소들을 주입시켜서 스타일이 적용되지 않은 html 코드가 먼저 렌더링되는 문제를 해결할 수 있다. Next.js에서 styled-components를 사용할 때 ⇒ **_d.. [Next.Js] Next.Script를 활용한 지도 개선 토이프로젝트 중간발표후 지도 개선이 필요하단 생각이 들었다 그러한 이유는 .. 문제상황 기존 로직은 지도를 움직일때 마다 지도를 다시 렌더링함 , 이로인해 좋지못한 ux 제공 및 성능저하를 야기했음 해결방안 로직자체를 바꾸기로 함 Next.Script 의 onReady 속성을 활용하여 Next.Script 가 있는 컴포넌트가 mount 될때마다 실행하게 로직을 바꿨다. 그 결과 멋진 성능 개선을 보여줬다! [NextJs] react-query(prefetching)로 SSR 구현 성능 개선의 필요성 인식 진행하고 있는 프로젝트의 상세페이지는 SSR로 구현 되어있다. 프로젝트 MVP 주간에는 페이지가 렌더링 되면 클라이언트 사이드에서 데이터를 요청하는 방식이였으나 SSR의 장점을 활용하지 못한다고 판단하였고 react query의 prefetching 을 활용하는 방향으로 성능 개선을 진행하였다. react-query 의 prefetching 활용 우리 서비스를 이용하는 사용자는 대부분 상세페이지를 클릭할 것이다. 이럴 경우 사용자가 상세페이지에 필요한 데이터를 기다릴 필요가 없도록 미리 데이터를 가져오면 보다 좋은 사용자 경험을 제공할 것이다. 이때 사용 할 수 있는것이 react query의 prefetching 이다. 상세페이지는 prefetching 을 사용함에 있어 적합한.. 이전 1 2 3 4 ··· 11 다음
