AI Platform / Web

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로 컨포넌트간에 전달을 시켰다. 이러한 데이터는 전달된 컴포넌트에 국한 되어 영향을..

블로그 이전 및 변경 페이지https://blog.han-py.com/language/ko/nodejs/introduction     Backend 백엔드에서의 Nodejsexpress를 활용한 웹 서버에 관한 부분이다. npm을 활용한 프로젝트가 아닌 nodejs 자체의 서버를 이해하려면, 아래의 nodejs 설명 부분을 참고하자. express 기초> [제작중] 처음 웹서버를 만드는 사람을 위한 nodejs express 기초 개념  [Nodejs/express] 핵심 기초 정리> express와 MySQL연결, express 파일 구조 설명, mybatis 연결,  nodemon, cors, 아키텍처를 포함한 광범위한 범위를 다룬다. 위의 내용만 익혀도 기초는 넘기기 가능하다. [Nodejs] 따라..

Nodejs환경에서 express와 mongodb를 활용하여 백엔드 프로젝트를 만들어 보겠다. 아래의 내용을 따라 적기만 하면 몸고db 연결이 될것이다. 시작해보자! 만약 프로젝트에 관한 전반적인 지식이나 frontend와 backend를 동시에 만들고 있다면, 아래의 링크인 nodejs 총 정리를 참고하면 많은 도움이 될것이다. [Web/nodejs] - nodejs 기초 총 정리 > frontend, backend를 포함한 nodejs 총 정리 VScode를 활용하여 기본 셋팅을 준비한다. 아무것도 없는 환경에서 시작해 보겠다. 설치 위와 같이 yarn 설치를 했고 필요한 설치들을 했다. 아래와 같이 순차적으로 인스톨을 해준다. npm i yarn -g yarn add express cors mong..

DFS (깊이 우선 탐색) DFS 깊이 우선 탐색은 코딩테스트에서 기본적으로 알아야한다. DFS란 말 그대로 깊이를 우선적으로 탐색하는 방법이다. 좀 더 쉽게 말하면, 갈림길이 있다면 한방향으로 끝까지 간 후에 답을 확인하는 과정을 반복한다. 따라서 재귀함수를 기본적으로 이해를 해야한다. 재귀함수관련 내용은 아래의 링크를 확인하자. 사실 그런말이 있다. DFS는 스택(stack)를 이용하고 BFS는 큐(Queue)를 이용한다. 그리고 DFS에서 스택을 쓸 수 있다고 할 수 있지만, 이는 원론적인 개념에 대한 이야기이고, 코딩테스트에서는 보통 재귀를 쓴다. 우선 비선형 구조에 대해 간단히 알아보고 DFS를 마스터 해보자. https://han-py.tistory.com/224 [python] 재귀함수(re..