분류 전체보기

[ Next.js ] SSR , CSR 그리고 SEO

🤷‍♀️ Next.js ? react에서 SSR(Server Side Rendering)을 가능하게 하는 react 프레임워크 Next.js 공식문서 중 Data Fetching Overview를 가져와보았다. Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with Server-side Rendering or Static Generation , and updating or creating content at runtime with Incremental Static Regeneration N..

[ decodeURI() ] 외부 경로 접근시 한글 깨짐 해결하기

개요 mailJS를 통해 프로젝트 경로를 보내주고 텍스트를 파라미터로 받을 때 한글 텍스트가 깨지는 현상이 나타났다. 한글에 입장해 프로젝트를 진행해보세요 http://localhost:3000/V/%ED%95%9C%EA%B8%80/1645693731116 %ED%95%9C%EA%B8%80 이 깨진 공간에 들어가야 할 말은 '한글' 하지만 막상 링크에 들어오면 http://localhost:3000/V/한글/1645693731116 '한글'은 깨지지 않고 잘 드러난다. ... 그러나 1. '한글' 이 그려져야 할 부분이 여전히 깨져있다. 2. 그러나 프로젝트 내용을 얻어올 때 쓰는 경로를 '한글'로 해놓았기 때문에 경로를 얻을 수가 없다,('한글'이 깨져서) 해결 과정 1. 한글 문자가 깨져있는 부분의 ..

[ TIL ] 노마드코더 NextJS #2.0 - #2.1

사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴 _app.js 즉 custom app component를 사용할 때 쓰는 것 : layout 패턴 Layout 패턴 사람들이 nextJS를 이용할 때 쓰이는 흔한 패턴 _app.js 즉 custom app component를 사용할 때 쓰는 것 : layout 패턴 components 안에 js 파일을 만들고 import NavBar from "./Navbar"; export default function Layout({ children }) { // children은 react.js가 제공하는 prop // 하나의 component를 또 다른 comonent 안에 넣어줄 수 있다 return ( { children } ); } children이라는 p..

[ NextJS ] styled jsx ( 노마드코더 NextJS )

return ( Home About ); return 안에 을 해줘야함 그리고 중괄호를 열고 안에 백틱 그 안에 css를 써주면 됨. 각각의 componts들의 style들은 독립적으로 존재한다. return ( Home About ); 그냥 css를 써주는 것과 똑같이 쓰면 된다 * 스타일은 그 컴포넌트 내에 한정되기 때문에 재사용이 불가능하다. * 하지만 ``백틱을 이용한 문자열 삽입이기 때문에 props를 사용할 수 있다 ex) color: ${props.color} 전역 스타일을 사용하고 싶을 때는? 전역 스타일을 사용하고 싶을 때는? style jsx에 global을 추가하기만 하면 된다 하지만 문제가 있다. global로 사용했지만 통하지 않는 요소가 있다 이건 create react app으..

[ 배포 ] Netlify로 배포하기

.. 끝났다고 끝이 아니다 아 이제 마무리했으니 배포해야지! 하고 배포를 시도하면 그 시간부터 최소 3시간은 배포와 열심히 씨름하게 된다. 내가 생각지도 못한 곳에서 오류가 터져나오고 firebase를 이용할 때는 도메인 승인을 깜빡한다거나 콘솔 창을 끄고 다시 크게 본 화면에서 css가 현란하게 뒤엉켜 있다거나 하는 문제. 하지만 오늘은 3시간까지는 아니었다 배포만 따지자면.. 20분? 🥱 몇 번 배포와 씨름하다 보니 대충 어떤 오류가 생기겠구나.. 아 이걸 깜빡했구나.. 이럴 때는 아마 이렇게 해야하겠지? 하는 내공이 생기는 것 같다. 어쨌든 시작! ✍ 순서 1. netlify에 접속한다 2. 로그인이나 가입을 하고 github를 연결한다 - 연결하지 않아도 되지만 연결하는게 여러가지로 더 편하다 3..

BrowserRouter HashRouter 차이 + BrowserRouter 배포시 흰 화면 문제

내가 공부하다가 궁금해서 정리해본 차이점 react는 알다시피 SPA(single page application)에 최적화 되어있다. 그 이유 중 하나가 바로 router. 1. react-router-dom을 설치해서 이용하며 2. a 태그를 이용할 때 생기는 무의미한 재랜더링을 예방 => 속도가 빠르다 router에는 우리가 익히 아는 BrowserRouter HashRouter 외에도 StaticRouter MemoryRouter NativeRouter 이 있다. 🤷‍♀️ BrowserRouter과 HashRouter의 차이는? BrowserRouter www.123123/post 1. HTML5의 history API를 이용해 UI를 업데이트 2. 동적인 페이지에 적합 3. 새로 고침 / 경로를 ..

[ CSS ] 아이템에 shadow 주기

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com css shadow쓸 때 좋음 https://getcssscan.com/css-buttons-examples?ref=beautifulboxshadow-bottom CSS Scan - The fastest and easiest way t..

npm start / yarn start가 안될 때. 오류코드 : error Command failed with exit code 1.

문제 npm start와 yarn start 어느 것을 써도 error가 뜨면서 실행되지 않았다. 열심히 구글링 해 본 결과 npm update를 하고 npm(yarn) start를 하니 작동되었다. 🙇‍♀️ https://rrecoder.tistory.com/133 나는 npm update로 문제를 해결했지만 종속성 문제 때문에 이런 에러코드가 발생했을 경우에는 종속성을 제거하고 캐시를 정리한 후 다시 전송받아야 할 것이다. 방법 rm -rf node_modules yarn cache clean yarn yarn start 디렉토리의 노드 모듈을 제거한 다음에 yarn 캐시를 clean하게 만들어주고 yarn을 다시 시작한다 🙇‍♀️ https://stackoverflow.com/questions/55..