코딩하는 오리🦢

Flutter 프로젝트를 안드로이드 휴대폰으로 직접 빌드를 해보기 위해 flutter run을 실행해보았으나, 갑자기 이런 에러가 나타나며 빌드가 종료되었습니다.FAILURE: Build failed with an exception.* Where:Build file 'C:\Users\user\kwak-21\Flutter\SilentCameraApp\android\build.gradle.kts' line: 16 * What went wrong:A problem occurred configuring project ':app'.> cohttp://m.android.builder.sdk.InstallFailedException: Failed to install the following SDK components..

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..

Flutter는 구글에서 개발한 오픈소스 앱 프레임워크로, iOS와 Android를 모두 지원할뿐만 아니라 초보자도 배우기에 간단하기 때문에 앱 프론트엔드 개발 시 좋은 선택지가 될 수 있습니다.이번 시간에는 Windows에서 Flutter를 개발하기 위한 환경을 설정해보겠습니다.1. Android Studio 설치 Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio to..