AI Platform / Web

이 글을 읽는 사람은 frontend과 backend의 차이에 정도는 알고 있을 것이다. 그리고 client인 frontend에서 server인 backend로 요청을 보내면 응답을 받는 부분도 알고 있을 것이다. 예를 들면, react에서 spring으로 요청을 보내면, 응답이 오는 것과 같다. 그렇다면, server에서 client로 바로 요청을 보내는 방법 없을까? 이러한 방법을 해결하기 위해서 나온 것이 바로 Websoket이다. Websoket은 상호 간의 데이터를 전달할 수 있어서, 카카오톡과 같은 채팅이나 영상회의 같은 것들을 구현할 때 사용이 가능하다. 이 글을 통해 WebSoket에 대해 알아보고, Websoket과 Socket.io의 차이에 대해서도 알아보도록 하자. WebSoket과 ..

window에서 nodejs 설치와 환경변수 설정을 해보자. 기본적으로 nodejs는 아래의 홈페이지에서 설치를 한다. nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치할 수 있는 선택이 LTS와 현재버전으로 두가지가 있다. LTS 버전은 비교적 옛날 버전으로 안정화된 버전이다. 따라서 현업에서는 LTS 버전을 많이 받아서 사용한다. 반면에 현재버전은 현재 개발된 버전으로 사실 둘 다 써도 상관없다. 현재 버전이 미래에 LTS버전이 된다. 그렇기 때문에 혼자 프로젝트를 한다면 현재버전을 받고, 아니라면 LTS 버전을 받자. 설치..

위의 에러나 났다면, 간단히 crossorigin을 crossOrigin으로 변경해주면 된다. html의 태그에 class를 className이라 적는 것과 같은 에러라고 생각하면 된다. 기본적으로는 build가 잘 안 될 수 있기 때문에 변경해주고 다시 build를 하면 실행이 될 것이다. // 변경전 // 변경후 crossOrigin으로 변경을 하면 위의 Error는 발생하지 않는다.

Error: Do not use the HTML tag to navigate to /urlencode/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages Nextjs 에서 빌드 시 발행하는 에러에 대한 해결책을 적어보고자 한다. 에러의 내용을 보면 a태그를 next/link로 변경하라는 내용으로 해석된다. 사실 link 태그로 변경하면 된다. 그러나 공식문서에 나와있는 내용을 통해 조금 더 디테일하게 정리해보고자 한다. 기본적으로 Nextjs에서는 Single Page app 경험을 제공한다. 따라서 단순히 HTML의 a태그를 사용하면, 페이지가 새로고침 되기 때문에 client-s..

javascript를 하다 보면 인코딩과 디코딩에 대하여 알아야 할 시기가 온다. ASCII 인코딩, URL인코딩, HTML 인코딩, Base64 인코딩에 대한 개념을 이해해 보자. 그리고 javascript에서는 encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() 함수를 통해 인코딩과 디코딩을 실습해보자. 그렇다면 각각 하나씩 알아보자. 인코딩이란 우리는 컴퓨터를 사용하고 있다. 그런데 컴퓨터는 우리가 사용하는 언어를 이해하지 못한다. 따라서 컴퓨터에게 명령을 내리기 위해서, 컴퓨터가 이해할 수 있도록 0과 1로 변경하는 과정이 필요하다.(쉽게 말하면 문자를 바이트로 변환한다라고 생각해도 된다.) 이러한 변환을 인코딩이라고 한다. ..

SSR, SSG, CSR에 따라 Nextjs로 데이터를 방법에 대해 하나씩 알아보자. 기존의 react는 CSR방식으로 useEffect를 사용했다면, react의 프레임워크인 Nextjs에서는 getStaticProps , getStaticPaths, getServerSideProps 활용하여 데이터를 가져오는 방법에 대해 하나씩 알아보자. Nextjs의 각각의 페이지는 .js, .jsx, ,tx, ,tsx,파일인 리액트 컴포넌트이고 각각의 페이지는 파일 이름과 관련이 있다. 예를 들면 pages/about.js를 아래와 같이 만들었다고 하자. function About() { return About } export default About 그러면 아래의 리액트 컴포넌트는 /about 로 브라우저 접근..

nextjs를 통해 react를 포함시켜 시작하는 방법에 대해 알아보자. react로 Client side rendering(CSR)을 Server side rendering(SSR)로 변환하기 위해 많이 넘어온다. nextjs는 SSR 말고도 SSG나 serverless에도 최적화되어있다. 이러한 Nextjs를 시작하는 것은 환영받을 일이 맞다. Next.js는 react라이브러리를 활용한 프레임워크다. 따라서 react과 다른 기초 지식이 없다면, 시작하기 힘들다고 할 수 있다. 관련 내용은 아래의 url을 참고하여 보고오자. [Web/nodejs] - nodejs 기초 총 정리 nextjs 프로젝트 생성 > npx를 통해 프로젝트를 생성한다. $ npx create-next-app@latest np..

react로 구현을 하다보면, useState를 활용하여 데이터를 저장하고 수정한다. state란 한국어로 상태이다. 즉, 이러한 상태관리인 데이터관리를 효율적으로 하는 방법에 대해 알아보자. 당연한 말이지만, 상태 설계는 개발자마다 중요하게 생각하는 부분이 다르기 때문에 정답은 없다. 그리고 상태 설계는 한번 설계되어 프로젝트가 진행되면 고치기가 쉽지 않다. 따라서 상태 관리에 대한 많은 고민을 하고 프로젝트를 시작해야한다. 잘못된 상태 설계는 성능 이슈는 물론 유지보수 관점에서도 큰 영향을 끼친다. 우선은 리액트를 기준으로 상태 관리에 대해 적어보려한다. 기본적으로 redux를 사용하지 않으면 우리는 데이터를 props로 컨포넌트간에 전달을 시켰다. 이러한 데이터는 전달된 컴포넌트에 국한 되어 영향을..