[{"content":" Photo by sniperfactory 1주차 회고 일지\u0026hellip; # 첫 1주차에는 프로젝트 캠프에 대한 오리엔테이션을 통해 자세한 설명을 듣고 초청하신 강사님을 통해 리액트와 친숙해지는 기회를 가지고\n리액트에 테일윈드 CSS와 샤드시엔 UI를 가지고 프로젝트를 진행했습니다.\n프로젝트 대시보드 저는 원래 백엔드 개발자로 취업하기 위해 관련 기술을 공부하고 있었습니다.\n하지만 백엔드 기술 스택을 가지고 하나의 서비스를 만들기는 어렵습니다.\n현재는 정말 다양한 프론트엔드 기술이 존재하고 저는 그 기술중에 리액트를 사용해서 토이 프로젝트를 하나 만들기 위해 준비하고 있었는데\n마침 유데미에서 스나이퍼 팩토리와 함께 일경험 프로젝트인 프론트엔드 프로젝트 캠프를 진행하는 것을 알게 되어서 지원해서 합격하여 리액트 프로젝트에 참여할 수 있는 기회를 얻을 수 있게 되었습니다.\n날씨앱 만들기 # 강사님과 동료들과 함깨 리액트를 이용해서 인터페이스를 만들고 날씨 API를 연동해서 간단한 날씨 정보 대시보드를 만들었습니다.\n리액트는 자바스크립트를 이용한 라이브러리로 사용자 인터페이스를 구축하는데 사용되는데 리액트를 사용하기 위한 기초로 자바 스크립트에 대한 간단한 교육을 들었습니다.\n자바 스크립트 연습 그런 다음에는 리액트에 대한 간단한 설명과 함께 리액트 프로젝트에 대한 설명을 마치고 바로 리액트 대시보드를 만들기 시작했습니다.\n프로젝트를 진행하면서 느낀건 러닝커브가 꽤나 큰 테일윈드 CSS를 사용해서 그런지는 몰라도 따라가는데 꽤나 버거웠습니다. 또한 리액트 라이브러리에 대한 사용은 다행히 기존 경험을 토대로 따라가는것은 어렵지 않았습니다.\nCSS에 대한 지식 부족이 확실히 느껴지는 경험이였습니다\u0026hellip;\n그리고 프로젝트를 진행하던 도중에 상태 관리 라이브러리에 대해서 알아보고 적용해봤는데 뭔가 스프링의 빈 느낌이 나서 이해하기가 한층 수월했습니다 물론 설계나 사용 개념은 다르긴 하지만 비슷한 느낌을 느낄 수 있었습니다.\nAPI 적용 도중에 무료 API를 사용해서 문제가 생기는 특이한 경험도 해봤지만 저는 문제가 없어서 이번 주차에서의 날씨 앱 대시보드 구현을 완성했습니다.\n예전에 제가 생으로 HTML가 CSS를 통해서 하나의 웹 사이트를 구현하는 프로젝트를 진행한 적이 있었는데 리액트와 테일윈드를 사용한 웹 구현은 거의 신세계라고 봐도 되겠네요 ㅠㅠ 숙달만 된다면 제가 만들고 싶은 프로젝트를 만들 수 있을것 같아서 좋았습니다 : )\n2번째 프로젝트 # 추가적으로 빠르게 앱 구현을 완료해서 2번째 프로젝트를 금요일에 진행했지만 해당 부분에 대한 회고는 다음 주차로 미루기로 했습니다!\n리액트 앨범 프로젝트 다음 주차에 해야 할것들\u0026hellip; # 일단 CSS와 자바스크립트에 대한 공부와 리액트에 대한 공부를 진행할 예정입니다.\n정말 좋은 기회로 유데미를 통해서 강의 수강이 지원되는데 현재 강의를 골라잡아서 듣고 있는데 강의의 퀄리티가 아주 좋아서 만족 중 입니다.\n다음 주차에서 더욱 성장한 제가 되었으면 하네요!\n본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 과정(B-log) 리뷰로 작성 되었습니다. ","date":"2024-11-17","externalUrl":null,"permalink":"/disable/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%BA%A0%ED%94%84-1%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0/","section":"Disables","summary":"스나이퍼팩토리 프론트엔드 프로젝트 캠프 1주차 회고하기","title":"[유데미x스나이퍼팩토리] 프론트엔드 프로젝트 캠프 - 1주차 회고","type":"disable"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/chadcn/","section":"Tags","summary":"","title":"chadcn","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/disable/","section":"Disables","summary":"","title":"Disables","type":"disable"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/frontend/","section":"Tags","summary":"","title":"frontend","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/categories/frontend/","section":"Categories","summary":"","title":"Frontend","type":"categories"},{"content":"안녕하세요, 백엔드 개발자이며 풀스택 개발자와 데브옵스에 관심이 많습니다 !!\n현재는 개발자의 바다를 항해하고 있습니다.\n","date":"2024-11-17","externalUrl":null,"permalink":"/","section":"Laterre Dev","summary":"안녕하세요, 백엔드 개발자이며 풀스택 개발자와 데브옵스에 관심이 많습니다 !!\n현재는 개발자의 바다를 항해하고 있습니다.","title":"Laterre Dev","type":"page"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/next.js/","section":"Tags","summary":"","title":"next.js","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/react/","section":"Tags","summary":"","title":"react","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/tailwind/","section":"Tags","summary":"","title":"tailwind","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/udemy/","section":"Tags","summary":"","title":"udemy","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95/","section":"Tags","summary":"","title":"개발자교육과정","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EB%AF%B8%EB%9E%98%EB%82%B4%EC%9D%BC%EC%9D%BC%EA%B2%BD%ED%97%98/","section":"Tags","summary":"","title":"미래내일일경험","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EB%B6%80%ED%8A%B8%EC%BA%A0%ED%94%84/","section":"Tags","summary":"","title":"부트캠프","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EC%8A%A4%EB%82%98%EC%9D%B4%ED%8D%BC%ED%8C%A9%ED%86%A0%EB%A6%AC/","section":"Tags","summary":"","title":"스나이퍼팩토리","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EC%9B%85%EC%A7%84%EC%94%BD%ED%81%AC%EB%B9%85/","section":"Tags","summary":"","title":"웅진씽크빅","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EC%9C%A0%EB%8D%B0%EB%AF%B8/","section":"Tags","summary":"","title":"유데미","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%EC%9D%B8%EC%82%AC%EC%9D%B4%EB%93%9C%EC%95%84%EC%9B%83/","section":"Tags","summary":"","title":"인사이드아웃","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%BA%A0%ED%94%84/","section":"Tags","summary":"","title":"프로젝트캠프","type":"tags"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/categories/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%BA%A0%ED%94%84/","section":"Categories","summary":"","title":"프론트엔드 프로젝트 캠프","type":"categories"},{"content":"","date":"2024-11-17","externalUrl":null,"permalink":"/tags/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%96%91%EC%84%B1%EA%B3%BC%EC%A0%95/","section":"Tags","summary":"","title":"프론트엔드개발자양성과정","type":"tags"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/tags/blog/","section":"Tags","summary":"","title":"blog","type":"tags"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/categories/blog/","section":"Categories","summary":"","title":"Blog","type":"categories"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/tags/blowfish/","section":"Tags","summary":"","title":"blowfish","type":"tags"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/tags/custom/","section":"Tags","summary":"","title":"custom","type":"tags"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/tags/hugo/","section":"Tags","summary":"","title":"hugo","type":"tags"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/categories/hugo/","section":"Categories","summary":"","title":"Hugo","type":"categories"},{"content":" Blowfish Theme 블로그 커스텀하기 # 블로그 개설한지 벌써 한 3개월이 지난듯 싶습니다.\n포스팅 의미있는거 해보려고는 하는데 뭔가 딱히 아직 포스팅을 할만한 유의미한 정보가 없어서 못하고 있습니다\u0026hellip;\n이번에 블로그를 커스텀하면서 적용한 코드를 정리하고자 합니다.\n블로그 적용 기술 # 블로그에 적용한 기술들을 한번 정리해봤습니다.\nCloudflare Pages 적용 # 포스팅 바로가기\n기존에 블로그에 포스팅한 글로 대체하겠습니다.\nNetlify를 사용하다가 Cloudflare로 교체해서 서버리스 플랫폼을 사용하고 있습니다.\n자세한 내용은 포스팅을 참고 해 주세요.\n나눔고딕 폰트 적용 # Blowfish 테마에서 기본적으로 제공하는 폰트는 다음과 같습니다.\nfont-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \u0026#34;Segoe UI\u0026#34;, Roboto, \u0026#34;Helvetica Neue\u0026#34;, Arial, \u0026#34;Noto Sans\u0026#34;, sans-serif, \u0026#34;Apple Color Emoji\u0026#34;, \u0026#34;Segoe UI Emoji\u0026#34;, \u0026#34;Segoe UI Symbol\u0026#34;, \u0026#34;Noto Color Emoji\u0026#34;; 기본적으로 한글 폰트를 기기에서 지원하는 폰트로 지원하고 있습니다.\n하지만 저는 한글 포스팅의 가독성을 높이기 위해 네이버에서 개발한 나눔고딕 폰트를 사용하기로 했습니다.\n@font-face { /* 나눔고딕 한글에만 적용 */ font-family: \u0026#34;Nanum Gothic\u0026#34;; src: url(\u0026#39;/fonts/NanumGothic-Regular.ttf\u0026#39;); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; } html { font-family: \u0026#34;Nanum Gothic\u0026#34;, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \u0026#34;Segoe UI\u0026#34;, Roboto, \u0026#34;Helvetica Neue\u0026#34;, Arial, \u0026#34;Noto Sans\u0026#34;, sans-serif, \u0026#34;Apple Color Emoji\u0026#34;, \u0026#34;Segoe UI Emoji\u0026#34;, \u0026#34;Segoe UI Symbol\u0026#34;, \u0026#34;Noto Color Emoji\u0026#34;; } custom.css\n테마에서 제공하는 custom.css를 활용해서 블로그 전역에 폰트 사용을 위한 css를 등록합니다.\n유니코드 범위 지정을 통해 한글만 나눔고딕 폰트를 적용하도록 했습니다.\nUnicode Range: 한글, 영어, 숫자 서로 다른 폰트 적용하기\n해당 방식을 활용하면 영문 또는 숫자등의 문자에 각기 다른 폰트를 활용할 수 있습니다.\n영문 폰트는 유명한 영문 폰트를 사용하고 있기 때문에 별도로 적용하지 않았습니다.\n","date":"2024-03-23","externalUrl":null,"permalink":"/posts/hugo%EC%97%90%EC%84%9C-blowfish-%ED%85%8C%EB%A7%88-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0/","section":"Posts","summary":"Hugo에서 blowfish 테마 커스텀해서 수정해보기","title":"Hugo에서 blowfish 테마 커스텀 수정하기","type":"posts"},{"content":"","date":"2024-03-23","externalUrl":null,"permalink":"/posts/","section":"Posts","summary":"","title":"Posts","type":"posts"},{"content":"","date":"2024-03-10","externalUrl":null,"permalink":"/tags/cloudflare/","section":"Tags","summary":"","title":"cloudflare","type":"tags"},{"content":"","date":"2024-03-10","externalUrl":null,"permalink":"/categories/cloudflare/","section":"Categories","summary":"","title":"Cloudflare","type":"categories"},{"content":"","date":"2024-03-10","externalUrl":null,"permalink":"/tags/devops/","section":"Tags","summary":"","title":"devops","type":"tags"},{"content":"","date":"2024-03-10","externalUrl":null,"permalink":"/categories/devops/","section":"Categories","summary":"","title":"Devops","type":"categories"},{"content":"","date":"2024-03-10","externalUrl":null,"permalink":"/tags/github/","section":"Tags","summary":"","title":"github","type":"tags"},{"content":" Cloudflare Pages Netlify 사용하고 있던 도중에\u0026hellip; # 최근에 Netlify 에서 DDoS를 통해 약 1억 원가량이 사용자에게 청구되는 사건이 있었는데\n당연하지만, 해당 사건으로 인해 개발 커뮤니티가 뜨거웠고 저도 그 소식을 접하게 되었습니다.\n이런 조그마한 개발 블로그에 설마 저런 상황이 벌어질 리는 없겠지만\u0026hellip;\n혹시라는게 있으니까 다른 정적 웹 사이트 호스팅을 사용하기로 했습니다.\n다른 대안 플랫폼들 # 처음에는 Vercel 을 생각했는데 거기도 Netlify 와 다른 게 없는 상황이어서 선택지에서 배제했습니다.\n여러 가지로 검색을 해보던 와중에 클라우드플레어에서 Cloudflare Pages라는 서비스를 제공해 준다는 것을 알게 되었습니다.\n클라우드플레어는 DDoS 관련 방어 등으로 유명한 클라우드 회사로 무료 DDoS 방어를 제공하고 있는데\n제가 플랫폼을 옮기려는 목적과 부합하기 때문에 선택했습니다.\nCloudflare Pages 제공 혜택 # 한 번에 1개의 빌드만 가능 달마다 500개의 빌드 가능 최대 100개의 커스텀 도메인 지원 제한 없는 사이트 제한 없는 요청 무제한 대역폭 Cloudflare Pages 사용기 # 설정을 모두 끝마친 모습입니다.\n이미 Hugo 베이스의 레포지토리를 가지고 있어서 금방 설정할 수 있었습니다.\n다음에 시간이 된다면 생성 방법에 대해서 포스팅 해보겠습니다.\nCloudflare Pages Panel Pages 는 이상하게 메인 도메인을 커스텀 도메인으로 설정할 수 없었습니다.\n도메인 관리를 클라우드 플레어를 사용하게 하려는 의도인지는 잘 모르겠지만 참 아쉬운 부분입니다.\n생각보다 좋은 성능 # Netlify 랑 구체적인 비교를 하지 않았지만 빌드 퍼포먼스 면에서 좀 더 빠른 느낌이 들었습니다. 물론 보완적 측면을 바라보고 플랫폼을 이동했지만 의외의 수확이었습니다.\n이것도 나중에 자세히 한번 포스팅해 보자 합니다.\n무료 티어의 제약 # 위의 제공 혜택을 보면 알겠지만, 개인 사용자의 측면에서는 부족한 점이 하나도 없었습니다. 기업에서는 어차피 규모와 가격 측면을 고려해서 선택해서 사용할 테니까요\n포스팅을 마치며 # 계속 사용해 보면서 여러 가지 기능을 활용해 볼 예정입니다. 현재 분기 설정을 통해 배포 전 미리보기 기능을 테스트해 보고 있습니다.\n다음에 Pages 포스팅은 다양한 활용 방법으로 찾아오겠습니다. 제 글을 읽어주셔서 감사합니다 :)\n","date":"2024-03-10","externalUrl":null,"permalink":"/posts/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%ED%94%8C%EB%A0%88%EC%96%B4%EB%A1%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/","section":"Posts","summary":"클라우드 플레어의 pages를 통해서 블로그 배포 해 보기","title":"클라우드 플레어로 블로그 배포하기","type":"posts"},{"content":"","date":"2023-11-20","externalUrl":null,"permalink":"/tags/application/","section":"Tags","summary":"","title":"application","type":"tags"},{"content":"","date":"2023-11-20","externalUrl":null,"permalink":"/tags/keyboard/","section":"Tags","summary":"","title":"keyboard","type":"tags"},{"content":"","date":"2023-11-20","externalUrl":null,"permalink":"/tags/macos/","section":"Tags","summary":"","title":"macos","type":"tags"},{"content":"","date":"2023-11-20","externalUrl":null,"permalink":"/categories/macos/","section":"Categories","summary":"","title":"macOS","type":"categories"},{"content":"","date":"2023-11-20","externalUrl":null,"permalink":"/tags/via/","section":"Tags","summary":"","title":"via","type":"tags"},{"content":" 맥에서 한영 키 전환하기 # 맥을 구매하거나 초기화 후에 처음으로 부팅 시에 기본적으로 제공하는 한영 키 전환은 CAPSLOCK을 사용하거나 또는 제한된 설정을 통해 CTRL + SPACE를 사용하는 방법을 주로 사용하고 있습니다.\n나쁜 사용자 경험은 아니지만 다른 운영체제의 환경을 사용하다가 넘어온 사용자라면 익숙지 않아서 불편함을 겪기도 합니다.\n그래서 저의 설정을 잊지 않도록 블로그에 글을 작성하고 공유하고자 합니다.\n맥 기본 설정 사용하기 # 기본적인 옵션을 사용해서 한/영 키를 전환할 수 있도록 설정해 볼까 합니다. 맥에서 다음과 같이 설정 메뉴로 진입해 주세요\n설정 \u0026raquo; 키보드 \u0026raquo; 키보드 단축키 \u0026raquo; 입력 소스\n그럼 다음과 같은 설정 창을 확인하실 수 있습니다. Mac 입력 소스 설정 옵션이 활성화된 상태에서 CTRL + SPACE 키를 사용하면 한/영 전환이 가능합니다. 하지만 다른 특정 키를 사용해서 변경하기에는 기본 설정의 옵션에는 한계가 존재합니다. (특정 키 사용 불가)\n저는 해당 설정을 이용해서 키보드 매크로를 활용해서 한영 키 전환 기능을 구현했습니다.\nVIA를 사용하기 때문에 다른 프로그램을 활용하시려고 한다면 다른 포스팅을 참고해 주세요 보편적으로 karabiner-elements 프로그램을 많이 사용하고 있습니다.\nVIA 설정하기 # VIA 앱은 커스텀 키보드에서 기판의 옵션을 설정하게 해주는 도구로써 맥에서 흔히 사용하는 키크론 키보드등에서 사용되고 있습니다.\n저는 커스텀 키보드를 사용하고 있기 때문에 VIA를 사용하고 있습니다.\n설정 시작하기 # 사이트(https://usevia.app/)를 통해서 키보드 설정 창에 접속합니다. VIA 설정 페이지 설정 창 하단의 MACROS 탭으로 이동합니다. 저는 아까 기본 설정이던 CTRL + SPACE를 통한 한/영 키를 바인드 해보겠습니다.\n저는 하단의 M15 슬롯에 한/영 키를 바인드 했습니다. 매크로 설정 페이지 - M15 매크로 작성 # {KC_LCTL,KC_SPC} KC_LCTL: 왼쪽 컨트롤\nKC_SPC: 스페이스 바\n코드 관련은 https://docs.qmk.fm/#/keycodes_basic 사이트를 참고해 주세요.\n키 바인드 # 왼쪽의 KEYMAP 탭을 클릭해서 자신이 바인더하고싶은 키에다가 설정한 매크로를 설정합니다.\n키 지정하기 저의 경우에는 아까 상단의 매크로에서 M15 슬롯에 등록했기 때문에 등록한 키의 경우 M15로 등록했습니다.\n한/영키 전환을 VIA 애플리케이션 설정을 통해서 완성했습니다.\n번외 설정 # 기본적인 설정 이외에 같이 해주면 좋은 설정도 있습니다.\nCAPS LOCK 설정 # 기본 설정으로 적용된 캡스락의 언어 변경 옵션을 비활성화 할 수 있습니다.\n설정을 비황성화 해서 키보드를 사용할 때 캡스락의 입력언어 전환을 막을 수 있습니다.\n캡스락 설정 ","date":"2023-11-20","externalUrl":null,"permalink":"/posts/%EB%A7%A5%EC%97%90%EC%84%9C-%ED%95%9C%EC%98%81%ED%82%A4-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/","section":"Posts","summary":"맥 개발 환경에서 손쉬운 한영 전환을 위해 설정을 변경해봅시다.","title":"맥에서 한/영 키 설정하기 feat. VIA","type":"posts"},{"content":"","date":"2023-11-18","externalUrl":null,"permalink":"/tags/cicd/","section":"Tags","summary":"","title":"cicd","type":"tags"},{"content":"","date":"2023-11-18","externalUrl":null,"permalink":"/tags/jenkins/","section":"Tags","summary":"","title":"jenkins","type":"tags"},{"content":"","date":"2023-11-18","externalUrl":null,"permalink":"/categories/jenkins/","section":"Categories","summary":"","title":"Jenkins","type":"categories"},{"content":" 젠킨스 부트캠프 # 우테코 6기 프리코스에서 급조된 젠킨스를 체험하는 스터디 모임입니다.\n여러분의 젠킨스 체험을 환영합니다. 최근 들어서 Devops 기술이 부상되면서 체험하는게 좋을 것 같아서 운영하게 되었습니다.\n시작하기 전에 # 이미 서비스가 운영중인 개인 온프레미스 서버에서 미리 설정된 서버와 프로그램을 활용합니다.\n추후에 따로 다양한 프로그램 설치 및 설정에 대해 다룰 예정입니다.\n시작하기 # 깃허브 레포지토리 포크하기 # 준비된 레포지토리를 본인의 계정으로 포크합니다.\nlaterre39/spring-jenkins-template HTML 0 6 프로젝트 수정하기 # 포크한 레포지토리를 빌드하기 전에 문제없는 배포를 위해 스프링 부트의 설정을 수정해야 합니다.\napplication.yml\nport: 지정된 포트로 변경해주세요 (ex: 8090) contextPath: 지정된 id를 입력해주세요 루트주소에 추가 주소를 설정합니다. settings.gradle\nrootProject.name: 프로젝트 이름을 변경해서 빌드 파일명을 중복되지 않게 설정합니다. 젠킨스 관리자 접속하기 # 부트캠프에 참가하셨다면 관리자에 의해 계정이 발급 되셨을겁니다.\n사이트에 접속하셔서 발급받은 계정을 입력해서 로그인 합니다.\n젠킨스 로그인 페이지 발급받은 계정으로 로그인에 성공하면 아래와 같은 페이지에 접속이 됩니다.\n젠킨스 메인 페이지 관리자에 의해 설정된 권한에 의해 수정할 수 있도록 할당받은 프로젝트만 수정하고 빌드하실 수 있습니다.\n프로젝트 기본 설정하기 # 프로젝트 이름을 눌러서 프로젝트에 진입해보겠습니다.\n설정된 프로젝트 이름은 다음과 같습니다.\n{username}-project 프로젝트에 진입하면 프로젝트 메인 대시보드를 확인할 수 있습니다. 해당 프로젝트 대시보드에서 프로젝트에 대한 CICD 설정을 진행합니다.\n젠킨스 프로젝트 메인 페이지 좌측 사이드 메뉴에서 구성을 선택해서 설정 페이지로 이동합니다. 여기서부터 설명을 자세히 보시고 따라하시거나 또는 응용해서 설정해보세요!\n젠킨스 프로젝트 설정 페이지 설정 주의하기 # 경고! Enable project-based security에 대한 설정을 절대 건들지 마세요!!! Enable project-based security 설정 레포지토리 입력 # 포크한 탬플릿 레포지토리 URL을 복사해서 GitHub project 탭을 체크해서 입력합니다.\nGitHub project 설정 JDK 선택 # 미리 만들어둔 탬플릿 레포지토리의 경우 JDK 17버전을 기반으로 개발되었습니다.\n그래서 openJDK-17 버전을 선택합니다.\nopenJDK 17 선택 JDK 선택과 관련해서 # 실제로 개발 환경에 따라 다양한 JDK 버전을 사용하기 때문에 젠킨스에서 지원해서 활용할 수 있도록 제공하고 있습니다.\n그 이외에도 다양한 프로덕션 환경에 대응하도록 방대한 설정을 플러그인 및 빌트인 시스템으로 제공하고 있습니다.\n소스코드 관리 설정하기 # 해당 설정탭에서 레포지토리에 대한 기본 설정을 진행합니다.\n중요하니까 잘 따라서 설정해주세요\n소스 코드 관리 Git 설정하기 # 위에서 설정한 레포지토리 입력과 동일하게 포크한 레포지토리를 Repositories에 Repository URL 칸에 입력합니다.\nCredentials 설정하기 # 포크한 레포지토리를 관리하기 위한 권한을 생성합니다.\nAdd버튼을 누르고 Jenkins 탭을 선택해서 권한 생성 페이지를 오픈합니다.\n알림 계정은 생성 즉시 암호화 되기 때문에 관리자가 알 수 없습니다. Github 토큰 발급하기 # 본인의 깃허브 페이지로 이동해서 Settings를 클릭해서 계정 설정페이지로 이동합니다. 좌측의 사이드바에서 제일 아래의 Developer Settings을 클릭해서 개발자 설정으로 이동합니다. Personal access tokens에서 tokens (classic)를 선택해서 토큰을 생성합니다. Generate new token을 클릭하고 Generate new token (Classic)을 선택합니다. 중요한 설정으로 발급하기 전에 비밀번호를 요구하기 때문에 비밀번호를 입력해서 인증합니다. Note는 토큰의 이름값 Expiration은 만료일 설정입니다. Select scopes에서는 젠킨스 빌드만들 위한 설정으로 repo와 admin:repo_hook만 선택해서 생성합니다. 만들어진 토큰은 생성된 이후에만 조회할 수 있기 때문에 기록해두어야 합니다 다만 절대 외부로 유출해서는 안됩니다. New personal access token Credentials 추가 # 위에서 발급한 토큰을 사용해서 계정을 생성합니다.\nAdd Credentials Domain과 Kind, Scope 를 이미지와 동일하게 선택하고 나머지 칸의 경우 아래 정보를 참고해서 작성해주세요!\n컨텍스트 설명 Username 젠킨스에서 다양한 출력에 표시될 유저이름을 입력합니다. Password 깃허브에서 발급받은 토큰을 입력합니다. ID 사용중인 깃허브의 아이디를 입력합니다. Description 젠킨스에서 표시될 설명을 입력합니다. 설정을 완료하고 선택을 하면 다음과 같이 표시됩니다.\nCredentials Branches to build 를 이제 설정합니다.\n실제로 빌드를 진행하는 브랜치를 작성해주면 됩니다.\n별도로 브랜치를 설정해서 개발하지 않았기 때문에 main 브랜치를 작성합니다. 만약에 별도로 브랜치를 설정해서 개발한다면 실제로 사용할 브랜치를 작성해주세요!\n*/main Add Branch를 눌러서 빌드가 진핼 될 브랜치를 추가할 수 있습니다.\nRepository browser의 경우 사용할 레포지토리 사이트를 선택할 수 있는데 자동으로 선택해주세요 또는 Github를 선택해도 동일합니다.\n빌드 유발 설정하기 # 빌드 유발의 경우 특정 이벤트를 캐치하면 젠킨스에서 설정한 소스 코드 관리 레포지토리를 빌드합니다.\n빌드 유발 옵션 선택하기 # GitHub hook trigger for GITScm polling를 선택합니다.\n위 기능의 의미는 git에서 push 이벤트를 감지하게 되면 hook을 보내게 되어 젠킨스에서 자동으로 빌드를 진행하라는 옵션입니다.\nBuild Steps 설정하기 # 빌드시 진행될 각종 설정들을 개발자가 직접 지정할 수 있습니다.\n사실 위에 설정들은 기본적인 설정들이고 실질적인 설정 부분은 바로 여기에서 설정한다고 봐도 무방합니다.\nInvoke Gradle script 설정하기 # 탬플릿의 경우 자바의 스프링 부트를 기반으로 개발했기 때문에 전용 빌드 툴을 활용합니다.\n이미 설정한 옵션 그대로 설정해주세요!\nGradle Version에 Gradle-8.1 선택 Tasks에 bootjar 선택 Tasks의 경우 자바 빌드와 동일하게 다양한 빌드 옵션을 선택할 수 있습니다.\nInvoke Gradle script Execute shell 설정하기 # 쉘 스크립트 작성을 통해서 jar 파일을 서버에 실행해주는 작업을 시작해보겠습니다.\nExecute shell 배포 스크립트 전체 # 스크립트에 대한 설명을 하기전에 전체 스크립트를 보여드리겠습니다.\n일단 전체적인 흐릅에 대해서 파악해 보세요\n# 자동 그래들 빌드 배포 pid=$(ps -ef | grep {jar-file-name}\\* | grep -v \u0026#34;grep\u0026#34; | grep -v $0 | awk \u0026#39;{print $2}\u0026#39;) # 기존 서버 PID 확인 if [ -z $pid ] # 앱이 작동중인지 체크 then echo 앱이 작동중이 아닙니다. # 앱이 작동중 이 아니면 다음으로 else kill -9 $pid # 앱이 작동중이면 PID로 강제 종료 echo 앱을 성공적으로 종료 했습니다, 프로세스 아이디: $pid. fi cd build/libs # 빌드 파일 위치로 이동 sudo rm -rf /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name}/{jar-file-name}*.jar # 기존 빌드 파일 삭제 sudo mv {jar-file-name}*.jar /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name} # 신규 빌드 파일을 운영 디렉터리로 이동 cd /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name} # 운영 디렉터리로 이동 BUILD_ID=dontKillMe nohup java -jar {jar-file-name}*.jar 2\u0026gt;\u0026gt; /dev/null \u0026gt;\u0026gt; /dev/null \u0026amp; # 빌드 파일 배포 echo ============ 새로운 빌드 성공적으로 배포중!!! [PID:$!] ============ 배포 스크립트 설명 # 이제 스크립트에 대해서 설명을 진행하겠습니다.\n{jar-file-name}: 설정한 자바파일 이름을 입력해주세요. {dir-name}: 지정받은 폴더 이름을 입력해주세요. Jar 파일이 서버에 실행중인지 확인 후 종료 # 서버에서 실행중이던 기존 Jar 프로세스를 찾아서 종료합니다.\npid=$(ps -ef | grep {jar-file-name}\\* | grep -v \u0026#34;grep\u0026#34; | grep -v $0 | awk \u0026#39;{print $2}\u0026#39;) # 기존 서버 PID 확인 if [ -z $pid ] # 앱이 작동중인지 체크 then echo 앱이 작동중이 아닙니다. # 앱이 작동중 이 아니면 다음으로 else kill -9 $pid # 앱이 작동중이면 PID로 강제 종료 echo 앱을 성공적으로 종료 했습니다, 프로세스 아이디: $pid. fi 젠킨스 빌드 경로로 이동 # 기본 젠킨스 빌드 경로로 빌드 파일을 수정하기 위해 이동합니다.\ncd build/libs # 빌드 파일 위치로 이동 기존 빌드 파일 삭제 # 기존 빌드파일을 운영 폴더에서 삭제합니다.\nsudo rm -rf /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name}/{jar-file-name}*.jar # 기존 빌드 파일 삭제 새로 빌드된 파일 이동 # 새롭게 빌드된 파일을 운영 폴더에 이동합니다.\nsudo mv {jar-file-name}*.jar /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name} # 신규 빌드 파일을 운영 디렉터리로 이동 운영 경로로 이동 # 운영 폴더로 이동합니다.\ncd /home/{dir-name}/Server/Webserver/work.laterre.dev/public_html/{dir-name} # 운영 디렉터리로 이동 최신 빌드 파일 실행 # 새로 빌드된 운영파일을 실행합니다.\nBUILD_ID=dontKillMe nohup java -jar {jar-file-name}*.jar 2\u0026gt;\u0026gt; /dev/null \u0026gt;\u0026gt; /dev/null \u0026amp; # 빌드 파일 배포 빌드 실행 성공 출력문 # 빌드에 성공하면 문자열을 출력합니다.\necho ============ 새로운 빌드 성공적으로 배포중!!! [PID:$!] ============ 명시해둔 \u0026ldquo;{id}\u0026rdquo; 를 제외한 나머지 스크립트 코드는 건들지 말아주세요 오류가 날 가능성이 큽니다.\n빌드하기 # 여기까지 읽으면서 실습하셨다면 모든 절차가 끝났습니다. 저장하고 프로젝트를 빌드해서 사이트를 배포해보세요\n배포에 성공하셨다면 Build History에 초록색 체크 표시가 나타나게 됩니다.\nBuild History 빌드에 성공하셨다면 사이트에 접속해서 직접 API 테스트를 진행해주세요!\n사이트 세부 경로도 아이디명으로 생성되어 있습니다!\nhttps://work.laterre.dev/{id} 배포 후 사이트 접속 # 접속시 첫 화면 # Build site #1 회원가입 페이지 # Build site #2 회원가입 완료 페이지 # Build site #3 ","date":"2023-11-18","externalUrl":null,"permalink":"/posts/%EC%A0%A0%ED%82%A8%EC%8A%A4-%EB%A0%88%ED%8F%AC%EC%A7%80%ED%86%A0%EB%A6%AC-%EB%B9%8C%EB%93%9C%EC%99%80-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/","section":"Posts","summary":"젠킨스에서 깃허브 레포지토리를 자동으로 빌드하고 배포하는 과정을 한번 따라해봅시다!","title":"젠킨스 레포지토리 빌드와 배포하기","type":"posts"},{"content":"","date":"2023-11-16","externalUrl":null,"permalink":"/tags/prompt/","section":"Tags","summary":"","title":"prompt","type":"tags"},{"content":"","date":"2023-11-16","externalUrl":null,"permalink":"/tags/shell/","section":"Tags","summary":"","title":"shell","type":"tags"},{"content":"","date":"2023-11-16","externalUrl":null,"permalink":"/tags/terminal/","section":"Tags","summary":"","title":"terminal","type":"tags"},{"content":" Warning! 해당 포스트는 작성 중 입니다\u0026hellip; Starship 소개 # Starship 프롬프트는 다양한 쉘에 사용할 수 있는 사용자 정의가 가능한 프롬프트 입니다.\nPhoto by Starship.rs 프롬프트 장점 # 호환성 우선적 # 다양한 쉘을 지원합니다 Oh-my-zsh 나 Spaceship 처럼 특정 쉘에 의존적이지 않습니다.\nRust 기반 # Rust 언어를 기반으로 개발되었습니다. 빠른 속도와 안전성을 보장하여 안정적이고 빠른 프롬프트 환경을 제공합니다.\n맞춤형 지원 # 다양한 세부 설정을 지원해서 프롬프트를 사용자 입맛에 맞추어서 최소화 또는 기능을 다양하게 사용할 수 있습니다.\n프롬프트 설치하기 # ","date":"2023-11-16","externalUrl":null,"permalink":"/posts/%EB%A7%A5-%ED%84%B0%EB%AF%B8%EB%84%90%EC%97%90-starship-prompt-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/","section":"Posts","summary":"Mac OS에서 iTerm2 터미널에 Starship Prompt를 설치해서 나만의 터미널 만들기","title":"맥 터미널에 Starship prompt 사용하기!","type":"posts"},{"content":"","date":"2023-11-06","externalUrl":null,"permalink":"/tags/woowacourse/","section":"Tags","summary":"","title":"woowacourse","type":"tags"},{"content":" Photo by Clark Tibbs on Unsplash 블로그 선택하기 참 힘들다\u0026hellip; # 처음에는 티스토리와 노션 그리고 벨로그중에서 티스토리를 선택했지만 제대로 된 블로그 활동을 하지도 않았었고 또한 뭔가 마음에 드는 테마도 없었고 무엇보다 2차 도메인을 사용할 수 없었다는 큰 단점이 있었습니다.\n해당 플랫폼들의 장점들은 간편한 설정 후 바로 운영이 가능하지만 대신 제한된 사용을 해야 한다는 점이었습니다. 사실 꾸준한 작성 자체만으로도 블로깅에 의의가 있겠지만 그대로 이쁜 블로그 운영하고 싶다는 개발자 마인드는 있었기 때문이죠\n설치형 블로그로 해볼까? # 설치형 블로그들의 장점은 바로 본인이 개발할 수 있는 실력만 된다면 무엇이든지 개발해서 활용할 수 있다는 장점이 있다고 생각합니다.\n물론 러닝 커브가 있지만 그건 개발자인 저에게는 해당하지 않는 말이기도 했습니다. 어차피 언어는 하나 배워두면 다른거 활용하는 거는 어려운 부분이 아니었기 때문입니다.\n워드프레스와 고스트 CMS # 유명한 CMS들로 자료들도 많고 이쁜 테마도 많지만 무겁기도 하고 설정도 해야 할 것이 많고 무엇보다 테마를 유료로 사야 한다는 점이 마음에 안들었습니다\n사실 저는 나중에는 자신만의 테마를 만들 생각을 하고 있기 때문입니다. 무료 테마들도 마음에 드는 부분이 없었습니다. 가지고 있는 테마도 그렇게 썩 마음에 들지도 않았거든요.\nGatsby vs Hugo vs Jekyll # 사실 개발자분들이 거의 많이 마주하시는 선택지가 아닐지 싶습니다.\n다들 개발자 블로그 하면 깃허브에 3가지 JAMstack 솔루션을 선택하시게 될 텐데 제일 많이 선택하는 건 Jekyll을 많이 선택하시는 듯했습니다.\n아무래도 자료들이 제일 많아서 그런 듯했습니다. 저는 처음에는 Gatsby를 선택했었습니다. 이유는 리액트 기반으로 동작했기 때문에 나중에 테마를 만드는데 어려움 없이 바로 이전해서 사용이 가능할 듯싶었습니다.\n하지만 마음에 드는 테마는 없었고 다른 솔루션을 고려하지 않아서 다시 티스토리로 새롭게 시작할지 싶었습니다.\n우테코 프리코스에서 Hugo 소개 글이!? # 최근에 우테코 6기를 지원하고 프리코스 활동을 진행하던 와중에 동기분에게 Hugo를 소개받게 되었습니다.\n사실 Hugo는 제 계획안에 있지는 않았어요. go 언어 기반의 JAMstack 솔루션으로 제가 공부해야 할 것이 더 많아지기 때문이었는데 사실 블로그 어차피 마크다운 콘텐츠로 운영할 거고 테마만 이쁘면 그만이긴 했습니다. ㅋㅋ..\n다른 설루션에 비해서 테마들이 이쁜 게 참 많았습니다. 이상하게 능력자분들이 Hugo에 몰려드신 게 아아닐지 싶을 그런 생각이 들더라고요 그래서 결국은 Hugo를 사용하기로 했습니다.\n설치형 블로그는 할게 많다.. # Hugo를 선택하고 나서 테마를 고르고 블로그를 실제로 활용할 수 있는 수준까지 준비해서 빌드하는 작업은 은근히 순탄치 않았습니다.\n나중에 이것도 하나의 배움이라서 포스팅할 예정이지만 처음 써보는 몇 개의 툴이 있어서 색다른 경험을 했습니다.. 탈모올것 같아요.\n그래도 만들어진 블로그를 보니 뿌듯합니다.\n기술 블로그 운영합니다! # 꾸준한 글을 작성하기는 어렵겠지만 차근차근 작성하다 보면 언젠가는 다른 기술 블로그처럼 양질의 글을 작성할 수 있지 않을까 생각이 됩니다. 한 가지 일에 몰두할 수 있다는 것도 재능이라는 말도 있는데 틀린 말은 아니라고 생각합니다. 몇 시간 동안 코딩하면 쉽지 않은 일이지만 실력 좋은 프로그래머들 보면 대부분 몰두할 수 있는 집중력을 가지고 계셨습니다. 저도 그런 재능 하나만 주세요 ㅠㅠ.. 하지만 그렇다고 해도 계속 발전해 나가다 보면 저도 언젠가 그런 프로그래머의 대열에 합류할 수도 있다고 생각합니다. 그래서 기술 블로그 운영 시작합니다!\n","date":"2023-11-06","externalUrl":null,"permalink":"/posts/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%B2%AB-%ED%8F%AC%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1/","section":"Posts","summary":"개발자 블로그 런칭합니다!","title":"블로그 첫 포스트 작성!","type":"posts"},{"content":"Hi there, I'm Changil Kim - also known as Laterre I'm a Backend \u003c𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 /\u003e, also interested in Fullstack and Devops !! 🚀 안녕하세요, 저는 김창일입니다. 라테르라는 닉네임으로 활동합니다. 백엔드 개발자이며 풀스택 개발자와 데브옵스에 관심이 많습니다.\n","externalUrl":null,"permalink":"/about/","section":"Laterre Dev","summary":"Hi there, I'm Changil Kim - also known as Laterre I'm a Backend \u003c𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 /\u003e, also interested in Fullstack and Devops !! 🚀 안녕하세요, 저는 김창일입니다. 라테르라는 닉네임으로 활동합니다. 백엔드 개발자이며 풀스택 개발자와 데브옵스에 관심이 많습니다.","title":"About","type":"page"},{"content":"저는 개발이 세상에 새로운 것을 창조할 수 있다고 생각하는 편입니다.\n그래서 개발을 좋아하고 새로운 기술을 배우고자 노력합니다.\n제가 개발하거나 참여한 프로젝트를 소개합니다.\nLogo Title Description References UnstackoverflowClone coding 유명한 해외 코딩 커뮤니티인 스택오버플로우를 재해석해 클론코딩 프로젝트를 진행 했습니다. github codeTech 컴팩트한 정보로 보다 좋은 UX를 제공하고자 코드테크 프로젝트를 시작하게 됐습니다. github ","externalUrl":null,"permalink":"/projects/","section":"Laterre Dev","summary":"저는 개발이 세상에 새로운 것을 창조할 수 있다고 생각하는 편입니다.\n그래서 개발을 좋아하고 새로운 기술을 배우고자 노력합니다.\n제가 개발하거나 참여한 프로젝트를 소개합니다.\nLogo Title Description References UnstackoverflowClone coding 유명한 해외 코딩 커뮤니티인 스택오버플로우를 재해석해 클론코딩 프로젝트를 진행 했습니다. github codeTech 컴팩트한 정보로 보다 좋은 UX를 제공하고자 코드테크 프로젝트를 시작하게 됐습니다. github ","title":"Projects","type":"page"},{"content":" Experience Company Link Role Dates Location 로고 회사명 직급명 재직기간 회사지역 Education School Link State Date 교육 과정명 교육 기간 ","externalUrl":null,"permalink":"/resume/","section":"Laterre Dev","summary":" Experience Company Link Role Dates Location 로고 회사명 직급명 재직기간 회사지역 Education School Link State Date 교육 과정명 교육 기간 ","title":"Resume","type":"page"}]