드디어 velog 포스팅 1일차! TIL도 1일차!
앞으로 잘부탁해 velog야
오늘 배운 것들을 정리해보고자 한다!
JSX
JSX란 자바스크립트의 확장 문법으로 react로 개발 시 사용한다.
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야한다.
Fragment를 사용해도 좋다.
// 잘못된 코드
export default function Home() {
return (
<title>로그인</title>
<p>로그인해주세요.</p>
)
}
// 올바른 코드
export default function Home() {
return (
<div>
<title>로그인</title>
<p>로그인해주세요.</p>
</div>
)
}올바른 JSX 문법의 예
import { } from '../../styles/index.js'
export default function Home() {
// JavaScript
return (
// JSX
// Fragment
<>
<head>
<title>Sign Up</title>
<meta name="description" content="" />
</head>
<Title>로그인</Title>
<MyDiv>
<MyLabel>아이디</MyLabel>
<MyInput type="text" />
<MyLabel>비밀번호</MyLabel>
<MyInput type="password" />
<MyLabel>나의 이미지</MyLabel>
<img src="/images/image.png" />
</MyDiv>
</>
)
}Import, Export
react 사용 시 import와 export로 css를 연결한다.
이 때, 각 파일은 html, css 파일이 아닌 js 파일로 작성해야함을 주의하자.
html 파일(index.js)
위에서 보았 듯, JSX 문법으로 작성해주자.
아래는 signup 화면 구현을 위한 코드이다.
import { Title, MyDiv, MyInput, MyLabel } from '../../styles/index.js'
export default function Home() {
// JavaScript
return (
// JSX
// Fragment
<>
<head>
<title>Sign Up</title>
<meta name="description" content="" />
</head>
<Title>로그인</Title>
<MyDiv>
<MyLabel>아이디</MyLabel>
<MyInput type="text" />
<MyLabel>비밀번호</MyLabel>
<MyInput type="password" />
<MyLabel>나의 이미지</MyLabel>
<img src="/images/lotto.png" />
</MyDiv>
</>
)
}각 코드 작성 시 CSS 파일에서 선언된 태그를 import 하여 불러와야한다. 선언된 각 태그를 import {} 사이에 작성해주고 css 파일이 있는 경로를 html 파일이 있는 위치 기준으로 불러와준다.
from '../../styles/index.js' 현재 파일의 밖으로 두 번 나가준 후 styles 폴더로 나가준 후 index.js 파일을 불러와주었다.
CSS파일(styles/index.js)
import styled from '@emotion/styled'
export const Title = styled.h1 `
text-align: center;
`
export const MyDiv = styled.div `
display: flex;
height: 200px;
flex-direction: column;
justify-content: space-between;
align-items: center;
`
export const MyLabel = styled.label `
width: 350px;
font-size: 11px;
font-weight: 600;
`
export const MyInput = styled.input `
width: 350px;
height: 40px;
`현재 작성된 코드로 실시간 페이지 확인하기
해당 파일의 pages 상위 폴더에서 ** yarn dev** 해주면 server를 생성하고 해당 url을 보여준다.
해당 url을 Ctrl+좌클릭하여 열어주고 내가 보고싶은 파일의 경로로 이동해준다.
예) http://localhost:3000/(해당 파일이 작성된 상위폴더 명)
Git
기본적으로 나는 git 사용을 위해 VS Code의 터미널에서 작성해주도록하겠다. VS Code에서 Ctrl+J(Window 기준)를 사용하여 터미널을 열어주자
📝 GitHub
처음 사용할 경우, Git Bash 실행 $ git config --global user.name "이름" $ git config --global user.email "자신의 이메일"
Github에서 new repository 생성
terminal 접속하여 연동
현재 위치는 기본값으로 사용자의 배경화면이다. 원하는 폴더로 들어가주기 위해서 'cd'를 사용하여 들어가주자. 예를 들어 본인의 폴더 이름이 repository 라고 가정했을 때 'cd repository'를 사용하여 들어가준다.
해당 폴더에 들어갔다면 저장소를 생성해준다.
저장소 생성
원하는 폴더에 들어가서 git init을 작성해주면 .git 폴더가 생성된다.
저장소를 생성했다면 .git 폴더가 잘 생성되었는지 확인해보자.
기본적으로 현재 폴더가 가지고 있는 폴더와 파일을 보여주는 명령어는 'ls'이다. 그러나 .git 폴더는 숨김폴더이므로 보여지지 않을 것이다.
이럴 경우에는 'ls -al' 명령어를 사용하면 숨김폴더까지 모두 볼 수 있다.
repository 연결하기
만들어진 폴더에서 *git remote add origin "repository 주소" * 를 사용하여 연결해주자
git 임시저장하기
현재까지 작성된 코드를 임시 저장하고 싶다면 'git add'를 사용하여 저장해주자. 폴더 내 모든 파일을 내보내고 싶다면 'git add .'을 사용하자.
현재 add된 파일은 git status를 사용하여 확인해 볼 수 있다.
임시저장된 파일을 확정해주기
git commit -m "내가 작성하고싶은 메세지"
해당 명령어를 사용하여 저장된 파일을 간단한 메세지와 함께 확정해준다.
commit 사용 시 다시 수정할 수 없으므로 유의하자.
commit된 파일을 gitHub repository로 내보내기
git push origin master
현재는 따로 branch가 생성되지 않았기 때문에 origin이라는 원격저장소의 master로 내보내주자