TIL

데이터를 관리하려면 state에 대해 알아야한다. state는 useState() const [likes,setLikes] =useState(0)0에서 시작한다. 그리고 리스트를 리턴한다. ( [likes,setLikes])likes : state변수setLikes : function to update it function Likes() {const [likes, setLikes] = useState(0)const handleClick = () => {setClicks(likes+1)}return(Likes: {likes})};  Controlled 컴포넌트의 경우,form에서 사용하려면 다음과 같이 쓴다. const [value,setValue] =useState('') function Controll..

keys are often used with listskey={1}, key="asd" 유니크한 숫자이거나 문자열만 올 수 있다. {items.map(item => ())}유니크한 값이 아니면 index활용

리액트 컴포넌트가 가진 props, state 개념에 대해 알 필요가 있다.  props는 컴포넌트 외부에서 받을 수 있는 값, 부모로부터 자식에게 단방향 데이터 흐름 구조를 가진다.  부모-자식 컴포넌트가 아닌데 데이터를 전달해야하는경우, context를 사용한다. props쓰기 않고도 컴포넌트 사이에 데이터를 전달할 수 있다. state는 내부에서 저장하는 데이터이다. 반드시 해당 컴포넌트 자신과 그 하위에만 영향을 미친다. const [count, setCount] = useState(0)1. make prop, give it a value 2. Use prop valuefunction Gretting(props){return {props.text}}*props는 오브젝트임,다른 컴포넌트들에서 값을..

tailwind css에서 하위 요소를 가운데로 정렬하는 방법  최근 배당투자 계산기 사이트 개발하는 중에 가운데 정렬을 자동으로 하는 방법이 궁금했다. 아래는 내가 개발한 배당투자 사이트!https://www.turtleinvest.site/ko 상위div에 classname을 아래와 같이 주고, flex-container items-center justify-center 하위 가운데 정렬할 요소들에 className = 'text-center" 를 주면된다text-center 일일이 하는 방법이 번거로워서 아예 자동화할 수 있는 방식이 있나 찾는중 쓴 코드는 다음과 같다.  div className="my-3 flex-container items-center justify-center" >  h1 c..

저번에는 도메인 사서 vercel 에 등록하는 방법에 대해 살펴봤다. 이번에는 SEO 작업을 해볼 것이다.  Google Search Console 에 등록하기https://search.google.com/search-console Google Search ConsoleSearch Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다.search.google.com으로 접속한다.  property를 추가하는 창에 구매한 도메인 입력한다. 하단에 나오는 txt record 를 복사하고, 가비아로 접속한다.  https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까..

https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브www.gabia.com 국내에서도 도메인을 살 수 있는 곳들이 있는데 시험삼아 한번 사봤다. 원래는 cloudfare에서 도메인을 샀었는데 vercel에 하면 셋팅이 조금 번거로워서 정착할 곳을 찾는중이다 사용방법은 간단하다도메인을 사고난 뒤, dns를 등록해주면 된다.  vercel 에서 내 프로젝트에서 도메인으로 이동한다. 내가 구매한 도메인을 등록해준다 2. 가비아에서 DNS관리에서 레코드를 수정한다 이러고 바로되지는 않고 조금 기다리면 된다 체감상 15분 정도?국내에서 도메인 사는 것에 대해 조금 시간도 오래걸리고 불안정하다는 말이 있는데 일단 연결은 괜찮게 된듯하다그치만 불안한..

NextJS 에서 프론트 개발하다가 JSX expressions must have one parent element. 오류가 나올때가 있다.  이때 해당 부분을 , 와 같이 감싸주면 해결 가능하다. 간단하게는 로 감싸ㅜ면 쉽게 해결 가능하다.  맨날 까먹어서 기록!

리액트 컴포넌트란 리액트 요소 또는 다른 컴포넌트를 조합한 것이다JSX로 작성된 컴포넌트가 라우저에서 표시될 때까지의 흐름을 잠시 설명하자면, 먼저 웹팩 ( 자바스크립트 빌드 도구, next js 에서는 SWC ) 에 의해 자바스크립트로 변환한다. 그러면 브라우저가 해석이 가능해진다. 이때 컴포넌트는 자바스크립트의 객체로 표현된다. 변환된 자바스크립트 코드를 보고 브라우저가 화면에 표시하는 것이다 자바스크립트 코드에서 프라우저의 표시 내용을 바꿔쓸때는 DOM에 접근해야 하며, 먼저 가상 DOM을 구현한다. 가상 DOM과 비교해 차이가 있는 부분만 실제 DOM 을 업데이트 한다.  리액트요소 class, onchange 대신 className, onChange 를 사용한다. (카멜케이스)  컴포넌트 리액트..

Next.js는 리액트 기반 프레임워크로 리액트에 대해 어느정도 알고 있으면 좋다.  로컬에서 프로젝트 구축하기create-react-app을 사용해서 자동으로 빌드 가능하다. npx create-react-app@latest react-sample --template typescriptcd react-samplenpm run start 실행하면 localhost:3000 에서 확인 가능하다.

인수와 반환값 각각의 타입을 지정할 수 있다. 함수의 인수와 반환값 모두 string 으로 정의하는 예시:function sayHello(name : string): string{return `Hello ${name}`}sayHello('Mewo')  optional 로도 정의할 수 있다. function sayHello(name? : string): string{return `Hello ${name}`}  파라미터(인수)를 정의할 때 기본값도 정의할 수 있다. 함수 호출시 해당 인수를 지정하지 않으면 자동으로 기본값이 적용된다. function sayHello(name : string='KIM'): string{return `Hello ${name}`}  화살표 함수 (arrow function) 의 ..