JavaScript : GitHub (깃허브)에 로컬 파일 업로드하기, Figma 응용

2022.12.05.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 57

---

Review

 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 57

 

 

 

 

 

 

 

 

 

 

 

 

---

 

<GitHub에 로컬 파일 업로드 하기>

 

 

제일 먼저 깃허브로 접속해 New Repository 를 만들어준다.

 

 

 

그러면 이렇게 저장소가 만들어지는 것을 볼 수 있다.

 

 

Git - Downloading Package (git-scm.com)

Git - Downloading Package

 

그 다음은 'Git' 이라는 링크로 접속해서 다운로드 후 설치 !

다운로드 할 때 영어가 즐비하는데 그냥 Next만 누르면 된다.

그러고 나서 Git bash 라는 프로그램을 실행한다.

 

 

 

Git bash 프로그램을 실행하면 이런 화면이 나타난다.

 

 

 

차례대로 작성해서 환경설정을 한다.

user.name과 user.email은 본인의 것으로 변경하면 된다 .

 

 

 

그 다음은 VSCode로 들어가서 내가 업로드할 파일을 하나 선택한다.

 

나같은 경우는 바탕화면에서 TEST 라는 폴더를 하나 만들고, 거기서 index.html이라는 

파일을 생성했다.

 

그 다음 맨 위의 옵션 바에서 터미널을 클릭하고 새 터미널을 클릭한다.

 

 

 

그러면 이렇게 뜨는데, 오른쪽에 + 바로 옆에 ∨를 클릭하면 Git Bash를 클릭한다.

 

 

 

그러면 이런 화면이 나타난다. 

 

 

 

여기서 차례로 적어주면 된다.

 

- git init : 초기화. 맨 처음에 프로젝트를 올릴 때는 git init을 해줘야 한다.

- git add . : .(점)은 모든 파일이라는 뜻, 선택적으로 올리고 싶으면 add 뒤에 파일 이름을 

붙여야 한다.

- git status (선택사항) : 상태를 알려주는 명령어

- git commit -m "History" : 히스토리를 만드는 것. " " 안에 넣고 싶은 히스토리 이름을 작성

하면 된다.

- git remote add origin https://github.com/********* : * 에는 본인이 만든 repository의 주소를

입력하면 된다. 즉, repository로 내 소스코드를 보낸다 라는 뜻 연결고리이다.

- git push origin master : 깃허브로 올리기

 

 

 

여기까지 작성을 하고 나서 아까 만들어놓은 repository로 접속하면 이렇게 코드 파일이

업로드 된 것을 볼 수 있다 !

 

 

 

[Git] GitHub, 깃허브 repository에 파일 업로드(push)하는 방법 | Yoon's Dev (tistory.com)

[Git] GitHub, 깃허브 repository에 파일 업로드(push)하는 방법 | Yoon's Dev

 

GitHub에서 협업을 위한 remote repository와 upstream 이해하기 | Hack IT (pers0n4.io)

GitHub에서 협업을 위한 remote repository와 upstream 이해하기

 

 

더 자세한 건 위의 블로그에 적혀 있는 것을 참고했다. 혹시나 궁금한 것이 있으면 참고하면

좋을 것 같다.

내가 게시글 위에 자세한 이미지를 올려놨는데, 그대로 따라하기만 하면 된다. 

 

나도 무작정 따라하다가 잘 되지 않아서 끙끙대다가 결국 업로드를 성공했다 !

예전에 챌린지 도서를 보면서 따라할 때 했었던 건데 오랜만에 하니까 또 못하겠다 ㅠ_ㅠ

 

깃허브가 아직 익숙지 않아서 잘 사용하지 않고 있는데 결국 실무에서는 깃허브가 더 유용한가보다.

수업 시간 동안 잘 숙지해서 깃허브를 자주 유용하게 사용하도록 해야겠다.

 

 

---

 

<Figma에서 iPhone Frame으로 프로토타입 만들기> 

 

 

1. Figma에서 New design 파일을 하나 만들고, 상단에 # 처럼 생긴 옵션을 클릭하고,

보드 빈 공간에 콕 찍는다. 그러면 Frame 1 이 하나 생성된다.

가로 세로 크기는 iPhone 14의 크기와 동일하게 설정한다.

 

2. 오른쪽에 Frame 1을 복사해서 붙여넣는다. Hidden Menu로 사용할 거라서 세로

크기는 유지하고 가로 크기만 드래그 해서 줄인다.

 

 

3. 상단에 plugin 옵션을 클릭해 Run을 눌러 실행한다.

Menu, close 아이콘을 각각 검색해 마음에 드는 아이콘을 더블클릭하여 frame에 배치한다.  

 

 

 

4. menu 아이콘을 선택한 뒤, 오른쪽 상단에 Prototype 이라는 옵션을 클릭하고 Interactions를

클릭하면 오른쪽에 Interaction details 설정 화면이 나타난다.

 

5. On tap - Open overlay - hidden menu 순서로 옵션을 변경하면 된다.

 

 

 

6. 다음은 close 아이콘을 선택하고 위와 동일한 방법으로 Prototype - Interactions로 들어간다.

 

7. Interaction details에서 Ontap - Close overlay로 설정을 변경한다.

 

0

 

8. 마지막으로 미리보기 창으로 들어가서 메뉴 바를 누르면 숨겨진 hidden menu가 나온다.

close 바를 누르면 다시 닫힌다.

 

Figma는 정말 갓벽한 프로그램..