# next
2021 01 26 화 TIL - 23
Nextantdreact-sns in gitHubnext-redux-wrapper를 설치해서 리덕스할 준비중설치가 제대로 되지 않을땐 --legacy-peer-deps 뒤에 붙이기
2021 01 14 목 TIL - 15
ReactNext.jsANT DesignCSSreact-movie: gitHubreact-movie in gitHubreact-node-sns: gitHubreact-node-sns in gitHubinteraction: gitHubinteraction in gitHu
2021 01 07 목 TIL - 8
Next.jsantdReactJavascriptapple-clone : gitHubapple-clone in gitHubnode-bird-sns : gitHubnode-bird-sns in gitHubreact-movie : gitHubreact-movie in git
2021 01 05 화 TIL - 6
Next.jsTypescriptReact-node-sns : gitHub (use next.js)React-node-snsTypescript : t-stroy blogTypescript Post in t-story재밌게 배우다 typescript 에서 흐름이 끊겼다.
2021 01 02 토 TIL - 3
NodeReactNextNode : gitHubNode gitHubReact-Movie : gitHubReact-Movie gitHubReact-Node-SNS : gitHubReact-Node-SNS gitHub그동안 너무 궁금했던 개념들에 대해서 많이 알게 되었다.
[Next.js] dynamic import를 사용한 퍼포먼스 향상
Next.js는 dynamic이라는 ES2020 최신 문법을 지원하고 있습니다.dynamic Import란 간단히 말해 앱의 빌드 과정에서 모듈을 불러오는 것이 아니라 런타임때 모듈을 불러옴으로써, 처음 불러오는 파일들의 용량을 줄이고 결과적으론 퍼포먼스적 향상을 이루
[Next] Next에서의 alert, window, document , localStorage 사용 가능할까?
= 우리가 기존에 사용하던 대로 사용한다면 SSR에서는 해당 객체나 메소드에 접근하지 못하고 에러가 출력됩니다. CSR에서는 접근이 가능하지만, SSR에서는 접근하지 못하고 에러가 출력됩니다.useEffect(() => {},\[]) 는 렌더링이 되고 난 후 실행되기
[Next] Next.js에서의 동적라우팅
Next js에서의 동적 라우팅 방법 1. 받은 값을 2배로 리턴하는 api > 2. 받은 값을 2배로 출력하는 페이지를 생성 > 즉 http://localhost:3000/get-double/[value]의 value값을 동적으로 받아서 double api요청한
node page
cra 를 할때는 navigation 같은 것을 만들고 , yarn add react-router-dom을 설치해서 , 따로 를 걸어줘야한다.하지만 next 를 하게된다면 자동적으로 pages 라는 폴더에 routing 을 걸어주게 된다.pagesindex.jsprof
[Next] useEffect로 받은 데이터는 SSR될까? ( getInitialProps 사용 )
React useEffect를 사용했을 경우에 SSR이 될까? ☀️ 답 : useEffect안에서 동작하는 데이터는 SSR되지 않는다. useEffect(() => {}, []) 는 마운트 되었을 때, useEffect는 실행된다. 그렇기 때문에 SSR로 받은 htm
나쁜친구들 Mobx와 Next.js
세팅도 드릅게 힘들고 예제도 별로 없고 그 흔한 유튜브도 별로 없는 나쁜 녀석 Next.js 그리고 바벨 세팅의 늪에 빠져서 내가 코딩을 하는 건지 복붙 행운 뽑기를 하는 건지 모르겠는 Mobx, 두 나쁜 친구들이 만났다. 세팅 삽질을 멈추게 해주셔서 감사합니다. pa
[Next] CNA (Next, TypeScript, Styled-components) 세팅 후 SSR시 css 적용 안되는 현상
아래처럼 Next js에서 제공되는 코드도 있지만 깜빡거리는 현상이 있을 수 있습니다.깜빡인다면 하기의 코드를 사용하시면 됩니다.하기의 코드는 참고 링크 첨부합니다.위 처럼 .babelrc와 \_document.tsx를 설정한다면 SSR되기 전에 스타일을 적용 시킨 후
Next.js - 기초
Index에 PostLink를 만드는데 props를 인자로 받아서 Link를 생성한다. 여기서 title은 query의 매개변수다. PostLink 컴포넌트 안에서 Link 컴포넌트에서 props를 내려준 것이다. query string의 title을 가져와 페이지를
React 코딩 규칙
페스타에서 인턴하면서 개인적으로 느낀 React, Next, Apollo, JavaScript, CSS 코딩 규칙아래에서 언급된 규칙 외에도 좋은 저명한 레퍼런스 사이트가 있으면 추가해주세요 😎
[Next] TypeScript & Next.js & styled-components 초기 세팅 (CNA)
## Next.js와 TypeScript를 사용하기 위한 초기 세팅 방법 **_app.tsx, _document.tsx는 다음 블로그에서 다루도록 하겠습니다.** ### CNA (create-next-app)
docker - jenkins - node
docker pull jenkins/jenkins:ltsjenkins lates를 받으면 안됨. 이제 지원 안함jenkins/jenkins:ltsdocker run -itd --name jenkinsContainer -p 8080:8080 jenkins/jenkins:
[Next] Next js를 사용하여 SSR, CSR 구현
Next.js를 사용하면 React에서도 CSR, SSR을 혼합하여 빠른 성능을 구현할 수 있다.
SSR
지금까지 CRA를 이용하여 클라이언트 사이드의 웹페이지만을 제작해보았다. 물론 SPA는 좋은 도구 이지만, 일음 함에 있어서 목적에 따라 적합한 도구를 사용해야 하지 않겠는가? 숟가락으로 병뚜껑을 딸수 있다고 병따개 냅두고 숟가락만 쓸수는 없는 일 아니겠는가!그러니 일
