FrontEnd 썸네일형 리스트형 [REACT] Prettier, 자동 코드 정리 사용 방법 1. Prettier 사용 방법▷ 사용 이유 : 코드 자동 정렬▷ 사용 방법 : F1( 단축키) → Format → Format Document 적용 → 자동 정렬 2. Prettier 설정 방법▷ .prettierrc 파일 생성{ "singleQuoto":true, "semi":true, "useTabs":false, "tabWidth":2} 3. 저장할 때 자동 코드 정리F1( 단축키) → Format → Format Document 적용하기 번거로울 때 사용. 경로 이동 : file → prefferences → settings → format on save 체크 더보기 [REACT] REACT 문법 정리하기 (리액트를 다루는 기술) 1. App.js 파일import './App.css';function App() { const name = '리액트!'; const number = 0; const un = undefined; const style = { // 카멜 표기법으로 작성 backgroundColor: 'black', color: 'aqua', fontSize: '48px', fontWeight: 'bold', padding: 16, }; return ( 1. 변수 및 3항 연산자 사용 {/* 3항 연산자 */} {name === '리액트' ? ( {name} 입니다. ) : ( {name}가.. 더보기 [REACT] Module not found: Can't resolve 'web-vitals' 에러 REACT 초기 시작 페이지에서 나타난 에러 해당 페이지에 에러 페이지로 Module not found: Can't resolve 'web-vitals'라고 나타난다. npm-modules 패키지에서 web-vitals 설치가 안된 것이므로 아래의 명령어 실행npm i web-vitals 그럼 문제없이 실행되는 것을 볼 수 있다. https://stackoverflow.com/questions/65396568/react-js-npm-start-shows-failed-to-compile-web-vitals 더보기 [React] yarn: command not found 에러(yarn 사용 안됨) 1. yarn 설치하기npm install -g yarn 2. 에러 발생 yarn 패키지 설치 확인 3. 환경변수 등록하기☆ 이미글로벌로 설치했지만 yarn이 실행되지 않는 경우 1. window 아이콘 마우스 오른쪽 클릭 → 시스템 2. 고급 시스템 속성 → 환경변수 클릭 3. '시스템 변수' - 'PATH' 클릭 후 '편집' 클릭 4. '새로 만들기' 클릭 후 다음의 경로를 추가 (yarn의 bin 폴더의 경로 추가) → 경로는 아래와 같음/C/Users/username(본인 사용자 폴더)/AppData/Roaming/npm/node_modules/yarn/bin 5. '확인' 클릭 후 터미널로 이동 vscode 전체를 껐다 켜야한다. yarn 명령어를 실행해보면 정상적으로 작동.. 더보기 VS CODE(IDE) 설치 및 설정 방법 바로 두 번째 포스팅 하겠습니다! VS CODE 설치 및 설정하는 방법들에 대해 정리했으니 참고해주세요~ https://bobo1201.notion.site/1-718b973faea041a08c709ad557640514?pvs=4 1. 코드(웹) 편집기 환경 설정 | Built with Notion 🖥️ 크롬 브라우저 설치 bobo1201.notion.site 대부분 설치만 하면되니 간단할거에요. 많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~ 더보기 VS CODE 자동 정렬 단축키 안되는 경우 안녕하세요 제가 너무 오래 쉬었어요,,ㅎㅎ 오늘부터 학습한 내용들을 다시 티스토리에 정리해서 올리려고 합니다! 첫 번째 포스팅은 VS CODE 자동 정렬 단축키가 되지 않는 경우!! 아래의 노션 블로그에 정리해두었으니 확인해주세요~~ https://bobo1201.notion.site/0-5f932eb45075423984993c6251a53216?pvs=4 0. 자동 정렬 단축키 안되는 경우 해결 방법 | Built with Notion ❓ VS CODE에서 자동 정렬 단축키가 안되는 경우 어떻게 해결할까요? bobo1201.notion.site 다시 열심히 블로그 작성할테니 많이 참고해주시고, 잘못된 내용들은 언제든지 댓글로 남겨주세요~~~ 더보기 [java script] Vue.js ToDo List 만들기 1. ToDo List란? ▷ 할 일을 리스트한 어플리케이션입니다. ◎ 세부 기능 ▷ "체크박스 + 할일"을 나열하여 표시하는 기능 ▷ 체크하면 취소선을 긋는 기능 ▷ "할일"을 추가하는 기능 ▷ 취소선이 그어진 항목을 삭제하는 기능 ▷ ToDo의 총 건수나 처리완료 건수를 표시하는 기능 ToDo리스트 {{todo.text}} 처리완료삭제 {{ remaining }} / {{ todos.length }}건 처리 아래와 같이 값을 넣고 엔터키를 누르면 값이 추가되고 체크한 것은 버튼을 누르면 삭제됩니다. ◎ 추가 세부기능 ▷ 완료일도 같이 입력하여 화면에 나타날 수 있도록 만듭니다. ▷ 완료일 연장을 누르면 기존 입력한 완료일에서 1씩 증가되도록 합니다. ▷ sort를 이용해 할일 또는 완료일 기준으로 오.. 더보기 [UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법 Adobe XD를 사용하여 실습을 해보았습니다! ◎ 아트보드 복사, 붙여넣기 ▷ control + C, control + V ▷ alt키 + 마우스 (도중에 마우스를 떼면 안됩니다!) ◎ 도형 그리기 ▷ 화면 왼쪽의 도형 아이콘을 눌러서 사용하면 됩니다. ▷ 직선, 정사각형, 정삼각형 등을 만드려면 shift키를 같이 누르면 됩니다. 왼쪽 인터페이스 도형 아이콘 아이콘을 이용한 그림 그리기 여기서 펜을 이용해서 그릴때 곡선을 그리려면 클릭한 상태를 유지해 옆으로 마우스를 드래그하면 형성됩니다! 이렇게 반복하면 구름 형상을 그릴 수 있습니다. ▷ 오른쪽 인터페이스의 자물쇠 버튼을 누르면 비율이 고정되고 해제하면 비율 고정 없이 도형의 크기가 변경됩니다! ▷ 내부의 점을 이용하면 모서리를 둥글게 만들 수 있.. 더보기 이전 1 2 3 4 ··· 6 다음
