TIL - 2022.01.10 월요일

오늘 배운 것

1. Github 사용법

그 전에도 github를 간간히 사용하기는 했다. 하지만 매번 숙련된 조교(멘토님 or 블로그)의 시범을 따라했을 뿐, 어떤 프로세스로 Repository를 업데이트하는건지 제대로 익히지는 못했다. 이제는 본격적인 공부도 시작했겠다, '습득한다'는 생각으로 Git push를 머릿속에 집어넣었다.

 

1. Git bash를 연다.
2. Repository에 업로드할 폴더로 이동한다 (명령어 : cd)
3. git init 한다 (기존에 업로드한 적 없는 폴더일 경우)
4. ls -al 해서 .git 폴더가 생겼는지 확인한다.
   • 상위폴터에 .git을 만들었는데 하위 폴더에 .git이 겹쳐있는 경우 에러난다. 여러 폴더를 묶어서 올릴 때에는 꼭 최상위 폴더에'만' git init 해야함.
   • 다른 패키지를 설치하는 과정에 .git이 생성되었을 수 있다. 그런 경우에는 찾아 들어가서 삭제하자. (명령어 : rm -rf .git)
5. git status를 입력하면 현재 파일들의 저장 상태를 알 수 있다. 붉은색은 아직 아무런 작업도 되지 않은 파일들.
6. git add . 로 작업 내역을 임시저장한다. 초록색으로 변하면 성공.
7. git commit -m "원하는 메시지 입력" 으로 커밋한다.
8. git remote add origin 레포경로(github에서 확인) 을 입력해서 경로를 만들어준다.
   • origin 부분은 자유롭게 네이밍해도 되지만, 통상적으로 origin을 이용한다.
9. git remote -v 로 제대로 입력됐는지 확인한다.
10. git push origin master 를 입력하면 깃헙에 올라간다.
    • origin은 8)에서 지정한 이름과 동일하게, master는 vscode 좌측 하단에 보이는 branch명과 동일하게 입력해야 한다.

 

※ 키체인을 입력하라는 메세지가 뜰 경우.

깃헙 Developer Setting 메뉴에서 Personal access tokens을 발급받아서 입력하면 된다.

이 토큰 키는 해당 페이지에서 나가면 절대 다시 찾을 수 없으므로 별도로 기록해두어야 한다.

 

2. Node.Js와 관련 툴

• node.js란? : javascript를 브라우저가 아닌 OS에서 실행할 수 있게 도와주는 실행도구이다.
• npm이란? : node.js를 이용해서 만든 소스코드가 모여있는 일종의 라이브러리. vscode에서 npm이라는 도구를 이용해 이러한 소스코드들을 다운로드 받을 수 있다.
• yarn이란? : npm이 느리다보니 페이스북에서 만든 대체 툴.

npm이랑 yarn 둘 다 사용해보니 확실히 npm이 상대적으로 느리긴 하더라.

 

3. React 와 JSX

• React의 Index는 javascript로 되어있다. github에 업로드하면 무려 javascript 100%를(!) 볼 수 있다.
• React는 전용 HTML인 JSX를 사용한다. JSX의 기본적인 형태는 다음과 같다.

Next.js 설치하면 나오는 기본 페이지

 

4. React와 CSS-IN-JS

• React는 기존 CSS 방식이 아닌 CSS-IN-JS 방식을 따른다. (기존 CSS 방식도 사용 가능하긴 하지만.)
• CSS-IN-JS란? : javascript 상수에 css가 포함된 나만의 태그를 만들어서 지정할 수 있다. 해당 상수를 export / import 해서 JSX 쪽에 불러오면 고유한 태그처럼 사용이 가능하다.
• 해당 방식의 대표적인 라이브러리에는 Emotion / Style-Componenets가 있으며, 형태는 거의 비슷하다.
• CSS-IN-JS의 장점
  1. 코드가 간결하고 깔끔해진다.
  2. 태그에 의미를 부여하는 것이 가능하다.
  3. 코드의 재사용성이 증가한다.

JSX의 모습 (청록색이 예쁘다. 맘에 듦.)

emotion 쪽의 모습

5. 실습

 

 

위에서 익힌 내용들을 토대로 게시물 등록 페이지를 코딩했다. (디자인은 코캠에서 제공해주심)

그럭저럭 얼개는 나왔는데, 더 알아보고 싶은 부분이 몇가지 있어서 적어둔다.

 

1. input radio를 크로스 브라우징 챙기면서 좀 더 예쁘게 꾸미고 싶다.

솔직히 이건 시간을 들이면 할 수 있을 것 같은데, 시간이 부족해서 손을 못 댔음.

2. emotion에서 웹폰트 적용

3. emotion에서 reset css 적용

 

2, 3은 그냥 css 만들어서 따와도 해결 되겠지만, js 안에서 해결할 방법이 있지 않을까?

구글링해서 몇가지 코드를 시도해봤지만 잘 안된다.. 이것도 시간이 있을 때 좀 더 찾아볼 것.