- 전체보기(19)
- nextjs(3)
- https(3)
- Node(2)
- docker(2)
- sh(2)
- image(2)
- convention(2)
- Spring(2)
- devops(2)
- cd(2)
- ssl(2)
- script(2)
- CSR(2)
- ci(2)
- ESLint(2)
- git(2)
- React(2)
- API(2)
- github(2)
- error(2)
- ssh(2)
- ec2(2)
- Nginx(2)
- pre-rendering(1)
- MPA(1)
- getServerSideProps(1)
- CocoaPods(1)
- ionic(1)
- domain(1)
- entity(1)
- Prettier(1)
- deploy(1)
- CI/CD(1)
- next(1)
- github action(1)
- Husky(1)
- Lint staged(1)
- mrm(1)
- docs(1)
- cordova(1)
- SSR(1)
- getStaticPaths(1)
- react native(1)
- spa(1)
- aws(1)
- getStaticProps(1)
- keygen(1)
- remote(1)
- Builder(1)
- crt(1)
- namecheap(1)
- test(1)
- typescript(1)
- airbnb(1)
- cors(1)
- web(1)
- Root(1)
- OneToMany(1)
- git hooks(1)
- jenkins(1)
- capacitor(1)
- DNS(1)
- ubuntu(1)
- lint(1)
- CodeDeploy(1)
- S3(1)
- GithubAction(1)
- yarn-berry(1)
- yarn(1)
- vue(1)
- pre-commit(1)
Spring rest docs 설정
프론트엔드 개발자는 백엔드 개발자가 작성한 api 문서를 보고 api 를 매핑합니다.문서를 작성하는 것은 노동력이 들어가는 것이고, 사람이 작성하기 때문에 변경된 사항을 업데이트를 하지 않는 경우도 존재합니다.
Builder 어노테이션 사용시, List 추가에 대한 NullPointerException
builder 패턴을 사용하여 유저 인스턴스를 생성했고, userGroups 필드(List)에 데이터를 추가하자 NullPointException 이 발생했다.
[docker] node, nextjs 이미지 배포하기 - 2 (github action 자동 배포)
이전 게시물과 이어지는 내용입니다. 추가 설명이 필요한 부분은 이전 게시물을 참고 해주시면 됩니다. 자동화가 필요해.. 전 게시물에서 node 와 nginx 를 도커 이미지로 생성했고, 각 컨테이너를 실행하는 쉘 스크립트를 만드는 내용을 작성했습니다.
[docker] node, nextjs 이미지 배포하기 - 1 (+쉘 스크립트)
프론트 개발자도 도커 이미지를 만들어야 할까? 1. 백엔드 개발자와 협업 2. 운영환경의 빌드파일 버전 관리
aws ec2에 github action 으로 프론트 자동 배포하기
jenkins 와 더불어 CI/CD 구축을 위해 사용됩니다.github 에서 가상환경을 제공해줍니다.CI 를 위한 추가 서버가 필요 없다는 게 큰 장점이었습니다.git hook 에 따라 배포를 실행할 수 있습니다.
Ubuntu 환경에서 root 사용자로 ssh 접속하기
Ec2 인스턴스 생성 시 ubuntu 계정으로 접속할 수 있습니다.패키지를 설치하거나 쉘 스크립트를 실행할 때 sudo 를 사용하는 불편함을 줄이기 위함입니다.
SSL 인증(DNS, Nginx)
인증기관에서 인증서 요청SSL 인증서를 발급하기 전에, 해당 도메인의 소유주가 맞는 지 확인하는 검증 단계입니다.도메인 구입 사이트 또는 호스팅 사이트에서 cname 등록인 필요합니다.
git hooks 를 husky 로 제어하기 (eslint, pre-commit)
팀원과 컨벤션 정의 및 lint 규칙을 정하는 상황이 있습니다. 그런데 작업을 하다 보면 서로 코드 컨벤션에 소홀해지는 경우가 있습니다. 이런 상황일 때, 사용하면 좋은 도구가 husky 입니다.
git ssh 접속하기
새로운 노트북을 이용할 때github, gitlab 에 처음 계정을 연동해서 이용할 때https remote 주소로 부터 깃을 관리할 때권한 에러를 마주할 수 있습니다.이에 대한 반복된 검색을 줄이면 좋을 거 같아서 포스팅을 시작합니다.
eslint(airbnb) + prettier + Next + Typescript + yarn 설정
자바스크립트 소스 코드의 오류를 표시하기 위한 도구입니다.ES란, Ecma Script, 표준 자바스크립트Lint란, 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등을 표시하기 위한 도구코드를 예쁘고 일관성 있게 유지시켜주는 자동완성 도구입니다.
NextJS pre-rendering (Static Generation / Server-side Rendering)
react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. pre-rendering 두
Ionic React 시작하기
아이오닉은 리액트, 뷰, 앵귤러에서 최신 고품질의 크로스 플랫폼 앱을 구축하기 위한 오픈 소스 모바일 UI 툴킷입니다.
Namecheap SSL 인증서 재발급 후기 (Https 적용)
Namecheap 사이트에서 생성한 SSL 인증서가 만료되어, https 적용을 위해 재발급 했습니다. Namecheap 에서 제공하는 문서만으로는 재발급이 쉽지 않아서 작성했습니다. 이 게시물이 저와 같은 상황의 분들에게 도움이 되면 좋겠습니다.
Jenkins 자동 배포하기 (+github 연동)
포스팅 배경 Jenkins를 실무에서 왜 사용할까? 이전 직장에서 xshell, total commander 를 사용하여 수동으로 배포를 했었습니다. 상당히 위험한 순간도 많았고, 실수한 적도 많았습니다. 이에 대한 불편함을 느끼고, 현 직장에서는 자동 배포환경을
www.google.com을 검색 시 발생하는 일 - [ 브라우저 렌더링 ]
사용자가 주소창에 구글 주소를 입력한다. (https://www.google.com)DNS에서 도메인 주소에 해당하는 IP 주소를 찾는다.브라우저가 서버와 TCP connection을 한다.브라우저가 서버에 HTTP 요청을 한다.서버가 HTTP 응답을 보낸다.
SPA(Single Page Application) - [2] CSR/SSR
안녕하세요.이번 게시물은 이전 게시물 SPA - 등장 배경의 다음 편입니다.이전 게시물에서는 SPA가 등장한 배경, MPA와 차이점을 소개했습니다.SPA는 하나의 페이지를 서버로부터 받아와 브라우저에서 렌더링을 하며 내용을 채웁니다.이는 CSR과 궁합이 맞으며, 실제로
CORS Error [ vue 에서 외부 API 요청 시 ]
vue 에서 kakao map api 를 사용하여 지도에서 맛집(장소)을 검색했다.주소 이외의 장소에 대한 상세정보가 필요했다.카카오 플레이스 (map.place.kakao) 로 장소에 대한 정보를 조회 요청했다.Cors Error 발생로컬 주소(localhost:
AWS EC2 Node.js 서버 연결 안될 때 ( 사이트에 연결할 수 없음 )
에러 배경node js 를 AWS 서버 에 배포했다.웹 화면에서 api 요청 시 '사이트에 연결할 수 없음' 에러 확인에러 발생 이유방화벽이 원인이었다.http 프로토콜과 포트를 열어주지 않아서 응답을 주지 않았다.에러 해결 과정AWS 인바운드 규칙 확인Instan
SPA(Single Page Application) - [1] 등장 배경
많은 웹 프론트엔드 개발자가 React, vue, angular 프레임워크를 사용하여 개발한다.이들은 모두 SPA 프레임워크이다. 그런데 SPA는 뭘까?SPA를 설명하기 앞서, SPA는 모던 웹의 패러다임이라고 한다.과거 웹 페이지에 대비해 어떠한 목적으로 SPA를 사