react

원래 갖고 있던 EC2에서 React로 만든 웹을 docker로 호스팅하고 있었다. 근데 새로운 웹을 하나 더 만들고 서브도메인으로 호스팅하고 싶었다. 앞에 Nginx 웹서버에서 들어오는 도메인에 맞춰서 포트를 나눠주면 잘 되지 않을까..?라고 생각했는데 2가지 문제에 부딪혔다. 사실 하나의 문제라고도 볼 수 있는데, 지금 쓰는 서버가 프리티어로 t2.micro라는 점이다. 첫번째로는 CPU가 못버텼다. build한 파일만 올려서 호스팅했으면 좀 달랐으려나 라는 생각이 있긴한데, 사이드 프로젝트에 build만 자동화해서 올리게 붙이기는 오버였고, npm install이나 start, build 과정이 너무 오래걸렸다. 두번째로는 처음에 EBS 용량을 8GB로 작게 설정해뒀더니 용량이 초과하는 이슈도 있었..

React로 사이드프로젝트를 하던 중 특정 변수에 대해 거의 모든 컴포넌트에서 참조를 하고 변경시 랜더링해줘야 하는 이슈가 생겼다. 개발 환경과 언어는 MacOS, React(v18.2.0), Typescript(v4.8.4), Redux(v4.2.0)이고, 배포는 docker로 묶어서 EC2에 띄울 예정이다. 그냥 App.tsx에서 useState로 State Hook 만들어서, 변수와 컨트롤러를 만들 수도 있었겠지만 depth가 커지는 컴포넌트가 생기면, 코드 가독성이 저해될 것 같았다.(사실 나만 보는 코드니까 상관은 없지만...) 그래서 상태 관리 라이브러리인 Redux를 사용해봤다. 이전에는 Redux가 react에 종속적인 라이브러리인줄 알았는데, 이번에 공부하며 찾아보니 JS를 위한 상태관리..

지금 하고 있는 프로젝트에서 React-Native 기반의 앱에서 사진을 찍어서 upload 요청을 하면, 받아서 S3에 올리고, 다시 꺼내주는 API를 만들어야했다. 처음에는 REST API 대신, 원래쓰던 GraphQL로 트라이 하다가, 몇번에 실패 후 사진 업로드 모듈만 따로 REST로 때어냈다.(아 아무튼 사진만 업로드 되면 되니까...) 하는김에 AWS 보안 설정도 좀 더 손봐서 추가해본다. 1. AWS IAM 사용자 추가 및 Access Key 발급 AWS 콘솔에 root 유저로 로그인 되어있다는 가정하에, 좌측 상단에서 IAM 검색 -> 사용자 -> 사용자 추가 위와 같이 액세스 키, 암호를 할당, 이후 쭉쭉 다음 눌려서 검토 후 생성 -> 이때 key를 csv로 받을 수 있고, 유저 이름과..

현재 프로젝트는 Ubuntu(EC2)에서 nodejs+express+GraphQL로 백엔드 구성, 프론트는 React-Native와 약간의 React 기반 웹뷰로 진행되고 있다. Webview에서 React로 카카오 지도API를 띄우는 과정에서, 현재 사용자의 위치정보를 받기 위해 Geolocation API를 사용했는데, 로컬에서는 잘 돌아가는 것이 서버에 띄우니까 빈화면이였다... Geolocation PositionError 어쩌고 저쩌고 나오길래 구글링해봤더니 Geolocation API는 브라우저에서 지원하는 네이티브 API로 localhost가 아니면, https://에서 작동한다는 것이다. 유료 ssl을 쓰자니 아직 프로젝트 지원비 신청을 안해서 너무 비싸서 못쓰겠고, openssl 같은걸로..

앞선 포스트에서 @Apollo/Client 에서 지원하는 React Hook을 이용하는 방법을 공부했었다. 하지만 실제 프로젝트에 쓰려고 보니, GraphQL을 가져오는 과정이 React Component 안쪽이 아닌 곳에서는 useQuery, useMutation과 같은 Hook을 사용할 수 없다는 점이었다. (이 사실을 모르고, 거의 이틀을 억까 당하며 고생했다.) 위 사실을 깨닫고 나서는 새로운 방법 axios 라이브러리를 이용해서 직접 API 쿼리를 날리는 방법을 사용했다. 이렇게하면 어디서나 함수호출의 형태로 response를 받아오는것이 가능해졌다. 본인은 백엔드를 개발하지만, 결국 프론트 개발자에게 맞춰서 API 호출 규약을 짜서, 넘겨줘야 했기에 프론트 언어 (혹은 라이브러리)에 대한 이해..

이번에 소마 프로젝트를 하게 되면서, BackEnd에서 뭔가 더 배우고 싶다는 생각이 들었다. 다른걸 시도 해볼만한게 2개 있었는데, SQL 쿼리 작성할 때 ORM을 쓰는 것과, API 단에 GraphQL을 사용하는 것이었다. ORM을 도입하기엔 쿼리가 복잡하진 않았고, REST API 대신 GraphQL을 도입하기로 했다. server단은 다른 포스팅에서 다루고, client 단만 다룰 예정이다. 처음에 npx CRA로 react 앱을 생성하고, 3가지 파일만 바꿔주면 된다. React는 쉬운데, React Native에서 적용하려니 에러가 나서 거진 하루는 털린거 같다... React Native에서 할때는 컴포넌트를 같은걸로 바꿔 써야한다. + android, ios 각각에서 외부 api http..

Svelte는 멘토님의 일침과 함께 고이 던져두고, 원래 공부하던 리액트로 돌아왔다. NodeJS는 설치되어 있다는 가정하에 시작한다. 이번엔 카카오API로 로그인을 만들어보고, 다음편엔 sms나 email을 push하는 기능을 만들어볼거다. 개인 프로젝트명을 요약하면 '리액트와 노드JS를 사용해서, sms, email, kakao 메시지를 push하는 기능을 만들껀데, 인증은 카카오 로그인 API로' 정도가 될것 같다. Setting 1. 프로젝트 폴더(빈 폴더)에서 npm init을 해주고, client, server 폴더를 만들어준다. npm init mkdir client mkdir server 2. client 폴더로 들어가서 npx CRA . 을 해준다. cd client npx create-..

http://dongjun.me wq0212 / Dongjun Shin dongjun.me 최근 새로운 사람만날일이 부쩍 많아졌다. 다들 처음 만나서 이름, 나이, 학력을 물어보고 기술스택을 물어보며 첫마디를 땐다. 아무래도 다들 팀원을 구하고 있어서 그런가 이름보다 기술스택을 먼저 물어보는 일도 허다하다. 어딜가나 본인을 소개하고, 본인을 어필하는 일이 반복되다보니 개인적으로는 적지 않은 피로감도 느낀다. 누굴 만나면 면접을 만난 복어마냥 촉을 세우고, 자기를 소개해야하고, 남이 소개하는걸 들으며 (심지어 받아적는 분들도 있다) 팀원을 물색해야한다. 앞으로 개발자로 계속 일하다보면 본인을 소개할 랜딩페이지 정도는 있으면 좋겠다 싶어, 도메인도 하나 지르고 아래 두 선배분들 페이지를 참고해서 만들어 보았..

fullpage.js는 스크롤 한번에 창을 한 단위로 내리는, 약간 PPT? 같은 느낌으로 웹 사이트가 동작하게 해준다. https://alvarotrigo.com/react-fullpage/ react-fullpage.js - Official React.js component for fullPage.js Official React.js component for fullPage.js. An easy to use wrapper for your react application. alvarotrigo.com 이런느낌으로 마우스 스크롤 한칸(?)에 한페이지가 통으로 넘어가서 사이트 첫 메인페이지에 써보고자 한다. 다른 프로젝트를 하면서 landing page를 만들때 리액트 없이 생으로는 써봤는데, 이번 Rea..

리액트는 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'이다. Front : react Back : nodejs + express DB : mongodb 로 이뤄진 프로젝트를 기획중인데, 준비하며 리액트 공부를 해보고자 한다. 2편까지의 setting으로 node와 npm을 설치해준다. 1. npm의 상위호환인 yarn을 설치해준다. (성능 속도를 개선했다고 한다.) $ sudo npm install -g yarn 2. create-react-app을 설치하고, 프로젝트 폴더를 생성한다. (이하 myshop 자리엔 프로젝트 폴더) $ sudo yarn global add create-react-app $ sudo create-react-app myshop 생성되면 다음과 같이 뜸 3. ..