Language
tensorflow.js 찍먹해보기 (이미지 분류 from 생활코딩)
안녕하세요 웹코기입니다. 시간이 지날수록 제가 사랑하는 JS의 영역이 넓어짐에 따라, 예전부터 관심있던 머신러닝 기술인 tensorflow.js을 드디어 맛보게 되었어요. 생활코딩을 통해 학습한 텐서플로우의 내용에 대해 공유합니다. 텐서플로우의 사용 방향 머신러닝 (기계학습) => 기계를 학습시켜서 인간의 판단능력을 기계에게 위임하는 기술 1. 텐서플로우를 이용해 해결하려는 문제는 ? '지도학습 영역의 회귀 문제' (말이 어렵다.. 내용을 풀어서 아래에 정리) 지도학습이 된 경우, 강아지의 이미지를 보고 '댕댕이'라는 결과를 도출할 수 있음. 그렇다면 '지도학습'의 두가지 방식 1. 회귀 => 맞추려는 정보가 숫자일 때 2. 분류 => 범주형일 때 '회귀와 분류' 가 가능한 여러 알고리즘 중 머신러닝은 ..
reactNative) FCM 푸시알림 앱 내부에서 날리기
안녕하세요 웹코기입니다. 최근 파이어베이스에서 푸시알림을 날려서 앱에 받는 작업을 해봤는데요, 그 외에도 앱 내부에서 푸시알림을 만들어서 앱에 전달하는 방법을 작업해봤습니다. 그 내용을 공유합니다 !! react-native-push-notification 라이브러리 아래의 local notification라이브러리를 이용했습니다. https://github.com/zo0r/react-native-push-notification#local-notifications GitHub - zo0r/react-native-push-notification: React Native Local and Remote Notifications React Native Local and Remote Notifications. C..
React) 함수형 컴포넌트에서 에러 잡아내기
안녕하세요 프런트엔드 개발자 웹 코기입니다. 리액트 작업을 하다 보면 에러와 로딩 처리를 해줘야 하는 경우가 있는데요, 작업하다 보니 에러 처리를 모두 건너뛰고 만들기에 급급해.. 뒤늦게 에러를 잡아보려니 해야 할 작업이 상당해서 당황스러웠습니다. 그렇게 찾던 중 알게 된 정보를 공유합니다. componentDidCatch를 사용하자 리액트에서는 위의 객체를 이용해 에러가 발생한 곳이 어디인지 알 수 있고, 메시지도 받아볼 수 있습니다. 아래는 벨로 퍼트님이 작성한 문서입니다. https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook 26. compo..
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..