해외에서 자사 서비스가 잘 동작하는지 테스트를 위해 찾아본 VPN 리스트와 사용방법입니다. 2023.08.18에 작성해둔 글로 현재와 다를수도 있습니다.

VPN 리스트

무료 VPN 리스트

1. privado VPN 링크 : https://privadovpn.com/free-vpn/ 데이터 용량 : 매월 10GB
2. proton VPN 지원 국가 : 미국, 일본, 네덜란드 링크 : https://protonvpn.com/ 데이터 용량 :
3. Hide.me ( 네덜란드, 캐나다, 미국 ) 링크 : https://hide.me/en/free-vpn
4. TunnelBear 지원 국가 : ( 20개국 이상 ) 링크 : https://www.tunnelbear.com/ 데이터 용량 : 매월 2GB

유료 VPN 리스트

1. ExpressVpn 링크 : https://www.expressvpn.com/
2. CypberGhost 링크 : https://www.cyberghostvpn.com/
3. PrivateVPN 링크 : https://privatevpn.com/
4. IPVanish 링크 : https://www.ipvanish.com/

VPN 마다 무료 버전의 경우 지원하는 국가 수의 차이, 데이터 용량의 차이가 있으므로 상황에 맞는 적절한 VPN을 사용하시면 됩니다. 현재 단순 해외에서 접속 가능 여부 테스트 용의 경우 많은 데이터가 필요하지 않기 때문에 가장 많은 국가를 지원하는 'TunnelBear'를 채택하여 테스트 하고 있습니다.

60개국, 90개국 이상 등 많은 국가 지원 및 많은 용량의 데이터가 필요한 작업일 경우 유료 VPN을 구독하여 사용해야 합니다.

VPN 테스트 방법

** 테스트 가능한 국가 수가 많은 TunnelBear를 주로 사용합니다.

1️⃣ TunnelBear

✅ 파일을 다운로드 받은 후 간단한 회원가입, 이메일 인증 필요 무료버전으로도 여러개국 확인 가능 한달에 2GB 사용가능

1. TunnelBear 다운로드 하기

   다운로드 링크 : https://www.tunnelbear.com/download

   TunnelBear를 다운로드 하여 안내에 따라 데스크탑에 파일을 설치합니다.

2. 회원가입

간단한 이메일과 패스워드를 입력하여 회원가입을 합니다.

1. 이메일 인증

등록한 이메일로 들어가서 계정을 확인 후 다시 프로그램에 접속합니다.

1. 국가 선택 및 연결

on & off 버튼 옆의 셀렉트 박스에서 연결할 국가를 선택하거나 지도에서 클릭합니다.

국가를 선택하면 자동으로 버튼이 on으로 변경되며 연결이 완료되면 회색이었던 지도가 컬러로 변하며 연결이 완료되었다는 알림 팝업이 뜹니다.

5. 이제 연결이 완료되었습니다. 테스트를 원하는 사이트 주소로 들어가서 정상적으로 작동하는지 확인해주세요! ip가 제대로 변경되었는지 확인을 원하신다면 🔁 ip 변경 확인하는 사이트 이 사이트에서 확인해주세요

6. 사용을 마쳤으면 버튼을 off 로 변경해주어 연결을 끊어줍니다. TunnelBear 의 경우 2GB만 사용가능하며 아래 하단에 남은 잔여 데이터가 표시됩니다.

사용 가능한 용량이 한정적이기 때문에 꼭 연결을 끊어주세요 !

2️⃣ proton VPN

1. proton VPN 사이트 접속

Proton VPN: Sign-up

오른쪽 하단의 Sign Up for Free 를 클릭합니다.

1. 회원가입

무료버전으로 계속 하기를 클릭합니다.

사용할 이메일을 입력합니다.

자동으로 비밀번호가 세팅됩니다. 만약 임의로 다른 비밀번호를 등록하고 싶다면 아래에 있는 Choose my own password를 눌러서 비밀번호를 설정해줍니다.

회원가입이 완료되면 다운로드 팝업을 통해 다운로드 페이지로 이동합니다 아래 링크로도 이동 가능합니다. ( 다운로드 링크 : https://protonvpn.com/download )

파일이 다운로드 되었으면 안내에 따라 프로그램을 설치하고 실행해줍니다.

2. proton VPN 앱 실행

회원가입을 진행했던 이메일과 패스워드를 입력합니다.

proton VPN 의 경우 무료 계정은 Japan, Netherlands, US 세가지 국가만 지원합니다.

3. 국가 선택 및 연결

국가 선택 세가지 국가중 원하는 국가를 선택하여 connect 버튼을 클릭합니다.

국가 연결 중 이제 로딩이 끝나면 연결이 완료됩니다.

4. 연결 완료

이제 연결이 완료되었습니다. 왼쪽 상단에서 해당하는 국가의 ip주소도 확인이 가능합니다.

테스트를 원하는 사이트 주소로 들어가서 정상적으로 작동하는지 확인해주세요! ip가 제대로 변경되었는지 확인을 원하신다면 🔁 ip 변경 확인하는 사이트 에서 확인해주세요

ip 확인 사이트 내의 ip address

proton VPN에서 나온 ip 주소와 동일한 걸 확인할 수 있습니다.

5. 테스트가 끝나고나면 Disconnect 버튼을 클릭하여 연결을 해제해주세요 !

🔁 ip 변경 확인하는 사이트

https://ipleak.net/

위 사이트에 접속하여 ip주소가 해당 국가로 변경되었는지 확인 가능합니다.

update 2023.08.18

해당 프로젝트를 진행할 당시 촉박한 데드라인으로 요구사항인 PDF 다운로드 기능만 구현한 채 배포하게 되었는데, PDF 파일의 용량이 커질수록 업로드/다운로드 속도가 느려지고, 저장 공간도 많이 차지하게 되어 최적화를 진행하게 되었다.

다음은 PDF 용량을 3.2MB에서 220KB까지 줄인 과정과 적용한 최적화 기법들이다.

ps. 현재 프로젝트에서 사용중인 PDF라이브러리 : pdf.js

1. 기본적인 PDF 최적화 기법 적용

📌 PDF 저장 시 객체 스트림 사용 최소화 PDF는 기본적으로 객체 스트림(Object Streams)을 사용해 저장되는데, 이를 비활성화하면 용량을 줄일 수 있다.

const pdfBytes = await pdfDoc.save({ useObjectStreams: false });

📌 이미지 용량 최적화 PDF 내부에 포함된 이미지의 용량을 줄이는 것도 중요한 최적화 방법이다.

✅ JPG 품질 조정 기본적으로 quality: 0.8로 설정되어 있는데, 값을 낮추면 용량을 줄일 수 있다.

const imageJpg = await pdfDoc.embedJpg(imageBytes, { quality: 0.6 });

✅ 이미지 포맷 변경 이번 프로젝트에서는 이미지 포맷을 변경 할 경우 앱에서 그린 이미지가 서버에 저장되고, 이를 뿌려주고 있기 때문에 최후의 선택으로 두었다. 실제로 이미지가 차지하는 용량이 많이 크지는 않아서 줄인다고해도 미묘할 것으로 예상되었기 때문이다. 이미지 포맷의 경우 jpg는 카메라로 찍은 사진, png는 만들어진 이미지에 최적화되어있다. 현재 jpg를 사용하고 있는데 우리가 사용하고있는 사인 이미지처럼 만들어진 이미지일 때는 PNG로 저장하는게 용량이 줄어들기 때문에 PNG 혹은 다른 포맷을 사용하면 용량을 더 줄일 수 있다.

📌 기본 PDF 용량 압축

기본적으로 위에 글자를 입히기 전인 기본 pdf 파일의 용량을 압축해주었다. 260kb의 pdf를 압축 프로그램을 통해 172kb까지 압축하였으며 화질이 저하되는 문제는 없었다.

2. 폰트 최적화: 경량화된 서브셋 폰트 적용

기존에는 PretendardVariable.ttf 전체를 PDF에 임베드했기 때문에 불필요한 글자까지 포함되면서 용량이 커지게 되었다. 이를 해결하기 위해 서브셋을 적용하여 필요한 글자만 포함시키는 방법을 사용했다.

처음에는 pdf.js에서 자체적으로 지원하는 subset 속성을 사용해서 적용하였다.

const customFont = await pdfDoc.embedFont(fontBytes, { subset: true });

하지만 pdf에서 일부 글자가 표시가 되지 않는 등 폰트가 깨지는 문제가 발생했다.

그러나 해당 파일의 용량을 봤을때 용량이 현저히 줄어있었다.

220kb까지 용량이 줄어든 것을 보아 현재 pdf에서 가장 큰 문제점이 바로 폰트임을 알 수 있었다. 실제로 프리텐다드 폰트의 용량을 보니 약3MB였고, pdf에서 폰트를 불러오면서 용량이 커진것을 확인할 수 있었다.

그렇다면 폰트 자체의 용량을 줄이면 해결되지 않을까 싶어서 프리텐다드의 서브셋 폰트를 찾아봤는데 현재 pdf에서 사용가능한 폰트가 없었다.

📌** subset 프로그램으로 폰트 경량화 후 적용 **

현재 사이트에서는 프리텐다드를 사용중인데 해당글자의 경우 경량화된 폰트를 찾기가 어려워서 직접 경량화 작업을했다. 경량화 작업을 하는방법은 일본 프로그램을 사용했는데 주로 많이 사용되고 있는 것 같았다.

경량화 방법은 해당 블로그에서 자세히 다루고있다. 링크 : https://drybone-developer.tistory.com/72

경량화 작업을 통해 폰트 용량을 400kb대로 줄였으며 최종 pdf의 용량또한 455kb로 줄었다.

📌** 서브셋 속성 적용**

const customFont = await pdfDoc.embedFont(fontBytes, { subset: true });

아까 적용해보았던 서브셋 속성이 특정 폰트에서만 적용이 안되기때문에 경량화 작업한 폰트에서는 적용이 되는지 확인해보았는데 다행히 폰트가 깨지는 것도 없었으며 용량도 효과적으로 줄어드는 것을 볼 수 있었다.

처음 원본 프리텐다드 폰트에서 속성이 제대로 적용 되지 않았던 것은 원본 폰트가 최적화되지 않았기 때문이었던 것으로 추측한다.

경량화된 폰트를 적용한 후에는 pdf에 폰트 역시 정상적으로 출력되었으며, 용량 역시 대폭 감소하였다.

지금까지 비교한 피디에프의 경우 220kb까지 줄어든 것 을 볼 수 있었다. 글자수나 내용에 따라서 용량이 달라지긴하나 약 190kb ~ 250kb 사이정도의 용량으로 출력되는것을 확인했으며 텍스트를 최대 값으로 넣었을때도 255kb 정도로 확인되었다.

최적화 결과

📊 기존 대비 용량 변화

최적화 전 : 3.2MB 최적화 후 : 220KB 감소율 : 93.13% 감소

📌 텍스트 양에 따른 용량 변화:

일반적인 PDF: 190~250KB 텍스트 최대 입력 시: 255KB

최종적으로 약 3.2mb -> 220kb_로 용량을 최적화해서 _93.13% 의 용량을 줄이게 되었다.

지금까지 프론트엔드 개발을 하면서 데드라인이 촉박하다보니 최적화를 깊게 신경쓰지 못한 부분들이 많았는데 이번 기회를 통해 다시 한 번 최적화의 중요성을 깨닫게 되었다. 이렇게 큰 감소율이 나타나게 된 것이 뿌듯하기도 하면서 한편으로 내가 처음 개발할때 너무 안일하게 생각하고 구현에 급급했던 것 같아 반성하게 되기도 하였다. 앞으로 차근차근 개발 기간때문에 놓친 최적화 부분들을 찾아보며 개선해나가야지! 그리고 새로운 개발을할때도 최적화를 신경쓰며 유저가 사용하는데 불편함 없는 페이지를 개발하도록 노력해야겠다.

회사에 입사하고나서 내가 제일 먼저 놀랐던 것은 우리팀의 개발 문화의 부재였다. 커밋컨벤션 하나 없이 중구난방으로 작성된 커밋메세지가 제일 먼저 눈에 띄였고, 코드 또한 컨벤션이라 할 것이 없어보였다. 그래서 회의 때나 커피타임 때 종종 커밋컨벤션이나 코드컨벤션이 중요할 것 같다고 언급은 했었으나, 실현되지는 않았고 답답한 나머지 팀 전체로 바꾸기가 어렵다면 프론트엔드 파트에서 먼저 시행해보자!!! 하고 커밋컨벤션과 코드컨벤션을 정하게 되었다.

원래 우리팀에서 프론트엔드 개발자는 나 혼자뿐이어서 혼자 나름 컨벤션을 정해서 쓰고있었는데, 다른팀의 프론트엔드 개발자분께서 우리팀에 합류하게 되면서 내가 기존에 쓰고 있던 컨벤션을 체계화해서 사용하게되었다.

💙 팀 내에서도 공통된 컨벤션을 적용하자!

그렇게 약 1년간 프론트엔드에서만 컨벤션을 지키며 사용하고있었는데 여러 프로젝트들을 하면서 다른 직군들과도 통일할 필요성이 있다는것을 느끼게 되었다.

마침 팀장님과 이야기 나눌 일이 생겨서 진지하게 현재 프론트엔드 파트에서 이러한 컨벤션을 정해서 사용하고있고, 업무 효율이 상승했기에 팀내에도 적용하는게 좋을 것 같다고 건의했다. 직군이 다르니 코드컨벤션은 파트 내에서 알아서 하더라도 개발팀 내의 커밋 컨벤션은 통일했으면 좋겠다고 말씀드리게 되었다.

나는 사실 회의때 몇번 의견을 말했을때 다들 반응이 별로 없어서 원하지 않는다고 생각했었는데 팀장님께서 다른 팀원분들이 무엇을 해야할 지 확실하게 정의되지 않아서 그럴 것이라며 *다음 개발팀 회의때 내가 직접 팀에서 사용했으면 하는 커밋컨벤션을 준비해와서 발표해봐라고 하셨다. *

그렇게 기존 프론트엔드파트에서 사용하고 있던 커밋컨벤션을 중심으로 통일된 컨벤션을 위해 깃에서 커밋템플릿을 작성하는 방법까지 발표하게 되었고 현재 팀내에서 모두 통일된 컨벤션을 간편하게 사용하고 있게 되었다.

다음은 프론트엔드 파트에서 실제로 사용하고 있는 컨벤션이고, 코드 컨벤션을 제외한 커밋컨벤션 부분은 개발팀 전체에서 통일하여 사용하고있다!!

입사 첫날부터 신경쓰였던 묵은 때를 벗겨낸 느낌이라 너무 홀가분하고 내 의견이 적극 반영되어 팀내에서 통일되게 사용하고 있는것이 너무 뿌듯했다. 팀의 협업환경에 작게나마 기여할 수 있어서 영광이었다.

Frontend Convention

• HTML / CSS / JS 모두 들여쓰기는 2칸입니다.
• W3C validator를 통과할 수 있도록 웹 표준에 맞게 작성
• 시맨틱 태그 사용 및 접근성을 고려하도록 노력하기

CSS 속성 순서 ( 참고 )

1. display
  1.1 justify-content
  1.2 align-items
  1.3 기타 flex, grid 관련 속성들...
2. overflow
3. float
4. position
  4.1 top / bottom / left / right
  4.2 z-index
  4.3 transform
5. width / height
6. padding / margin
7. border
8. background
9. color / font
10. animation
11. 기타

따옴표

• js 작은 따옴표 우선 사용
• html 큰 따옴표 사용

JS

• ES6+ 문법 사용
• var 금지
• 세미 콜론 필수
• 작은 따옴표 사용

변수명

• 일반적인 변수, 함수: camelCase

let myVar = 1;

const myArr = [1, 2, 3];

function myFunction() {

}

• 상수: UPPER_SNAKE_CASE

const MAX_NUM = 10;

• 생성자 함수, 클래스: PascalCase

function MyFunction(title) {

}

class MyClass {

}

폴더 명

• 직접적으로 바로 컴포넌트들이 들어있는 컴포넌트 폴더명은 대문자로 시작한다. PascalCase
• 직접적으로 바로 컴포넌트들이 들어있지 않은 폴더명은 소문자로 작성한다.

파일 명

• HTML: kebab-case

• CSS: kebab-case

• JS: camelCase

• JSX: PascalCase

• ASSET: snake_case

커밋 컨벤션

1. Commit 메세지 구조

• 기본 적인 커밋 메시지 구조는 제목, 본문, 꼬리말 세가지 파트로 나누고, 각 파트는 빈줄을 두어 구분한다.

type: subject

body

footer

2. Commit Type Rule

• 태그는 영어로 소문자로 작성합니다.
• 태그 뒤에는 “: “을 붙입니다. ( 콜론 뒤에만 한 칸 띄움 )

3. Subject Rule

• 제목은 최대 50글자가 넘지 않도록 하고 마침표 및 특수기호는 사용하지 않는다.

• 영문사용 시, 동사원형 사용하고, 과거 시제를 사용하지 않는다.

• 제목은 개조식 구문으로 작성한다.

  -> 완전한 서술형 문장이 아니라, 간결하고 요점적인 서술을 의미.

4. Body Rule

• 본문은 한 줄 당 72자 내로 작성한다.
• 본문 내용은 양에 구애받지 않고 최대한 상세히 작성한다.
• 본문 내용은 어떻게 변경했는지 보다 '무엇을', '왜' 변경했는지를 설명한다.

5. Footer Rule (선택) - 미정

• 꼬릿말은 다음의 규칙을 지킨다.

  1. 유형: #이슈 번호의 형식으로 작성

  2. 이슈 트래커 ID를 작성

  3. 여러개의 이슈 번호는 ,로 구분

  4. 이슈 트래커 유형은 아래와 같다

  • 꼬리말은 optional이고 이슈 트래커 ID를 작성한다.
  • 꼬리말은 "유형: #이슈 번호" 형식으로 사용한다.여러 개의 이슈 번호를 적을 때는 쉼표(,)로 구분한다.
  • ~~이슈 트래커 유형은 다음 중 하나를 사용한다.
  • -  Fixes:* 이슈 수정중 (아직 해결되지 않은 경우)
  • -  Resolves:* 이슈를 해결했을 때 사용
  • -  Ref:* 참고할 이슈가 있을 때 사용
  • -  Related to:* 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)~~

• commit template

    ###########################
    ### 제목(Subject) - (영문기준) 50자 이내
    # <커밋 타입>: <제목>    * 콜론 뒤만 한칸 띄움
    # 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
    # ex) feat: 로그인 기능 추가
    # 바로 밑줄에 작성
  
    # 바로 아래 공백은 지우지 마세요 (제목과 본문의 분리를 위함)
  
    ###########################
    ### 본문(Body) - 한 줄당 최대 72자, 초과시 줄바꿈 
    # (1) 무엇을 (2) 왜 (3) 어떻게 수정했는지
    # 바로 밑줄에 작성
  
    # 바로 아래 한 줄 공백 유지 (본문과 바닥글의 분리를 위함)
  
    ###########################
    ### 꼬릿말(Footer) - (선택)
    # ex) Close #7
    # 바로 밑줄에 작성
  
    ###########################
    ### [커밋 타입 목록]
    # feat    : 새로운 기능 추가
    # fix     : 버그 수정
    # design  : CSS 등 사용자 UI 디자인 변경
    # style   : 코드 의미에 영향을 주지 않는 변경사항 ( 코드 포맷변경, 세미콜론 누락 등 )
    # del     : 코드 삭제
    # add     : 에셋 또는 기타 파일 추가
    # docs    : 문서 수정
    # refact  : 코드 리팩토링
    # test    : 테스트 코드 추가 (프로덕션 코드 변경 X)
    # chore   : 빌드 부분 혹은 패키지 매니저 수정사항 (프로덕션 코드 변경 X)
    # rename  : 파일 혹은 폴더명을 수정하거나 옮기는 작업
    # remove  : 파일 삭제만 수행
    # init    : 초기 설정
    # set     : 초기 설정 이후의 추가 설정
    ###########################

✅ git commit ⇒ 템플릿 접속 ⇒ 빈칸에 제목, 본문(선택), 꼬릿말(선택) 작성

• 제목에서 이미 내용을 다 설명하고있어 본문에 쓸 내용이 없는 경우 제외하고는 본문 작성 권장 !

템플릿 등록

내 로컬 즉 commit 할 때마다 사용해주고 싶다면 "~/"를 앞에 붙여서 파일을 생성

touch ~/.gitmessage.txt

이번 프로젝트에서만 사용하고 싶다면 ~/을 빼주고 파일을 생성

touch .gitmessage.txt

vim ~/.gitmessage.txt  
or
vim .gitmessage.txt

template 저장

git commit template 설정

git config --global commit.template ~/.gitmessage.txt
or
git config --global commit.template .gitmessage.txt 
git commit 

폴더 구조

*아토믹 패턴

• atom
• module
• template
• page

참고 : https://chlolisher.tistory.com/173 https://overcome-the-limits.tistory.com/entry/협업-협업을-위한-기본적인-git-커밋컨벤션-설정하기

디자인에서 이미지를 img1 img2 이런식으로 주거나 이상한 숫자들로만 줘서 내가 임의로 이미지 네임을 변경해서 사용하곤 했는데 다른 프론트엔드 개발자와 같이 하나의 프로젝트를 작업하게 되면서 불편함이 커지게 되었고, 같은 아이콘을 다른이름으로 저장하는 경우가 빈번해져 디자이너분께 Asset Name Convention을 정하자고 제안하게 되었다.

흔쾌히 우리팀의 디자이너분께서 필요하다고 생각한다며 좋은 아이디어라고 수락해주셨고 디자이너 1명, 프론트엔드 개발자 2명, ios개발자 1명 이 회의에 참여하여 함께 Asset Name Convention을 정하게 되었다. ios개발자는, 앱개발에서 또한 비슷하게 사용되는 이미지나 아이콘이 많기때문에 같이 하면 좋을 것 같아 역시 제안드렸다.

먼저 해당 컨벤션을 제안한 내가 기본적으로 사용되는 것들을 찾아보면서 자료를 준비해갔고, 더 필요하거나 불필요한부분을 덜어내는 형식으로 회의가 진행되었다.

Asset Name Convention

• 네이밍은 영문(소문자) 와 숫자, 언더스코어(_)만을 사용합니다.
• 네이밍은 prefix, name, suffix로 구성됩니다.
• prefix, name, suffix는 언더스코어(_)로 구분합니다.
• 첫글자에는 숫자를 사용하지 않습니다. ex) 1-icon (x)
• 띄어쓰기 없이 작성합니다.
• 웹에서의 포맷은 svg를 기본 권장합니다.

Prefix

prefix에서는 asset type을 정의합니다.

• asset type에는 다음과 같은 항목을 쓰며 약어로 사용할 경우 모음을 탈락 시켜 사용합니다.
  • icon → icn
  • image → img
  • button → btn

Name

• name은 에셋의 쓰임과 의미를 구분할 수 있는 고유한 단어를 사용합니다
• 사용되는 기능이 아닌 형태 위주로 네이밍합니다. (사용되는 용도는 다를 수 있어도 동일한 파일을 사용할 가능성이 크기 때문)
• name은 한 단어로 떨어지는 단일어를 사용합니다.
• 두 단어 이상이 결합된 복합어를 사용할 경우 띄어쓰기나 언더스코어(_) 없이 붙여서 사용합니다.
• Asset name 정의 시 fontawesome을 참고합니다.

Suffix

• suffix에서는 direction, shape, status, color, size 등의 요소를 정의합니다.
• 에셋 구분에 필요한 요소를 선택하여 사용합니다.
• 2개 이상의 suffix가 사용되는 경우 direction, shape,action, status, size의 순서로 작성합니다.
• suffix에서는 단어를 축약하지 않습니다.
• size는 가로를 기준으로 작성하고 세로는 표기하지 않습니다.
• 해상도별로 구분해야 하는 경우 1x, 2x를 사용합니다.

suffix의 경우 너무 많이 쓰게되면 복잡하게 될 수도 있다는 의견이있어 구분할때 꼭 필요한 경우만 사용하기로 하였다.

추가적으로 피그마상의 페이지 네임 또한 프레임 번호로 지정되어있어 알아보기 불편함이 있었기에 해당 회의에서 페이지 네임 규칙 또한 정하게 되었다.

Page Name Convention

기존의 프레임 번호만 있는 방식에서 페이지 번호와 페이지이름, 그리고 breakpoint를 함께 기재하면서 반응형의 경우 범위를 쉽게 알아 볼 수 있도록 변경하였다. breakpoint의 경우 이상, 이하의 경계가 모호하게 360, 1920 이런식으로 알려주시는 경우가 많아 매번 물어보는 경우가 생겨서 범위를 제안하게 되었다. 모든 프로젝트에서 공통된 방식의 break point를 지정하는것 또한 하나의 방법일 것 같다.

아무튼 이로서 피그마를 조금 더 알아보기 쉽게되면서 개발효율성 및 소통 부분이 많이 개선 될 것 같다!

끝으로 신입 개발자인 내 의견을 귀기울여주고 제안을 수락해주신 우리 팀원분들께 감사의 인사를 전하며 앞으로 우리가 정한 Asset Name Convention 및 Page Name Convention을 통해 더욱 원활한 협업이 되었으면 좋겠다. 부족한 부분은 개선하고 불필요한 부분은 덜어내면서 점차 우리만의 컨벤션이 완성되었으면 좋겠다!

참고 : https://spoqa.github.io/2020/03/27/asset-naming.html 참고 : https://inseq.co.kr/ko/bbs/i-24/show.do?seq=9

Style effects in Svelte

1. Motion

스벨트에서는 변경 사항을 매끄럽게 보여주는 UI를 구축하기 편리한 애니메이션 도구들을 제공합니다. CSS로도 이러한 효과들을 만들 수 있지만, Svelte의 Motion은 Writable Store를 사용하여 효과를 쉽게 적용할 수 있게 도와줍니다.

1.1. Tweened

트위닝 효과는 DOM에서 상태가 변경될 때, 변경되는 요소를 부드럽게 변경하는 것처럼 보여주는 효과입니다. progress 바의 진행 막대의 상태를 변경할 때 주로 사용합니다.

import { tweened } from 'svelte/motion';

const progress = tweened(value: any, { options })

progress 상태 바 예제 )

    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';

    const progress = tweened(0, {
        duration: 400,
        easing: cubicOut
    });
</script>

<progress value={$progress}></progress>

<button on:click="{() => progress.set(0)}">
    0%
</button>

<button on:click="{() => progress.set(0.25)}">
    25%
</button>

<button on:click="{() => progress.set(0.5)}">
    50%
</button>

<button on:click="{() => progress.set(0.75)}">
    75%
</button>

<button on:click="{() => progress.set(1)}">
    100%
</button>

<style>
    progress {
        display: block;
        width: 100%;
    }
</style>

1.2. spring

spring은 자주 변경되는 값에 사용하는 것이 좋습니다.

store = spring(value: any, options)

spring함수는 2개의 파라미터를 가집니다. 첫 번째 파라미터는 변경되는 값이고 두 번째 파라미터는 옵션입니다.

💡 options 종류

stiffness

: 스프링의 강도 설정, 값이 높을수록 반응이 빨라진다. (0 ~ 1)

damping

: 스프링의 탄성 정도 설정, 값이 낮을수록 튕기는 범위가 넓어진다. (0 ~ 1)

precision

: 스프링의 안정화, 값이 높으면 튕기는 횟수가 줄어들고, 값이 낮을수록 튕기는 횟수가 증가 (0 ~ 1 )

※ 참고 : Tweened와 동일하게 Promise가 리턴됩니다.

    import { spring } from 'svelte/motion';

    let coords = spring({ x: 50, y: 50 });
    let size = spring(10);
</script>

다음과 같이 spring 옵션 값을 추가해 세부적인 값들을 지정해주어 작성할 수 있습니다.

let coords = spring({ x: 50, y: 50 }, {
    stiffness: 0.1,
    damping: 0.25
});

• spring 전체 예제

  
        import { spring } from 'svelte/motion';
  
        let coords = spring({ x: 50, y: 50 }, {
            stiffness: 0.1,
            damping: 0.25
        });
  
        let size = spring(10);
    </script>
  
    <div style="position: absolute; right: 1em;">
        <label>
            <h3>stiffness ({coords.stiffness})</h3>
            <input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
        </label>
  
        <label>
            <h3>damping ({coords.damping})</h3>
            <input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
        </label>
    </div>
  
    <svg
        on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
        on:mousedown="{() => size.set(30)}"
        on:mouseup="{() => size.set(10)}"
    >
        <circle cx={$coords.x} cy={$coords.y} r={$size}/>
    </svg>
  
    <style>
        svg {
            width: 100%;
            height: 100%;
            margin: -8px;
        }
        circle {
            fill: #ff3e00;
        }
    </style>

2. Transitions

transition을 사용해 요소를 DOM의 안과 밖으로 부드럽게 전환할 수 있습니다.

2.1. fly & fade transitions

• fade

import { fade } from 'svelte/transition';
let visible = true;

<p transition:fade>Fades in and out</p>"

요소가 화면에서 서서히 사라지는 효과를 볼 수 있습니다.

• fly

import { fly } from 'svelte/transition';
let visible = true;

<p transition:fly="{{ y: 200, duration: 2000 }}">
    Flies in and out
</p>

요소가 화면 밖으로 날아가는 듯한 효과를 줄 수 있습니다.

2.2. in & out

transition 요소는 in 또는 out과 함께 사용할 수 있습니다.

import { fade, fly } from 'svelte/transition';

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
    Flies in, fades out
</p>

2.3. local transition

트랜지션을 전역적으로 설정할 수 있습니다.

<div transition:slide|local>
    {item}
</div>

2.4. Deferred transitions

지연된 전환

여러 요소들 사이에서 조정하여 전환을 사용할 수 있습니다.

<label
    in:receive="{{key: todo.id}}"
    out:send="{{key: todo.id}}"
>

<label
    class="done"
    in:receive="{{key: todo.id}}"
    out:send="{{key: todo.id}}"
>

2.5. Key blocks

표현식의 값이 변경될 때 내용을 다시 만듭니다.

요소가 DOM에 들어가거나 나올 때 뿐만 아니라 값이 변경될 때 마다 전환을 재생하는 경우 유용하게 사용할 수 있습니다.

{#key value}
    <div transition:fade>{value}</div>
{/key}

전체 예제)

<script>
    import { fly } from 'svelte/transition';

    let number = 0;
</script>

<div>
    The number is:
    {#key number}
        <span style="display: inline-block" in:fly={{ y: -20 }}>
            {number}
        </span>
    {/key}
</div>
<br />
<button
    on:click={() => {
        number += 1;
    }}>
    Increment
</button>

Stores

svelte에는 전역 상태를 저장하는 store가 계층구조에 포함되어있어 유용하게 사용할 수 있습니다. 그러나 모든 어플리케이션이 상태가 어플리케이션 계층 구조에 속하는 것은 아닙니다. 상태 관리를 위해서 자바스크립트 모듈 등을 사용해야 하는 경우도 많습니다. ( redux, recoil … )

스벨트에서는 상태관리를 stores를 통해 관리합니다. store는 값이 변경될 때 마다 subscribe 메소드를 사용하는 간단한 객체입니다.

1. Writable stores

import { writable } from 'svelte/store';

export const count = writable(0);

    import { count } from './stores.js';

    function reset() {
        count.set(0);
    }
</script>

<button on:click={reset}>
    reset
</button>

    import { count } from './stores.js';

    function increment() {
        count.update(n => n + 1);
    }
</script>

<button on:click={increment}>
    +
</button>

    import { count } from './stores.js';

    function decrement() {
        count.update(n => n - 1);
    }
</script>

<button on:click={decrement}>
    -
</button>

    import { count } from './stores.js';
    import Incrementer from './Incrementer.svelte';
    import Decrementer from './Decrementer.svelte';
    import Resetter from './Resetter.svelte';

    let countValue;

    count.subscribe(value => {
        countValue = value;
    });
</script>

<h1>The count is {countValue}</h1>

<Incrementer/>
<Decrementer/>
<Resetter/>

2. Auto-subscriptions

이전의 예제는 스토어가 구독되지만 구독 취소는 되지 않았습니다.

const unsubscribe = count.subscribe(value => {
    countValue = value;
});

subscribe 메소드를 호출하면 unsubscribe 함수가 반환됩니다.

이제 unsubscribe를 선언할 수 있으며 onDestroy lifecycle hook을 통해 호출할 수 있습니다.

  import { onDestroy } from 'svelte';
    import { count } from './stores.js';
    import Incrementer from './Incrementer.svelte';
    import Decrementer from './Decrementer.svelte';
    import Resetter from './Resetter.svelte';

    let countValue;

    const unsubscribe = count.subscribe(value => {
        countValue = value;
    });

    onDestroy(unsubscribe);
</script><h1>The count is {countValue}</h1>

svelte에서는 컴포넌트가 여러 스토어를 구독하는 경우 등을 위해서 자동 구독을 지원합니다. 구독하는 변수 앞에 $ 를 붙여 사용할 수 있습니다.

    import { count } from './stores.js';
    import Incrementer from './Incrementer.svelte';
    import Decrementer from './Decrementer.svelte';
    import Resetter from './Resetter.svelte';
</script>
    <h1>The count is {$count}</h1>

자동 구독은 컴포넌트의 최상위 스코프에서 선언된 store 변수에서만 작동합니다.

$count 는 위 예제와 같이 마크업 내에서만 사용 가능한 것이 아닌, 이벤트 핸들러나 반응성 선언과 같이 어디에서나 사용 가능합니다.

$ 가 앞에 붙어있는 변수는 모두 store 값을 참조하는 값입니다. 따라서 Svelte에서는 $로 시작하는 변수명을 짓는 것은 피해야 합니다.

3. Readable Stores

만약 마우스 위치나 사용자의 지리적 위치 등을 나타내는 store 가 있다면 외부에서 해당 스토어의 값을 설정하지 못합니다. 이러한 경우을 위하여 읽기만 가능한 store를 지정할 수 있습니다.

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
    const interval = setInterval(() => {
        set(new Date());
    }, 1000);

    return function stop() {
        clearInterval(interval);
    };
});

readable에 대한 첫번째 인자는 초기 값을 지정해줍니다. 아직 값이 없는 경우라면 null값이나 undefined 값이 될 수도 있습니다. 두번째로는 set을 콜백으로 받고 stop 함수를 리턴하는 start 함수를 입니다.

store에서 첫번째 구독자를 얻을 때 start 함수가 호출되며 마지막 구독자가 구독을 해지하게 된다면 stop 함수가 호출하게 되는 구조입니다.

4. Derived stores

Derived 를 통해서 다른 store에 기초되는 값을 가지는 store를 만들 수 있습니다. 이전 예제를 기반으로 page가 열린 시간을 파생하는 store를 만들 수 있습니다.

export const elapsed = derived(
    time, $time => Math.round(($time - start) / 1000)
);

여러 입력에서 저장소를 파생하고, 값을 반환하는 대신 명시적으로 값을 ‘set’ 할 수 있습니다 ( 비동기적으로 값을 파생하는데 유용)

Derived는 기존에 생성되어있는 쓰기 가능한 store, 읽기 가능한 store의 데이터를 기반으로 동작하게 됩니다.

import { writable, derived } from 'svelte/store'

export let count = writable(1)
export let double = derived(count,$count => $count * 2 )
//구독의 의미가 아니라 count 함수의 데이터라는 뜻으로 $를 추가한다.
//svelte 파일이 아닌 js 파일 내 이므로 자동구독으로 실행되지 않음
export let total = derived([count,double], ([$count, $double], set) => {
    set($count+$double)
})
// export let total = derived([count,double], ([$count, $double])=> { return $count+$double } 과 동일하다
export let initialValue = derived(count, ($countm set) => {
    setTimeout(() => {
    set($count + 1)
},1000)
},'최초 계산중 ...')

import { count, double, total } from './store.js'

console.log(double)
</script>

<button on:click={()=> $count += 1 }> click! </button>
<h1>total: {$total}</h1>
<h2>count: {$count}</h2>
<h2>double: {$double}</h2>
<h2>count + 1 : {$initialValue}</h2>

derived는 계산된 store입니다. 따라서 함수의 첫번째 인자로 계산할 대상의 store를 매개변수로 입력하고 두번째는 실행 될 코드를 입력합니다. 두가지 값을 입력할 때는 배열을 사용해서 입력할 수 있습니다. 연결되어있는 스토어의 값이 바뀌면 매번 실행되며 초기화 되었다가 재 구독 하는 형식으로 다른 store들과 차이점이 있습니다.

5. Store 값 얻기 (get)

store에 구독 하지 않고 단순히 해당하는 값만 읽어오고 싶은 경우 사용합니다.

import { get } from 'svelte/store'
import { count, double, user } from './store.js'

console.log(get(count))
console.log(get(double))
console.log(get(user))

import { writable, readable, derived, get } from 'svelte/store'

export let count = writable(1)
export let double = derived(count, $count => $count * 2)
export let user = readable({
    name: 'Heropy'
    age: 85,
    email:'thesecon@gmail.com'
})

console.log(get(count))
console.log(get(double))
console.log(get(user))

6. Custom stores

custom store는 기존의 store에서 추가로 원하는 메소드를 추가하여 커스텀해서 사용 가능한 store입니다. writable, readable 등

<script>
    import { count } from './stores.js';
</script>

<h1>The count is {$count}</h1>

<button on:click={count.increment}>+</button>
<button on:click={count.decrement}>-</button>
<button on:click={count.reset}>reset</button>

import { writable } from 'svelte/store';

function createCount() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe, //subscribe를 가지고있으면 App.svelte에서 '$'자동구독을 이용해서 사용 가능
        increment: () => update(n => n + 1),
        decrement: () => update(n => n - 1),
        reset: () => set(0)
    };
}

export const count = createCount();

예제와 같이 기본 writable store에서 increment, decrement, reset 메소드가 추가로 포함되게 구성할 수 있습니다. return 값에서 set 과 update는 입력하지 않아도 됩니다.

import { writable } from 'svelte/store'

const { set, update, subscribe } = writable(0)

export let count = {
set,
update,
subscribe,
increment: () => update(n => n + 1),
decrement: () => update(n => n - 1),
reset: () => set(0)
}

위와 같이 작성할 수도 있습니다.

예제 2)

import { fruits } from './fruits.js'

let value

<input bind:value/>
<button on:click={() => fruits.setItem(value)}>
    Add fruit!
</button>
<button on:click={() => console.log(fruits.getList())}>
    Log fruit list!
</button>

<ul>
    {#each $fruits as {id, name} (id)}
        <li>{name}</li>
    {/each}
</ul>

import { writable , get } from 'svelte/store'

const _fruits = writable([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
])

export let fruits = {
..._fruits, // writable이기 때문에 set, update, subscribe가 포함되어있다
getList: () => get(_fruits).map((f) => f.name),
setItem: () => { 
    _fruits.update((f) => {
        f.push({
            id: f.length + 1,
            name
        })
        return f
    })
    }
}

7. Store bindings

set 메소드를 가지고 있는 writable store라면 컴포넌트에 bind하는 것과 동일하게 값을 bind 할 수 있습니다.

예를 들어 쓰기 가능한 저장소에 name을 가지고 있고 파생된 저장소에는 greeting을 가지고 있을 때 input 요소에 해당 값을 업데이트 할 수 있습니다.

<input bind:value={$name}>

컴포넌트 내부에 값을 저장하도록 직접 할당할 수도 있습니다.

<button on:click="{() => $name += '!'}">
    Add exclamation mark!
</button>

$name += '!' 와 name.set($name + '!') 는 동일합니다.

• 전체 예제

    <script>
        import { name, greeting } from './stores.js';
    </script>
  
    <h1>{$greeting}</h1>
    <input bind:value={$name}>
  
    <button on:click="{() => $name += '!'}">
        Add exclamation mark!
    </button>

    import { writable, derived } from 'svelte/store';
  
    export const name = writable('world');
  
    export const greeting = derived(
        name,
        $name => `Hello ${$name}!`
    );

Lifecycle

1. onMount

컴포넌트가 처음 DOM에 렌더링 된 후 실행되는 함수입니다.

import { onMount } from 'svelte';

    let photos = [];

    onMount(async () => {
        const res = await fetch(`/tutorial/api/album`);
        photos = await res.json();
    });

fetch를