728x90

Vue 6

환경변수를 설정하여 api key 숨기기.

https://yuniel.tistory.com/60 axios를 통한 오픈 API 연결하기 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다 yuniel.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은 웹팩으로 설치한 경우라서 해당이 안 되시는 분들에게는 매우 불친절한 설명이라고 생각이 들었다. https://yuniel.tistory.com/34

[뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자

react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그 중에 가장 체감적으로 많이 느껴지는 부분은 바로 useEffect를 사용할 때이다. 아마 랜더링 될 때, 업데이트될 때, 렌더링이 디스트로이 될 때 모..

[뷰쟁이의 리액트 시작하기] react useState로 변수를 선언해보자

뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼 const test = ‘테스트입니다’; 라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라. 먼저 useState를 쓰는 형식이 있다. const [ 변수명, 변수정의함수 ] = useState(기본값); const [ count, setCount ] = useState(0); 즉, count + 1을 하기 위하여 반드시 setCount(count + 1)} > 다음과 같은 형식으로 써야만 인식한다. 이는 ..

[뷰쟁이의 리액트 시작하기] 리액트 hook 이란?

React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이었습니다. 그러나 클래스형 컴포넌트의 치명적인 단점은 컴포넌트 사이에서 상태 로직을 재 사용하기 어려우며, 이에따라 코드가 길고 복잡해짐을 야기합니다. 이를 보완하기 위하여 나온 것이 바로 hook입니다. (스우파 HOOK 아님 주의. 아이키 언니 멋있어요>

webpack-server로 설치 후, 환경변수 설정하기

보통 vue cli를 이용하여 vue를 설치하면 package.json에 라는 설정이 있기 마련이다. 근데 어찌된 일인지 이번에 설치한 버전은 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 이렇게 적혀있는것이 아닌가. (여담으로 맥 진짜 못 쓸 것 같다 ㅠㅠㅠㅠ 캡쳐를 하고 싶은데.... 30분 째 저거 하나 겨우 캡쳐했다...) 아마 웹팩으로 설치된 것 같다. 아무튼 저렇게 설치되어 여태 하던 방식으로 환경변수 파일이 안 먹는것이다 ㅠㅠㅠ 결론은 config > dev.env.js / prod.env.js 에서 바꾸어주면 된다. 더불어 module.exports = merge(prodEnv, { NO..

[뷰쟁이의 리액트 시작하기] 리액트를 알아보자.

글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을 시원하게 한 번 내려주시길..!) 인생을 흘러 흘러 살아오다가 문득 눈을 떠서 바라본 지금의 나는 VUE를 사용하는 프론트엔드 개발자가 되었다. 세상에 여러 직업이 많고, 하고 싶은 것도 참 많은 나였지만 그 중에 프론트엔드 개발자는 없었고, 생각도 해 본 적이 없었다... 아무튼 프론트엔드의 세계에 발을 들이게 되었는데, 기왕 할거면 전문가가 되어야 하지 않겠는가..! VUE에만 국한 될 수 없어 React를 하자고 마음먹은지 엄~청 오랜 시간이 지났지만 도무지 하지 않는 나를 채찍질 하기 위해 또 그간 많은 블로그들의 도움을 받았기에 이제는 나도 도움을 주고자 오늘부터 리액트를 포스팅하기로 했다- 작심삼일이 되지..

728x90