그럼에도 불구하고

PropTypes를 이용하여 리액트 컴포넌트의 유효성을 검증하는 방법에 대해 알아보겠습니다. 목차 [ 속성의 유효성 검증 방법 ] 리액트 컴포넌트의 유효성을 검증하는 방법은 여러 가지가 있습니다만 타입스크립트를 사용한다면 타입스크립트의 정적 타입 지원 기능을 이용할 수 있습니다. 이 방법은 컴파일(빌드) 시에 타입을 검사하며, IDE를 통해서 코드 자동완성 기능을 지원받을 수 있습니다. 또 다른 유효성 검증 기능으로는 PropTypes가 있습니다. PropTypes는 리액트가 지원하는 기능이며, 컴파일할 때가 아닌 실행 중에 속성에 대한 유효성 검증을 수행합니다. 따라서 속성으로 전달하는 값과 타입에 따라 경고를 발생시킵니다. 일반적으로는 타입스크립트의 정적 타입을 이용한 유효성 검증만으로도 충분하지만,..

dangerouslySetInnerHTML에 대해 알아보겠습니다. 다음과 같이 msg에 "Hello World"를 넣고 react를 실행시켰습니다. HTML 삽입 미리보기할 수 없는 소스 출력되는 화면 실행한 서버에서 웹 브라우저의 개발자 도구를 열고 콘솔 화면에서 다음과 같이 스크립트를 실행해 보겠습니다. 브라우저 화면에서 태그의 문자열이 그대로 출력됐습니다. 그 이유는 웹 애플리케이션에서 흔히 발생하는 XSS(Corss Site Scripting) 같은 공격에 대비하기 위해서 가 로 HTML 인코딩 됐기 때문입니다. 만일 HTML 마크업 형태의 값을 보간하려고 한다면 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 dangerouslySetInnerHTML 특성을 사용하는 것입니다. [ d..

오늘은 Vite에 대해 알아보겠습니다. [ Vite란? ] Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다. Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오..

📌 ls list의 축약어이며, 현재 디렉터리 또는 폴더에 있는 콘텐츠를 나열하는 명령어 + ls - a : 숨어있는 파일까지 전부 다 보여줌 📌 open 현재 파일이 있는 경로상의 폴더를 열어준다. 📌 pwd 현재 작업하고 있는 디렉토리를 출력하는 명령어 📌 cd 경로를 옮겨 다닐 수 있는 명령어 📌 touch 파일을 생성해주는 명령어 touch test.js 📌 mkdir 폴더를 생성해주는 명령어 📌 rm 파일을 삭제해주는 명령어 ( 파일을 영구적으로 삭제함, 휴지통을 거치지 않음 ) 📌 rm -rf 폴더를 삭제해주는 명령어 ( 폴더를 영구적으로 삭제함, 휴지통을 거치지 않음 )

npm 패키지 매니저와 설치모드에 대해 알아보겠습니다. npm install, yarn add 명령어는 Node.js 패키지(라이브러리)를 설치할 수 있는 명령어입니다. 설치 모드는 크게 네 가지입니다. 📌 npm install [패키지명1] [패키지명 2] npm install [패키지명1] [패키지명2] 이 명령어는 '로컬 모드'로 설치합니다. 로컬 모드는 현재 디렉터리의 node_module 디렉터리에 패키지를 설치하는 것입니다. 📌 npm install -g [패키지명 1] [패키지명 2] npm install -g [패키지명1] [패키지명2] -g 옵션은 패키지를 전역(global)에 설치합니다. 전역으로 설치한 패키지는 현재 컴퓨터 내의 모든 프로젝트에서 이용할 수 있습니다. 📌 npm in..

Git과 GitHub의 차이점에 대해 알아보겠습니다. [ GIt vs GitHub ] Git과 GitHub는 밀접한 관련이 있지만 같은 것은 아닙니다. 📌 Git Git은 버전관리 소프트웨어이고 누군가의 컴퓨터에서 실행됩니다. 제 컴퓨터에서 실행될 수도 있고, 여러분의 데스크톱에서 실행될 수도 있습니다. 하지만, 인터넷은 필요하지 않습니다. 프로그램이 없으면 다운로드해서 컴퓨터에서 사용하면 됩니다. 인터넷이 없어도 깃을 사용할 수 있는데, 마치 텍스트 에디터나 MS Word, Excel과 같은 문서 프로그램을 사용하는 것과 마찬가지입니다. 인터넷도 필요없고, 회원가입을 할 필요도 없습니다. 즉, 아무 때나 문서를 작성할 수 있습니다. 📌 GitHub GitHub는 웹서비스 입니다. 그리고 GitHub는 ..

Git에 대해 알아보겠습니다. [ Git이란 무엇인가? ] Git을 버전관리 시스템으로 알려져 있고, VCS로 줄여서 말하기도 합니다. 유일한 VCS는 아니지만, 전 세계에서 가장 인기 있는 버전관리 시스템입니다. 버전관리는 파일의 변화를 시간에 따라 추적하고 관리하는데 도움을 주는 소프트 웨어입니다. 어마어마한 소스 코드와 수천 개의 파일 그리고 엄청난 수의 개발자들이 있는 페이스북이나 구글 같은 회사를 생각해 보면, 그들은 모두 병행해서 작업을 하고 있고 매일매일 변화를 만들어내고 있습니다. 그런 변화들을 추적하고 조합하며 때론 되돌리기도 하는데, 그것이 바로 깃같은 버전관리프로그램의 역할입니다. 대부분의 버전관리시스템은 이전 버전의 파일을 다시 볼 수 있게 해주고 버전들 간의 또는 파일들 간의 변화..

quill Editor에서 bold 체와 italic 체가 적용 안 되는 에러에 대해 알아보겠습니다. 📌 전체 코드 HTML 삽입 미리보기할 수 없는 소스 📌 quill HTML 삽입 미리보기할 수 없는 소스 결론적으로 text를 작성하는 화면에서는 bold채와 italic 체가 적용되었지만 게시글이 작성된 후에 게시글 리스트에서 보이는 게시글에는 bold 체와 italic 체가 적용되지 않았습니다. 📌 게시글 작성 화면 📌 게시글 리스트 화면 HTML 삽입 미리보기할 수 없는 소스 코드에 아래와 같이 추가하여 해결하였습니다. var bold = Quill.import('formats/bold'); bold.tagName = 'b'; Quill.register(bold, true); var italic ..

오늘은 Server Side Rendering에 대해 알아보겠습니다. [ Server Side Rendering (SSR) ] 서버사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 UI를 서버에서 렌더링 하는 것을 의미합니다. 즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 📌 서버 사이드 렌더링의 장점 서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 ..

.gitignore가 작동하지 않을때 대처하는 법에 대해 알아보겠습니다. .gitignore가 제대로 작동되지 않아서 .gitignore에 게시된 파일이 github에 계속 올라가 있는 경우가 있습니다. git의 캐시가 문제가 되는거라 아래 명령어로 캐시 내용을 전부 삭제 후 다시 add All해서 commit하면 됩니다. git rm -r --cached . git add . git commit -m "fixed untracked files" ref: https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git

useNavigation과 useSubmit에 대해 알아보겠습니다. [ useNavigation ] useNavigation은 useNavigate와는 다릅니다. 헷갈리면 안 됩니다. :) 예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 즉, 현재 폼에 대한 정보를 받을 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 폼 제출 시 true를 받는 상수를 선언 후 HTML 삽입 미리보기할 수 없는 소스 return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다. 혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소..

useFetcher에 대해 알아보겠습니다. [ useFetcher ] HTML/HTTP에서 데이터 변형 및 로드의 경우 또는 탐색으로 모델링 됩니다. 둘 다 브라우저에서 탐색을 유발하며, 이는 React Router에서 와 에 해당합니다. 그러나 때로는 탐색 외부에서 로더를 호출하거나 URL을 변경하지 않고 작업을 호출(혹은 유효성을 다시 검사할 페이지의 데이터 가져오기)을 원할 수 있습니다. 또는 동시에 여러 변이를 수행해야 할 수 도 있습니다. 이럴 때 useFetcher 훅을 사용하면 UI를 작업 및 로더에 연결할 수 있습니다. 이 기능은 데이터 라우터를 사용하는 경우에만 작동합니다. 그리고 useFetcher는 다음과 같은 경우에 유용합니다. 1. UI 경로와 연결되지 않은 데이터 가져오기 (팝오..