[인턴 1주차] SSH 프로토콜, react/typescript 프로젝트 초기 세팅 과정 정리

내일배움캠프 React 4기 수료 이후에 개발 직군으로의 첫 현업 근무, 한 달 인턴을 시작하게 되었다.
캠프 생활을 하며 꽤 많은 팀프로젝트를 거쳐왔지만, 현업은 또 다를 거란 생각에 긴장도 걱정도 많이 되었다.
1주차 동안은 아직 프로젝트 레포지토리 생성 및 프로젝트 초기 세팅만 해놓은 상황이고, 다음주 부터는 다른 분들과 역할 분담 및 프로젝트 진행을 본격적으로 진행할 듯 싶다.
모르는게 많을텐데...ㅠㅠ 벌써부터 걱정이 된다. ㅠㅠ 첫 현업 근무인 만큼 아직 많이 막막하지만 그래도 열심히 하는 것과 빠르게 성장하는 것 만큼은 자신있으니까!!! 남은 기간도 열심히 하며 많이 배워보고자 한다. 👍👩🏻‍💻

📝 SSH란?

SSH란 Secure Shell의 약자로, TCP 프로토콜이다. (주로 22번 포트를 사용)

프로젝트 작업물을 확인할 때 배포가 되어 있지 않는 이상 본인의 로컬 localhost:3000(혹은 기타 포트) 에서만 확인이 가능하다. 하지만 원격 SSH 서버를 활용하면 다른 컴퓨터의 localhost를 내 컴퓨터로 여는 것과 같은 기능이라고 생각하면 이해가 쉽다.

원격 SSH 서버에서 작업하는 경우 혹은 작업이 필요한 경우를 간략하게 정리하면 아래와 같다.
1) 내 컴퓨터의 자원을 사용하지 않고 원격 컴퓨터의 자원을 사용하고 싶거나,
2) 내 컴퓨터로 원격 컴퓨터에 있는 내용에 접근하여 작업을 해야하는 상황인 경우,
3) 혹은 데이터 보안이 중요한 경우 등

나의 경우는 회사에서 root 유저의 IP주소와 암호를 본인에게 전달, 내 로컬 pc에서 해당 IP주소를 통해 원격 SSH 서버에 접속 후 프로젝트 작업을 시작했다.

💡 현업에서, 특히 스타트업에서는 무조건 다룰 거라며 알려주신 SSH.
기업에서는 신입 사원일지라도 무조건 알고 있을 거라 생각한다며 이 개념은 알고 있는게 무조건 도움 된다고 하셨다.

📌 SSH 서버 연결 방법

0. Remote Development 확장프로그램 설치
   

   ( 본인은 위 프로그램을 설치하니 아래와 같이 3개의 프로그램이 자동으로 추가 설치되었다. )
   

1. VSCode 상에서 왼쪽 하단을 보면 아래 사진에 표시된 것과 같은 표식을 볼 수 있다.
   해당 표식을 클릭하면 아래의 드롭다운 등장.
   

2. '호스트에 연결' > '+ 새 SSH 호스트 추가' 클릭
   

3. ssh [유저계정 ex.root, ihkwak]@[접속할 도메인 ex.naver.com or 개인 IP를 wrapping한 도메인 or IP자체]
   혹시 22번 말고 다른거 쓰는 경우는 뒤에 추가로 -p3000 이런식으로 작성
   -> 이렇게 하면 연결할 remote 호스트가 저장된 것
   -> 이제 호스트에 연결해야 remote 접근하여 사용하게 되는 것임
   ‘><‘클릭 > 호스트에 연결 > 내가 저장해둔 호스트 이름 클릭 > 비번 있을 시 비번 입력 > 연결 성공!

• 주의 : .config파일이 2개 뜨는데, 위에꺼로 설정해야 함
  (위에꺼는 유저 개인의 config파일, 아래의 root 관련된 config는 root user의 다른 정보 및 데이터까지 다 있는 거라서, 잘못 건드리면 root User와 관련된 데이터들이 모두 날아가거나 잘못될 수 있어서 위험)

전달받은 pw는 ssh 접속할때 사용
Ssh 생성 키? 같은건 직원에게 공유해서도 안되고, 이게 털리면 데이터 자체가 털리게 됨 (ex. blahblah.pem)
-> 데이터가 털리면 털린 사람 ip 찾게되고, 그럼 책임소재를 물을 수도 있으니 주의
(키를 공유한 보안 관리자가 문제지만, ip 소유주에게 책임을 물을수도 있으니 키를 받게된다면 받자마자 삭제? 하는걸 권유)

Host sliceMind
  HostName 211.123.12.123
  User root

Host : 해당 ip가 어떤걸 위한 ip인지 이름 붙이는 것 (기본값은 ip값과 동일)
HostName : 접속할 ip 주소
User : 서버 생성 관리자가 부여한 유저 이름 (기본은 root, 부여받을 사람마다 이름 다를 수 있음)

📝 프로젝트 초기 세팅 과정

1. 프로젝트 생성 (리액트, ts) : main에는 깡통 프로젝트만 유지, dev로 옮겨서 라이브러리, provider 설정, 폴더구조 세팅 등의 세팅 진행
2. 이슈탬플릿, pr탬플릿 추가
3. 이슈 작성
4. 프로젝트 초기세팅

• reset css, 글로벌 css 설정, var 컬러 지정, react-router-dom, axios, tanstack-qeury, zustand 등 설치, 기타 설치할거 없나 확인하기 (svgr 등)
• 글로벌 css 설정
  • reset css
  • 공통 배경색
  • body 가로 크기 (헤더 등 주의 필요)
  • 컬러 변수 지정 (추후 var로 사용)
  • a태그 스타일 설정
  • figure, p, span 태그 line-height 설정

5. 폰트 설정 pretendard
   ( @fontface 설정하는거 정리 필요 )

6. React router dom provider 설정

7. Tanstack query provider 설정

8. 폴더 구조 세팅

-> 프로젝트 시작하기!!