영원히 흘러가는 강

정확히 용어는 차차 찾아보는 걸로... 말로 풀어보자면 object name , value 에서 배열 안의 값이 일치한다면 value 뽑아내는 코드에서의 typescript const StatusCategory={ ready:'준비중' start:'진행중' end:'종료' } //category에 ready,start,end 값이 온다고 할때 StatusCategory[category] 로 설정되어있다면 type AllCategory= 'ready'|'start'|'end' 로 설정 가능 후에 StatusCategory[category as AllCategory] 로 설정 StatusCategory에 object로 있는 값을 category의 값으로 출력 AllCategory에는 위의 3가지 값이 다 올..

상수와 리터럴에 대해 헷갈린 부분이 있어서 정리를 한다.!! 상수란? 변수와 마찬가지로 데이터를 저장 할 수 있는 메모리 공간 상수와 변수의 다른점은 프로그램 실행시 상수에 저장된 데이터는 변경 할수 없다는 점.! 리터럴? 리터럴은 데이터 자체를 의미 변수에 넣는 변하지 않는 데이터가 리터럴이다 home= "sweet" const DATA="welcome" home => 변수 DATA => 상수 "sweet","welcome" => 리터럴

interface 객체값{ name:string; id:number; } interface Props{ y: 객체값[]; } const XXX=({불러오는값}:Props)=>{ ... } Props 로 전달받는 "불러오는값" 의 내부 객체를 "객체값" 으로 타입스크립트 인터페이스로 정의 배열 안 객체이므로 "객체값"을 배열선언

가장 흔히 볼 수 있는 문제.!! 항상 넣어야지 하면서 까먹는 게 반복된다. 요번에는 key 값을 넣어줬어도 문제가 되었는데 React Fragments 이게 문제일 수도 있다.!

맛있저염 플레져위크 준비 grid 실 사용 처음인거 같은데 짱짱맨이다 flex로 했어도 지저분한 코드를 grid로 3줄로 끝내버렸다..! 물론 쉬운 2개씩 정렬이긴 했지만 grid 짱짱맨 :) antd countdown 도 사용해봤는데 date 사용법과 연계되어서 매우 쉽게? 사용한듯하다 분기처리도 잘해도 웬만한 코드는 굴러가는듯 하다... || && 확실히 전 개발자분의 코드를 보면서 배워나간다는게 뭔지 알거 같다 여기는 무엇을 해도 나에게는 배움의 터이다... 리팩토링 어려워서 쩔쩔매다가 이렇게 한번씩 코드 작성하는것도 재밌는거 같다!!

전처리기가 아닌 css에서도 변수로 지정하여 사용가능하다. .ex{ --color:black; color:white; } 사용자 속성은 --로 시작해야 하며 --color 은 우리가 새로이 지정한 속성이며 , color은 기존 내장 속성 사용시 var()로 감싸서 사용하면 된다 .ex2{ --white:white; background:var(--white); } 위와 같이 사용가능하다. 두번째 인자로 기본값을 넣어줄수있다. 확실치 않은 경우 활용 가능 .ex3{ color:var(--white,white); } 다만 상위에서 하위로 상속이 되므로 상위에서 정의해야 하위에서 가능하다!! * 전역변수처럼 일관적으로 사용하기 위해 많이 사용!! * IE에서는 지원이 안된다 참고. https://www.dale..

ChunkLoadError Loading chunk node_modules next_dist_client_dev_noop js failed 이 에러 발생시에 .node 파일 삭제후 재시작을 권고 빌드 파일 충돌 시에 발생하는 문제인듯하다..! 참고.! https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-next-dist-client-dev-noop-js-failed ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed I've been following the basics tutorial on the Next.js ..

타입스크립트 + 리액트 공부!! 가장 어렵게 생각되었던 부분은 props 부분이다..! 부모에서 값을 전달시 하위 자식에서 전달 받은 값에 대한 타입을 지정한다 부모 const parents:React.FC=()=>{ retrun ( ) } 자식 interface props{ text:string; } const Child:React.FC=()=>{ retrun ( ) } 혹은 const Child:React.FC=()=>{ retrun ( ) }

Flex를 사용하게 되면 자동적으로 간격 맞추느냐고 크기를 늘릴수도 작게 만들수도 있다 이때 flex-grow는 크기를 비율에 맞게 크게 가능하고 flex-shrink가 작게 만들게 하는데 flex-shrink :0 사용시 비율 그대로 사용가능.!

opacity는 자동적으로 자식까지 상속해주기 때문에 background-color: rgba(0, 0, 0, 0.6); 이처럼 부모에게 opacity 대신 설정해주면 가능!