CSS 마스터
자바스크립트 능력 및 알고리즘 풀이 능력
react, graphql 등 최신 기술 스택 활용
자유게시판, 중고마켓 포트폴리오
100% 프론트엔드 개발 지식 및 20% 백엔드 지식
졸업후는??
스타트업및 it회사/프리랜서/스타트업/백엔드 취직
12층,13층 라운지 자유 12층 안마기 존재 24시간이니까 맘대로
시간표
4/4/4주 진행
알고리즘기초/프론트엔드기초/자유게시판프로젝트
-> 기초에는 멘토들이 너의 코드를 도와줄 것
알고리즘심화/프론트엔드심화/중고마켓 프로젝트
-> 심화는 너의 코드를 도와주지 않을 것 (!!!)
팀프로젝트/프로젝트 발표
일과
알고리즘1시간/알고리즘 수업/프론트엔드 수업(1시까지)
퀴즈풀이 & 포트폴리오/ 멘토링,질의응답(QT)/포트폴리오&포트폴리오
반드시 블로그쓰기
평가
월 - 포트폴리오점검
화, 목 - 코드발표(3주차부터 10분정도)
수 - 평가/발표
금 - 코딩테스트
절대평가...G rating
알고리즘 - 알고리즘테스트/알고리즘 리뷰 가산점
포트폴리오 - 자유게시판(추가기능)/중고마켓(추가기능)/팀플
출결/블로그/질의응답
첫 2주 가장 중요
!!영타 실력 늘리기!!
!!단축키 사용하기!!
!!코드리딩 실력키우기!!
이번주 커리큘럼
프론트엔드는
UI 50% 통신 50%
UI 100% 는 퍼블리셔임
오늘의 커리큘럼
매일매일 깃허브잔디심기
Node.js
자바스크립트를 웹브라우저없이 자바나 파이썬처럼 내컴에서 실행시켜보자
-> Node.js 도와주는 도구인 것.
!여기의 폴더 이름들은 고정된 폴더 이름임
README.md는 내가 작성하는 설명서
버전의 경우 무조건 최신버전이 좋은것이 아님! yarn.lock에 버전이 기록되는중
vs코드 + node.js + yarn 설치
터미널 명령어
pwd print working directory 지금작업하는위치 표시
ls 목록 표시
mkdir 폴더이름 - 폴더 생성
cd 폴더 이동
../ 윗 폴더로 이동
rm -rf 폴더이름 폴더 삭제
react 폴더구조
보일러 플레이트 : 초기세팅이 완료된 폴더
! 물론 회사마다 다르기 때문에 그냥 초기설정이 완료되면 보일러플레이트라고함
pages 폴더는 프론트엔드의 페이지 화면을 모아놓은 폴더입니다. api폴더는 사용하지 않으므로 삭제합니다.
_app.js - 페이지 설정
index.js - 시작 페이지
제품 설명서(package.json)
package.jsgon파일은 핵심이 되는 파일로, 제품설명서와 같음
내가 받은 파일들과 버전
열어볼때 yarn dev
localhost:3000
3000번의 포트 (0~65535)를 연 것임. 한포트에 하마나 연결, 서버의 느낌이다
scripts : 사용설명서
next는 react기반 프레임워크이다.
우리는 next를 설치하였기 때문에 react, react-cdom도 자동으로 함게 설치됨
다른폴더의 파일 불러오기 (import/export)
react에서는 다른 폴더에 있는 파일을 불러올 수 있음
실무적용 - import/export
우리가 만드는 소스코드는 주로 html, css, javascript입니다
이때 하나의 소스코드에 이 모든 내용을 코딩하면 너무 복잡해집니다.
html, css, javascript를 작성하는 소스코드 파일을 각각 따로 만들고, 필요에 따라 서로 불러와서 사용하게 됩니다.
React의 html(JSX)
jsxsms React에서 사용하는 react전용 html임
react에서는 html 대신 JSX를 사용
속성값의 대소문자 정도 차이 등을 제외하면 거의 비슷함
?? 웹브라우저는 html, css, javascript만 읽지 않나요??
-> 정확합니다! 우리는 react에서 사용하도록 만들어진 html인 jsx를 코딩합니다. 하지만 최종적으로 소스코드가 실행될 때는 Jsx가 html로 자동으로 변환되어 실행됩니다!
react의 css 도 다름
.title{} 대신 const Title = 로 변환, html태그처럼 사용가능
-> 태그에 의미를 부여할 수 있어서, 태그만 봐도 결과물이 예상이 됨
-> class name을 입력하지 않아도되서 코드가 짧아지므로 읽기가 쉬움
기존 css vs css-in-js
// CSS 방법
function Home(){
return (
<div className={styles.wrapper}>
<h1>로그인</h1>
<label className={styles.label}>아이디</label>
<input className={styles.input} type="text" />
<label className={styles.label}>비밀번호</label>
<input className={styles.input} type="password" />
</div>
)
}
// CSS-IN-JS 방법
function Home(){
return (
<Wrapper>
<Title>로그인</Title>
<Label>아이디</Label>
<ID type="text" />
<Label>비밀번호</Label>
<Password type="password" />
</Wrapper>
)
}이렇게 차이난다.
프론트 엔드 서버를 종료하고 터미널을 열 때는
ctrl+c
yarn dev로 열기
git에 업로드 할 때 주의사항
폴더 안에 .git이 있어야함
근데 이미 깃폴더가 깔려있음!! 그래서 삭제해야함
안보이는 파일이라서..
ls -al 하면 숨김파일까지볼 수 있음
rm -rf .git을통해서 삭제하기
깃허브 업로드 과정
add -> commit -> push
git add . 전체파일 add
git status 상태볼 수 있음 (초록색, commit준비 완료)
git commit -m '메세지 입력'
이후 git status 해서 없으면 정상
git push origin master
원본을 업로드(마스터 폴더가 기본)
import {MyDiv, MyInput} from '../../styles/emotion'
export default function EmotionPage(){
//export 페이지 보내기 default단 하나뿐인 파일
//이름은 자유지만 파일이름에 근거하여 쓰기
//return안쪽과 바깥쪽을 구별, 안쪽은 html쓰는곳(JSX) 바깥쪽은 자바 스크립트
//2줄이상 입력시 return + ()는 필수
//react에서는 html을 하나로 만들어야함. 큰 div로 묶기 / <> </> fragment로도 가능
//이미지는 public 안에 이미 있음 public 대신 / 사용
return(
<>
<MyDiv>로그인 </MyDiv>
아이디
<MyInput type="text" /> <br/>
비밀번호
<MyInput type="text" />
나의 이미지: <img src='/images/lotto.png'/>
</>
)
}import styled from '@emotion/styled'
//''치면 어디서 가져올껀지 선택(설치하고나서)
//이름은 짓기나름이지만 처음이랑 매 첫 단어마다 대문자
//export를 붙여야 다른 파일에서 사용할 수 있음
//import를 통해서 export한 걸 가져야와함
//{}가 있는거 없는것의 차이는 to be continue..
export const MyDiv = styled.div`
color: black;
font-size: 30px;
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 30px;
padding-top: 30px;
`
export const MyInput = styled.input`
width: 300px;
color: gray;
display: flex;
justify-content: center;
align-items: center;emotion 연습
포트폴리오 과제
emotion 관련 퀴즈 + 1주차 퀴즈
밖에 감싸고 패딩 패딩으로 내려가면서..
-> 위로 padding top을 주는거였다.
안으로도 패딩
사진첨부는 이미지만 첨부
감싸는 박스의 가로는 o, 높이는 x 주면안됨
안그럼 찌그러짐
https://cantunsee.space/
.. 비기너..
내 시도 - emotion 실습
//export default 해서 만들기!! () class폴더 보고 따라만들기
import {FirstDiv,MyHead,NameAndPassword,Name, Password, Subject,Main, Address, Adress3, AddressSearch, Youtube, Attachment, Setting, SignUp, MainBorder1, NameBorder1, AddressBorder1, YoutubeBorder1, AttachmentBorder1, PasswordLeft, SettingBorder1, SignUpBorder1} from '../../../styles/new.js'
export default function EmotionPage(){
return(
<FirstDiv>
<MyHead> 게시물 등록 </MyHead>
<NameAndPassword>
<div>
<div> 작성자 </div>
<Name type="text" placeholder= "이름을 적어주세요"></Name>
</div>
<PasswordLeft>
<div> 비밀번호 </div>
<Password type="password" placeholder= "비밀번호를 적어주세요"></Password>
</PasswordLeft>
</NameAndPassword>
<NameBorder1>
제목<br></br><Subject type= "text" placeholder= "제목을 적어주세요"></Subject>
</NameBorder1>
<MainBorder1>
<div>
내용<br></br>
<Main type= "text" placeholder= "내용을 작성해주세요"></Main>
</div>
</MainBorder1>
<AddressBorder1>
주소<br></br>
<Address type="text" placeholder= "07250"></Address>
<AddressSearch type="text" placeholder= "우편번호 검색"></AddressSearch>
</AddressBorder1>
<div>
<Adress3 type="text"></Adress3>
<Adress3 type="text"></Adress3>
</div>
<YoutubeBorder1>
유튜브<br></br>
<Youtube type= "text" placeholder= "내용을 작성해주세요"></Youtube>
</YoutubeBorder1>
<AttachmentBorder1>
사진첨부<br></br>
<Attachment type= "text" placeholder= "Upload"></Attachment>
<Attachment type= "text" placeholder= "Upload"></Attachment>
<Attachment type= "text" placeholder= "Upload"></Attachment>
</AttachmentBorder1>
<SettingBorder1>
메인 설정<br></br>
<Setting type= "radio" ></Setting> 유튜브
<Setting type= "radio" ></Setting> 사진
</SettingBorder1>
<SignUpBorder1>
<SignUp>등록하기</SignUp>
</SignUpBorder1>
</FirstDiv>
)
}내 시도 css
import styled from '@emotion/styled'
export const FirstDiv = styled.div`
display:flex;
flex-direction:column;
align-items: center;
padding: 14px 60px;
`
export const MyHead = styled.div`
padding-top: 30px;
font-size : 30px;
`
export const NameAndPassword = styled.div`
color : gray;
display: flex;
justify-content: center;
width: 100%;
padding-top: 30px;
`
export const NameBorder1 = styled.div`
padding-top:30px;
`
export const Name = styled.input`
width: 486px;
height: 52px;
padding-bottom: 30px;
`
export const PasswordLeft = styled.div`
margin-left :30px;
`
export const Password = styled.input`
width: 486px;
height: 52px;
padding-left:30px;
`
export const Subject = styled.input`
width: 996px;
height: 52px;
`
export const MainBorder1 = styled.div`
padding-top: 30px;
`
export const Main = styled.input`
width: 996px;
height: 480px;
`
export const AddressBorder1 = styled.div`
padding-top: 30px;
width:105%;
`
export const Address = styled.input`
width:77px;
height:52px;
`
export const AddressSearch = styled.input`
width: 124px;
height: 52px;
background-color: black;
margin-left:10px;
`
export const Adress3 = styled.input`
width:996px;
margin-top: 10px;
display: flex;
flex-direction: column;
height: 115px;
justify-content: space-between;
`
export const YoutubeBorder1 = styled.div`
padding-top: 30px;
`
export const Youtube = styled.input`
width: 996px;
height: 52px;
`
export const AttachmentBorder1 = styled.div`
padding-top: 30px;
width:105%;
`
export const Attachment = styled.input`
width:78px;
height:78px;
background-color: #BDBDBD;
`
export const SettingBorder1 = styled.div`
width:105%;
padding-top: 30px;
`
export const Setting = styled.input`
`
export const SignUpBorder1 = styled.div`
padding-top: 30px;
`
export const SignUp = styled.button`
background-color: #FFD600;
padding: 14px 60px;
width: 179px;
height: 53px;