개발 & IT 정보

Visusal Studio Code 설치와 Create-react-app 생성 수익형 웹사이트에 꽂혀서 MBTI 테스트 사이트를 만들어볼 것이다. 노트북이 고장 나서 친구 컴퓨터로 해야 되는데, 세팅부터 차근차근해보도록 한다. node 설치 node가 설치 안되어 있다면 아래 다운로드를 눌러 설치한다. (필수) https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code 설치 우선 개발에 필요한 Visual Studio Code를 설치해 본다. VSC 설치는 이곳에서 할 수 있다. https://cod..

간단한 모양을 svg 코드로 만들어보고, 코드를 티스토리에 삽입하는 방법입니다. 1. ChatGPT 사이트에 들어갑니다. https://chat.openai.com 회원가입이 안되어 있다면, 회원가입 및 로그인을 합니다. 2. '원하는 모양'을 svg 코드로 만들어줘 라고 요청합니다. +New Chat을 먼저 눌러주고, 아래 입력란에 '__을 svg코드로 만들어줘'라고 보냅니다. TIP: 요청내용이 구체적일 수록 좋습니다. ex) 빨간색 별모양을 svg코드로 만들어줘 👇🏻생성된 코드👇🏻 3. 티스토리 글 작성 항목에서 '기본모드'를 'HTML' 으로 변경합니다. 4. HTML 모드에서 svg 코드를 삽입합니다. 미리보기를 해보면 아래와 같이 빨간색 별모양이 나오는 것을 확인할 수 있습니다. 👇🏻별 모양👇🏻

알고리즘 문제 사이트 3곳 추천드립니다. 1. 프로그래머스 https://school.programmers.co.kr/learn/challenges?order=recent 코딩테스트 연습 | 프로그래머스 스쿨 개발자 취업의 필수 관문 코딩테스트를 철저하게 연습하고 대비할 수 있는 문제를 총망라! 프로그래머스에서 선발한 문제로 유형을 파악하고 실력을 업그레이드해 보세요! school.programmers.co.kr javascript, c언어 등 다양한 언어로 알고리즘 문제를 풀 수 있고, 기초 알고리즘 문제와 자주 틀리는 알고리즘 문제를 카테고리별로 선택할 수 있다. 뿐만 아니라 과제테스트 연습도 제공하고 있어서, 취업 준비하는 분들께 유용한 사이트이다. 장점 난이도, 유형 별 카테고리가 잘 정리되어 있..

호스팅이란? 인터넷을 통해 웹사이트나 애플리케이션을 온라인으로 접속할 수 있게 만들어주는 서비스. github에서 제공하는 무료 호스팅 서비스를 이용하는 법 1. New Repository 로 새 저장소를 만든다. 더보기 Create a New Repository 항목 설명 Repository name: 저장소(프로젝트) 이름 Description: 저장소 설명(옵션) Public은 내 저장소를 공개로 하는 것이고, Private는 비공개 생성한 repository에 완성된 소스코드를 build하여 업로드 2. Setting > Pages 로 가서 Branch를 None에서 master 또는 보여주고 싶은 지점의 브랜치를 설정한 후 Save클릭 위의 사진처럼 Your site is published at..

목차 문제 CKEditor 에디터 설치 후 추가 plugin을 나온 이슈 원인 기존의 플러그인과 새로 설치한 plugin간에 버전 충돌이 일어난 것 같다. 앞으로 추가할 기능이 없어, CKEditor 5 파일을 직접 다운로드하여 사용해 보기로 한다.\ 참고 링크 https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules Error codes | CKEditor 5 Documentation Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, cus..

문제 Next에서 scss 사용하던 중, 자동으로 생성되는 mui클래스에 스타일 적용이 안됨 SCSS SCSS을 특정 파일에 미리 정의한 스타일을 적용하기 위해 classnames bind함수를 사용하였다. 기본적으로 module.scss을 사용한다면 아래처럼 객체형으로 적용할 수 있다. import styles from './PopoverStyle.module.scss'; 하지만 class name이 camelCase가 아니면 오류가 발생한다. 그래서 classnames bind함수를 사용하였다. 방법1 import styles from './PopoverStyle.module.scss'; import classNames from 'classnames/bind'; const cx = classNames..

목차 Expo Api 정리 (React Native) React Native 입문 단계에서 적용해본 API를 정리하는 글. 주의 : 간단하게 작성된 문서이므로 생략된 내용이 많음. Expo란? Expo는 React Native개발을 쉽게 만들어주는 개발 도구 별도의 Xcode나 Android Studio가 없어도 개발 가능 Expo SDK를 제공해주어 카메라, 위치, 알림 등의 다양한 기능을 제공 복잡한 빌드 배포를 생략하고 쉽고 간편하게 앱개발을 할 수 있게 하는 도구 Expo 설치 초기 환경 세팅 node 설치 Expo-cli 설치 homebrew 설치(mac) +watchman 설치(수정된 코드를 자동으로 적용해주는 Fast Refresh 도구) 휴대폰 앱 'Expo Go' 설치(안드로이드는 'Ex..

프로젝트 파일마다 Public 미디어 파일의 경로가 달라 매번 잦은 실수를 반복하곤 하는데요. 이를 간단히 해결하는 방법이 있습니다. 바로 상대경로로 쓰여진 주소를 절대경로로 바꿔주는 것입니다. index.html에서와 js파일에서 쓰는 방식이 조금 달라서 아래 예시를 보고 그대로 따라하시면 되겠습니다. index.html %PUBLIC_URL%/파일명 js process.env.PUBLIC_URL/파일명 참고문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and h..

문제 로딩 화면 구현을 위해 expo-app-loading을 적용했는데, 에러 메시지가 나왔다. expo-app-loading is deprecated in favor of expo-splash-screen... expo-app-loading이 나오면서 더 이상 사용하지 않는 라이브러리라고 함. 삭제 후 현재 제공하고 있는 라이브러리를 적dyd해야 한다. 해결 1. expo-splash-screen install & import expo-splash-screen을 설치하고, import한다. npx expo install expo-splash-screen import * as SplashScreen from "expo-splash-screen"; 2. useEffect를 사용해 font가 load 되기 ..

블로그 썸네일 만들기 사이트 추천 Banner Maker https://banner.godori.dev/ Banner Maker Create a simple banner and download it. banner.godori.dev 문구와 배경으로만 이루어진 심플한 썸네일 이미지를 만들 때 자주 사용하는 사이트입니다. 배경색, 폰트 색을 자유롭게 변경할 수 있고, 사이트에서 제공하는 무작위 이미지를 배경으로 사용해 보실 수 있습니다. 썸네일 크기도 조절할 수 있어 썸네일 이미지를 만들 때 유용하게 사용하실 수 있을 것 같습니다. Banner Maker 사용법 사용법이 간단하여 굳이 설명이 필요하지 않겠지만, 썸네일 생성하는 순서를 적어 보자면 아래와 같습니다. 원하는 크기 width, height 선택 ..