1. App.vue Hello Vue 3 - script setup -> Vue3 권장 문법- template -> 화면- style scoped -> 이 컴포넌트에만 스타일 적용 2. 반응형 데이터 (ref) Count: {{ count }} - ref(값) -> 반응형- template에서는 .value 안씀 3. 이벤트 바인딩 (click) Count: {{ count }} + - @click = v-on:click- script에서는 .value로 값을 뽑음- 버튼 클릭시 count를 1씩 증가 4. v-model (양방향 바인딩) 안녕하세요, {{ name }} - v-model = input state 자동 연결- form에서 필수 문법 5. 조건 렌더링 (v-if) ..
TypeScript = 자바스크립트에 타입을 붙인 것 쓰는 이유?- 컴파일 전에 오류를 잡아줌- 자동완성 + 리팩토링이 미친 듯이 좋아짐- 협업 / 대규모 프로젝트 필수- TS는 "문법"이 아니라 " 안전장치"라고 생각하면됨 1. 타입 붙이기Javascriptlet count = 0;count = "hello" - 자바스크립트는 런타임 실행 전까지 에러인지 모름 Typescriptlet count: number = 0;count = "hello"; - 타입스크립트는 컴파일시 에러가 발생하여 바로 확인이 가능함 자주 쓰는 기본 타입let userName: string = "kim"let age: number = 30;let isLogin: boolean = true; Typescript 타입 추론let p..
1. 서버 접속(기본 계정 : ubuntu)ssh ubuntu@server_ip 2. 시스템업데이트sudo apt updatesudo apt upgrade -y 3. 타임존 설정(선택이지만 추천)sudo timedatectl set-timezone Asia/Seoultimedatectl 4. sudo 권한 일반 사용자 계정 생성sudo adduser usernamesudo usermod -aG sudo usernamegroups username 4-1. sudo 계정 생성후 정상확인su - usernamesudo ls-> 비밀번호 묻고 정상실행돠면 성공 5. ROOT 계정 SSH 로그인 비활성화vim /etc/ssh/sshd_configPermitRootLogin no # 해당 부분 no로 설정 yes면..
https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.chromewebstore.google.com 해당 사이트에서 devtools 확장프로그램 추가 App.jsximport Counter from "@/components/Counter";import UserCard from "@/components/UserCard";function App..
플러그인 선택후 eslint 설치 eslint.config.jsimport js from '@eslint/js'import globals from 'globals'import reactHooks from 'eslint-plugin-react-hooks'import reactRefresh from 'eslint-plugin-react-refresh'import { defineConfig, globalIgnores } from 'eslint/config'export default defineConfig([ globalIgnores(['dist']), { files: ['**/*.{js,jsx}'], extends: [ js.configs.recommended, reactHoo..
