어제 보다 나은 나

나는 트수다. 트위치에 하스스톤 밖에 볼게 없던 시절부터 트위치를 시청하는 나는 트위치의 시한부 선고에 통탄을 금치 못하였지만, 어쩌겠는가. 피하지 못하면 즐기라고 나는 트위치 마지막 자낳대를 최대한 즐기려 한다. 멀티 뷰어 먼저 자낳대는 리그 오브 레전드라는 게임을 스트리머들 끼리 진행하는 대회이다. 5명이 한 팀이 되고, 코치와 감독이 스트리머들과 함께 한다. 롤은 게임 안에서 동시 다발적으로 여러 이벤트가 일어나기 때문에, 한번에 한 명의 스트리머의 화면만 보면 아쉬운 부분이 있다. 그래서 한번에 5개의 화면을 볼 수 있게 개발할 것이다. 기술 스택 Next.js, SWR, styled-components 구조 내가 팔로우한 스트리머 목록을 가져오기 위해 트위치 로그인이 필요하기에 localstor..

반복적으로 들어오는 이벤트의 환경을 세팅하는게 번거롭기에 자동으로 인스턴스와 이벤트를 관리해주는 기능 개발 어드민에서 서버스팩선택해서 서버생성 버튼 클릭시 인스턴스 생성 및 user-data 파일실행하여 웹서버 실행 초기 세팅 env app.module.ts import { ConfigModule } from '@nestjs/config' @Module({ import: [ConfigModule.forRoot({ isGlobal: true})] }) 이렇게 import 해주면 프로젝트 루트 경로의 .env파일을 읽어와서 process.env를 통하여 사용할 수 있게된다. 추가적으로 모듈을 다른 모듈에서 사용하려고하면 사용하려는 모듈을 import해줘야하는데, isGlobal옵션으로 다른 모듈에서는 Imp..

요즘 매우 바쁘다. RND하던 프로젝트가 메인 프로젝트로 올라와서 정신이 없다. 최근에 개발한 기능은 이미지 생성을 위한 작업을 하다가 뒤로가기, 되돌리기 등의 히스토리 작업이었다. 가장 먼저 든 생각은 양방향 링크드 리스트 이지만, 일단 빠른 개발을 위해 배열과 포인터만 가지고 구현해보기로 했다. 일단 히스토리가 쌓일 배열을 하나 만든다. 그리고 현재 우리가 기억하는 히스토리의 위치를 저장하기 위해 포인터를 하나 둔다. const history= []; const historyPointer = 0; 이제 작업을 하게 되면 저 history배열에 들어가게 된다. const history= [ { 작업 데이터1 }, { 작업 데이터2 }, { 작업 데이터3 }, ]; 이때 히스토리를 쌓는 방향을 잘 정해야..

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

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

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..

오늘은 회사에서 next.js로 만들어진 페이지의 기능을 추가할 일이 있어서 작업에 착수했다. 주요 골자는 이전 페이지에서 도출된 결과를 다음 페이지로 넘겨주고 그 값에 다른 값들을 입력받아 회원가입을 진행하는 그런 플로우 였다. 그래서 당연히 react에서 하듯이 const router = useRouter(); const {} = router.query; 이렇게 이전 페이지에서 쿼리스트링으로 넘겨준 값을 가져다가 쓰려고 했는데, 페이지 이동 전에 해당 값으로 다른 값을 조회해야할 일이 생겼다. 그래서 export const getServerSideProps(){ const router = useRouter(); } 이렇게 짜면 되겠지 하고 저장을 딱 하자마자 에러가 났다. useRouter는 Hook..