React와 기타 등등

캠프시작 1일차
오전까지만 해도 구멍이 뚫려 침몰해가는 통나무배에 탄 기분이었는데, 오후에 갑자기 대형 선박이 오더니 나를 구출해 줬다. 조금의 도움을 받으니 통나무배가 아닌 카누였던 것 같기도..!

아직은 복잡한 머릿속이라 코드를 짜며 의문인 점과 궁금한 점 위주로 적고 완벽 이해하기!

1. 이미지 태그걸기

import styled from '@emotion/styled'
const Picture = styled.div`
    width: 176px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

`
const Face = styled.img`
    box-sizing: border-box;
    width: 60px;
    height: 60px;
`
const PictureRight = styled.div`
    width: 96px;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
`

const Name = styled.span`
    width: 64px;
    height: 26px;
    margin: 0;
    font-family: SpoqaHanSans;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -0.8px;
    color: #1f1f1f;
`
const RightArrow = styled.div`
    width: 28px;
    height: 28px;
`

export default function MyPage(){
  <Picture>
      <Face src="..//images/img-60-profile-image.png" />
      <PictureRight>
          <Name>임정아</Name>
              <RightArrow>
                  <img src="..//images/ic-28-arrow.svg" />
              </RightArrow>
          </PictureRight>
  </Picture>
}

1) 이미지를 넣을 때 상위 폴더 링크를 따오는 ../ 이 부분 명확하게 이해하기
2) Face이미지와 RightArrow의 코드를 다르게 짰지만 이미지가 보이는데 문제는 없었음. 그러나 Face 이미지를 넣을 때는 크기 조절이 안돼서 애먹었는데 원인 찾아보기

2. 터미널 명령어 정리

$ cd 디렉토리 이동(경로이동할때, 뒤에 이름을 적으면 이동)
$ ../ 상위폴더
$ cd ../ 상위폴더로 이동
$ ./ 현재폴더
$ ls 현재 위치한 내용 보기
$ ls -al 현재 위치한 내용 모두 보기 (숨김파일 포함)
$ rm -rf 파일 전부 삭제 (디즈니? 픽사?에서 서버컴에 이 명령어를 사용한 사람이 있다고..!)
$ mkdir 폴더 생성
$ mv 폴더 이동 (조금더 알아보자)

3. git 명령어와 github 업로드 방법

$ git
$ git init
$ git commit -m "내용" <- 전달한 내용 넣는 편

생각나는 명령어는 이게 전부;
다시 차근히 알아보고 정리필요할듯
깃헙에 업로드하는 방식이 새로 업로드 or 기존 폴더 덮어쓰기

• 기존에 업로드 된 폴더에 덮어쓰는 과정 되짚기

4. 이모션 명령어

'@emotion/styled'

일단 보류 어떤 부분에서 혼란이 왔는지 생각해보고 정리

5. display: flex;

disply: flex;

flex-direction;
justify-content;
align-items;

하위 요소 정리(필수!)와 개구리 게임으로 반복 훈련