-본 내용은 프론트 엔드 개발자 준비를 하며 공부했던 내용 면접시 질문받았던 내용이 포함되어있습니다 -
프론트엔드란?
UI 50%
통신 50%
서버와의 통신 ,기능에 집중
UI - HTML,CSS
통신 -JAVASCRIPT,NETWORK
Next.js -> React의 업그레이드 버젼
HTML - JSX로 변경
오늘 할것 HTML과 CSS
기능이 빠진 UI구현
(React사용)
node.js/npm/yarn이란 무엇일까?
node.js
기존 : 브라우저에서 사용가능한 언어 (html,css,javascript)
발생한 문제점
-비효율적
드는 생각
javascript로 게임이나 프로그램을 만들면 효율적일 것 같음
javascript를 실행도구로 만든기술이 나옴
이게 바로 node.js
2.npm
기존에 만들어 놓은 node.js기반으로 만들어 놓은 기능들을 모아놓은 사이트
->npmjs.com
이것을 사용하기 위해서 사용하는것
npm
*node.js를 설치하면 npm도 같이 설치가 됨
3.yarn
npm을 빨리 사용하기위해서 만든 기능
*npm과 yarn의 차이
npm: package.json파일을 읽어서 설치하고 의존파일까지 같이 설치
yarn:package.json파일을 읽어서 '명시된것만 설치'
4.UI관련
GUI - 마우스 클릭으로 이벤트를 처리하는 것
CLI - 키보드 입력(명령어)으로 이벤트를 처리하는 것
5.terminal 명령어 관련
ls - list 출력
pwd- 현재 작업중인 폴더 보여주기(print work directory)
mkdir-폴더 생성 ( make directory)
(mkdir (폴더명))
rm-파일 삭제 (remove) * 폴더 삭제 안됨
폴더삭제법
->rm -rf (폴더명) -remove recursive folder
cd -폴더안에 들어가기 (change directory)
cd (폴더명)
cd ../ -폴더바깥으로 이동하기
cp - 파일 복사하기(copy)
*폴더 복사 안됨
=> 폴더 복사법 cp -R (폴더명) (생성할 폴더명)
yarn dev -js파일에서 라이브서버와 같이 실행하는 방법
*CLI 명령어의 주의점
-기존의 GUI에서는 폴더를 지울수 있지만 CLI는 폴더를 지울수 없음
6.JSX란?
React에서 사용하는 파일로
html,css,javascript를 한개의 JSX파일 안에서 구동하는것
기본적으로 ""가 사라지고 {}로 표기함
React안에서는 html css 가 없음
React의 장점
js의 파일에서 원하는 부분만 가지고 와서 사용할수 있음
골라서 내보내야하니 export라는것을 자료형 앞에 써야함
불러 올곳 앞에 import 를 사용해서 작성
src -> import로 바뀜
css 불러오는 방법
import로 전부를 불러 올 수 있음
import styles from (파일 주소)
export default - 브라우저 화면(display)에 내보내 준다
인기 기술
CSS-IN-JS
자바스크립트 안에 CSS파일을 넣어서 쓰자는것
-> 모든것이 자바스크립트 파일로 통일됨
장점
1 js 파일 하나로 통합
2.CSS를 변수에 저장해서 사용 -> 변수만 불러와서 재사용성이 높아짐
3.시간이 절약됨 -> 인건비를 줄일 수 있게됨
2가지 도구가있음
1 styled-components
2 emtion
7.Emotion의 장점 (CSS-IN-JS)
간결한 코드
태그에 의미 부여
코드 재사용성 증가
8.local과 127.0.0.1의 차이
Loopback
현재사용중인 컴퓨터 자신을 스스로 서버로 만들고 요청과 응답을 내부적으로 처리
중요(프론트 엔드 기술면접 주요질문)
유저가 사이트 주소를 입력하면 DNS로 전송되어 DNS 는 URL에 맞는 IP를 찾아 연결해주고 우리가 보는 사이트를 접속할수 있게됨
9.Port
컴퓨터가 데이터를 주고받을떄 담당하는 포트를 분리해서 하는것
대략적으로 20 80 443 3000 4000 8080 등이있음
443: https주소 접근시 포트
*이미 점유하여 사용중인 포트는 다른포트로 연결하거나, 기존점유중인 포트를 정지해야함
주의사항
사용하지 않는 서버프로그램은 반드시 터미널에서 ctrl+c를 입력하여 종료해야함
10.git/github
작업중인 파일을 편집 전 상태로 되돌리려면?
-편집하기전 파일을 복사해두는것이 가장 편리함
-그러나 너무나 많은 파일 발생
이것을 해결하기 위해서 나온것 :git
git - 버전관리 시스템
충돌시 : 어떤게 맞고 어떤게 틀린지 반영할 수 있게함
git-Repository(깃 저장소)
폴더,파일 등을 저장해 두는 공간
폴더와 파일이 변경 이력별로 구분되어 저장됨
10-1. 로컬저장소와 원격저장소
로컬 저장소
-내 PC에 파일이 저장되는 개인전용 저장소
원격 저장소
-파일이 원격 서버/원격 컴퓨터에서 관리,여러사람이 협업하기 편함
commit
-폴더 파일의 변경사항을 기록하는것
branch 란?
master ,dev ,feat 등으로 나뉨
코드를 그대로 복사해 온 이후 수정후 합치게 됨
최종적으로 master 에 다시 push함
stage란
-임시 저장 공간에 저장하는 것을 스테이징한다고 표현 (git add상태 )
dev 생성법
git branch dev
dev 작업법
git switch dev
branch를 합치는법 (merge)
기본적merge
3-way merge
한번이라도 커밋했던 내용이 있다면 자동으로 commit하게됨
git merge dev를 하면 dev를 마스터에 합치게됨
