코딩기록

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 역할을 하지만, 몇 가지 차이가 있음 .1. 기본적인 차이점type interface용도다양한 타입(객체, 유니온, 맵드 타입 등)을 정의할 때 사용객체의 구조(프로퍼티와 메서드)를 정의할 때 사용확장(상속)&(인터섹션)으로 확장extends 키워드로 확장중복 선언 가능 여부❌ 불가능 (덮어쓰기 됨)✅ 가능 (자동으로 병합됨)유니온 타입 지원✅ 가능❌ 불가능맵드 타입 지원✅ 가능❌ 불가능2. 타입 상속(확장) 방식 비교(1) interface의 확장 (extends)인터페이스는 extends 키워드를 사용하여 확장할 수 있음.interface Person { name: string; age: number;}interface ..

타입 가드(Type Guard)**는 TypeScript에서 특정 값이 어떤 타입인지 판별하는 기능.유니온 타입이나 타입이 확실하지 않은 값을 처리할 때 매우 유용.✅ 타입 가드(Type Guard)란?타입 가드는 런타임에서 타입을 좁히는(Narrowing) 역할.즉, 특정 조건을 만족하면 TypeScript가 해당 변수의 타입을 더 구체적으로 인식할 수 있도록 도와줌.예제) 타입 가드 없이 타입 오류 발생 🚨function printLength(value: string | number) { console.log(value.length); // ❌ 오류: 'number'에는 'length' 속성이 없음}위 코드는 number 타입에는 length 속성이 없기 때문에 오류가 발생.✅ 타입 가드를 사용하..

내가 현재쓰는 버전 1. 프로젝트 생성 및 초기 설정npx create-react-app my-app --template typescriptcd my-appnpm install react@18 react-dom@18 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals  2. 필요한 패키지 설치npm install react-router-dom@^7.1.5 web-vitals styled-components @types/styled-componentsnpm install @eslint/config-array @eslint/object-schema eslint-config-prettier eslint-plugin-prettie..

[ Header.tsx ]import React from 'react';import styled from 'styled-components';import { ProgressBar } from 'react-bootstrap';interface Props { type: string;}export default function Header(props: Props) { return ( {props.type === 'progress' ? ( ) : ( 😻예비집사 판별기 )} );}const ProgressWrapper = styled.div` font-size: 40pt; align-items: cent..

익스텐션에서 prettier, Eslint를 설치 한다.[ .prettierrc ]{ "arrowParens": "avoid", "bracketSpacing": true, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "use..

1. 프로젝트 폴더 생성 및 초기화터미널에서 새로운 프로젝트 폴더를 생성하고 해당 폴더로 이동.mkdir ts-app cd ts-appVite로 React + TypeScript 템플릿 생성 (권장)Vite는 빠르고 효율적인 빌드 시스템을 제공. 최신 React 환경에 적합함.npm create vite@latest  --template react-ts필요한 패키지 설치Select a framework: React  선택Select a variant: TypeScript  선택npm install  2. 설정 확인 및 수정 - 선택사항package.json 파일 수정필요한 의존성들만 포함되도록 package.json을 다음과 같이 수정.{ "name": "ts-app", "version": "0.1...

useEffect는 React의 훅(hook) 중 하나로, **부수 효과(side effects)**를 처리하기 위해 사용된다.컴포넌트가 렌더링된 후 특정 작업을 수행하거나, 상태나 props의 변경에 따라 동작을 정의할 수 있게 해준다. 클래스형 컴포넌트에서 사용했던 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체하는 역할을 한다. 특징1. 의존성 배열에 따라 동작 2. 클린업(Cleanup)반환값으로 클린업 함수를 정의할 수 있음.이는 주로 이벤트 리스너 제거, 타이머 정리, 구독 취소 등에 사용.import React, { useState, useEffect } from 'react';export default fu..

코드의 주석이 조금 복잡하지만 요지는React의 setState 함수에서 콜백을 사용하는 것은 상태 업데이트가 비동기적이라는 점을 고려해 최신 상태를 안전하게 참조하기 위한 메커니즘이라는 것이다. const [number, setNumber] = useState(1);number는 현재 상태 값(배열)이고, setNumber는 이 상태를 업데이트하기 위한 함수.초기값( useState(1))은 원시타입 Number다.import React, { useState } from "react";export default function Counter2() { const [number, setNumber] = useState(1); // 비동기 적으로 실행됨-콜백사용하지 않아- 상태 업뎃시 최신 상태 반영안됨..

원시타입 state와 참조타입 state는 리액트에서 상태를 업뎃하는 방식과 리렌더링 조건에 차이가 있다.[ state, setState ]스테이트, 셋스테이트 통상적으로 이렇게 부른다. 살펴보면,  1. 원시 타입(Primitive Type) State원시 타입은 값 자체를 저장하는 데이터 타입.string, number, boolean, null, undefined, symbol, bigint특징값 자체가 변경되면 React는 해당 상태를 새 값으로 인식하고 리렌더링을 트리거함.업데이트가 간단하며 불변성(immutability)을 비교적 쉽게 유지할 수 있음.예제 [ jsx ]import React, { useState } from "react";function Counter() { const [c..

1. CRA (create react app)리액트 공식 홈피https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html 노드와, npm 버전 확인node -vnpm -v  리액트 프로젝트 생성  npx create-react-app 프로젝트이름npx create-react-app my-app 설치확인 ls -al설치한 위치로 이동 cd my-app 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals그리고 현재 250106월  react@19.0.0 버전과 @testing-library/react@13.4.0 버전 사이에 버전 충돌이 있다.1. React 버전 변경: re..

1. 텍스트 요소 - 블럭요소. 텍스트 그대로 나타낼때 사용. 여러줄의 코드블럭을 나타낼때 사용. 이모티콘 등.  - 텍스트를 들여쓰기.  - css로 따로 꾸며야 함. - abbreviation 약어를 나타낼때 사용. WWW   - 주소. - 인용의 출처, 회의록, 이슈추적시스켐의 티켓 번호 등 변경점을 설명하는 리소스의 URI. - 글자를 오->왼 으로 작성한다. 아랍어 쓸때 사용.텍스트 포매팅 (Text Formatting) - 웹페이지상 텍스트에 효과를 준다. - 하이라이트. - 글씨를 작게. - 아래 첨자 요소. 활자배치를 아래  첨자로 해야하는 인라인 텍스트를 지정. 각주 등.  - 위 첨자 요소. 제곱 등. - 가운데 취소선. 문서에서 제거된 텍스트 범위. - 문서에 추가된 텍스트의 범위 표..

1. html에서 js로 이벤트 적용하기모달 열고, 닫기 제목입니다 내용입니다 수정하기 삭제하기 정말 삭제하시겠습니까? 취소 삭제   2. wiggle 애니메이션 복잡한 애니메니션이 필요할때 사용 안녕하세요!   wiggle.css  /* wiggle 애니메이션 */@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: orange; } 50% { transform: rotate(0deg); color: yellow; } 75% { transfor..

html에서 아이콘 사용하는 2가지 방법 1. i 태그2. svg 1-1. 링크삽입https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"   integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="   crossorigin="anonymous" referrerpolicy="no-referrer" />1-2. https://fontawesome.com/icons아이콘 홈피에서 아이콘 테크 복사  예시) 돋보기 아이콘   2-1.  svg 안에 svg 태그를 쓴다  ...  head 태..

웹퍼블리셔 강의 기초부터 - https://wtss.tistory.com/168#실습 - https://blog.naver.com/rebehayan/221351418973  *텍스트한줄효과 2가지 방법- 1.overflow: hidden; width: 50px; height: 10px;2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *이미지를 표현하는 방법 2가지1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현2. css - background 속성(의미가 없을 때) - 대체 문자 x3. 이미지를 background 속성 - 웹 표준 준수하기 위해서.     가상으로 대체 문자를 만듬(IR 효과)..

오늘까지 생활코딩 HTML, CSS는 마무리하고간단히 ATOM Editor, 크롬개발자도구 강의를 보고 갈 생각이다.그 후에는 웹퍼블 강의 하나 듣고 리액트 강의, 자바스크립트 강의로 들어갈 계획이다. 1) Korean Language Pack for Visual Studio Code- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인 2) Prettier - Code formatter- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구 3) Atom KeymapAtom에서 자주 사용하는 바로 가기 키를 사용할 수 있음.  4) Settings Sync- github에 VS Code Setting을 올리고..

*훅의 이름은 use~ 로 시작한다.  HTML*모바일 지원  CSS생활코딩 css수업: https://opentutorials.org/course/2418/13340*css참고 사이트: codepen.io*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/사용법- 생활코딩: https://opentutorials.org/module/1579 *grid-화면에 나란히 위치시킨다. 150px 고정 display: grid;grid-template-columns: 150px 1fr; *반응형- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다@media(min-width:800px) {  div{     display:none;   }}*반응형 순서 캐스..

생활코딩 - React class vs. function style coding 시작  *다음 들을 강의1. HTML의 모든것, HTML 기초 2. WEB2-CSS, CSS기본부터 활용까지3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript 4. 개발자도구  개발자도구Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구Sources: JS 디..