본문 바로가기

전체 글77

[React.js] dotenv 라이브러리로 .env .dev .local 환경 변수 설정 dotenv 파일을 일단 설치 해 줍니다 yarn 혹은 npm 설치 방법 $ npm i dotenv $ yarn add dotenv dotenv 사용 예시 입니다 import { config } from "dotenv"; config(); export const API = `${process.env.REACT_PROTOCOL}://${process.env.API_URL}`; config를 import 해준 후 , 해당 JS 파일에 config(); 선언 후, process.[환경변수파일명].[선언된규칙] 으로 사용할 수 있습니다. 예시 : process.env.REACT_PROTOCOL 그럼 .env 파일을 생성 후, 아래와 같이 선안해줍니다. REACT_PROTOCOL="http" API_URL="12.. 2022. 11. 22.
[강릉 맛집] 세인트존슨 호텔 근처 내돈내산 솔직 후기 고선생화덕생선구이 안녕하세요. 워케이션을 하게 되었습니다. 당일 워케이션 검색해서 호텔 예약하고 아침에 바로 출발하여 점심에 도착~~ 세인트 존슨 호텔 근처에 맛집을 찾아 다녀왔습니다. 내 돈 내산 강릉 맛집 리뷰입니다. 강릉 하면 생선구이 생각이 나서 (?) 검색해서 왔습니다. 이미 강릉 맛집으로 유명하더라고요. https://place.map.kakao.com/942038293?service=search_pc 고선생화덕생선구이 강원 강릉시 해안로 286 2층 (강문동 27-2) place.map.kakao.com 이미 유명한데 '고선생 화덕 생선구이' 식당에 왔습니다! 일단 창가에 모두 근처에 앉아야 탁 트인 뷰입니다 (창문이 살짝 더럽... 지만...) 실제로 보면 탁 트이고 멍 때리기 좋은 풍경이었습니다. 메뉴는 .. 2022. 11. 18.
[React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결) react를 사용할 때 useEffect로 초기 데이터를 불러올 시 loading 여부를 확인해야 합니다. List 페이지를 구현할 때 "데이터가 없습니다"가 뜬 다음 데이터가 뜨는 현상을 자주 겪었을 것입니다. 보통 loading 플래그를 사용해서 이를 해결했는데, 이 과정 없이 해결할 수 있는 방법이 useLayoutEffect입니다. useLayoutEffect 사용방법은 useState와 동일합니다. 차이점을 간략히 설명드리겠습니다. 예를 들어, useEffect(()=>{ setData("data"); }, [ ] } 이렇게 초기 함수를 선언해주면 data은 화면이 모두 띄운 후 작동하게 됩니다. 즉, "데이터가 없습니다"를 화면에 띄운 후 깜빡임으로 변하면서 "data"를 띄웁니다 하지만 us.. 2022. 11. 16.
[React.js] useReducer, useState은 언제 사용 하는가? React 함수형 컴포넌트를 사용하면서 가장 많이 사용되는 useState가 있다 useReducer 등 여러 함수가 있는데, 차이점과 사용 용도를 공부하여 정리해 보았다. state를 관리하기 위한 함수 - useState, useReducer 대부분의 사람들이 useSate는 사용할 줄 안다. 하지만 useReducer은 무엇인가 ??????? 차이점은??? 인터넷을 찾아보면 useState 와 useReducer의 사용방법 등 예시가 많이 널려있다.(모든 블로그에 사용 방법이 친절히 설명되어있어 해당 블로그에서는 스킵한다.) 그래서 언제 useSate를 사용하고 언제 useReducer를 사용한다는 말인가? 글쓴이는 useSate와 useReducer를 언제 사용하는지 필자의 온전한 의견으로 설명하.. 2022. 11. 16.

티스토리툴바