개발/react 생태계 썸네일형 리스트형 c와 node.js tcp통신 -(2) 이전 포스팅에서 c언어로 개발된 back-office와 tcp 통신을 하는 과정을 다뤘습니다. 잘려서 오는 byte를 다루는 library를 만들기 위해서는 1) 총길이가 12300byte일 경우 세번째로 자르면 4025byte 나 4023byte 혹은 그 이외 값으로 자르는지 2) 위 과정이 출금 내역조회인데, 다른 계좌로 출금 내역 조회시 4025byte나 4023byte로 자르는지 3) 입금내역 조회시에도 4025byte나 4023byte로 자르는지 위 세가지 조건을 확인해야했는데요. 코드를 더 파보니 4024byte로 back-office에서 임의적으로 자르고 있었습니다. 뭐 tcp가 자르든, back-office에서 자르든 일단 잘려서 오니 library개발을 진행했습니다. (참고로 tcp 기본.. 더보기 c와 node.js tcp통신 연구소에서 프로젝트를 진행하던중 c언어로 개발된 back office와 통신할 경우가 생겨, node로 tcp 통신을 진행해야했습니다. net 모듈을 이용하면 되는데, 사용법은 아래와 같습니다. const net = require('net'); var client = new net.Socket(); var socket = client.connect({port: process.env.API_PORT, host: process.env.API_HOST}); //API_PORT: remote server port //API_HOST: remote server host socket.write(input) //메세지 전송 socket.on("data", (socket_res) => { console.log(sock.. 더보기 styled component in next.js cra(create-react-app)에서는 컴포넌트에 css파일을 import해 style을 적용할수가 있었습니다. 하지만 next.js에서는 바로 적용시키기가 어려웠습니다. 그래서 오늘은 component에 style 파일을 적용시키는 방식을 소개할까 합니다. 1. @zeit/next-css // next.config.js const withCSS = require('@zeit/next-css') module.exports = withCSS() @zeit/next-css을 install하고, 위 코드가 작성된 next.config.js파일을 상위 디렉토리에 위치시키면 component에 js나 css파일을 import할수가 있습니다. * 개인적인 경험으로 이 방식은 build과정에서 에러를 발생시킨적.. 더보기 Unhandled Runtime ErrorError: React.Children.only expected to receive a single React element child next.js 서버를 커스터마이징해 개발을 진행할때 아래 에러가 뜰때가 있습니다. 'Unhandled Runtime Error Error: React.Children.only expected to receive a single React element child.' react는 싱글 react element를 가..... 머라는거지? 코드는 아래와 같습니다. server.get("/sign", async (req, res) => { const actualPage = '/Sign' const queryParams = { "data": data } app.render(req, res, actualPage, queryParams) }) component구조가 문제같아 rendering하고자하는 pages아래 .. 더보기 getStaticProps와 getServerSideProps in next.js 오늘은 next.js에서 data fetching 방식인 getStaticProps, getStaticPaths, getServerSideProps중 getStaticProps와 getServerSideProps에 대해 보도록 하겠습니다.(getStaticPaths은 거의 써본적이 없습니다;;) 구버전 next에서는 data fetching을 getInitialProps으로 진행했는데, 9.3부터는 getStaticProps, getStaticPaths, getServerSideProps으로 나뉩니다. getStaticProps docs정의: Fetch data at build time, pre-render for Static Generation 빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다. .. 더보기 next.js란? (next.js 서버 커스터마이징) 100% csr인 cra(create-react-app)으로 개인 프로젝트를 진행하다, next를 알게되었습니다. cra로 개발중에 데이터 관리를 redux store로 진행했는데, front와 back의 데이터 관리가 완전히 분리되 많이 불편했습니다. (로그인 state 값 설정시 front와 back모두 데이터를 가져야 한는 경우) 그래서 react 생태계에서 ssr 방식을 찾았고 next.js를 알게 되었습니다. docs에 적혀있는 공식적인 이용 방식은 'npx create-next-app' 을 이용해 next frame을 다운받고, package.json의 next용 script(build, start)를 이용해 개발하고 배포합니다. "scripts": { "dev": "next", "build".. 더보기 csr(client-side-render)와 ssr(server-side-render)차이 서버에서 렌더링을 해주는 ssr방식은 화면이동간 깜빡깜빡거리는 끉김이 있어 사용자 편의성이 떨어집니다. 페이지 이동이 매우 부드러운 앱의 등장으로 웹 생태계도 발전이 필요했고, spa(single-page-application)이 등장하게 됩니다. spa는 주로 csr(client-side-render)방식으로 client측에서 렌더링을 해줍니다. 클라이언트에서 스크립트를 통해 html태그들을 떼었다 붙이죠. 하지만 csr방식은 초기로딩속도가 너무 느리고, seo가 약하다는 단점이 있습니다. ssr: @ SEO(검색 엔진 최적화) good @ 초기로딩 속도 빠르다 @ 서버에서 렌더링 csr: @ SEO(검색 엔진 최적화) bad @ 초기로딩 속도 느리다. @ 클라이언트에서 스크립트로 렌더링 *렌더링 =>.. 더보기 node.js와 next.js가 눈에 들어온 이유 react에서는 효율적인 state관리를 위해 redux를 사용합니다. 특히 cra(create-react-app)은 서버와 완전히 분리되 state를 따로 저장할 redux같은 store 개념이 필수입니다. 하지만 프로젝트를 진행하면서 front, back을 모두 만지다보니 store가 많이 불편했습니다. 예를들어 로그인 로직만 해도, front와 back이 완전히 분리되어있어 변수가 더 늘어나고, 코드를 두번짜 유지보수가 쉽지 않았습니다. (물론 대규모 프로젝트시 역할분담으로 해소할수도 있습니다.) 좀더 편한 방식을 찾던중 ssr방식의 next.js를 알게 되었고, 써보니 제 갈증을 해결해주더라고요! 그래서 이제부터는 next.js와 node.js도 함께 작성하려합니다. 감사합니다. 더보기 이전 1 2 3 4 5 6 다음
