[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
2021. 3. 8.
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
2021. 3. 8.
[React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel)
슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 캐로셀(Carousel) 입니다! 저도 처음엔 이게 뭔가 하고 Carousel 을 구글에 검색해보았는데 뭔가 무슨 느낌인지 와닿죠!? 아무튼 Carousel 이 올바른 표현입니다😀 + 참고로 슬라이드는 보통 음량조절할때 미는 그런 조절기구를 칭하는 것 같습니다. 아무튼 오늘은 리액트에서 이 캐로셀을 구현, 혹은 이용하는 여러 방법을 알려드리고자 합니다! 1. 직접 구현하기 직접 구현 하는것도 생각보다 어렵지는 않습니다. 슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 Overflow를 hidd..
2020. 12. 19.
[React🌌] 리액트 공식문서 함께 읽기 📘 / *️⃣ - 리액트 v17 Update 정리 / 17버전 달라진 점은?!
리액트 v17 Released 2020. 10. 20. 리액트 17버전이 배포가 되었습니다. (ko.reactjs.org/blog/2020/10/20/react-v17.html) 저로서는 어떤 변화가 생겼고, 새롭게 추가된 기능을 사용할 생각에 조금 설레기도 했는데요, 헌데 웬걸? 공식문서 첫 문장이 이렇게 시작하네요 더보기 리액트 17 릴리즈는 개발자-직접적인 기능을 새로 추가하지 않아 이례적이다. 대신 이 릴리스는 React 자체를 쉽게 업그레이드할 수 있도록 하는 데 주로 초점을 맞추고 있다. 저는 '개발자-직접적인 기능을 새로 추가하지 않아 이례적' 이라는 말과 'React 자체를 쉽게 업그레이드할 수 있도록 하는 데' 라는 말에 집중을 했는데요, 눈에 띄는 변화는 없을 것으로 예상이 됩니다..ㅠ..
2020. 12. 3.
[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
2020. 9. 8.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
2020. 9. 6.
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
[React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel)
슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 캐로셀(Carousel) 입니다! 저도 처음엔 이게 뭔가 하고 Carousel 을 구글에 검색해보았는데 뭔가 무슨 느낌인지 와닿죠!? 아무튼 Carousel 이 올바른 표현입니다😀 + 참고로 슬라이드는 보통 음량조절할때 미는 그런 조절기구를 칭하는 것 같습니다. 아무튼 오늘은 리액트에서 이 캐로셀을 구현, 혹은 이용하는 여러 방법을 알려드리고자 합니다! 1. 직접 구현하기 직접 구현 하는것도 생각보다 어렵지는 않습니다. 슬라이드 모든 컨텐츠를 담을 하나의 Container 를 만들고 Overflow를 hidd..
[React🌌] 리액트 공식문서 함께 읽기 📘 / *️⃣ - 리액트 v17 Update 정리 / 17버전 달라진 점은?!
리액트 v17 Released 2020. 10. 20. 리액트 17버전이 배포가 되었습니다. (ko.reactjs.org/blog/2020/10/20/react-v17.html) 저로서는 어떤 변화가 생겼고, 새롭게 추가된 기능을 사용할 생각에 조금 설레기도 했는데요, 헌데 웬걸? 공식문서 첫 문장이 이렇게 시작하네요 더보기 리액트 17 릴리즈는 개발자-직접적인 기능을 새로 추가하지 않아 이례적이다. 대신 이 릴리스는 React 자체를 쉽게 업그레이드할 수 있도록 하는 데 주로 초점을 맞추고 있다. 저는 '개발자-직접적인 기능을 새로 추가하지 않아 이례적' 이라는 말과 'React 자체를 쉽게 업그레이드할 수 있도록 하는 데' 라는 말에 집중을 했는데요, 눈에 띄는 변화는 없을 것으로 예상이 됩니다..ㅠ..
[React🌌] 리액트 공식문서 함께 읽기 📘 / 4️⃣ - 리액트는 순수함수다 /
순수함수란? 순수 함수는 함수형 프로그래밍에서 자주 사용되는 개념입니다. 함수 중에서도 함수 내부의 명령들을 실행했을 때, 외부에 영향을 주지 않는 함수들을 순수함수라고 하죠. 전역 변수를 건들인다거나, 들어온 input 상태를 바꾼다거나 하면 전부 순수함수가 아닙니다! 함수형 프로그래밍은 input => output / output이 다시 다른함수의 input 으로 => output / 이런식으로 구현이 되기 때문에 함수는 들어온 input 에 맞게 정해진 일을 해서 그에 따른 output 을 내놓아야만 합니다! 순수함수의 예 function sub(n1, n2) { return n1 - n2; } Input인 n1 과 n2 에 따라 정해진 output 을 반환하고, 외부에 전혀 영향을 주지 않기 때문..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..