incodevelop

TS의 개념에 대해서 강의도 듣고 알 건 알았다. 문제는 내가 당장에 적용을 하기에 막막한데, 가장 기초적인 막막함: 그래서, 객체를 생성할때 class, type, interface 중에 뭘 사용하라는 거지?^^ 예를 들어 Book이라는 객체를 만들고자 할 때 class, type, interface로 각각 예시를 들어보겠다. 1. class (1) 정의하기 class Book { constructor( public title: string, public author: string, ) { } } -> class로 정의할 때는 생성자를 호출해야 한다. (2) 사용하기 const book = new Book("The Great Gatsby", "F. Scott Fitzgerald"); console.lo..

enum - 간단한 상수 값에 적합 (애초에 숫자와 문자열만 취급 가능) - 열거형 데이터 타입 - 컴파일 시 자동으로 숫자로 매핑되기 때문에 따로 값을 할당할 필요가 X (단, 특정 숫자 값으로 매핑되어야 한다면 걔는 직접 할당해주면 됨) [예시] enum UserRole { ADMIN = "ADMIN", EDITOR = "EDITOR", USER = "USER", } enum UserLevel { NOT_OPERATOR, // 0 OPERATOR // 1 } function checkPermission(userRole: UserRole, userLevel: UserLevel): void { if (userLevel === UserLevel.NOT_OPERATOR) { console.log('당신은 일..

>> 기본타입 1. boolean : 2가지의 상태를 표현 [예시] function isValidPassword(password: string): boolean { return password.length >= 8; } const password = "q1w2e3r4!"; const valid = isValidPassword(password); if (valid) { console.log("유효한 패스워드입니다!"); } else { console.log("유효하지 않은 패스워드입니다!"); } +) 3가지 이상의 상태를 표현할 때: enum or string 2. number - typeScript에서 숫자는 정수, 실수, 진수까지 포함 [예시] function calculateArea(radius: ..

function App() { const [todolist, setTodolist] = useState([]); const [videoList, setVideoList] = useState([1, 2, 3, 4, 5, 6, 7, 8]); const [displays, setDisplays] = useState(videoList.slice(0, 2)); const [fourList, setFourList] = useState([]); const [twoList, setTwoList] = useState([]); const [totalWinner, setTotalWinner] = useState(null); useEffect(() => { setDisplays(videoList.slice(0, 2)); },..

Map const m = new Map(); const person = new Map(); // .set(): key-value값 추가하기 person.set("name", "John"); person.set("age", 30); console.log(person); // Map(2) { 'name' => 'John', 'age' => 30 } // .get(key): value 값 꺼내기 console.log(person.get("name")); // John console.log(person.get("age")); // 30 // has.(key): 특정 key를 가지고 있는지 확인하기 => Boolean 반환 console.log(person.has("name")); // true console.l..

오늘은 아주 기본적인 실수를 범했다. const profile = useSelector((state) => state.profileSlice.profile); console.log(profile.nickname); const { profileNickname } = useSelector( (state) => state.profileSlice.profile ); console.log(profileNickname); profile이라는 객체에서 nickname이라는 key를 가진 value를 꺼내고 싶었는데, 내가 원하는 이름으로 꺼내고 싶었다. 그러나? 실패. 왜냐면 애초에 객체의 구조분해할당이라는 것은 객체의 key에 그 value 값을 할당해주는 것이기 때문에, 할당을 할 때, 객체의 key는 건드리지 ..

오늘 틱택토 게임 만들기를 해봤다. 게임을 만드는 과정 중 어려웠던 부분을 기록하려한다. 내가 생각했던 로직 1. 9개의 숫자 중 3개로 빙고가 될 수 있을 만한 배열들을 추려놓는다. 2. 9개의 버튼 중에 철수(X)와 영희(O)가 차례대로 누른다. 3. 철수가 누르는 버튼의 숫자(X가 배정된 숫자 = xList)와 영희가 누른 버튼의 숫자(O가 배정된 숫자 = oList)를 각각 다른 배열에 따로 담아둔다. 4. xList와 oList 중에서 3개를 골라서 나올 수 있는 모든 경우의 수를 구한다. 5. 만약 xList(또는 oList)에서 무작위로 3개를 고른 배열들 중 1번의 빙고가 될 수 있는 배열을 포함하면 X(철수) 또는 O(영희)가 이긴다. 나의 코드 import { useState } fro..

const formData = new FormData(); formData.append("avatar", avatar); formData.append("nickname", editedNickname); const sendEditedProfileToServer = async () => { try { const accessToken = localStorage.getItem("accessToken"); await axios.patch( `https://moneyfulpublicpolicy.co.kr/profile`, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: `Bearer ${accessToken}`, }, } );..

> export 와 export default의 차이점 - 원래는 막연하게 외부에서 import 할 때 { } 중괄호의 유무라고 생각했다. 그럼 왜 export는 중괄호로 import 하고, export default는 중괄호가 없이 import 하는가? - export default는 하나의 컴포넌트에서 한번만 시행될 수 있다. 즉, 그 컴포넌트 잡채를 export 하는 것이다. => 그렇기에 export default로 내보낸 값은 외부에서 import 할 때 중괄호 없이도 그 잡채를 import 해올 수 있는 것이다. => 또 그렇기에 외부에서 import 할 때 이름을 내맘대로 지어서 import 해와도 상관없다. 왜? 내가 뭐라고 칭하면서 import 해와도 어차피 그 컴포넌트에서 export ..

과제 중 이슈 1 - useRef는 이전 포스팅에서 다뤘던 바와 같이 2가지의 기능이 있다. 1. 저장공간 2. DOM 요소의 참조기능 여기서 2번의 DOM 요소를 참조할 때에는 ref가 부여되는 시점을 잘 알아야 한다. useRef를 통한 ref의 부여는 컴포넌트가 위에서 아래로 다 렌더링이 다 되고 부여된다. 따라서, ref.current로 특정 태그를 참조하려고 했는데 컴포넌트가 다 렌더링 되기 전에 ref가 부여되어서 undefined가 뜨며 참조할 수 없었다. {click ? ( ) : ( {foundLetter.content} )} 해결법 - 렌더링이 다 되고 ref가 부여되도록 해야겠다. 렌더링이 다 된 후 함수가 실행되도록 하는 기능: useEffect useEffect(() => { if..