What I studied

프론트에서 간단하게 api 테스트를 하기 위해 노드 서버를 사용했는데, 노드몬을 사용해 node 서버를 띄울 예정이었다. 먼저 노드 서버를 세팅할 폴더를 만들어준 후 그 안에서 서버를 세팅할 예정. 이렇게 하면 최종 api가 나오기 전에 미리 테스트를 해볼 수 있어 좋은 것 같다. 1. 폴더 만든 후 npm 셋팅 먼저 폴더를 만들어준 후, 해당 경로 안에서 npm init -y를 입력해주면 node_modules 폴더가 생성된다. 그 후, npm install을 실행하면 package.json 파일까지 생성된다. $ mkdir nodeServer $ cd nodeServer $ npm init -y $ npm install node_modules와 package.json가 생성되었다면 express와 n..

리액트를 공부하다 Vue로 넘어오면서 초기 셋팅부터 기본적인 설정까지 해보게 되었는데, vite + vue3 프로젝트를 먼저 셋팅해준 후, ESLint와 prettier 설정까지 마무리했다. 이 글은 내가 보기 위해 정리하는 것이다. 리액트와 관련된 라이브러리는 많이 사용해서 알고 있었지만 Vue는 처음이다보니 Vue와 관련된 것들은 모두 생소했다. 그래서 어떤 것들이 필요하고 어떤 것들이 사용되는지부터 차근차근 알아보면서 적용해보려고 한다. 1. Vite 란? Vite는 Webpack과 같은 빌드 도구인데 웹팩을 사용할 때보다 빠른 속도로 빌드된다는 장점이 있어 많은 주목을 받고 있다. 기존까지는 없었던 프론트엔드 개발 경험을 향상시켜줄 새로운 프론트엔드 툴인 것이다. 기존에는 원래 Vue 전용이었지만..

vue의 state 흐름이 어떻게 이루어지 알아보기 위해 간단하게 CRUD를 구현할 수 있는 TodoList를 만들어봤다. 리액트는 useState를 통해 상태를 업데이트할 수 있었는데 vue와는 어떤 차이가 있을지도 궁금했다. 공식 문서를 보면 프로젝트를 시작하는 방법부터 자세하게 나와있어서 차근차근 따라해보았는데 생각보다 크게 어렵지는 않았던 것 같다. 1. Vue 프로젝트 시작하기 npm init vue@latest 해당 명령어를 입력하면 아래와 같이 옵션을 선택할 수 있는데, 내가 원하는 상황에 맞게 옵션을 선택해주면 빠르게 만들 수 있다. 나는 router 설정과 Eslint, prettier 옵션을 선택한 후 프로젝트를 생성했다. ✔ Project name: … ✔ Add TypeScript?..

Vue 프로젝트를 처음 만들어 이것저것 실행을 시켜보니 정말 많은 에러를 만날 수 있었다. 처음에 리액트를 사용했을 때도 그랬던 것 같은데 Vue도 처음이니 이럴 수 밖에 없는 것 같다..? 처음에는 App.vue 파일에서 count 함수를 실행시키고 조건문과 반복문을 사용하는 정도로 실행을 시켜봤는데, 두번째 단계인 컴포넌트 생성에서 에러를 만났다. 컴포넌트 폴더 안에 Fruit.vue 라는 파일을 생성했는데... 화면이 안보인다... ESLint가 화면을 막아버렸다. 뭐가 문제인걸까 에러 로그를 쭉 읽어보니 error Component name "Fruit" should always be multi-word 라는 문구가 눈에 띄었다. 컴포넌트의 이름은 항상 multi-word여야한다? 뭔소리지? Us..

매번 리액트만 공부하다가 vue로 만든 프로젝트는 어떻게 동작하는지 궁금해서 vue를 설치해봤다. vue는 공식문서도 잘 되어있어서 보고 따라하기 어렵지 않았는데, cdn을 통해서 설치하거나 npm, CLI 등의 방식으로 프로젝트를 시작할 수 있는 것 같았다. 그래서 위 방법 중 npm 설치를 통한 프로젝트 시작과 CLI 방식을 통한 프로젝트 시작 두가지를 시도해보았는데. CLI 방식을 위해 글로벌로 패키지 설치를 시도했는데 바로 에러가 발생했다. $ npm i -g @vue/cli 에러 로그는 다음과 같다. npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 ..

프로젝트의 규모가 작다면 별로 불편함을 느끼지 않겠지만, 프로젝트의 규모가 커지면서 파일의 상대경로 셋팅에 불편함을 느끼게 된다. 폴더 속에 폴더.. 폴더 속의 폴더 속의 파일 등등 이런식으로 끝도 없이 들어가는 경우가 발생하기에 아래와 같은 상황을 겪게 된다. ../../../pages/main/LandingTop ../../../pages/main/LandingMiddle ../../../pages/main/LandingBottom 이렇게 계속해서 ../을 쳐야하는 상황이 발생한다. ../../../../../ ....... 우리가 프로젝트를 진행하다보면 pages라는 폴더만 있는 것이 아니기 때문에, assets, components, utils 등등 다양한 폴더와 파일의 경로가 생기게 되는데 이를..

백엔드쪽에서 마크다운 언어로 내려주는 데이터를 화면에 예쁘게 보여주기 위해서 방법을 검색해봤는데 생각보다 어렵지 않았다. 리액트에서 마크다운을 예쁘게 로드시켜주는 npm 라이브러리가 존재했기 때문! 리액트 마크다운 npm 설치 npm install react-markdown 설치 후, 사용하기 언제나 그렇듯 npm 설치를 마쳤다면 사용을 위해 import를 해주어야한다. import ReactMarkdown from 'react-markdown' import를 해줬다면 바로 사용하면 된다. import React from "react"; import ReactMarkdown from 'react-markdown' const ServerLawModal = (props) => { const { data } ..

이제 본격적으로 포트폴리오 웹 사이트를 만들어보기 위해 새로운 개인 프로젝트를 시작하는데 React에 타입스크립트를 더하여 구현해보려고 한다. 디자인부터 화면 기획 등 모두 직접 할 예정이며, 나에 대한 모든 것을 담을 수 있는 포트폴리오 사이트를 완성해보고자 한다. 그래서 오늘은 기본적으로 React CRA에 타입스크립트 초기 셋팅을 해봤다. 타입스크립트 CRA 가장 먼저 기존에 타입스크립트 없이 CRA 했던 방식 그대로 터미널에 입력하면 된다. npx create-react-app my-app --template typescript yarn을 사용한다면 아래와 같이 입력하면 된다. yarn create react-app my-app --template typescript CRA 완료 후 정상적으로 C..

리액트를 사용하며 체크박스 전체선택, 선택 해제 등을 구현했다. 약관동의 체크박스와 표에서의 체크박스 전체 선택. 생각보다 오래 걸렸던 기능이기도 한데 실제로 여러가지를 찾아보면 크게 어렵지 않은 것이었던 것 같다. 약관동의 체크박스 가장 처음으로 여러 블로그를 뒤적이면서 약관동의 체크박스 구현에 대해 알아보게 되었다. 약관동의 화면의 경우 약관동의 자세히 보기를 클릭했을 때 팝업으로 보여줄 것인지, 아니면 아래로 열리는 창을 만들어줄 것인지 등에 대해서 고민을 할 수밖에 없었다. 그 후 ui 구현이 끝난 후 약관 동의 체크박스에서 전체선택, 선택동의 등의 기능을 구현했다. 약관동의 박스 필수 조건은 아래와 같다. 1. 각각의 약관 체크박스를 클릭했을 때 체크 선택 2. 모두 동의합니다 체크시 전체 체크..

프로젝트 규모가 작아 전까지는 크게 리덕스와 같은 전역상태관리 툴을 상요할 필요가 없었는데 필요한 데이터가 많아지다보니 상태관리를 효율적으로 할 필요가 있어 리덕스를 도입하게 되었다. 하지만 예전에 사용했던 것과 달리 react-router-dom 버전이 업그레이드 되면서 redux를 사용하며 history를 사용할 수 있게 해주었던 connect-react-router 연결이 어려워졌다. connected-react-router 를 깔아 아무리 적용하려고 해도 계속해서 에러가 나서 다시 npm 문서를 확인해봤다. 원인은 connect-react-router은 react-router v4, v5에서만 지원하기 때문에 그랬던 것. connected-react-router A Redux binding for..