728x90

Dev 74

[Deployment] React App 배포하기

얼마 전에 회사에서 MonoRepo로 구현한 React App 배포 파이프라인 구축을 완료했다.애초에 내가 만든 앱은 Next를 사용하지 않은 CSR 기반의 React App이고, 때문에 오직 정적 리소스 배포만으로도 동작이 가능하기 때문에 상당히 심플하고 뭐 난해할게 없다.그래서 별로 어렵지 않은 작업에 속하는데 하지만 우리 신입 개발자들은 이런 기초적인 정보 하나하나가 소중한 사람들이기 때문에, 한번 이야기 해보도록 하자.1. React 어플리케이션은 어떻게 배포되는가?배포를 한번 해보자! 하고 구글을 잔뜩 검색해보다보면 이제 만나게 되는 혼란스러움이 있는데, 그게 뭐냐면 어디선 S3로 배포한다고 그러고 어디선 EC2로 배포한다고 그런다는거다.AWS 조금이라도 만져본 사람은 알겠지만 S3의 경우엔 정..

Dev/Deployment 2024.09.23

[PWA] Vite + React App PWA 배포하기

회사에서 개발한 Web App 하나가 있는데, 이 녀석을 모바일 버전으로도 구현해달라는 요구를 전달 받았다. 반응형 웹으로 만들면 될 것 같다고 생각하고 딱 그정도만 해놨는데 그러고나니 매번 브라우저로 들어가서 url을 치고 들어가는게 힘들다는 이야기가 있어서  결국 PWA 를 적용하기로 결정했다..  1. 굳이 PWA를 적용하게 된 이유 RN(React Native)로 뭐 모바일 앱도 하나 만들면 되지 않나요? 라고 할 수 있는데, 물론 내가 React로 SPA를 개발하는 사람이긴 하다만 RN을 사용해서 개발해본적은 없기도 하고, 시도하자니 너무 처음부터 또 App을 빌딩을 해야해서 솔직히 귀찮았던게 크다.  또 몇 년 전쯤 마침 Apple이 PWA의 지원을 확대하겠다고 WWDC에서 발표했던걸 알고 있..

Dev/MobileApp 2024.09.05

[React] Next.js VS Vite VS CRA

오늘은 React App을 생성하고 사용하는 세가지의 세계관을 이야기하려고 하는데, 뭐 정확히 어떤 용어를 써야할지 모르겠어서 난 세계관이라고 부른다. React App을 생성하는 방법은 다양하다. 뭐 지금 내가 언급할 이 세가지를 제외하고 더 있을 수도 있음. 근데 주로 이 세가지를 사용하게 된다.  1. 기본 소개첫번째는 CRA (Create React App) 이다. 전통적으로, 가장 기본적으로 React를 시작할 때 사용하게 되는데 진짜 우리가 알고 있는 가장 기본적인 Webpack이라는 번들러랑 Babel이라는 컴파일러등 으로 세팅되어있는 React App을 세팅해준다. React 자체가 SPA, CSR을 목적으로 나왔던 프레임워크이기 때문에 기본적으로 SPA, CSR에 큰 비중을 두고 있다. ..

Dev/React.js 2024.06.14

[Deployment] NGINX

연달아 글을 써제끼는데 어쩔 도리가 없다. 배포 얘기 한번 하면 그 사이에 낑겨있는 애들이 한둘이 아니라서 하나하나 언급을 할 수 밖에 없다... 지금 얘기할 건 NGINX 얘긴데, 디테일한 설명은 내 블로그엔 전혀 없기 때문에, 그래도 한번 핥고 지나가는 정도는 써둬야하지 않나 싶어서 남겨본다. NGINX는 웹서버다. 걍 웹서버임. 요청하면 그 경로에 있는거 냅다 꺼내 주는 웹서버. 1. 웹서버가 그래서 뭘까?내가 주구장창 웹서버 언급만 하지 디테일한 설명을 전혀 안했던 것 같은데, 솔직히 기본적인 기능에 대해선 설명할게 별로 없다.일단 컴퓨터 한대를 준비한다. 그리고 뭐 특별히 conf 파일을 만들지 않고 실행한다고 가정하고, /usr/share/nginx/html 라는 NGINX의 default 경..

Dev/Deployment 2024.06.08

[Deployment] React App을 배포하기 전에

오늘은 스트레스 받던걸 해결했다. 사실 해결한 내용 진짜 많은데 하나하나 쓰려니 Back단 내용도 많아서 이론적으로 설명이 어렵길래 걍 냅뒀는데 오늘은 하면서도 좀 재밌었기 때문에 들고와봤다.  이직을 하고 와서보니 회사에서 기존에 운영하고 있던 시스템과 내가 주로 개발하고 있는 시스템 간의 기술 괴리가 커서 도움을 구하거나 할 수 있는 곳이 없다. 그러다보니 개발도 내가 하고, 당연히 전반적인 인프라 영역은 다른 분들이 해주시지만 데브옵스 영역도 내가 하고 이렇게 되어버렸는데 해보고나니 어려움은 그냥 배포라는 이름에서 오는 두려움 뿐이라 그냥 간단하게 개념적인 이해를 돕고자 작성해본다.  1. 배포에 필요한 개념들기본적으로 배포가 왜 어렵게 느껴지냐면 어플리케이션을 구성하는 모든 것에 대한 이해가 필요..

Dev/Deployment 2024.06.06

[Java] Java를 시작하기 전에

요 근래 의도치 않게 풀스택 개발자 스러운 면모를 보이게 되어버려서, 슬슬 Java에 대한 기록도 남겨두어야할 것 같아 카테고리를 새로 팠다. Java를 시작하기 전에 우리가 아주 많이 사용하고 있는 이 Java라는 언어에 대해서 간단히 이야기 해보자. 기초 문법 메서드 만드는거나  for, while, class 그런건 안쓸거다.  1. 컴파일  언어기본적으로 Java는 C계열 언어들과 같이 컴파일 언어로 분류된다. 컴파일 언어가 뭔지 간단히 설명하고 넘어가자면 언어를 해석, 실행하는 방식에 대한 이야기인데, 주로 언어는 인터프리터, 컴파일 두가지가 있다. 인터프리터의 경우엔 한줄한줄 읽어가며 해석하고 실행을 한다고 보면 되겠고, 컴파일의 경우엔 한번에 쫙 읽어서 해석하고 세팅한 후 실행한다는 차이점이..

Dev/Java 2024.04.26

[MyBatis] Resources 찾기 대소동

요즘 회사에서 Front 개발보단 Back단 개발을 더 많이 하고 있다. 그래서 나의 프론트 Trend는 MonoRepo에서 멈췄음.. 뭐 일단 이건 나중에 썰에 추가하려고 생각중이니 각설하고, 오늘의 주인공은 Mybatis인데, 특별히 뭐 세팅 설명하고 이럴 필요는 없을 것 같은게, 구글에 Mybatis 하나만 검색하면 온갖 세팅방법이 다나온다. mybatis-config.xml을 쓰는 Spring MVC 환경에서 세팅, Boot 환경에서 세팅, xml 혐오자들을 위한 JavaConfig 세팅, interface + Mapper.xml 조합 세팅, interface만 쓰는 세팅, interface 구현체 class 만들어쓰는 세팅 등등 진짜 말 그대로 쏟아져나오는데, 요즘에야 JPA가 대세다 대세다 하..

Dev/Debug 2024.04.19

[Package Manager] yarn 과 npm을 시작하기 전에

정말 오랜만에 글을 쓰는 것 같은데 오늘은 패키지 관리자(매니저) 에 대한 이야기를 좀 하려고 한다. 최근에 개인적으로 만드는 프로젝트는 모두 한가지 패키지에서 관리하고 배포해볼까? 라는 생각이 들어서, 모노레포를 활용해볼까 하는 중인데 그러다보니 자연스레 이 yarn 이랑 Npm에 대해서 알아야하다보니 좀 자세히 파보려고 준비를 한다. 저 두가지를 얘기하기 전에 기본적으로 패키지 관리자가 뭐하는 애들인지부터 알아야하기 때문에 일단 이 글로 한번 정리하고 넘어가보자. 1. Package? 먼저 Package에 대한 정의부터 하고 넘어가도록 하자. JavaScript로 개발을 하는 사람들이라면 초급, 신입 개발자라도 Module이라는 말에는 상당히 익숙하겠지만, 그 초급, 신입 개발자의 경우 대부분 이 P..

Dev/React.js 2023.09.24

[Web] Web Server & Web Application Server

오늘 할 얘기는 서버라는 말을 좀 집중적으로 파볼건데, 최근 인프라에 대해서 좀 알아보다보니, 내가 잘못 이해하고 있던 것들이 꽤나 있어서 이 부분을 제대로 정리하고 넘어갈 예정이다. 위에 있는 그림이 이제 웹 어플리케이션이 동작하는 방식을 명확히 보여주는 예시인데, 그림만 보면 그냥 골머리가 썩을거다. 웹 서버는 뭐며, 웹 어플리케이션 서버는 뭐고, 클라이언트는 무엇인가? 라는 부분에서 일단 상당한 혼란이 올 것으로 예상된다. 인프라나, NEXT.js의 SSR 기능을 잘 사용하려면 이런 부분에 대한 이해가 확실히 필요하니 한번 제대로 알아보자. 1. 용어 정리 일단 시작 전에 용어 정리를 간단히 하고 넘어가도록 하자. 사실 이 혼란들은 신입, 초급 개발자 입장에서 용어를 올바른 쓰임새로 쓰지 않기 때문..

Dev/Basic 2023.08.03

[Algorithm] 소수찾기 (에라토스테네스의 체)

코딩테스트의 정말 큰 문제점이 뭐냐면, 했던 걸 계속 까먹는다는거다. 내가 짱구를 굴려서 풀었으면 그 이후에 풀 때도 짱구를 굴려서 풀 수 있을건데, 도저히 솔루션을 못찾겠어서 타인의 정답을 참고하게 되면 이런 문제가 생긴다. 그 이유가 뭐냐면, 실제로 사용되는 수학적 개념들을 요구하는 문제가 있기 때문인데 이 대표적인 예가 최대공약수, 최소공배수찾기, 에라토스테네스의 체를 활용해 소수찾기 같은 문제들이 그렇다. 앞선 게시물에서 이 내용들을 언급했음에도 또 내가 이걸 작성하는 이유는 내가 저것들을 봤음에도 불구하고 까먹었기 때문이다. ㅎㅎ.. 사실 앞선 게시물에서는 제대로 이해했다기보단 솔루션 저장소같은 느낌으로 모르겠으면 또 보려고 쓴거라, 이번엔 제대로 이해한 내용 그대로 작성해볼 예정이다. 1. 소..

Dev/Algorithm 2023.08.02
728x90