728x90 더 알아보기166 Timer 기능 import React, { useCallback, useEffect, useRef, useState } from "react"; // 사용자 정의 hook const useCounter = (initialValue, ms) => { const [count, setCount] = useState(initialValue); const intervalRef = useRef(null); const start = useCallback(() => { if (intervalRef.current != null) { return; } intervalRef.current = setInterval(() => { setCount(c => c + 1); }, ms); }, []); const stop = useCallback.. 2021. 12. 20. export와 export default의 차이점 React 문법을 사용하다 보면 모듈을 수출 할 때는 export를 사용하고 사용 방식에는 export, export default가 있고, import를 할 때는 {}를 사용 할 때도 있고 사용하지 않을 때도 있어서 차이점을 정리 해두고 싶었다! 모듈을 내보내고 가져 올 때는 export와 import 지시자를 활용합니다. 차이점 지시어 설명 장점 단점 export {} - named expoert라고 합니다. (ex) import 할 때 무조건 export한 객체 | 함수 이름 - 여러 개의 객체, 함수를 한꺼번에 내보낼 수 있음 내보냈을 떄 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽다. 내보냈을 떄 사용한 이름 그대로 가져오므로 관련 정보를 파악하기 쉽다. export default -.. 2021. 12. 18. 좋은 개발 블로그 찾음 카카오 지도 API를 사용해서 마커 띄우는 방법을 찾아 보던 중에 알게 된 블로그인데 React, typescript에 대해서 자세하고, 알아 보기 쉽게 정리 해주셔서 실전 프로젝트 때 많은 도움이 될 것 같다. https://developer0809.tistory.com/ 이왕이면 최고가 되기 위한 shab 개발일지 ∞ developer0809.tistory.com 다른 조 분들이 하신 인스타그램 보니까 몇분 전, 몇일 전 띄우는 방법 https://kdinner.tistory.com/68 javascript - 날짜 계산(몇일전, 몇시간전, 몇분전) javascript 를 이용해서 몇일전, 분, 시간, 일, 년 까지 구하는 함수 토이프로젝트를 하다가 날짜계산을 하고는 싶은데 moment.js는 무겁다.. 2021. 12. 18. Visual Studio Code 유용한 익스텐션 모음집 익스텐션이란?? : 비주얼 스튜디오 코드에 추가적으로 설치할 수 있는 기능들 1. Better Comments : 주석을 더 잘보이게 해주고 몇 가지 색상 옵션을 추가해준다. https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments Better Comments - Visual Studio Marketplace Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more! marketplace.visualstudio.com 2. Error Lens : 코드에 에러가 있을.. 2021. 12. 16. 라우터를 이용한 접근 제한 구현 사용자의 로그인 상태나 권한에 따라서 접근 할 수 있는 경로가 다릅니다. 물론 서버 쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직 합니다. 이를 그림으로 표현하면 아래와 같습니다. 1. 접근 제한 : PrivateRoute는 로그인한 사용자에게 제공되는 루트이고, 만약 로그인 하지 않은 사용자가 해당 루트로 접근한다면 로그인 페이지로 Redirection을 합니다. 반대로, PublicRoute는 로그인 여부와 상관없이 사용자에게 제공되는 루트입니다. 아래 그림과 같이 이미 로그인한 사용자가 해당 루트로 접근하는 것을 막고자 한다면 restricted 옵션을 줘서 제어합니다. 2. 구현 로직 ( Redirection : 방향 지정, 방향 이동 ) - .. 2021. 12. 15. Proxy Proxy란? : 유저가 인터넷에 요청을 보낼 때 직접 보내는 것이 아니라 Proxy 서버를 거쳐 최종 목적지에 전달하게 한다. 이때 Proxy 서버를 거치면서 유저의 IP를 바꿀 수 있다. 즉, 유저의 실제 IP와 포트를 알 수 없도록 하는 것이 Proxy 서버의 역할이다. React 프로젝트에서 Proxy로 CORS 해결하기 (Local) : CORS는 위에서 설명한 것처럼 처음 리소스를 요청한 주소와 다를 때 발생한다. 그렇다면 Proxy 서버를 거쳐서 처음 리소르를 요청한 주소와 동일하게 한다면 오류는 사라지지 않을까?? 터미널에 Proxy 미들웨어 패키지를 설치한다. npm install http-proxy-middleware 클라이언트와 서버에 포트를 같게 하기 위하여 위처럼 코드를 작성한다... 2021. 12. 15. async, await async와 await란? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로써 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고, 개발자가 읽기 좋은 코드를 작성 할 수 있게 도와줍니다. 개발자가 읽기 좋은 코드란?? : 위에서부터 아래로 한 줄씩 차근히 읽어 나가면서 사고하는 것이 편합니다. 그렇게 프로그래밍을 배웠기 때문이죠! 읽기 좋은 코드와 async, await의 상관성은?? : 아래와 같은 코드를 구성하는 것이 async, await 문법의 목적입니다. var user = fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } fetchUser()라는 메.. 2021. 12. 14. [Error] git push origin master 시 failed to push some refs to 오류 Git에 팀원들끼지 push를 많이 하다 보니 아래와 같은 오류가 발생했다. $ git push origin master To https://github.com/eundol0519/cloneCodingProject.git ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://github.com/eundol0519/cloneCodingProject.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repositor.. 2021. 12. 13. Prettier 세팅하기 Prettier란? Code Formatter로써, 개발자들에게 일관적인 코등 스타일을 유지 할 수 있게 도와주는 툴이다. Prettier 공식 문서 https://prettier.io/ Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io Prettier 세팅하는 방법 https://bigstar-vlog.tistory.com/65 Visual Studio Code Prettier 간편 설정 안녕하세요! 황대성입니다😀 이번 포스팅에서는 Visual Studio Code에서 Prettier 설정 방법을 다루려고 합니다. 글을 시작하기 이 전 Prettier가 무엇이고? 사용했을 때 장점을 말씀드리려고 합니다. Pret b.. 2021. 12. 13. 이전 1 ··· 12 13 14 15 16 17 18 19 다음 728x90
