분류 전체보기
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만 사라지게 하고 영향을 끼치지 않는 줄 알았습니다. 하지만 컴포넌트안에 함수 변수 등 작성된 모든 기능에도 영향을 준다는 사실을 알 수 있었어요!!
REST API vs GraphQL
GraphQL이란? 위키백과에 정의된 내용은 아래와 가습니다. "그래프QL은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다. 그래프QL은 REST 및 부속 웹서비스 아키텍쳐를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다." GraphQL은 페이스북에서 만든 쿼리 언어입니다. 리액트를 사용하면서도 느낀거지만 페이스북에서 만든 기술은 본인들이 갖고 있는 문제점을 더 효율적으로 풀어내기 위해 새로운 기술을 창조한다는 것을 우리는 알고 있습니다. 이 GraphQL은 기존에 쓰던 방식인 REST API과 비교하면 어떤 장점이 있는지 구체적으로 파악하기 쉽습니다. REST API vs GraphQL 1. O..
JSON.parse) Unexpected token u in JSON at position 0 에러 해결
안녕하세요 프런트엔드 개발자 웹코기입니다. 더운 날씨와 함께 더 뜨거워지는 머리로 요즘 계속 실시간 채팅 관련 앱과 관련해서 React, ReactNative를 이용해 작업 중인데요 ~! JSON.parse에서 에러가 나서 한참을 찾다가 문제를 해결해 공유합니다...!! Unexpected token ~? 먼저 서버에서 내려받은 JSON을 파싱 하기 위해 아래와 같이 코드를 작성했습니다. if (lastMessage != null && lastMessage != undefined) { const a = JSON.parse(lastMessage.data); } 서버에서 내려받은 JSON 데이터를 parse 하는 과정에서 아래의 오류가 발생했습니다. 문법 에러? 기대하지 않은 토큰?이라고 하는데 겉보기엔 전..
[백준/nodejs] 2562번 : 최댓값
문제 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어지면, 이들 중 최댓값은 85이고, 이 값은 8번째 수이다. 입력 첫째 줄부터 아홉 번째 줄까지 한 줄에 하나의 자연수가 주어진다. 주어지는 자연수는 100 보다 작다. 출력 첫째 줄에 최댓값을 출력하고, 둘째 줄에 최댓값이 몇 번째 수인지를 출력한다. 예제 입력 1 복사 3 29 38 12 57 74 40 85 61 예제 출력 1 복사 85 8 문제풀이코드 let input = require('fs').readFileSync('/dev/stdin').toString().s..
[백준/nodejs] 10818번 : 최소, 최대
문제 N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다. 출력 첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. 예제 입력 1 복사 5 20 10 35 30 7 예제 출력 1 복사 7 35 문제풀이코드 let input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); let count = Number(input[0]); let numberStr = inp..