터미널 명령어

• ls = 현재 디렉토리에 존재하는 파일의 목록 확인 (list)
• ls -al = 숨김 폴더까지 현재 폴더 확인
• cd [디렉토리이름] = [디렉토리이름]로 이동 (change directory)
• cd ~ = 홈 디렉토리로 이동
• cd .. = 상위 디렉토리로 이동
• pwd = 현재 작업중인 디렉토리 확인
• mkdir [디렉토리이름] = 디렉토리 생성 (make directory)
• sudo = 명령어 맨 앞에 sudo를 붙임으로써 관리자 권한을 부여하여 명령어 실행 (superuser do)
• rm [파일이름] = 파일 삭제 (remove)
• rm -r [디렉토리이름] = 폴더 삭제
• rm -rf = 폴더 내부 파일 전부 제거
• mv [파일 or 디렉토리][이동될 디렉토리] = [파일 or 디렉토리] 이름을 [바꿀 이름]로 변경
• cp [원본파일][복사본이 이동될 디렉토리] = [원본파일]을 복사하여 [복사본이 이동될 디렉토리] 에 복사본을 생성

Github 명령어

• git init : git폴더 생성
• git remote add origin (git 주소) -:링크연결
• git remote -v : 연결확인
• git status : add대상 확인
• git add (폴더, 파일및 . ) : 1차 임시저장
• git commit -m '메시지' : 2차 확정저장
• git push : Github 홈페이지에 저장
• git branch : git 브랜치 확인
• git push origin master : 마스터 브랜치에 원본 저장
• git clone 주소 : git 홈페이지에 업로드된 코드 붙여넣기

React

📔 React란?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

출처 : https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

📔 라이브러리 vs 프레임워크

라이브러리

📔 import & export

import 이름 from 위치
파일, 설정, 컴포넌트를 외부 파일이나 모듈에서 가져올 때 사용합니다.

export { 객체 }
객체나 함수를 모듈화 시켜 내보낼 때 사용합니다.

📔 웹(React.js)/ 앱(React-Native)-크로스플랫폼(안드 ios 다가능) / pc앱(React + Electron) 다 가능

📔 Component (부품)

• 어디서든 조립가능하다.
• 효율적이다.
• 전체 컴포넌트를 원본 컴포넌트 수정 하나로 수정가능하다.
• 페이지도 하나의 큰 컴포넌트다.
• 클래스형 컴포넌트 vs 함수형 컴포넌트
• 최근 클래스형 컴포넌트에서 React-Hook의 함수형 컴포넌트로 넘어가는중

어플 FAQ 창 만들기

📔 결과물

💻 js / html 중요포인트

css를 가져오는 import

import {
  Wrapper__header,
  Status,
  Search
} from "../../../styles/faq"; //css를 가져오는 import 

React 전용 html 기본구조

export default function faqPage() {
  return (
//이안에 html을 작성해야한다.
    <Wrapper__header> 
    //react에서는 <div class=Wrapper___header> 처럼 
    //안에 class 선택자를 일일히 정해주지않고 상수 이름을 바로 써도 된다.
        <Status></Status>
        <Search>
          <img src="/images/faq.png" /> //react 에서 사진 넣는방법
        </Search>
    </Wrapper__header>
  );
}

💻 css 중요포인트

React 전용 css 기본구조

import styled from "@emotion/styled";
// emotion을 이용하기 때문에 필요한 import  
export const Wrapper__header = styled.div`
  height: 111px;
  width: 100%;
`;
// html에 전송하기 위한 export
// styled. 뒤에 div input button 등 type을 지정해준다.
// ` `; 안에 css 특정을 준다.

📔 어려웠던 점

1. 프로필 부분 간격 예쁘게 띄우기
   -> display:flex; 에 대해 잘 이해하기

2. 리액트 export import 활용
   -> 기본 구조와 css import안의 상수들을 잘 체크하자

게시판 등록창만들기

📔 결과물

💻 js / html 중요포인트

태그 정하기 (html)

<Title__content type="box" placeholder="제목을 작성해주세요." />
<Address__button type="button" value="우편번호 검색" />
<Select type="radio" />
// type=""을 정해줘야 태그가 바뀐다.
// css에서도 styled."속성(attribute)"를 지정해줘야 태그가 바뀐다.

태그 정하기 (css)

export const Title__content = styled.input`
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #bdbdbd;
  box-sizing: border-box;
`;
export const Address__button = styled.input`
  width: 124px;
  height: 52px;
  background: #000000;
  margin-left: 16px;
  font-family: Noto Sans CJK KR;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
`;
export const Select = styled.input`
`;
// css에서도 styled."속성(attribute)"을 지정해줘야 태그가 바뀐다.

📔 어려웠던 점

1. 리액트에서 button, radio등 태그 만들기 (export const [Name] = styled.input)
   -> type = "" 과 styled."속성"을 잘 신경쓰자

2. 텍스트 상자 크기 조절
   -> 일일히 width height 부여해야한다.