개발자를 꿈꾸고 부트캠프에 들어와서 첫날이 지났다.
프리캠프후 공부를 많이하지 못해 걱정했는데 오늘은 다행히도 잘따라갔던거 같다.
멘토님이 개발자 취업에 있어서 개발자를 평가하는 가장 큰 요소는 블로그, 깃허브라고 하셨는데
앞으로 매일매일 블로그 작성하기, 깃허브 꾸준히 관리하기 이부분은 끊이지 않고 진행했으면 좋겠다.
오늘의 TIL을 크게 정리해보자면
- JSX, emotion
- 터미널 사용법
- 깃,깃허브 사용법
터미널 사용법과,깃과 깃허브 사용법은 프리캠프때 한번 맛보기로 배워본 경험이 많이 도움이 되었고 주로사용할 단축키들은 정리해서 외워야 할거 같다.
JSX란 무엇인가?
JSX는 리액트 전용 문법이다.
기존 html 문법과는 조금의 차이가 있다.
기존 html 예시
<div class="title">제목</div> <Button onclick="alert()">버튼</Button>JSX 방식 예시
<div className="title">제목</div> <Button onClick="alert()">버튼</Button>
클래스명을 작성할때 camelcase로 작성한다.
emotion
emotion은 react의 css 이다.
쉽게 말하면 CSS-IN-JS 이다.
html 태그에 속성을 부여해 새로운 이름을 만들고 변수에 저장한다. 그이름으로 이루어진 태그를 작성하면 미리 만들어 놓은 코드의 속성값이 적용된다.
class명을 숨길수 있기 때문에 가독성이 크게 올라간다.
기존 css 예시
.title {
width: 100px;
height: 100px;
}CSS-IN-JS 방식
const Title `
width: 100px;
height: 100px;
`이렇게 Title이라는 변수에 속성값을 추가하고
<Title> Hello!!! </Title>이렇게 html 코드를 작성하면 Title의 속성값을 가졌기에 바로 CSS가 적용된다.
emotion을 사용할때 기존 html과 조금 다른점이 몇가지 있다.
-
{}가 아닌 `` 백틱이 사용된다.
-
불러오는 방법이 조금 다르다.
기존 html의경우에는
<head>
<title>jukebox</title>
<link rel="stylesheet" href="./styles/jukebox.css">
</head>이렇게 head 태그에 link 태그를 작성해 불러왔다.
CSS-IN-JS 경우에는 아래와 같이 사용한다.
html 역할의 JS
import { MyDiv, Title, IdInput, PwInput, LoginButton, Wrapper} from '../../styles/Example'
export default function EmotionPage(){
// return 위쪽은 javascript 쓰는곳
// return 아래는 html 쓰는곳
return(
<Wrapper>
</Wrapper>
)
}CSS-IN-JS
import styled from '@emotion/styled'
export const MyDiv = styled.div`
width: 100%;
height: 500px;
background-color: red;link 태그로 가져오는것이 아닌 import{} from../../styles/Example의 방식으로 가져온다.
{} 부분에는 만든 태그들을 ','로 구분하여 차곡차곡 써 놓는다.
또한 , 이런 태그들로 작성하는것이 아니라 function과 return을 사용해 작성한다.
이때 주의점은 2가지가 있다.
1. return 부분에는 가장 최상위 부모의 태그를 여러번 사용할수 없다.
2. 연결된 CSS-IN-JS 파일과 import,export 연결을 잘해야 한다.
이렇게 오늘 emotion을 이용해 2가지 과제를 진행하였는데 아주 조금은 익숙해 진것 같다.
터미널을 이용해 폴더를 생성하고 제거하고 gitadd, gitcommit 등등 다양한 단축키를 이용해 작업을 시작했는데 단축키를 빨리 외우고 정리해야 할거같다.
터미널 단축키
- ls (리스트 확인)
- Ls -al (숨김파일까지 확인)
- Mkdir (폴더생성)
- Cd (폴더로 들어가기)
- Cd ../ (상위폴더 이동)
- Mv (폴더 이름변경)
- rm -rf(폴더 삭제)
- Yarn dev (리액트에서 open with live server)
깃허브 단축키
1.Git init(.git 생성)
2.Git add
3.Git commit
4.Git push
5.Git remote add origin (원격조정)
6.Git remote -v (확인)
7.Git status (add 준비 확인)
8.Git commit -m ‘메시지’
9.Git branch (폴더 확인)
10.Git push origin master
11.Git clone(git hub에서 내려받기, 복제…)
단축키들은 조금씩 정리해서 완성되면 하나의 포스팅으로 다시 정리해야겠다.
