쭈

- 태스크 정리 앱 만들기 시작  - Board List, Llist Container 생성 - 수정, 삭제, 로그 기능 추가 - Drag And Drop 기능 생성 - 로그인 페이지 생성이렇게 생긴 Task 정리 앱을 만들어보려고 한다!마치 Trello 같이 생겼다..!리액트를 이용해서 만들 예정이기 때문에 저번 Todolist 만든 것과 같이 vite 엔진을 이용할 것이다.1) npm init vite2) React 선택 / typescript 선택3) npm i4) npm run dev이 순서대로하면 문제없이 잘 만들어진다!전체적인 구조는 이렇게 생겼다. 저번 todolist 보다 좀 더 큰 규모의 프로젝트가 될 것 같은 느낌이다.. 그리고 필요한 패키지들이 꽤나 많은 편이라 다 설치해야만 했다.1..

💥 props프롭스특정 데이터를 사용할 때 컴포넌트들 끼리 공유를 해야하는 상황이 오는데 그때 프롭스를 이용해 정보를 넘겨줄 수 있다💥 오늘의 날씨 추가해보기 - MyWeather_Func.tsxprops를 이용해 날씨를 나타내는 MyWeather_Func.tsx 를 만들었다.props는 클래스형, 함수형 둘 다 사용이 가능한데 함수형을 선택해서 사용했다. - App.tsxApp.tsx에 MyWeather 추가해주고, weather엔 '맑음' 이란 데이터를 입력해주었다.맑음 말고도 비, 흐림, ... 등등 ' ' 안에 데이터만 바꿔주면 원하는 데이터로 변경이 가능하다 :D - 결과리스트 밑에 '일기예보'가 정상적으로 나타나는 걸 볼 수 있다.원래 시계도 밑에 있었는데 위에 있는 게 좀 더 보기 예쁠 ..

💥 클래스형 컴포넌트 - 리액트 초기에 사용했던 방식 - 클래스형 컴포넌트를 만들면 컴포넌트 라는 클래스를 상속해야하기 때문에 import 해줘야하고 extends로 상속해줘야함  - ClassCom.tsx - App.tsx - 결과💥 함수형 컴포넌트 - 리액트가 권장하는 방식 - 클래스형보다 덜 복잡하고 코드가 간결해서 편함 - export default 써주는 건 동일 - import 꼭 해줘야함 - FuncCom.tsx - App.tsx* 화살표 함수로도 표현가능function 키워드를 없애고 변수로 만들고 => 붙여주면 된다. - 결과💥 state 사용 - 변수 대신 state 를 사용해서 데이터를 저장함 - state = 상태(= 데이터의 상태) - 데이터를 동적으로 감시해서 변경이 되면 ..

💥 React(웹 프레임워크) - React.js는 자바스크립트 라이브러리의 하나이다. - 사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발했다. - 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발이 가능하다.💥 React의 동작 원리 - 초기 랜더링 - 가상 DOM 변경 - 재조정 - 실제 DOM 업데이트💥 React 실습해보기(+오류해결1..)React 사이트에 사용법이 적혀있으니, 터미널에 이대로 해보았다.강사님은 error 없이 잘 넘어가셨는데 갑자기 난  error 가 미친듯이 뜨고.. npm start를 해보니 에러페이지가 떴다 ㅠ..그래서 구글링을 열심히 해보았더니 이유를 알게되었다😥React 버젼이 호환성에 맞지 않는 게 이유였고 간단한 해결방법까지 찾아서 해봤다!..

2025.01.13 - [웹 개발 공부하기] - [01.13] 객체 리터럴2025.01.13 - [웹 개발 공부하기] - [01.13] 유니온, 타입별칭, 타입가드💥 배열(Array)let numbers : number[] = [1, 2, 3, 4, 5];let fruits : string[] = ['apple', 'lemon', 'grape'];for(let i = 0; i 자바스크립트와 많이 다르지 않게 사용이 가능하다.결과값도 오류없이 잘 나오는 걸 볼 수 있다.💥 Array 유니온 타입 사용방법let mixedArray : (number | string)[] = [1, 'two', 3, 'four'];for(let i = 0; i 일반 Array 사용법과 크게 다르지않게 유니온 타입 기호인 |..

💥 any 타입 - 타입스크립트는 타입에 관한 정보가 더 많을수록 더 좋다. - 타입 정보는 개발자의 의도를 명확하게 전달할 수 있다. - 효과적인 코드의 유지보수가 가능하다. - any 타입을 일부러 사용하진 않는 것이 좋다. - 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용하는 것이 좋다.* anyVal의 타입은 any이기 때문에 100과 'kim'의 타입이 달라도 오류가 안 난다.💥 유니온 타입 - 제합된 타입을 동시에 지정하고 싶을 때 사용한다. - | 기호를 사이에 두고 동시에 타입을 지정할 수 있다.let anyVal : number | string; - anyVal 변수는 number나 string 타입 중 아무 타입의 값이 올 수 있다.* anyVal의 타입은 number..

💥 리터럴 타입 - 리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 한다. - 타입스크립트에서 사용되는 리터럴 타입에는 다양한 종류가 있다. 💥 숫자 리터럴 타입let speed : 50 | 100 | 200;speed = 100; // 유효speed = 150; // 에러:150은 허용되지 않음💥 불리언 리터럴 타입let isTrue: true;isTrue = true; // 유효isTrue = false; // 에러: false는 허용되지 않음💥 객체 리터럴 타입let person: {name: 'John', age: 30};person = {name: 'John', age: 30}; // 유효person = {name: 'Alice', age: 25}; // 에러: 값..

2025.01.12 - [웹 개발 공부하기] - [01.09] 함수 포인터2025.01.12 - [웹 개발 공부하기] - [01.09] 구조체2025.01.12 - [웹 개발 공부하기] - [01.09] 공용체, enum2025.01.12 - [웹 개발 공부하기] - [01.09] 동적 메모리 할당2025.01.12 - [웹 개발 공부하기] - [01.09] 객체 지향 프로그래밍 방식2025.01.12 - [웹 개발 공부하기] - [01.09] 클래스(Class)2025.01.12 - [웹 개발 공부하기] - [01.09] 생성자와 상속성2025.01.12 - [웹 개발 공부하기] - [01.09] 오버로딩과 오버라이딩2025.01.12 - [웹 개발 공부하기] - [01.09] 인터페이스💥 익명 메소..

💥 인터페이스(Interface) - 인터페이스란 메소드의 목록만을 가지고 있는 명세(Specification), 사용자 정의 타입이다. - 메소드의 목록만 선언하고 구현은 하지 않는다. - 인터페이스의 선언 형태 - 인터페이스를 상속받는 클래스의 형태💥 인터페이스를 사용하는 이유 - 인터페이스는 본체가 정의되지 않는 추상메소드만 갖는다. - 인터페이스의 목적은 기존의 기능을 추가하거나 수정의 개념보다는 동일한 개념의 기능을 새롭게 구현하는 기능이다. - 공동 작업 시, 표준을 정하는 역할이다.💥 추상 클래스를 상속 하는 경우 - 일반적으로 클래스를 상속하는 이유는 기능의 확장이 목적이다.💥 인터페이스를 상속 하는 경우 - 스마트폰의 기능 목록 : 통화기능, 문자메시지, 와이파이, 블루투스, ....

💥 다향성 - 함수의 이름이 같더라도 전달인자의 타입이나 개수에 따라 구분된다. - 객체지향에서는 대표적으로 오버로딩과 오버라이딩 기법이 있다.💥 오버로딩(Overloading) - 사전적 의미는 '과적하다', '적재하다'라는 의미를 가지고 있다. - 겉모습은 똑같지만 내용이 다른 경우를 뜻한다. - 이름이 같은 함수일지라도 전달인자 타입이나 갯수가 다르면 다른 함수로 취급한다.💥 오버로딩 실습 해보기using System;public class Fruit{ public void Overload(int apple){ Console.WriteLine("사과 {0}개", apple); } public void Overload(int apple, int lemon){ ..