거의 알고리즘 일기장

필요성 만약에 파일구조의 뎁스가 깊고 //ex) src/components/layout/app/header/index.tsx 상대경로로 불러오게 되면 다른 스크립트를 import 해올때 ../../../../ 의 향연일것이다. 그럴때는 alias를 이용해서 경로를 설정해놓으면 그게 더 편할때가 많다. 설정방법 1. babel-plugin-module-resolver 추가 yarn add --dev babel-plugin-module-resolver 2. babel.confing.js 에 plugin과 경로들 추가 module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], //--------------..

해본 이유 회사에서 신규프로젝트의 프론트 부분을 맡게 되었다... 이번 프로젝트는 검색엔진에 노출이 잘되어야하는 프로젝트여서, seo에 유리한 ssr로 해야했다. 먼저, 이 프로젝트는 react를 이용할 예정임으로 react에서 ssr을 적용하는 경우를 생각해보았다. 1. react 자체적으로 ssr을 구현한다. 2. next.js 등 라이브러리 붙여서 편안하게~ 개발한다. 당연히 서비스를 만드는건 2번이고, 1번은 어떻게 하는지 호기심이 들어서 해보았다. 1차 시도 솔직히 어떻게 하는지 감도 안잡혀서 구글신께 여쭤봤더니 한글로 되어있는 괜찮은 글을 찾았다. https://minoo.medium.com/next-js-%EC%B2%98%EB%9F%BC-server-side-rendering-%EA%B5%A..

aws cloudfront에 react로 만든 web을 배포할 일이 생겼다. 예전에 했었는데.. 몇달만에 다시 하려니까 헷갈려서 거의 1시간이 넘게 걸렸다..ㅋㅋㅋㅋㅋㅋ 그래서 리마인드용으로 플로우 정도만 정리해두는 글이다. 1. 선택 방법 aws s3, route53, cloudfront를 이용한 프론트 웹 배포 2. 준비물 이용할 도메인, aws 계정 3. 사전지식 뭐 파고파면 끝이 없으므로 배포시에 하는 역할에 대해서만 설명하겠다. 1) s3 s3는 simple storage service 라고 말 그대로 storage이다. 여기서는 코드를 저장해놓는 공간이라고 생각하면 된다. 2) cloudfront cdn 역할을 한다. cdn이란 각 위치에 edge를 두어 물리적인 거리를 줄여서 콘텐츠 이용자가..

최근에 v6로 버전업되어 조금 다릅니다. v5기준입니다!! 문제상황 최근 재미있는 에러 상황을 겪었다. 카톡이니 모바일 앱이니 뭐니 번지르르 적어놨지만 결국 문제는 특정 링크를 통해 web에 detail page에 들어가게 되면 ex) domain/mypage/id history.goback() 함수를 호출했을때 뒤로 돌아갈 history stack이 없기 때문에 생기는 문제였다. 접근 처음에는 router dom에서 주는 history 객체 안에 지금까지 거슬러온 history stack을 접근 할수 있는지 먼저 확인해 보았다. 보니까.. lenght라고 history stack의 length를 불러올수있는게 있다. 개꿀~ 해결 여기까지 접근했으면 해결은 무척이나 간단했다. history.length ..

ㅇㅂ이 글은 React 18: Suspense를 이용한 새로운 SSR 아키텍처 라는 괜찮은 글을 읽어 리마인드용으로 작성하는 글이다. 많은 부분이 생략되었고 내가 이해한게 조금 틀릴수도 있으니 원글을 읽는걸 추천한다..ㅎㅎ 저번에 react에서 지원하는 Suspense, React.lazy를 이용해서 code spliting을 해본 적이 있는데, 그때는 Suspense, React.lazy가 ssr에서 지원이 안되었다. 그런데, React 18 에서 이 부분이 추가가 되는것으로 보인다. https://github.com/reactwg/react-18/discussions/37 New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/rea..

최근 git commit message convention에 대한 글을 보게 되었다. 재미있는 방법인거 같아 내용정리 겸 글을 써보고자 한다. 사실 나는 밑의 그림처럼 [jira 이슈넘버][깃모지][주제] 정도로 적어왔다. 근데.. 이렇게 작성하게 되면 커밋메세지가 많아질수록 헷갈려져서 솔직히 jira를 보지 않으면 나중엔 잘 기억이 나지않는다.. 서론은 여기까지 하고 내가 찾은 이 git commit message style은 Udacity Git Commit Message Style Guide 에서 읽은 내용이다. 메세지의 구조는 다음과 같다. type: Subject body footer type : 말 그대로 message type이고 type의 종류는 밑의 그림과 같다. subject : 이 커..

최근 chrome에서는 브라우저 랜더링이 정상적으로 되는데, ios에 있는 chrome에서 정상적으로 실행되지 않는 에러를 겪었다. 왜 그럴까 서칭을 해보니.. 저 위의 그림과 같이 ios chrome은 다른 엔진을 쓴다.. 그래서 에러의 원인을 찾기 위해서 ios chrome과 같은 엔진을 쓰는 safari에 있는 에러를 확인해 보았다. SyntaxError: Invalid regular expression: invalid group specifier name safari는 regex에서 lookbehind 문법을 지원하지 않는다. new RegExp("(? github.com https://www.browserstack.com/guide/browser-rendering-engine Role of Re..

이 글은 예전에 봤던 브라우저 렌더링 과정을 리마인드 하기 위해서 한번 간략하게 설명하는 글이다. 브라우저 렌더링 과정을 설명하는 전통적인 과정이 있는데 밑의 그림과 같다. 웹 개발자를 희망하는 사람이라면 다 한번쯤 본 그림일텐데, 이건 로딩을 중시하던 예전의 렌더링 과정 설명이고 최근 문서들은 로딩 이후의 상황이 더 중요해졌기 때문에 dom, cssom, js 과정을 통틀어서 js 과정으로 묶여있다. 이 글에서도 html 문서를 parsing해서 dom을 만들고, css를 cssom으로 만들고 하는 과정은 js로 퉁쳐서 설명하도록 하겠다.ㅎ 1. js 과정 html 문서를 parsing을 거쳐 dom으로 만들고, js code도 js engine을 통해서 parsing, byte code로 만들어 실행..

프로젝트에 로그인을 붙일 일이 생겼다. 나는 jwt 방식을 선택했는데, 왜 선택하였는지에 대해 공유하고자 한다. 1. jwt란 ? jwt는 json web token의 약어로 인증 방식 중 하나이다. 사용 방법으로는 서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증한다. 2. 필요 사전 지식

1. 코드 분할의 필요성 Create React App이나 Next.js, Gatsby 혹은 비슷한 툴을 사용하면 Webpack이 함께 설치되어 번들링 시 Webpack에 의해 자동으로 설정된 번들링이 된다. 번들링에 대한 자세한 내용은 https://humanwater.tistory.com/2 [webpack] 2) 번들링(Bundling) 개념 및 사용 이유 [이전 글] https://humanwater.tistory.com/1 [webpack] 1) 웹팩의 정의, 모듈(Module) https://github.com/webpack/webpack webpack/webpack A bundler for javascript and friends. Packs many modules into a f.. hum..