전체 글

NextJS 기본적인 사용 방법 정리

설치 방법 npx create-next-app or yarn create next-app TypeScript 연동 프로젝트 루트에서 tsconfig.json 파일을 생성하면 NextJS가 자동적으로 디폴트 값을 설정해줌 touch tsconfig.json TypeScript 설치 npm install --save-dev typescript @types/react @types/node 설치 이후에는 npm run dev 로 한 번 실행해야 tsconfig.json 에 옵션이 설정됨 pages 폴더 관련 규칙 폴더 밑에 js 파일을 만들고 export default 를 지정하면 해당 파일명을 URL로 사용하는 페이지 생성 가능 function 의 이름은 무엇이든 상관 없음 다만 파일명이 index.js 라면..

Thymeleaf 실용 팁

0. 왜, 지금, Thymeleaf? 사실 나도 Thymeleaf를 열렬히 선호하는 팬이 아니며, 그렇게 많이 사용하지도 않았다. 하지만 근래에 2개의 기업에서 채용 절차를 진행하던 중에 과제를 요구받았고, 이 과제들은 Backend 개발자 전형이었기 때문에 딱히 client를 요구하지는 않았지만, 내가 구현해낸 어떤 API들을 간단하게라도 출력해줄 수 있는 화면이 있었으면 좋겠다는 생각이 들었다. 그리고 이를 수행해내기에 안성맞춤인 도구가 바로 Thymeleaf였다. 그리고 현업에서도 admin 페이지를 만들 때 Thymeleaf를 활용한다고도 하니, 이번 기회에 한번쯤 정리해두면 좋겠다는 생각이 들었다. 이번 포스팅에선 Thymeleaf의 기본적인 사용법을 다시금 간략하게 정리하고, 또한 과제 수행 ..

최원영 - 『비전공자를 위한 이해할 수 있는 IT 지식』

들은 기간 : 2022.05.28 ~ 2022.06.03 결론부터 이야기하자면, 너무 다 아는 내용들이었다. CPU와 메모리, API, HTTP 메소드들, HTTP 응답 코드들, 클라이언트와 서버, 프레임워크와 라이브러리 등 이미 숱하게 들어보았던 것들이라 너무 익숙한 개념들이었다. 나 또한 비전공자임에도 불구하고 말이다. 그래도 리눅스 토발즈가 리눅스를 만들고 오픈 소스로 공개한 이야기나, 이 리눅스를 통해서 우분투가 만들어졌다는 이야기, 레드햇도 리눅스를 기반으로 만들어졌는데 왜 유료인지에 대한 이야기 등이 재미 있었다. 그리고 서로 다른 컴퓨터에서 동일한 문서를 보기 위해 HTML이 만들어졌다는 이야기도 흥미로웠다. 나는 이런 탄생 비화에 흥미가 많이 돋는 스타일인 것 같다. 필자는 사실 아는 내용..

'Date' 형식은 'ReactNode' 형식에 할당할 수 없습니다.

What's error? Next.js 강의를 신나게 듣다가 다시 한 번 에러에 봉착했다. Date 타입을 왜 받을 수 없다는 것인지 당최 알 수 없었다. toString()과 같은 메소드들을 붙여서도 써보았지만 해결되지 않았다. How to solve 그렇게 한두 시간 삽질을 하다가 문득, 위의 에러 문구에 있는 index.d.ts 파일이 궁금해져서 클릭하고 들어가봤다. 해당 파일 중에서도 에러에 표시된 1375번째 줄, 9번째 열에 들어가 보니 마찬가지로 에러 문구에도 표시되어 있던 ReactNode 라는 친구가 눈에 띄었다. 이 ReactNode를 command 키와 함께 클릭해서 들어가 보았다. 뭔가 알 것도 같았다. 아래와 같이, 타입들 사이에 Date를 살포시 넣어보았다. 그랬더니 에러를 간단..

2022.05 <진격의 주니어 개발자>

1. 오디오북과 조깅 『커리어 스킬』의 저자 John Sonmez가 매주 64km를 뛰면서 오디오북을 듣는다는 이야기에 '나도 한 번 해볼까?' 싶어서 5월 3일부터 오디오북을 들으면서 조깅을 했다. 뛰면서 개발 공부를 하기에는 확실히 무리가 있을 것이기 때문에 개발 책이 오디오북으로 잘 있지도 않고 인문학 책 위주로 들으려 하고 있다. 한 달 정도 오디오북 청취와 조깅을 하면서 느낀점은 확실히 집중이 분산되는 경우가 많다. 뛰면서 내 주변에 스쳐가는 광경들과 사람들이 있기에, 그리고 나 스스로도 가끔 딴 생각을 했기 때문에 책의 내용을 중간중간에 흘려버리는 일이 잦았다. 그러니 내가 생각하기에 정말 운동도 하면서 책도 읽는, 2가지 효과를 온전하고 충실하게 누리고자 한다면 평소에 책을 읽을 때와는 비교..

유키 히로시 - 『만화로 배우는 리눅스 시스템 관리』

학습 기간 : 2022.04.16 ~ 2022.05.18 1. 비전공자를 위한 가볍고 재밌는 리눅스 만화책 나와 마찬가지로 개발을 실전 압축(...) 스타일로 공부해 온 개발자라면 감히 추천하고 싶은 책이다. 나는 그동안 Java, Spring을 기반으로 '작동하는 애플리케이션 만들기'에만 몰두해왔기 때문에 리눅스에는, 아니 리눅스 뿐만 아니라 컴퓨터 공학의 기초를 이루는 다른 여러 기술들에 대해서는 거의 문외한 수준이었던 것이 사실이다. 그러던 중에 만나게 된 이 책은 '리눅스'라는, 선뜻 다가가기 힘들었던 친구에 대해 만화의 형식으로 재미있게 소개해주는 책이었다. 2. 인프라 환경을 이해하는 데에도 도움이 된다 나는 최근에 컨테이너 인프라 환경을 이해하기 위해 책으로 공부한 적이 있는데, (링크) 놀..

Kubernetes와 친해지기

※ 위 책을 읽고 개념 위주로 정리한 내용임을 알립니다. Kubectl을 더 쉽게 사용하기 kubectl 명령 자동 완성하기 bash shell 명령 자동 완성을 해주는 bash-completion 패키지 사용 bash-completion은 bash의 Built-in 명령 중 하나인 complete 명령으로 자동 완성 목록 표시 kubectl completion bash 명령으로 complete에 맞게 목록을 생성하는 방식 자동 완성 목록을 구현한 뒤에는 tab 키를 사용해서 자동 완성 활용 가능 ※ bash-completion.sh #!/usr/bin/env bash #Usage: #1. bash /etc/bash_completion.d/kubectl # alias kubectl to k echo 'a..

Prometheus & Grafana

※ 위 책을 읽고 개념 위주로 정리한 내용임을 알립니다. Prometheus와 Grafana가 좋은 이유 거의 모든 모니터링 도구와 마찬가지로, 수집 → 통합 → 시각화의 구조를 가짐 클라우드 서비스에 비해 비용을 절감할 수 있음 서비스형 모니터링 도구와 다르게 내부에서 데이터를 처리할 수 있음 Prometheus 개요 SoundCloud 사에서 자사 서비스 모니터링을 위해 개발한 도구이며, 오픈 소스로 전환되었음 시계열 데이터베이스* 내장 자체적인 질의 페이지 말고는 시각화 기능이 없지만 그라파나와 연계하면서는 제공 가능 중앙 서버에서 에이전트의 데이터를 수집하는 Pull 방식을 사용하므로 쿠버네티스 환경에 설치된 에이전트를 통해 노드와 컨테이너 상태를 모두 수집해서 모니터링 가능 에이전트를 통해 내부..

Jenkins

※ 위 책을 읽고 개념 위주로 정리한 내용임을 알립니다. Container Infrastructure 환경에서의 CI/CD 개발자가 소스를 커밋하고 푸시하면 CI 단계 진입 애플리케이션 자동 빌드 및 테스트를 통해 배포할 수 있는 애플리케이션인지 확인 확인 과정을 통과하면 CD 단계 진입 애플리케이션을 Container Image로 만들어서 Pod, Deployment, StatefulSet 등 다양한 오브젝트 조건에 맞춰서 미리 설정한 파일을 통해 배포 Jenkins와 Kubernetes 운영 환경 애플리케이션 배포 영역에 쿠버네티스를 사용하면 개발자는 애플리케이션 개발에만 집중할 수 있게 됨 모든 배포 환경을 컨테이너 인프라로 일원화하고, CI/CD 도구를 사용하면 애플리케이션에 맞는 환경을 적용해서..