RoseDevlog

Language/JS

🌻 배포 링크 https://vanilajs-todolist.vercel.app/ 과제1. VanillaJS TODO Things to be done SAVE CLOSE vanilajs-todolist.vercel.app 🌻 Key Question [ DOM은 무엇인가요? ] 파싱 프로그램이 런타임 환경에서 실제로 실행될 수 있는 포맷으로 분석하고 변환하는 것 브라우저 내부의 자바스크립트 엔진이 이에 해당하는데 브라우저는 HTML을 DOM tree로 파싱합니다. HTML 파싱은 Tokenization과 DOM Tree를 포함합니다. DOM HTML에 접근하기 위한 일종의 인터페이스 단순한 텍스트 파일을 브라우저에 렌더링하기 위해 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다. DOM API ..

2024. 3. 17.

Language/TS(타입스크립트)

props 타입, 반환 타입을 직접 지정하고, 또는 React.FC를 사용해야 한다. ( React v18) //함수 선언 function Welcome(props: WelcomeProps): JSX.Element {} //함수 표현식 const Welcome: React.FC = ({name}) => {}; //JSX.Element가 반환 타입 const Welcome = ({name} : WelcomeProps):JSX.Element => {};

2023. 12. 6.

Language/TS(타입스크립트)

React."이벤트 타입" 1. 이벤트 타입 찾기 이벤트 인자 타입을 지정하려면 먼저 이벤트의 타입을 찾아야 한다 2. 이벤트를 발생시키는 HTML 요소를 제네릭 인자로 전달 자주 사용되는 이벤트 처리 대표적인 이벤트 타입의 목록 React.ChangeEvent – onChange 이벤트 등에 사용 React.MouseEvent – onClick 이벤트 등에 사용 React.KeyboardEvent – onKeydown, onKeyup 이벤트 등에 사용 React.FormEvent – 태그의 onSubmit 등에 사용 Form의 이벤트 처리 예시코드 1 export default function MyPageModal(props: InModalPropsTypes) { const { close, commen..

2023. 12. 5.

Language/TS(타입스크립트)

예시코드 1 다른 컴포넌트에 props 넘겨주는 예시코드에서 주의 깊게 봐야 할 타입 지정들 CommentHeader.tsx ... import CommentToggle from './CommentToggle'; interface InCommentHeaderPropsTypes { handleSort: (sort: string) => void; } export default function CommentHeader({ handleSort }: InCommentHeaderPropsTypes) { const [isReorder, setIsReorder] = useState(false); const [isLiked, setIsLiked] = useState(true); function handleClickOrd..

2023. 12. 5.

Language/TS(타입스크립트)

>setting.json React, Vite, 타입스크립트, 프리티어, EsLint 초기세팅 Vite로 React-ts를 빌드하고 포맷 설정을 해보자 vite 설치 yarn create vite vscode extension 설치 package 설치 yarn add -D를 통해 아래 패키지를 설치해준다 eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks typescript @typescript-eslint/eslint-plugin @typescript-..

2023. 12. 5.

Language/TS(타입스크립트)

타입스크립트 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 타입스크립트를 쓰는 이유 에러 방지 코드 작성 단계에서 타입을 체크하여 오류 예방이 가능하여 디버깅 시간 단축, 코드 유지 보수성 상승 실행 속도 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름 유지보수성 / 협업용이성 변수와 함수들에 어떤 타입이 어떻게 들어가야 하는지(어떤 타입의 값을 리턴해야 하는지) 파악 가능 자동완성 편집기와의 호환을 통해 개발의 편리성을 높여주고 정확하게 코드를 작성 가능 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있다. 즉, 타입스크립트를 사용하면 VSCode의 기능을 최대로 활용할 수 있다 타입스크립트 타입 지정하기 interfa..

2023. 12. 5.

Language/TS(타입스크립트)

인터페이스 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. * 클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 한다. https://poiemaweb.com/typescript-interface TypeScript - Interface | PoiemaWeb 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. poiemaweb.com TypeScript에서, 인터페이스는 이런 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것뿐만 아니라 프로젝트 외부에서 ..

2023. 11. 28.

Language/모덥딥다이브JS

데이터 프로퍼티 키와 값으로 구성된 일반적인 프로퍼티 접근자 프로퍼티 접근자 함수(getter와 setter)로 구성된 프로퍼티 객체 동결된 객체는 읽기만 가능하다 const person={name: "Lee"}; console.log(Object.isFrozen(person)) //결과는? false -> 동결된 객체가 아니다 Object.freeze(person); //Object.freeze 메서드 사용 console.log(object.isFrozen(person)); //결과는? true -> 객체를 동결 직속 프로퍼티만 동결하고 중첩 객체까지 동결하지 못한다 생성자 함수 this function Circle(radius){ this.radius = radius; //순서대로 인스턴스 radiu..

2023. 10. 29.