react
React에서 .env 파일에 환경변수 넣어쓰기
안녕하세요 웹 코기입니다. 오늘은 보안이 필요한 API 키를. env 파일에 넣어서 꺼내와 사용하는 방법을 알아보겠습니다!! 1.. env 파일 만들기 먼저 리액트 최상위 루트에. env 파일을 만들어줍시다. 그리고 깃에. env파일이 올라가면 안 되니 . gitIgnore에. env를 꼭 추가시켜줍니다!! 2. 변수 내용 작성 파일 안에 저장할 환경변수 내용을 적어줍니다. 이때 중요한 점은, 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 합니다!! 이걸 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는 것으로 확인됐어요 3. 등록한 변수 사용하기 리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만, .env에 등록된 변수는 별도의 import가 필요하지 않아요 전역 어디서든..
컴포넌트가 사라지면 컴포넌트 안에 작성한 기능도 함께 사라진다 ?
안녕하세요 프런트엔드 개발자 웹 코기입니다. 리액트로 작업하던 중 console.log가 찍히지 않아 헤매다가 새로운 사실을 발견해 정보 공유합니다. 원하는 작업순서 1. 로그인을 하면 컴포넌트를 보이지 않게 만든다. 2. 아래 이미지와 같이 안에 useEffect에 있는 console.log를 찍어 value를 확인한다. 콘솔이 찍히지 않는다? 위처럼 작업했지만 콘솔이 찍히지 않고 증발(?)했어요 그래서 컴포넌트를 유지한 채로 콘솔을 찍어보니 찍혔습니다. 당연해 보일 수 있는 결과지만, 기존에는 컴포넌트 안에 return()에 있는 DOM만 사라지게 하고 영향을 끼치지 않는 줄 알았습니다. 하지만 컴포넌트안에 함수 변수 등 작성된 모든 기능에도 영향을 준다는 사실을 알 수 있었어요!!
React 장단점 분석 정리
안녕하세요 프론트엔드개발자 웹코기입니다. React 공부를 계속하면서 실무에서 사용해왔지만, 장단점을 직접 말로 해보려고 하니 제 머릿속이 정리가 안돼서 난잡해지더라고요. 그래서 오늘은 스스로 정리도 할 겸 React 장단점에 대해 분석해보겠습니다!! React 장점 1. Virtual DOM 사용 DOM 이란? 문서 객체모델 (Document Object Model) 말이 어려워서 쉽게 머리에 들어오지 않으실 텐데요, 쉽게 생각하면 html 태그 하나하나의 요소를 지칭한다고 생각하시면 되겠습니다. Real DOM 이란? Real DOM = 실제 DOM 처리 기존 Javascript & jQuery는 real DOM을 사용합니다. (최근 떠오르는 스벨트도 Real DOM을 사용한다고 합니다...) DOM..
React Native로 2개월간 사내 앱 프로젝트 작업한 후기
안녕하세요 최근 퍼블리셔에서 프론트엔드 개발자로 전향한 웹코기입니다. 프론트엔드 개발자로 입사 후 React Native(이하 RN)를 이용한 프로젝트 앱을 약 2개월간 진행하게 되었는데요 이 RN은 나에게 천국과 지옥을 선물했습니다. 어느새 애증의 관계가 되어버린 RN에 대해 저와 같은 시행착오를 덜 겪으셨으면 하는 바람에서 이 글을 작성하게 되었습니다. 웹 환경에만 익숙했던 제가 RN을 사용하게 되었을 때의 생각을 반영하고 있기 때문에 제 생각이 편향적일 수도 있지만, 저와 비슷한 상황이시라면 분명 도움이 되실 거라 생각합니다. React Native, 여러 장점이 있는 정말 좋은 기술이라고 생각합니다. 하지만 제가 필요한 부분에선 확실히 알고 작업을 시작한 것이 아니었기 때문에 지옥을 맛보기도 했는..