개발새발 101

리액트 차트 라이브러리 react-chartjs-2 Line Chart 설치, 여러 줄 (데이터 여러개) 라인차트 구현하기, data prop 작성법

오늘은 리액트 차트 라이브러리인 chartjs 를 사용해보겠습니다.! 사실 한 두번 정도 제 기준 꽤나 복잡한 걸 적용시켜보았는데찾을 때마다 정보가 많이 없어서 힘들었어요 ㅠㅠ 그리고 또 쓸 일이 있어서 코드 작성하려니까 정말 기억이 리셋되어서.... 기록해보려고 합니다!!!  https://www.chartjs.org/docs/latest/getting-started/installation.html Installation | Chart.jsInstallation npm (opens new window) (opens new window) CDN CDNJS (opens new window) Chart.js built files are available on CDNJS (opens new window): h..

React 2024.09.05

setLoading 은 어디에 위치해야 할까? try 문 안에? 밖에!?

react-spinners 를 사용하여 로딩 중인 상태를 개발하며 지피티랑 씨름하다가 생긴 궁금증.! useEffect 안에서 setLoading(true) 는 try 문 안에서 사용해야 할까? 밖에서 사용해야 할까?차이점이 무엇일까  🔽 try 문 안에서 사용하는 경우 🔽const [data, setData] = useState('');const [loading, setLoading] = useState(true);useEffect(() => { const fetchData = async () => { try { setLoading(true); const dataResponse = await api.get('/data'); setData(dataResponse.da..

React 2024.06.05

tsc : command not found 에러 해결법

유데미에서 타입스크립트 강의를 듣다가 자바스크립트 파일로 컴파일하는 명령어인tsc app.ts 를 입력하였는데 command not found 오류가 떴다강의 초반에 설정? 들을 제대로 안들어서 그런가.... 하하 해결법은 npm i typescript -g를 입력해 설치 후 tsc app.ts 를 실행시켜주고 tsc --version 으로 버전 확인을 할 수 잇쬬!! 저는 pnpm 을 사용해서 pnpm i typescript -g 라고 작성해주었습니다

Typescript 2024.05.17

우리 아이 첫 타입스크립트 프로젝트 | React, Typescript, Tailwind 로 Todolist 만들기 1탄 | 초기개발환경 셋팅하기

안녕하세요! 히새입니다 타입스크립트를 공부하려다가 갑자기 취업이 되어버려서 못했는데, 회사에서 우리 앞으로 타입스크립트로 방향을 가자고 하셔서 공부 해야지 해야지만 하다가 지금 안바쁠 때 해보려고!!! 합니다 네.. 우리 아이는 저입니다 ^_^ 사실 책이라도 1회독 하고 코드를 들어가고싶은데 제가 진짜 집중력 똥망이라 책을 진짜 못읽겠어서,,,자바스크립트, 리액트도 책 읽고 시작했던거 아니니까 ~~~ 그냥 냅다 시작해보려고 합니다 제 삽질 많이 봐주세요  vite 프로젝트 생성하기 일단 저는 vite 를 사용해서 시작할거라 아래의 명령어를 터미널에 입력해주었습니다pnpm create vite todolist   원하는 것 선택 해줍니다React - Typescript 를 선택해주었습니다! src 폴더에서..

React 2024.05.13

리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 3편, 전체코드공유

https://h2s0.tistory.com/97 리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 1편안녕하세요 희새입니다!일이 있어서 (?) 리액트로 틱택토 게임을 구현해야 하는데, 헷갈려서 정리하고자 + 지피티에게 물어본 것들을 더 잘 이해하기 위해서 글을 씁니다 :) 제가 구현하고자 하h2s0.tistory.comhttps://h2s0.tistory.com/98 리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 2편https://h2s0.tistory.com/97 리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 1편안녕하세요 희새입니다!일이 있어서 (?) 리액트로 틱택토 게임을 구현해야 하는데, 헷갈려서 정리하고자 + 지h2s0.t..

React 2024.05.10

리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 2편

https://h2s0.tistory.com/97 리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 1편안녕하세요 희새입니다!일이 있어서 (?) 리액트로 틱택토 게임을 구현해야 하는데, 헷갈려서 정리하고자 + 지피티에게 물어본 것들을 더 잘 이해하기 위해서 글을 씁니다 :) 제가 구현하고자 하h2s0.tistory.com리액트 틱택토 게임 만들기 1편을 보고 오시면 좋습니다 ~~~  안녕하세요 히새입니당바로 2편 시작해보겠습니다!!! 저번에 심판 함수가 없어서 한 줄을 만들었는데도 불구하고 계속 패를 놓았었는데요심판 함수를 만들어서 한 줄이 완성되면 게임을 멈추고, 점수를 줘보도록 하겠습니다. 승, 패 구별 함수인 referee 함수이다.referee 는 심판이라는 뜻입니다.! co..

React 2024.05.09

리액트로 사용자 vs 컴퓨터 Tic Tac Toe 틱택토 게임 구현하기 1편

안녕하세요 희새입니다!일이 있어서 (?) 리액트로 틱택토 게임을 구현해야 하는데, 헷갈려서 정리하고자 + 지피티에게 물어본 것들을 더 잘 이해하기 위해서 글을 씁니다 :) 제가 구현하고자 하는 틱택토 게임은 기존 리액트 공식문서 틱택토 게임에서 1. 컴퓨터와 대결2. 승, 패에 따른 점수 기록3. 게임 리셋 기능이 추가 된 틱택토를 구현하려고 한다. 이 기능을 위해 내가 해야하는 것을 정리해보자면 (한 칸을 square 라고 했을 때) square 클릭함수,컴퓨터가 수 놓는 함수,승패 구별 함수,게임 리셋 함수,score 업데이트 이렇게 인 것 같다. 게임 보드판, 현재 차례, 점수를 상태로 관리해 줄 것이다.현재 차례는 사용자가 O, 컴퓨터가 X square 클릭 함수인 handleClick 함수이다...

React 2024.05.07

프론트엔드 개발자 Github 프로필 꾸미기

안녕하세요 히새입니다! 오늘은 github 프로필 꾸미는 방법에 대해 포스팅 해 볼게요 먼저 제 깃허브 프로필은 이렇습니다 Repositories 에 New 버튼을 누르고 본인 아이디와 똑같은 이름인 레포를 하나 만들어줍니다 저는 이미 만들어놔서 already exists 라고 뜨지만 처음 만드신다면 잘 만들어질겁니다! 그리고 아 다 만들었고 다 귀찮고 설명 필요없고 복사해서 똑같이 쓸거니까 코드 내놔 🦖🧟 🦕 🧟‍♂️ 라고 하신다면... 여기있습니다.. ![header](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=150&section=header&text=heeso&fontSize=50) ### I am a junio..

Git 2024.04.04

드롭다운 메뉴를 만드는 <select> 태그와 리스트를 생성하는 <optgroup>, <option> 태그

https://www.youtube.com/watch?v=gRyvG7PZ4m0&list=PLkC56g8fboI0HghByzVuD2Vz8ROUXfF_j&index=2&t=2s 바닐라 자바스크립트 코딩을 하는 스터디 2회차를 진행 중에 select 라는 태그를 발견하게 되었다. select 태그는 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용한다. select 태그 안에 optgroup, option 태그를 사용해 리스트를 생성할 수 있다. optgroup 태그는 옵션의 카테고리를 지정할 수 있고, option 으로 드롭다운 리스트를 정의할 수 있다. 사용 예시 당신의 최애 디저트는? 화채 빙수 붕어빵 호떡 HTML 삽입 미리보기할 수 없는 소스 📃 select 속성값 📃 🎈 autofocues :..

HTML 2024.01.24

코딩테스트 풀이 - 카운트 다운

안녕하세요! 티스토리에는 오랜만에 글을 씁니다 :) +코딩테스트도 굉장히 오랜만에 푸네요..하하 그 동안 저는 10일간의 단기 프로젝트를 무사히 마치고, 행복한 연말도 보내고 새해 첫 날 해돋이도 보고 돌아왔습니다. ( 단기 프로젝트 관련 포스팅도 작성 예정입니다, 리펙토링 과정 중에 있어 오류가 해결되는대로 배포주소 공유할게요! ) 요 며칠간 일상 루틴을 잃어서 헤롱헤롱대고 있었지만, 새해가 밝은만큼 다시 일상을 찾아가려합니다. 좌절할 일이 많을 것 같은 해이지만 편안하고 꾸준한 한 해가 되었으면 좋겠습니다. 모두들 2024년도 화이팅입니다 🌅 for 문을 사용하여 i 값을 start로 해서 1씩 빼주는 값을 i 로 만들어 배열에 넣어주었다. for 문을 사용하지 않고 만들어보자! fill().map(..

코딩테스트 2024.01.03