축구 풋살 점수판 프로그램
https://score-board-fe.vercel.app/football 축구나 풋살에서 사용할 수 있는 점수판입니다. 업데이트 예정 기능 소리 기능 추가 휴식 시간 기능 추가 기능 설명 상단 - 전체 시간 표시 점수 표시 기능 팀 이름 변경 기능
- Develop/Made by powerku
- · 2023. 11. 3.
반응형
평소에는 InteliJ를 이용해서 git push를 해서, git을 사용할때 인증을 할 필요가 없습니다. 하지만, 터미널에서 git push를 할때마다 username과 password를 입력해야 해서 번거로울때가 있습니다. 왜 자꾸 로그인 정보를 물어보나 찾아보았습니다. git push Username for 'https://github.com': powerku Password for 'https://powerku@github.com': 원인 제가 git clone 할때 HTTPS 방식으로 git clone을 해서 터미널에서 git push를 할 때 로그인 정보를 묻는 것이였습니다. 해결방법 git remote set-url origin "YOUR_GIT_URL" SSH 방식으로 git clone를 하..
Github SSH 키 만들기 터미널을 이용해서 Github SSH 키를 만들 수 있습니다. 1. 터미널을 열기 ssh-keygen -t rsa -b 4096 -C "YOUR_EMAIL" 2. 키 복사하기 출력된 키를 복사합니다. cat .ssh/id_rsa.pub 3. GitHub > Setting > SSH and GPG keys 4. New SSH KEY > Key 입력 이후 SSH 방식으로 git clone을 하면 로그인 인증 과정 없이 바로 git push가 가능합니다. Git clone HTTPS 와 SSH 방식 차이점 git push 할때 자꾸 username, password 물을때 해결방법 평소에는 InteliJ를 이용해서 git push를 해서, git을 사용할때 인증을 할 필요가 없습..
자바스크립트에서 문자열로 변경하는 방법이 여러가지 있습니다. 그 중 4가지를 소개 시켜드리겠습니다. String() String 생성자를 이용해서 문자열 변경할 수 있습니다. const num = 123; const obj = { name: 'superman' }; const arr = ['superman', 'batman'] const str = String(num); // '123' const str2 = String(obj); // [object Object] const str3 = String(arr); // superman,batman .toString() toString 메서드를 이용해서 문자열로 변경할 수 있습니다. const num = 456; const obj = { name: 'supe..
안녕하세요, 파워쿠 입니다. 2023년 11월 19일이 되면, 직장 생활 5주년이 됩니다. 개발자 5년차가 된 기념으로 저에 대해 간단하게 쓰려고 하니 편하게 봐주세요. 전공 저는 e-비즈니스 전공을 하였습니다. 대학교 원서를 작성할 때는 경영학과를 가고 싶었지만 상대적으로 경쟁률이 높았었고, 고등학교 시절 페이스북을 만든 하버드생 마크 주거버그 관련 내용의 영화를 보고 나도 저런 소셜 네트워크 서비스를 만들고 싶다는 생각으로 e-비즈니스 학과에 입학 지원서에 적었던 기억이 있습니다. e-비즈니스 전공은 생소할 수 있는 학과지만 경영, ERP, 컴퓨터 공학 등 다양한 과목들을 배울 수 있는 학과였습니다. 대학교 4학년 때까지 개발자가 될 거라고는 전혀 생각을 못하고 있었습니다. Hello World~ 4..
자바스크립트에서 문자열을 숫자로 변경할 수 있습니다. parseInt 함수를 사용하거나, Number 생성자를 이용하는 방법이 있습니다. parseInt와 Number를 사용하면 간단하게 문자열을 숫자로 변경할 수 있지만, 몇 가지 차이점이 있기 때문에 주의하셔야 합니다. 기본사용법 const str = '100'; parseInt(str); // 100 Number(str); // 100 뒤에 문자가 들어간 숫자 const str2 = '100px'; parseInt(str2); // 100 Number(str2); // NaN 앞에 문자가 들어간 숫자 const str3 = '약300'; parseInt(str3) //NaN Number(str3) // NaN 공백이 들어간 숫자 const str4 ..
React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3. 중복 요청 방지 4. 오래된 데이터 업데이트 5. 로딩, 에러, 데이터 결과 처리가 쉽습니다. useQuery를 이용해서 직관적으로 사용할 수 있고, 보일러플레이트 코드 작아서 사용하기 간편합니다. 또, 캐시를 이용해서 데이터를 가지고 있어서 성능이 우수하고, 로딩 및 에러 처리 하기가 쉽습니다. 첫 번째 API 호출 시에 데이터를 캐시에 가지고 있습니다. 두 번째 동일한 API 호출 시 캐시에 가지고 있는 데이터를 즉시 반환합니다. 그 이후 다시 데이터를 조회한 ..
Socket.io 란? 웹 어플리케이션에서 양방향 통신을 가능하게 해주는 라이브러리 입니다. Socket.io 라이브러리와 Next.js 프레임 워크를 이용해서 실시간 채팅을 구현 하겠습니다. 실시간 채팅 만들기 1. Next.js 프로젝트 생성 npx create-next-app Next.js 설치하기 npx create-next-app Next.js 설치하는 방법에 대해서 알아보도록 하겠습니다. 설치하는 방법에는 두가지가 있습니다. npx create-next-app을 이용해서 한 번에 자동으로 설치하는 방법과 next.js에 필요한 라이브러리를 하나 powerku.tistory.com 2. axios, socket.io, socket.io-client 라이브러리 설치 npm install axios..
https://score-board-fe.vercel.app/football 축구나 풋살에서 사용할 수 있는 점수판입니다. 업데이트 예정 기능 소리 기능 추가 휴식 시간 기능 추가 기능 설명 상단 - 전체 시간 표시 점수 표시 기능 팀 이름 변경 기능
Next.js 에서 React와 TypeScript를 이용해서 타이머를 구현해보도록 하겠습니다. React Hook은 useEffect와 useMemo를 사용하였습니다. 1. 컴포넌트 렌더링 시 setInterval 함수를 통해서 1초 감소 2. setInterval 종료 3. 다시 재렌더링 이런 메커니즘으로 타이머가 진행 됩니다. 1분 이하에는 0.1초 단위로 시간이 내려갑니다. See the Pen React + TypeScript Starter by powerku (@powerku) on CodePen. 타이머 컴포넌트 timer.tsx const Timer = ({minute = 15, second = 0}: TimerProps) => { const [min, setMinute] = React.u..
useMemo란? useMemo는 리액트 훅 중의 하나입니다. Memoization 메모이제이션. 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술. 리액트에서 재 렌더링 될때 마다, 계산된 값을 캐시로 가지고 있기 때문에 동일한 계산을 반복하지 않고 이전 캐시된 값을 사용하여 성능 향상을 시킬 수 있습니다. 계산비용이 높거나, 컴포넌트가 불필요하게 자주 렌더링 되는 경우에 사용하면 좋습니다. useMemo 사용법 useMemo(calculateValue, dependency) 파라미터 caculateValue 계산하려는 값을 반환하는 함수 입니다. 반드시 return 값이 있어야 합니다...