분류 전체보기53 SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유 SSR을 사용해야 하는 이유 React를 사용하다 보면 SSR이 필요하다는 생각을 하게된다. 해당 페이지를 사용자들이 검색했을때 사용자들에게 해당 페이지가 노출이 되기위해서는 구글봇이나 네이버 봇이 우리 페이지의 정보를 가져가야한다. 하지만 봇은 해당 페이지가 로드되기전에 HTML파일과 robots.txt정보만을 가져간다 CSR을 사용하면 해당 페이지가 다 나오기전에 봇이 떠나기 떄문에 해당 문제를 해결하기 위해SSR을 사용해야 한다는 결론이 나온다. 그래서 이번에 SSR에 대해 알아 보려고한다. SSR을 사용하는 이유 초기 페이지 로딩 속도 향상 SSR의 주요 장점 중 하나는 초기 페이지 로드 속도를 향상시키는 기능입니다. SPA에서 클라이언트의 브라우저는 페이지를 렌더링하기 전에 JavaScript .. 2023. 6. 21. CSR(Client-side Rendering)이란 무었인가? React를 사용하다 보면 CSR(Client-side Rendering) 에 대해 많이 듣게 된다. 관련된 내용을 알고는 있지만 설명을 할 수 없을 정도의 지식을 가지고 있어 원티드 사전 과제에 CSR에 대해 알아보는 과제가 있어 CSR에 대해 알아보고 장점과 단점을 정리 하려고 한다. CSR이란? CSR(클라이언트측 렌더링)은 웹 페이지 렌더링이 서버가 아닌 클라이언트의 웹 브라우저에서 주로 처리되는 웹 개발 접근 방식입니다. CSR에서 서버는 주로 필요한 데이터와 자산을 클라이언트에 보내고 클라이언트 측 JavaScript 프레임워크 또는 라이브러리는 HTML을 동적으로 생성하고 브라우저에서 렌더링합니다. CSR의 장점 사용자 경험 CSR을 통해 시각적으로 매력적인 대화형 사용자 인터페이스를 만들.. 2023. 6. 19. Canvas 기초 한번사용해보자 HTML Canvas 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. canvas 기초 사용법 html 문서에 canvas 엘리먼트를 선언한다. canvas 엘리먼트에 id 속성을 설정한다. canvas 태그 내부에 width, height를 설정한다. canvas 내장 '그리기 객체'를 취득한다. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 자바스크립트를 통해 다양한 효과를 구현한다. 캔버스 사이즈 설정 캔버스 사이즈 설.. 2022. 2. 5. JavaScript, React 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 텍스트 입력시 줄바꿈 적용 없이 작성되는 이유? 자바스크립트 input 또는 textarea로 텍스트를 작성하고 데이터를 보낼떄 줄바꿈 없이 하나의 이어지는 텍스트로 가게된다. 이 현상을 해결하기 위해서 줄바꿈 하는 부분에 특정 문구를 넣어주면 해결될수있다. 텍스트 줄바꿈하는 부분에 특정 문구 추가하는 코드 (텍스트 입력받을떄) // React const onChangeContent = useCallback((e) => { setContent(e.target.value.replace(/(?:\r\n|\r|\n)/g, "\n")); }, []); // javascript const text = document.querySelector('textarea'); const result = text... 2021. 12. 29. 웹에서 아이폰사진 확장자 .HEIC사진 파일 업로드하기 웹에서 아이폰 사진 업로드가 안되는데!!! 토이프로젝트를 만들며 만난 문제가있다. 아이폰에서는 사진 확장자가 .HEIC파일이라 업로드가 되지않는 것이다. 찾아보니 아직 브라우저에서는 .HEIC 파일을 읽지 못하고있어 .HEIC 파일을 업로드 못하게 하던가 업로드전에 사진을 변환해 주는 작업을 해야된는거 알게 되었다. 개인적으로 고민 하면 2가지 해결 방법이 나왔다 1. 업로드 하기전에 .heic파일을 업로드 하지 못하게 막는다 2. 업로드 하기전에 .heic를 브라우저가 읽을수 있는 파일로 바꿔준다 나는 해결 방법을 2번을 선택하였다. 선택한 이유는 지금 만들고있는 프로젝트의 타겟 유저들이 대부분 아이폰 유저이기 떄문에 .HEIC파을을 못올리게 막는다면 UX측면에서 접근성이 현저하게 떨어지게 된다고 생각.. 2021. 12. 25. React 에 typescript 적용 후 webpack에 react-refresh 세팅하는법 webpack에 react-refresh 적용하기 1) 리엑트에 타입스크립트 적용한후 파일을 고칠떄마다 계속 빌드해줘야하는 번거로움이 있어 리엑트 핫 로딩기능을 적용하려한다. npm i -D @babel/core @types/webpack @types/webpack-dev-server ts-node fork-ts-checker-webpack-plugin babel-loader react-refresh webpack-dev-server @pmmmwh/react-refresh-webpack-plugin @types/webpack @types/webpack-dev-server @babel/core : babel-core: 웹팩용 바벨(?)이다. 터미널에서 쓸 때 babel-cli를 썼는데 이걸 웹팩에서 사용하.. 2021. 12. 10. 이전 1 2 3 4 5 ··· 9 다음
