[DevOps] Github Actions로 브랜치별 Firebase 배포 설정하기

서론 필자가 최근 새로 참여하게된 팀에서 firebase를 통해 서비스를 구축하고자 하여, 이와 관련한 github 브랜치별 firebase 배포 설정을 작업하게 되었다. 이때 했던 내용들을 정리차 포스팅으로 남겨보았다. 이러한 배포 자동화 설정은 수동으로 일일히 배포하는 방식보다 큰 수고를 덜어주고 항상 일률적으로 빠르게 배포할 수 있게되어, 오직 개발에만 집중할 수 있도록 도움이 된다. 특히 팀에서 협업을 위해 코드리뷰를 진행하는 경우 프론트 프로젝트에서는 preview가 필수이기 때문에 더욱 이러한 배포 자동화는 필요하다. firebase는 2020년부터 미리보기 채널(베타)라는 이름으로 production 배포를 위한 live channel뿐만 아닌 테스트, 개발을 위한 배포 채널을 나눌 수 있도..

• format_list_bulleted SW/DevOps
• · 2023. 1. 21.
• textsms

CloudFlare로 Notion 포트폴리오 페이지에 커스텀 도메인 연결하기

서론 이번 포스팅에선 CloudFlare로 Notion 포트폴리오 페이지에 커스텀 도메인을 연결하는 방법을 소개하려고 한다. 약간의 수고만 해주면 아래처럼 자신의 Notion 포트폴리오의 URL을 깔끔한 도메인으로 바꿔줄 수 있다. before: https://betaman.notion.site/Kang-Minsu-BetaMan-1cab39b8a57a4ea0841acb8fb960d4ac after: https://portfolio.betaman.kr 강민수 Kang Minsu - BetaMan 🏆 수상경력 portfolio.betaman.kr 1. 준비물 Notion 포트폴리오에 커스텀 도메인을 붙이기 위해서 우선 아래와 사항이 필요하다 CloudFlare 네임서버가 등록된 개인 도메인 Notion 포트..

• format_list_bulleted SW/Etc
• · 2022. 12. 11.
• textsms

[Typescript] 당신의 JS코드에서 if문을 줄여줄 기본 연산자 5가지

서론 이번 포스팅에서는 JS코드 상에서 if문을 줄여줄 수 있는 기본 연산자 5가지를 소개한다. 하지만 기본 연산자를 활용해 무조건적으로 if문을 줄인다고해서 가독성이 좋아지는 것은 아니니 미리 알아두고 필요할때 적절히 활용하도록 하자. 1. 논리곱(&&), 논리합(||) 연산자의 단락 평가(Short-circuit evaluation) (결과값이 false가 되는 표현식) && (임의의 표현식) Javascript는 && 표현식에서 좌항 표현식의 결과값이 false이면 우항의 표현식을 실행/검사하지 않는다. 그래서 위 예시를 보면, 좌항에 결과값이 false가 되는 표현식이 놓여있고 우항에는 어떤 임의의 표현식이 놓여있는데 우항의 표현식은 아예 실행되지 않는 것이다. 이와 같은 기능은 보통 값이 유효한..

• format_list_bulleted SW/Typescript
• · 2022. 12. 5.
• textsms

[Typescript] Next.js 13의 Image 컴포넌트 변경사항

서론 이번 포스팅은 Next.js의 버전이 12에서 13으로 업데이트되면서 발생한 Image 컴포넌트의 변경사항을 다룬다. 아직 구글에 돌아다니는 대부분의 Image 컴포넌트 자료가 12버전 이전의 자료들이라 13버전에는 사용할 수 없는 내용들이 많아 이렇게 간단히 포스팅으로 정리하게 되었다. Next.js v13.0.0 기준 v12.3.0 대비 변경사항 1. Image 컴포넌트의 를 감싸던 과 일부 Prop이 삭제됨 기존 Image 컴포넌트 내부에선 태그를 으로 감싸고 있었지만, 13버전에는 이 삭제되어 13버전에서 Image 컴포넌트를 사용하면 태그 하나만 랜더링된다. 그리고 13버전에서 삭제된 Image 컴포넌트의 Prop은 다음과 같다. layout objectFit objectPosition l..

• format_list_bulleted SW/Typescript
• · 2022. 11. 5.
• textsms

[DevOps] NGINX Proxy Manager와 CloudFlare를 이용해 로컬 네트워크 내에서 일관된 웹 개발 테스트 환경 구성하기

서론 이번 포스팅에선 NGINX Proxy Manager과 CloudFlare로 같은 로컬 네트워크(공유기) 내 디바이스들이 동일한 도메인으로 개발 서버에 접근할 수 있도록 세팅하고 덤으로 SSL 인증서 적용법까지 소개하도록 하겠다. TL;DR CloudFlare에 개인도메인을 연결하고 A레코드 서브도메인으로 개발 서버 컴퓨터의 공유기 내 사설 IP주소(예: 192.168.x.x, 172.30.x.x)를 등록해놓은 뒤, NGINX Proxy Manager에서 해당 A레코드 서브도메인으로 들어오면 개발 서버가 실행 중인 로컬 포트로 포워딩 해주면된다. 이때 Forward Hostname을 "localhost"나 "127.0.0.1"이 아닌 CloudFlare에 등록했던 사설 IP주소를 기입해줘야 정상 작동..

• format_list_bulleted SW/DevOps
• · 2022. 10. 31.
• textsms

[Typescript] Javascript의 Pass by Reference와 Pass by Value

서론 이번 포스팅에선 Javascript의 Pass by Reference(이하 by Ref.)와 Pass by Value(이하 by Val.)에 대한 이야기를 해볼까 한다. (예제 코드들은 Typescript로 작성되었지만, 큰 차이는 없으므로 참고하기 바란다.) TL;DR Javascript는 함수에 인자를 전달할때 무조건 by Val.로 전달한다. Object를 함수의 인자로 전달할 때도 by Val.로 전달되지만, "Objec에 대한 참조"를 Value로 하여 전달하기 때문에 Object를 함수로 전달하면 by Ref. 처럼 사용할 수 있다. Object를 대입한 a라는 변수를 함수의 인자로 전달하면 해당 인자를 by Ref. 처럼 사용할 수 있기 때문에, 함수 내에서 해당 인자의 속성 값을 수정..

• format_list_bulleted SW/Typescript
• · 2022. 10. 25.
• textsms