개발자님, 구현 어느정도 됐어요?
배포 프로세스 없이 프로젝트 공유하기

시작하며

개발하다보면 종종 코드를 작성하는 도중에 기획자나 디자이너에게 작업을 공유해야 하는 상황이 생깁니다. 디자이너가 애니메이션 구현을 확인하고 싶다던지, 기획자가 스펙을 검증한다던지, 아니면 개발자 스스로 진행중인 작업을 자랑하고 싶어서요.

내 컴퓨터로 보여주자니 보여주는 동안 작업을 멈춰야하고, 내 모니터를 바라보는 상대방의 자세도 어정쩡하네요. 디자이너의 5K 아이맥에 띄워주고 싶은데, 거쳐야 할 과정이 너무 많아요.

문법에러로 빌드에 실패하면 안 되니 먼저 작성중이던 함수를 주석처리하고 //TODO로 진행중이던 부분을 표시합니다. 테스트서버에 배포하기 위해 코드를 빌드하고요. “아 네네 디자이너님, 지금 빌드하고 있어요. 한 10분 뒤에 테스트서버 올라갈 것 같아요. 배포하고 다시 알려드릴게요.” 아, 급하게 빌드를 했더니 원래 프로세스였다면 없었을 오류로 빌드에 실패했습니다. “디자이너님, 지금 오류가 있어서 이것만 해결하고 배포할게요. 조금만 기다려주세요.” 휴, 빌드가 됐습니다. 이제 테스트서버에 배포되면 디자이너님께 전달할 수 있겠네요. “아, 디자이너님. 로컬에서는 되는데 테스트서버는 죽네요. 해결하고 알려드릴게요.” 테스트서버 로그를 읽어 원인을 확인합니다.

윗 문단 읽으며 스트레스 받았을 이름모를 개발자님, 미안해요. 하지만 만약 디자이너와 물리적으로 같은 공간에 있다면 위의 과정을 생략하고 간단하게 작업을 공유해줄 수 있습니다.

로컬서버는 서버다

로컬서버가 열려있다면, localhost를 그대로 입력하는 대신 사설IP로 접속하면 디자이너의 컴퓨터에서 제 컴퓨터로 접근할 수 있습니다.

확인해야 할 것이 몇가지 있는데요. 모두 만족한다면 디자이너의 컴퓨터에서 localhost로 열린 결과와 같은 결과를 확인할 수 있습니다.

1. 서버의 HOST 설정하기

서버가 localhost로 접속할 때에만 애플리케이션을 보여준다면 localhost로만 접속할 수 있겠죠. localhost 외에 다른 IP로 접속해도 연결하기 위해서 host를 0.0.0.0으로 서버를 열어주세요. 사용중인 환경마다 host 설정 방법이 다릅니다.

2. 같은 네트워크에 연결하기

내 컴퓨터와 디자이너의 컴퓨터가 같은 망에 연결되어 있는지 확인합니다. 사설IP는 사설망에 부여되므로 망이 같아야합니다. 케이블이든 와이파이든, 같은 라우터에 묶여있으면 됩니다.

3. 내 사설IP 확인하기

Windows를 사용하신다면 ipconfig를 입력하세요.

Linux를 사용하신다면 ifconfig를 입력하세요.

Mac을 사용하신다면 시스템환경설정 > 네트워크에서 확인하세요.

노란색으로 표시한 주소가 내 사설IP입니다. 이제 디자이너의 5K 아이맥에서 저 주소로 접속해보세요. 포트번호 붙이는 것 잊지 마시고요.

만약 접속되지 않는다면 방화벽에서 접속을 막고있을 수 있습니다.

4. 방화벽 설정하기

Windows 기준으로, 시작버튼을 누르고 ‘방화벽’을 검색한 뒤 표시한 앱을 실행하세요.

보통은 이렇게 앱 설치할 때 인바운드 설정이 되어서 따로 설정할 필요가 없어요. 만약 내 서버 프로그램이 등록되지 않았다면 규칙을 추가해주세요. 이제 내 컴퓨터는 접속을 받아들일 준비가 됐습니다.

마치며

혼자서 개발할 때도 유용해요. PC가 아닌 태블릿이나 스마트폰에서도 접속할 수 있으니 FE 개발 시 Hot Reload가 설정되어 있다면 서브모니터처럼 활용할 수 있어요.

0
👍
0
❤️
0
😄
0
😝