전체 글43 NextJs를 이용한 SSR / SSG 마스터 하기 - 2 react query로 SSR 구현 일단 루트 파일 useState에 queryClient 저장 set은 갱신될 일이 없기 때문에 필요 없다 hydrate는 처음 봐서 뭔지 잘 모르겠음 서버에서 데이터를 받을 수 있게 해주는 것 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 즉 hydrate가 일어나기전엔 자바스크립트 상호작용 x 컴포넌트 안에다 해놓으면 csr로 해야할지 ssr로 해야할지 알 수 없음 그래서 컴포넌트 밖에다 해줘여 함 getServerSideProsp안에 없으니까 ssr이 안되는 것 저 함수 안에서 동작하게 하기.. 2022. 8. 9. NextJs를 이용한 SSR / SSG 마스터 하기 - 1 NextJs폴더 구조 pages폴더의 api폴더에서 백엔드 처리를 할 수 있다. pages 폴더로 라우팅 처리를 할 수 있다. _app.tsx는 리액트에서 index.tsx와 비슷한 기능을 하는 것 같다 props로 pages폴더에 있는 컴포넌트를 폴더명(도메인)별로 받아서 화면에 띄움 동적 라우팅도 매우 편한 것 같다 파일명에 [id]만 붙이면 가능했다. 나는 리액트면 리액트, 넥스트면 넥스트 문법만 쓸 수 있을 줄 알았는데 넥스트 안에서 리액트도 사용할 수 있는 구조였다. 또한 컴포넌트별로 CSR, SSR, SSG가 가능한 것이 아니라 데이터 통신을 할 떄 즉 api 요청을 할 때 어떤 함수로 하느냐에 따라 CSR, SSR, SSG가 가능한 것이었다. CSR, SSR, SSG 의 차이를 눈으로 확인했.. 2022. 8. 8. MVC 패턴 탄생 배경 - 유지보수를 쉽게 할 수 있는 정형화된 방식의 필요성 대두 Model View controller - 사용자는 View에서 Model에 데이터를 요청 - Model은 View에 해당 데이터를 보여줌 - View와 Model이 데이터를 주고 받기 위해선 Controller을 통해서 주고 받아야만 함 MVC 패턴을 지키는 방법 1. Model은 Controller와 View에 의존하지 않아야 한다. - Model 내부에 Controller와 View에 관련된 코드가 있어선 안된다. 2. View는 Model에만 의존해야하고 Controller에 의존해선 안된다. - View 내부에는 Model에 관련된 코드만 있을 수 있고, Controller에 관련된 코드는 있으면 안된다. 3. View가 .. 2022. 7. 23. 비주얼 스튜디오 코드에서 code 명령을 매번 설치해줘야 하는 경우 해당 게시물은 MAC OS를 기준으로 작성되었습니다. 터미널에서 code . 명령어를 이용하여 해당 디렉토리에 비주얼 스튜디오 코드를 띄우는 방법은 다음과 같다. 그런데 이 기능이 처음에는 잘 작동하다가 재부팅만 하면 명령어가 먹지 않았다. 그럴 때 마다 명령 팔레트에 들어가서 해당 명령을 다시 설치해주었는데 이 과정이 은근 귀찮았다. 한 동안 인터넷을 열심히 뒤져 여러 방법을 시도해보았었는데 별 효과는 없었다. 그러다가 어느 날 스택오버플로우에서 처음 보는 방법을 발견했는데 다음과 같다. 확인해보니 나의 비주얼 스튜디오 코드는 응용 프로그램 폴더에 있지 않았다. 맨 처음 다운로드 했을 때 그대로 다운로드 폴더에 있었는데, 나는 이 것을 그대로 dock바에 올려두고 사용하고 있었다. Visual Stud.. 2022. 4. 29. Recoil을 알아보자 상태 관리 라이브러리의 등장 배경 다음과 같은 상황을 가정해 보자 // src/App.tsx import React from 'react'; import Top from './Top'; function App() { return ; } export default App; App.tsx에서 Top.tsx를 랜더링 하고 // src/Top.tsx // Middle 컴포넌트를 자식으로 가지고 BottomText를 출력해야하는 컴포넌트 import React from 'react'; import Middle from './Middle'; function Top() { return ( Top : {BottomText} ); } export default Top; Top.tsx에서는 Middle.tsx를 랜더링 한.. 2022. 4. 28. 디지털 전송 회선 부호화(Line Coding) - 일련의 2진 비트 데이터를 디지털 신호로 바꾸는 작업 신호 요소 - 디지털 신호의 가장 짧은 단위, 보오(baud) 데이터 요소 - 데이터를 나타내는 가장 작은 단위체, 비트(bit) 데이터 전송률(비트율) - 1초당 전송된 데이터 요소의 갯수 - 단위 : 초당 비트 수 bps 신호 전송률(펄스율, 변조율, 보오율) - 1초당 전송된 신호 요소의 갯수 - 단위 : 보오 baud 회선 부호화의 문제점 기준선 표류 문제 - 복호화시 수신된 신호의 평균을 기준으로 데이터 요소 결정 - 지속적인 0과 1은 기준선을 표류시켜 복호화 과정이 힘듬 직류 성분 - 저주파 성분은 전선 혹은 변압기를 통과 못함 - 직류 성분을 제거하는 것이 필요 자기 동기화 - 발신자와 수신자의 비.. 2022. 4. 25. 이전 1 ··· 3 4 5 6 7 8 다음
