전체 글15 [DB] PlanetScale 설치 & 연결 (window) PlanetScale이란? - MySQL과 호환되는 Serverless 데이터베이스 플랫폼! (Serverless란 서버가 없다는 말이 아니라 서버를 우리가 유지할 필요가 없다는 것.) - CLI(Command Line Interface, 명령줄 인터페이스)를 통해 쉽게 데이터베이스를 다룰 수 있음. PlanetScale CLI 설치하기 순서대로 따라와 준다면... 아마! 문제없이 설치할 수 있을 거다. 밑줄 쳐 있는 부분을 그대로 복사+붙여넣기 하기! 1. Scoop 설치하기 - Scoop는 윈도우에서 사용하는 command-line installer이다. - 윈도우 프로그램 검색창에 cmd 입력 후 관리자 권한으로 실행 2. cmd 창에서 순서대로 입력하기 - powershell - 그대로 긁어서 복.. 2023. 10. 23. 'React' refers to a UMD global, but the current file is a module react + typescript 개발하면서 로컬 띄웠는데.... ERROR 메시지 등장. 침착하게 대처해야 하는 것을 알지만 늘 어렵다.. 해결책을 찾았다. 더보기 'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해 보세요. ts(2686) 문제 접근 1. npm package들의 버전 문제일까? 2. 왜 router.tsx에서 컴포넌트들 모두 빨간줄이 그어져 있지..? 에? 문제 해결 1. npm package 버전 체크 해보기 2. ts가 코멘트 날려줬으니 typescript 문제일 수도? ㄴ> typescript v4.1 이상, react, react-dom v17 이상 확인하기 3. tsconfig.json 파일 생성 유무 체크 4. tsconfig.j.. 2023. 9. 25. Visual Studio Code 환경셋팅 & Github 업로드 순서 정리 Visual Studio Code 환경셋팅 순서대로 따라오기! 1. visual studio code 설치 https://code.visualstudio.com/ 2. visual studio code 열기 3. extensions 설치해주기 : 코딩할때 도움됨! - code spell checker : 오타 찾아줌 - live server : html 웹사이트 보여줌 - prettier - code formatter : 코드 정렬을 정리해줌 - ES7 React/Redux/GraphQL/React-Native snippets : 리액트 쓰는 사람에게 추천 - Auto Rename Tag : open tag변경 시 자동으로 close tag 같이 변경 - Auto Close Tag : 자동으로 close.. 2023. 7. 17. React_ state, setState, callback, etc.. * 제로초 "웹 게임을 만들며 배우는 React" 강의를 보면서 작성했습니다. 예제 또한 강의에서 사용되는 것을 가져왔습니다. 강의보기👀 1. State - State란 바뀔 여지가 있는 부분, 상태를 말함. - 초기값을 this.state = { } 로 설정해준다. 초기값 설정은 필수이다. class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { // 초기값 설정 first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; } } 2. setState - this.state에 설정된.. 2021. 5. 2. Type Script_11 Compiler (컴파일) TypeScript는 브라우저에서 바로 이해 하지 못하기 때문에 컴파일러를 통해 자바스크립트로 변환을 시켜줘야 한다. 우리는 node.js의 패키지 매니저인 npm을 통해 타입스크립트 컴파일러 설치하고 .js 파일로 변환시킬 것이다. (npm = Node Package Modules) : Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것 * 모두 터미널을 열어서 작업! * VScode 사용 * tsc 명령을 사용하기 위해 타입스크립트를 글로벌 버전으로 설치 npm install -g typescript 1. 1개의 파일을 실시간으로 확인하면서 작업할 수 있도록 설정할 경우 tsc 파일명.ts -w tsc 타입스크립트 툴을 이용해서 watch mode로 동작하면 된다. 2. 여러개의 파일을 관.. 2021. 4. 20. Type Script_10 Utility Type & Type Manipulation (유틸리티 타입 과 유형 조작) Type과 Interface의 특성을 바꿔주는 여러가지 유틸리티 타입이 있는데, 그 중 자주 사용되는 몇가지를 간추려서 소개한다. 더 알고 싶으신 분은 TYPESCRIPT 👈클릭! (아래 사용된 예제는 모두 공홈에서 가져왔어요.) Utility Type 1. Partial 타입의 모든 속성을 선택적(optional)으로 바꿔준다. 요소들을 선택해서 사용할 수 있다. interface Todo { title: string; description: string; } function updateTodo(todo: Todo, todoUpdate: Partial) { return { ...todo, ...todoUpdate }; } const todo1 = { title: "eating", description:.. 2021. 4. 20. Type Script_09 Type alias와 Interface 차이👀 interface PositionInterface { x: number; y: number; } type PositionType { x: number; y: number; } 1. 개념 - Type alias : 데이터의 타입을 사용자정의 / const과 같은 원리로 재정의 불가능 / 데이터 담는 목적으로 사용 - Interface : 일종의 계약서 개념 / let과 같은 원리로 재정의 가능 / 구현할 목적으로 사용 2. 유사점 - Object(객체)로 정의 내릴 수 있다. const obj1: PositionInterface = { x: 1, y: 1, } const obj2: PositionType = { x: 2, y: 2, } - Class(클래스)에서 구현 가능 -> implements 를 사용.. 2021. 4. 16. Type Script_08 Generics (제네릭) 제네릭을 제네릭하게! 재사용성을 높여줘! Generic : 통상적인, 일반적인 이라는 뜻을 갖고 있다. -> 적용해본다면, "일반화" 1. 제네릭을 사용하기 이전에는... function checkPoint(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } // 만약 타입을 string, boolean 등 다양한 경우로 설정하고 싶을 경우에 // 일일히 다 만들면...??? 😱 더럽고 긴 코드 내역 생성...두둥..! 타입별로 다 만들면 정말,,,, 비실용적이고 보기만해도 끔찍한 결과를 낳겠죠? any를 쓴다면? any는 타입보장이 안되고, 타입에 대한 정보가 없어지므로 .. 2021. 4. 16. Type Script_07 OOP(객체지향프로그램) OOP란? - Object Oriented Programming 객체지향 프로그래밍의 약자 - 객체의 관점에서 프로그래밍 하는 것을 말한다. - Object(객체) = 대상(구성 요소) / Class = 객체가 갖는 속성 또는 메소드를 정의 - 예전부터 늘 흔하게 들었던 예시가 있다. (아직 이것 만한 예시가 없어서 일까?ㅎ) 붕어빵 틀은 붕어빵을 찍어내는 행동을 가진 Class / 찍어 나온 붕어빵은 Object --> Class + 커스타드크림 = 슈크림 붕어빵(Object) Class + 초코크림 = 초코 붕어빵(Object) - 객체지향을 사용하면 코드의 중복을 줄일 수 있어 가독성과 생산성이 높아진다. 그리고! 제일 좋은 장점은 유지보수 및 확장성이 높아지는 것!👍 OOP의 4가지 특성 1. 캡.. 2021. 4. 16. 이전 1 2 다음
