728x90

react 6

react creat-react-app 설치, eslintrc.js 통해 eslint 설정하기

react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript. www.npmjs.com 나는 먼저 최상단 root에 eslint를 설정할 수 있는 eslintrc.js 파일을 생성하였다. 그리고 내부에는 package.json에 기본적으로 설정되어 있던 코드와 내가..

환경변수를 설정하여 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 아님 주의. 아이키 언니 멋있어요>

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

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

728x90