개발자가 되고 싶은 새

오늘은 리액트 차트 라이브러리인 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-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..

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

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..

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

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

멋사 과정에서 프로젝트할 때 백엔드 정보들을 관리하기 위해 pocketbase 를 사용했다. 개인 프로젝트 리펙토링에서 가장 첫 번째로 할 일이 이미지 파일을 포켓베이스에서 가져오도록 바꾸는 것이었는데, 세상에나 포켓베이스를 어떻게 실행시키는지 기억이 안나는 것이다... 흐린 기억을 더듬어... pnpm pocketbase 였던 것 같아 실행해보았으나 설치가 되지 않은 상태였다. 프로젝트 하기 전에 간단하게 했던 과제물인데, 데이터를 그냥 쌩으로 작성했었나보다... 고생했다 과거의 나 🎈 포켓베이스 설치 https://pocketbase.io/docs/ PocketBase - Open Source backend in 1 file Open Source backend in 1 file with realtim..

리액트에서는 앱에서 재사용 가능한 컴포넌트를 만들 수 있다. UI 의 모든 부분은 컴포넌트이다. 리액트의 함수 이름은 항상 대문자로 시작한다. ( HTML 태그와 구분하기 위해서 ) 내부의 마크업을 반환시켜 브라우저에 렌더링한다. 컴포넌트는 JSX 라 불리는 구문 확장을 사용해 마크업을 생성하는 javascript 함수이다. 중첩구성은 허용되지 않는다. 🎈컴포넌트 작성법 function Profile() { return( ); } export default Profile; 1. 컴포넌트를 내보낸다. `export default Profile;` 혹은 export default function Profile () {} 로 작성가능 2. 함수를 정의한다. `function Profile` 3. 마크업을 작성..

function 히새() { function 안녕() { } } 히새() 지금 히새라는 함수를 실행하면, 안녕 이라는 함수를 제외한 모든 코드가 실행된다. 왜냐하면 안녕 함수를 실행시켜주지 않았기 때문이다. function 히새() { function 안녕() { } 안녕() } 히새() 이렇게 내부에서 안녕 함수를 실행시켜주는 구문을 작성해주어야 히새 함수 실행 시 안녕 함수가 바로 실행될 수 있다. 그런데 리액트에서는 우리가 함수를 실행시키는게 아니라 리액트가 알아서 실행한다. 똑똑한 리액트 친구는 히새 안에 있는 함수인 안녕 함수를 히새 함수가 실행된 다음에 실행시킨다. 단, 조건이 있다. 함수 이름을 useEffect 로 해줘👸🏻 그래서 리액트의 훅 중에 하나인 useEffect 는 "원래" 맨 ..