코딩하는 오리🦢

BOJ에서 제출 목록을 불러온 뒤, 제출 코드를 웹에서 미리보기하는 기능을 구현하기 위해 다양한 방법을 찾아보았습니다. 특히 에디터 창에서 보는 것처럼 테마가 적용된 형태로 보여주면 가독성이 훨씬 좋아지므로, 코드 하이라이터를 적용하여 좀 더 깔끔하게 표현해보기로 결정했습니다.이 글에서는 React 환경에서 react-syntax-highlighter를 이용해 코드에 하이라이팅 기능을 구현하는 방법을 소개합니다.react-syntax-highlighter 설치하기하이라이팅 기능을 사용하기 위해서는 먼저 react-syntax-highlighter를 설치해줘야 합니다.작업하고 있는 프로젝트 위치에서 터미널을 열어 아래 명령어를 실행시켜 줍니다.npm install react-syntax-highlighte..

열심히 BOJ-AutoSync 프로젝트를 진행하며 tailwind를 통해 디자인을 적용해보려 했지만, 문제가 발생했습니다.열심히 작성한 React 코드가 전혀 웹 브라우저에서 동작하지 않아 html 문서 그대로 보인다는 점이었습니다😰 이번 포스팅에서는 Tailwind CSS를 설치하고 반영하는 방법에 알아보겠습니다. Tailwind CSS 설치 여부 확인하기프로젝트 루트 위치에서 터미널을 열어 npm list tailwindcss을 입력해 Tailwind CSS가 설치되어 있는지 확인해봅니다.확인해본 결과, 제 경우에는 이미 잘 설치가 되어 있는 상태였습니다. 만약 그렇지 않다면, 아래 명령어들을 순차적으로 실행해 Tailwind CSS를 설치해줍니다.npm install -D tailwindcss p..

Node.js LTS 설치하기 Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org위의 링크를 눌러 Node.js 공식사이트에 접속하여 LTS 버전을 다운로드해줍니다.LTS 버전이란?Long-Term Support의 줄임말로, 장기적이고 공식적으로 지원되는 버전을 의미합니다. 최신 버전의 경우 아직 해결되지 않은 버그나 버전 충돌이 발생할 수 있기에 최신 버전을 설치하는 것보다 LTS 버전을 설치하는 것이 바람직할 수 있습니다! 설치된 LTS msi 파일을 실행해 설치를 진행해줍니다. 설치 마법사에서 환경 변수 추가까지 다뤄주기 때문에 특별히 환경 변수를..

이전에 React를 공부해보려는 생각으로 노드를 설치했었던 적이 있는데, 막상 다시 개발을 해보려고 npm start를 실행해보니...고심 끝에 노드 자체를 삭제했다가 새로 설치하기로 했습니다😂 제어판에서 Node.js 삭제하기제어판 앱 및 기능에 들어가 Node.js를 찾아 제거를 해줍니다. Node 관련 캐시 폴더 삭제하기파일 탐색기에서 `C:\Program Files`와 `C:\Users\사용자이름`에서 nodejs, npm, nvm 관련 폴더들을 모두 삭제해줘야 합니다. 아래 경로 중 해당되는 폴더가 있으면 모두 삭제해 줍니다.C:\Program Files\nodejsC:\Users\사용자이름\AppData\Roaming\npmC:\Users\사용자이름\AppData\Roaming\npm-cac..