뇌 채우기 공간

이전 글 보기 1. 함수의 타입 설정하기 함수에는 파라미터와 리턴타입을 지정해주어야한다. 특히나 input, form에서의 타입을 지정해보겠다. import React, { useState } from 'react'; type MyFormProps = { onSubmit : (form : {name : string; description: string}) => void; } function MyForm({onSubmit}: MyFormProps){ const [form , setForm] = useState({ name: '', description : '' }) const {name, description} = form; const onChange = (e:React.ChangeEvent) => { c..

이제는 타입 스크립트가 대세! 타입스크립트를 사용하면 타입 추론을 개발할 때 오류를 줄여주고 코드를 작성하기 쉽게 도와준다. 전에는 리액트를 js로 작성했지만 이제는 타입스크립트로 하는 법을 배워야한다. 회사에서는 다 타입스크립트를 쓰기 때문에! 타입을 지정해주는 것이 자바에서는 당연한 것이었는데 자바스크립트에서는 이렇게 따로 뭔가 해야한다니. 처음에는 자바처럼 타입을 지정해주지 않아도 되는 점이 편리했는데 따로 타입 스크립트를 써야한다면 애초에 자바처럼 타입을 지정해두는게 더욱 편하지 않을까?! 리액트 앱을 시작할 때부터 타입 스크립트로 작성하는 것을 추천한다고 한다. 나는 타입스크립트에 대해서 지식이 거의 없기 때문에 일단 js로 구현하고 converting을 했지만 처음부터 ts로 작성하는 법을 배..

Vue3에서 vuex module분리하는 법 어려운 작업이 아닌데 처음에 할 때 vue3 관련 코드가 없어서 많이 헤맸던 기억이 있다. 1. store폴더 안에 modules폴더를 만든다. 2. 그 안에 모듈 하나씩 파일을 만든다. 예시 : user.ts import { SavedMovie, User, Collection, SavedCollection } from '@/type'; import { SET_USER, SET_PASTMOVIE, SET_FUTUREMOVIE, ... } from '../mutation'; export interface State { user: User, pastMovie : SavedMovie[], futureMovie : SavedMovie[], collections : C..

const colors = `hsl(${parseInt(Math.random() * 24, 10) * 15}, 16%, 57%)`; 참고 : 이것은 vue 코드 hsl에서 hue만 랜덤으로 돌리는 방법 그러면 톤이 똑같고 색상만 랜덤으로 추출됨

https://www.w3schools.com/jsref/met_win_confirm.asp Window confirm() Method W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 뭔가를 삭제하기 전에 삭제 하시겠습니까? 해서 네 하면 삭제되고 아니오 하면 삭제 안되고 하는 것을 구현하고 싶었다. 이걸 커스텀 모달을 만들어서 구현해야하는지 고민했는데 Window.con..

[결과] [구현] select box에 속성을 mutiple로 지정해놓으니까 클릭했을때 저절로 dropdown이 안됐다. 그런데 드롭다운이 안되면 너무 ui가 불편하기 때문에 클릭했을때 목록이 쭈르륵 나와야 했다. {{genre}} 그래서 size를 selectSize로 바인딩하고 focus이벤트에서 size를 키우고 blur이벤트에서 size를 1로 돌렸다. const selectFocus = ref(false); const selectSize = computed(() => (selectFocus.value ? 10 : 1)); const focusSelect = () => { selectFocus.value = true; }; const blurSelect = () => { selectFocus.va..