어제 보다 나은 나

우리 개발팀은 프론트와 백엔드, 인프라의 구분이 없다. 그냥 api 필요하면 노드 서버 코드 수정해서 직접 만들고, 서비스 하나 더 올려야하면 알아서 ec2나 tencent cloud에 인스턴스를 하나 만들어서 인프라 세팅을 해야한다. 인프라 세팅 이라고 한다면 이제 1. dns를 타고 2.load-balancer를 지나 서비스가 올라가있는 3.인스턴스에 4.port로 잘 전달되게 해줘야한다는 것이다. tencent 클라우드에 세팅한다 하면, 텐센트 클라우드는 route53같은 서비스를 제공하지 않기 때문에 aws에서 먼저 도메인을 설정하면서 시작한다. tencent클라우드에서 원하는 도메인에서 들어올 로드 밸런서 ip를 route53의 도메인에 연결해준다. 그럼 1에서 2를 연결한 상태가 된다. 그러고..

회사 신규 프로젝트하는데 기획, 디자인, 프론트, 백엔드, 인프라까지 모두 내 몫이 되었다. 어쩌겠는가 재밋어 보이니 하는 수 밖에 Nest.js란 Node.js 서버 앱을 구축하기 편하게 해주는 프레임 워크이다. 내부적으로 Express를 토대로 만든 HTTP서버 프레임 워크를 사용한다. Nest.js 는 테스트 가능하고 확장 가능하며 느슨하게 결합되고 유지 관리가 쉬운 앱을 만드는 아키텍처를 제공한다. ~Module 모듈이란 기능 하나 라고 생각하면 된다. 모듈안에는 *Controller, Service 등이 들어간다. 모듈의 입구와 출구는 controller라고 생각하면 되고, controller는 Service를 이용하여 동작한다. *Controller: 들어오는 요청을 처리하고 클라이언트에 응답..

우리 같은 프론트 엔드 개발자는 새로운 것에 빨리 익숙해지고 빨리 적응해야하지만, 그렇다고 옛 것을 오래된 것 같이 뒷 방 늙은이 취급을 하면 안된다. 왜냐하면, 우리는 다양한 디바이스의 다양한 os버전을 대항해야 하기 때문이다. 지금이야 정말 다행이게도 IE가 죽어버려서 빡센 크로스 브라우징은 안하는 경우가 대부분이지만(우리회사는) 그럼에도 우리는 IOS버전, AOS버전 등 각 OS가 지원하는 브라우저에 맞게 js코딩을 해야한다. 최근에 엄청 삽질을 한 내 이야기이다. 앱에서 띄우는 웹뷰가 다 잘뜨는데 아이폰 특정 버전 이하에서 동작을 안하는 것이다. 이것도 꼴받는 게 NEXT.js 프로젝트 여서 에러가 나는 컴포넌트만 랜더링에 실패해서 'nextjs application error a client-s..

요즘 react-native로 커뮤니티 앱을 개발하느라 정신이 없이 바쁘다. 근데 그 와중에 피드 올릴때 trim을 해달라는 요청을 받게 된다. 그래서 쓱 보니까 이게 왠걸 에디터에서 HTML을 string으로 넘겨주고 있었다. 자 그럼 trim을 어떻게 할지 생각해보자. trim() 함수는 앞 뒤의 빈 공백을 지우는 역할을 한다. 그럼 앞에서 한번, 뒤에서 한번 총 두번을 체크해야한다. 그리고 "빈 공백" 이라는 것은 내용물이 없는 div 태그를 말함으로 태그를 이용한 한 줄 띄우기 혹은 를 사용한 한 칸 띄기 또한 빈 공백으로 볼 수 있다. 정리해보면 div태그 안에 내용물이 이거나 으로만 이루어진 경우를 빈 공백으로 볼 수 있고, 이런 div를 제거해야한다. 내가 사용하는 에디터에서는 줄 바꿈을 으..

회사에서 기존 API서버를 고도화 시키는 과정중에 개발서버가 없는 운영만 덩그러니 있는 서버를 맡게 되었다. 그래서 이참에 개발서버를 띄어서 관리하려고 시도하면서 배운 것을 써본다. 개발이나 운영이나 같은 인스턴스에서 처리하고 있어서 트레픽을 처리하는 것에 고민은 없었다. 그래서 운영서버 인스턴스에 개발서버도 같이 올려버리기로 결정했다. 리버스 프록시 역할을 하는 NGINX를 이용해서 운영과 개발을 다른 포트와 도메인으로 분리해서 처리하려 했는데, 이게 알고보니 AWS에 LOAD BALANCER에서 타겟 그룹으로 이미 그렇게 관리가 되고 있던 것이었다. 이를 알게된 나는 NGINX를 설치하는 뻘 짓을 그만두고, AWS에 새로운 TARGET GROUP을 생성해서 로드 밸런서의 rule에 추가를 했는데,, ..

1. ajax란 asyncronous javascript and Xml 기존 클라이언트와 서버와의 통신이 곧 페이지 html의 Get요청이어서 요청에 의한 응답이 오면 페이지가 다시 랜더링이 되는 동작을 했다. 페이지가 다시 랜더링이 되면 당장 랜더링에 필요없는 데이터를 다시 요청해오는 리소스, 그리고 동기적으로 동작함으로 클라이언트의 블로킹 즉 사용자의 동작을 막는 이슈가 일어난다. ajax의 등장은 XMLHttpRequest의 등작이다. 이는 브라우저에서 제공하는 Web API이다. MDN에 보면 XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고..

회사에서는 프론트 작업과 노드 서버 백엔드 작업을 같이 맡게 된다. 때문에 프론트 업무를 맡았을 때, 서버쪽 작업이 필요한 경우 유연하게 작업할 수 있다. 그러던 어느날.. .env파일을 수정해야하는 일이 생겼다. 노드 api서버 작업을 하다가 프론트 업무를 하게되어서 가볍에 .env 수정하고 pm2 restart 하지만 여전히 반영되지 않았다. 어라..? 앗차차 프론트는 react로 작업되어있었다. 그러므로 환경변수는 build될 때 주입된다. 때문에 빌드가 진행되는 폴더에서 env를 수정한 후 빌드해야 반영이 된다. REACT_APP_ 이렇게 앞에 붙이고 환경 변수를 쓰고 빌드 하면 된다.

우리가 react를 사용하면서 가장 많이 쓰게 되는 훅을 골라보자 하면 당연 useState 훅일 것이다. 우리는 이 useState를 당연하게 사용하고 당연하게 어떤 조건에 맞게 사용한다. 근데 과연 이 useState를 잘 알고 쓰는 걸까. 물론 알고 쓰는 사람도 있는데 모르고 쓰는 사람이 바로 나였다. useState의 구현 useState는 다 떼고 말해서 closure입니다. 간단히 구조를 그려보면 const React = (()=> { let hookIdx = 0; let hookContainer = []; function useState(initialValue){ const idx = hookIdx; const state = hookConatiner[idx] || initialValue; c..

옛날 input 태그의 onChange이벤트를 배우면서 키보드 이벤트에 대해 공부했었다. onKeyDown, onKeyPress, onKeyUp 이렇게 세 이벤트를 배웠고 그게 다인줄 알았다. 그래서 static한 html 페이지의 input태그에 이벤트를 걸 때, 저 셋 중 onKeyPress를 많이 썼던 것 같다. 그래서 회원 가입 페이지에도 쓰고 로그인 페이지에도 쓰고 하는데, 꼭 한글만 쓸 수 있다던가, 숫자만 쓰게하는 validation을 걸면 깜빡거리면서 보이면 안되는 문자열이 보였다가 사라지곤 했다. 그래서 해결하려다 못하고 넘어간 기억이 있는데, onInput이라는 이벤트의 존재를 알게 되었다. input type='text' 에서 키보드의 입력시에 onKeyDown -> onKeyPres..

오랜만에 좀 빡센 업무를 받았다. 간단한 피그마 기획만 받고 API부터 화면까지 모두 작업해야하는 그런 업무였다. 처음에는 별것 아닌 것으로 생각해서 일단 러프한 레이아웃을 그리고 컴포넌트를 나누었다. 점점 구체적으로 되는 레이아웃들을 얼추 작업을 하니 이제야 데이터 구조가 눈에 들어오기 시작했다. 내가 필요한 데이터는 이미 첫 화면에서 Redux에 넣어준 상태였다. 나는 그 중 한 가지 데이터를 가져와 db의 다른 데이터와 합치고 카테고리화 해서 화면에 보여주어야 했다. 다행히 작업하던 컴포넌트와 무리없이 결합될 구조였지만, 아직 몰랐다. 자세히 생각해보면, 각기 다른 스키마의 데이터를 하나로 합쳐서 보여지는 페이지의 CRUD가 얼마나 복잡하게 얽히게 될지 말이다. 먼저 데이터를 가져오는 진입점부터 달..