:) +UP 코드캠프 회고록

권민철·2022년 8월 11일

돌아보면 :)+UP

A. 부트캠프에 들어온 이유 🔥

이직 준비를 하면서 그만둔 직장에서의 내 모습을 다시 돌아보았다
그 모습은 이직을 해도 달라지지 않을 거라는 생각이 들었다
지금 하고 있는 일이 나에게 맞을까 라는 수많은 생각을 하였다
물론 누가 일이 맞아서 하냐 어쩔 수 없이 먹고살기 위해 하는거지 라는 말들도 많이 들었지만 나는 정말 싫었다
다시 시작하자는 마음을 먹고 주변 지인들의 세상을 보았다
정말 다양한 세상에서 살고 있었고 얻는 마음도 다 달랐다
그중에서 프론트엔드 개발자를 알게 되었고 학생 때 배운 HTML이 생각이 났다.
개발자 지인의 모습을 보기 전까지는 정말 작은 관심이었다
일에 집중하며 즐기는 모습 이런 모습도 중요했지만 문제를 분석하고 해결해 나가며 기능 구현을 하고 완성되었을 때 느끼는 큰 성취감 때문에 나도 느끼고 싶어 바로 프론트엔드 과정을 찾아보았다
배운 거 하나 없이 비교할 수 없는 성취감을 느끼기 위해 무작정 알아보던 중 나에게 맞는 기초와 오프라인 수업을 진행하는 코드캠프를 찾았고 지인들이 좋다고 했던 커리큘럼을 때문에 코드캠프에 들어왔습니다. 그 후 프리캠프라는 맛보기!?에 수강을 했다.
처음에는 너무 어려워서 정말 많은 고민을 했지만 점점 빠져들며 프론트엔드 개발자라는 꿈을 키우게 된 정말 좋은 시간이었다
솔직하게 프리캠프랑 지인들이 부러워하는 커리큘럼이 아니었으면 꿈을 키우지 못했을거다

B. 돌아보기🧗

React
React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구며, 대표적인 서비스로는 모두가 알고있는 페이스북, 인스타그램, 에어비앤비 등이 있다.
(공부를 시작하기 전 의미나 생각했던 sns와 지금의 sns가 매우 달랐다.)
Git, Github
Git은 소스코드 저장을 도와주는 프로그램
Github는 Git이라는 프로그램으로 저장한 파일들이 실제로 저장되는 장소다
(git pull 과 git push가 얼마나 나에게 필요하고 중요한지 매일 느끼는 중)
React 컴포넌트
클래스형과 함수형이 있으며, 함수형이 간단하다.
최근에는 함수형을 사용하지만 아직 클래스형 함수를 사용하는 기업이 있을 수 있으므로 같이 이해해보기
(화살표함수로 많이 했다. = () => {})
React-Hooks
함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었습니다. 이 도구를 Hooks(훅) 이라고 부르며 대표적인 Hooks에는 useState, useEffect 가 있다.
state
state란 리액트 컴포넌트에서 데이터를 담기 위한 상자다
다시말해 컴포넌트에서 사용하는 변수!!
([state, setState] = useState()
state: 컴포넌트에서 사용하는 변수
setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능)
API
API란 HTTP 요청을 Back-end 컴퓨터에 보냈을때 실행되는 Back-end 기능입니다.
(광고에서 많이 봤더 API가 뭐에요? 항상 궁금했지만 지금은 광고가 나오면 혼잣말로 말합니다.)
graphql-API
페이스북 개발팀에서 만들고 유명한 사이트에서 사용중인 통신 방법!!(정말 대단하다고 매번 생각하는 페이스북 개발팀)
CRUD

새로운 것을 생성하는 API ⇒ CREATE
기존의 것을 조회하는 API ⇒ READ
기존의 것을 수정하는 API ⇒ UPDATE
기존의 것을 삭제하는 API ⇒ DELETE

(반복적인 실습으로 자주보는 CRUD! apollo-client로 필요한 부분만 사용하기)

API독스
독스는 설명서입니다. (다운로드수가 많고 필요한 API는 추가적으로 공부하는 습관이랑 읽는 능력 키우기)
동기, 비동기
비동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행합니다.
동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신입니다.
(async, await 는 짝꿍!!! 동기 통신을 위해 사용)
호이스팅
호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. (변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것 let, const)
Router
페이지 이동과 관련된 기능을 가지고 있는 객체
(프리보더를 하면서 많이 사용하는 router.push, [id]폴더는 동적 라우팅)
삼항연산자
data ? data.fetchProfile : undefined
(알고리즘을 삼항연산자로 풀면 기분이 좋다! 하지만 2주차까지가 한계였다 분발하자)
&&, ||연산자
data && data.fetchProfile
(알고리즘 if문에 많이 사용했다)
옵셔널 체이닝 (Optional-Chaining)
optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 입니다.
data?.fetchProfile
(프리보더 할때 안그래도 복잡했던 가독성을 좋게 만들어줌)
props
컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 됩니다.
이를 props가 연결해주게 되며, props는 부모가 가지고 있는 변수 , 함수를 자식한테 물려주는 것 입니다.
부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 됩니다.
(props를 활용하면 css를 변경할 수 있다)
반복문
실무에 나가면 for문 보다 map, filter 을 많이 사용함
(반복문을 공부를 꾸준히해야 안까먹는거 같다 매번 새롭다)
key
리액트에서 키가 필요하다
변경, 추가, 삭제할지 식별하기 위함
(key값으로 id를 줌 key={id})
타입스크립트
타입스크립트란 자바스크립트의 타입을 강제시키는 언어입니다.
(네이밍에 관례가 있으니 지키자)
eslint
정해진 규칙에 맞게 정리해줌
(매우 편리하지만 붉은 글씨가 무섭다)
라이브러리
라이브러리를 사용해 모달창, 달력, 유튜브, 지도 등 여러가지 기능 사용해보자(많이 알면 알수록 좋다)
페이지네이션
페이지 처리를 하는 방법중 번호로 하는 방법보다는 무한스크롤 방식을 사용하는게 정말 좋다!(번호로 하는 방식은 고려할것이 많다 그러므로 무한스크롤 방식을 사용하자)
스프레드 연산자
동일한기능을 하나로 묶어주기
(...child1, 하드코딩하다가 스프레드 연산자 사용하니까 처음에 오류가 많이 났다.. 더 연습해서 깔끔하게 하자!)
Ref
Ref를 사용해서 태그를 직접 변수에 저장하자
클래스형에서는 createRef()
함수형에서는 useRef
useEffect
함수형 컴포넌트에 생명을 주는 훅!
(useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으킴, 성능면에서 비효율적이다 주의하자)
open-api
말 그대로 오픈된 api
사용만 잘하면 백엔드 없이도 서비스를 만드는게 가능(하지만 나는 아직은 무리다....)
uuid
반복문 map를 사용할 때 key값을 주어야 하는데 더욱 손쉽세 부여할 수 있는 라이브러리다!(uuid를 import 시켜준뒤 필요한 key에 넣어주면 사용이 가능하다)
디바운싱 & 쓰로틀링
디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다.(대표적인 예는 검색기능이다!)
쓰로틀링이란, 연이어 발생한 이벤트에 대해 일정한 delay를 포함 시켜, 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용됩니다.(대표적인 예는 스크롤 기능!)
Lodash
자바스크립트의 유틸리티 라이브러리
내장된 유용한 함수가 많기 때문에 자주 사용한다
Debounce
Debounce는 반복적인 동작을 강제적으로 대기하는 것을 말합니다.(검색할때 많이 사용하며 엔터를 치지 않아도 검색한 내용을 보여준다! 너무길면 싫어하고 너무 짧으면 과부하)
정규표현식
회원가입이나 로그인시에 사용했다
정규표현식 조건을 줘 원하는 아이디나 비밀번호의 포함되는 내용을 제한할수있었다(/\w+@\w+.\w+/)
E-mail. 문자 w
/^\w@\w.\w $/ 하나 /^\w+@\w+\.\w+$ /
하나이상
/^\w?@\w?.\w? $/ 하나있을수있고없고 문자만 /^[a-zA-Z]$ /
핸드폰번호 숫자 d
/010-1234-5678/
/^\d{3}-\d{3, 4}-\d{4}$/
글로벌 스테이트
사이트를 만드면 하나의 state가 여러 페이지에서 필요할 경우 사용
props 드릴링 보다 편하다
Recoil
불필요한 렌더링을 보완한 기능
사용법이 간단하다
Recoil에서는 Atom으로 state의 일부를 보여줍니다.(Atom 을 불리하면 반드시 export를 해줘야함)
useRecoilState를 사용해야 함(useState와 비슷)
브라우저 저장소
쿠키(COOKIE) : 영구 저장이 가능하며, 만료시간을 지정 할 수 있습니다.
localStorage : 영구 저장이 가능합니다. ⇒ 우리가 임시로 사용할 저장소 입니다.(ocalStorage의 사용방법은 key와 value를 넣어주는 방법)
sessionStorage: 브라우저 종료시 사라집니다.
스택
출입구가 하나인 우물 형태의 데이터 구조
(먼저들어오면 마지막으로 나감, First In Last Out 이라고 하며, 앞글자를 따 FILO)
큐
양방향 출입이 가능한 파이프 형태의 데이터 구조
(먼저들어오면 먼저 나감, First In First Out, FIFO)
클로저
클로저라고 함은 상위 함수와, 해당함수(여기서는 bbb함수)가 선언된 스코프 즉 상위함수를 둘러싼 환경이 되겠습니다. bbb함수에서 aaa함수 스코프로 올라가는 과정에서 스코프 체인이 일어난다.
클로저(closure) : 상위 함수 + 상위함수의 lexical enviroment(상위함수를 둘러싼 환경)
스코프 체인(scope chain) : 바로위 함수 스코프 뿐만아니라 global 스코프 까지 찾아 올라가는 과정을 scope chain이라고 합니다
HOC
Higher Order Component 개념은 위의 클로저로부터 확장된 개념(다른 컴포넌트보다 먼저 실행되는 컴포넌트, 부모에서 자식으로 가기전 중간에 실행되는, 필요한 부분에서 사용할 수 있다)
여러가지 쿼리 방식
useQuery : 컴포넌트가 열리면 바로 실행되며, data라는 변수에 fetch해온 데이터를 담아줍니다.
useLazyQuery : useQuery를 원하는 시점에 실행후 fetch해온 데이터를 data변수에 담아줍니다.
useApolloClient : 원하는 시점에 실행 후 fetch해온 데이터를 원하는 변수에 담을 수 있습니다. 따라서 axios 같은 느낌으로 사용이 가능
퍼사드 패턴
각 역할을 담당하는 함수를 분리해 컴포넌트에서는 호출만 하는 패턴
(각자 역활이 있는 함수를 컴포넌트로 분리 후 import해서 호출만 해줌)
폼 라이브러리(react-hook-form)
함수형 컴포넌트와 hook을 사용하는 경우, 가장 사용하기 쉽고 성능적으로 좋은 폼은 react-hook-form 입니다.
react-hook-form은 imput의 값을 실시간으로 state에 반영하는것이 아닌 등록함수가 실행 될 때 한번에 처리하기 때문에 불필요한 렌더링이 제거되고 한번에 바꿔 렌더링하기 때문에 빠르고 효율적입니다.(배우기전까지 우리는 노가다성 코딩을 했다???)
yup
yup은 이렇게 까다로운 검증과정을 대신해주는 라이브러리
yup과 같은 검증 라이브러리는 보통 form과 함께 사용
연결하는 resolver에는 다른 검증 라이브러리도 사용가능
Destructuring
객체의 구조분해 할당 : 비구조화할당이란 변수를 한번에 모두 선언하고 할당 할 수 있도록 도와주는 것 입니다.
배열의 구조분해 할당 : const [child1, child2, child3] = classmates
Rest 파라미터
원본을 건드리리는 일은 좋지 않습니다, 따라서 원본을 건들이지 않고 삭제하기 위해 rest 파라미터를 이용
반드시 rest를 사용하는건 아님 관례임!!!
Custom Hooks
useState, useContext, useEffect, useRef 등 다양한 react 내장 Hook을 사용해 왔는데, 사실 Hook의 정체는 함수였습니다.
따라서 사용시에 함수를 호출 하는 것 처럼 사용을 하는 것 이었습니다. Custom Hook 이란 이름 그대로 개발자가 스스로 커스텀 한 훅을 의미하게 됩니다.
사용시 함수 네이밍에 use를 사용해줘야한다!
타입스크립트 Generic
타입스크립트의 핵심!!!
문자타입 (): 은 리턴타입
Any 타입보다 unknown 타입이 더 안전함
들오는 타입에 따라 리턴 타입도 변경됨
Any 는 무슨 타입이 들어오는지 모름
Generic 는 들어오는 타입을 알 수 있음
(핵심이다...)
웹 에디터 (React-quill)
textarea의 단점들을 보완해서 좀 더 스타일리쉬하게 내용을 작성할 수 있도록 도와주는 React-Quill 웹 에디터 라이브러리
( 넣고 독스를 참고해 사용하기!!)
하지만! 우리가 사용하는건 Next.js 라 오류가 발생함
오류 해결은 document 가 선언된 시점 이후에 React-Quill을 import 해야 합니다. Next.js 의 dynamic import 방식을 사용
해킹
크로스 사이트 스크립트 공격

게시글에 들어왔는데 개인 토큰이 유출

탈취한 토큰으로 게시글을 올리거나 하는 공격 CSRF

SQL-Injection
비밀번호를 다르게 입력해서 알아넨 토큰으로 공격

DOMPurify
DOMPurify로 해킹을 방어하자!
(해킹도 진화 DOMPurify 진화함)
결제 프로세스
pg사(나이스페이, nhn, kg이니시스 등)
통해서 하기에는 복잡
그래서
결제 솔루션 회사가 나옴
미리 API를 만들어둠
아임포트, 부트페이
과정
아임포트나 pg사 와 계약을 해야함
아임포트 사이트 들어가면 있음
심사기간 pg사는 1주일
피피티를 만들어야함
접속 후 결제방법이나 결제버튼등을 스크린샷찍어서
피피티를 만들어야함
pg사에 제공
pg사는 카드사에 제공 그럼 직접 실행등 테스트해봄 심사함
그과정이 2주정도 걸림
-주의사항-
1.임시서버가 아닌 오픈된 서버야 가능함
(결제관련 API, 서비스가 정상 오픈 상태)
그러고 나서도 3주일이 걸림
2.불법적인거나 가격 직접입력 등등으로 심사기각이 많음
-실제상황-
다음달 정도면 완성-> 마케팅, 투자 등등이 이뤄짐
=> 개발자에게는 일정이 중요함!!!!
게시판에 시간이 걸리는 이유(알고 말하자!, 커뮤니케이션!!)
웹훅노티피케이션 설정
결제가 승인되었을 때(모든 결제 수단) - (status : paid)
가상계좌가 발급되었을 때 - (status : ready)
가상계좌에 결제 금액이 입금되었을 때 - (status : paid)
예약결제가 시도되었을 때 - (status : paid or failed)
관리자 콘솔에서 결제 취소되었을 때 - (status : cancelled)
크론탭
리눅스에 내장되어있는 기능
1.사람이 어떤 행동을 취했을 때
2.모두 가만히 있는데 특정 시간이 되었을 때-> 크론탭에서
이벤트 루프 (Event Loop)
시간을 화면에 보여줄 때 발생할 수 있는 이슈
(자바스크립트의 동장 원리 때문에 순서 변화가 없었다)
싱글 스레드
자바 스크립트는 싱글 스레드 방식
(하나면 싱글 스레드)
일반적인 다른 언어 --> 멀티 스레드
실제로 물리적으로 일하는건 = cpu
프로그램- process
프로그램 안에서의 일꾼 thread
싱글 스레드는 중요 면접 질문임!!!
(계속해서 알아두자!!)
그리고
계속해서 벨로그를 업데이트 하자!!

C. 앞으로의 계획🏗

처음에 마음 먹고 다짐한 꾸준함은 당연한거다 복습도 당연한거다 너가 이정도는 해야지 하는거 다!! 당연한거다 항상 생각하자 제발..
1~2달이 지난 후 나의 모습은 지금 얼마나 지키느냐에 따라 달라진다 처음에도 지금도 똑같이 힘들지만 더 계획적으로 공부하자! 흘러가듯 공부한다면 그대로 떠내려간다! 매일 매일 배우는 내용이 새롭고 어려워도 내 주변에는 동기들! 멘토님분들이 계신다! 도움도 많이 받으면서 피해는 주지말자는 생각으로 더 힘내자! 지인들이 부러워하는 커리큘럼 내것으로 만들어서 새로운 꿈을 그려보자! 화이팅!!🥇

권민철

Hi!

이전 포스트

:) +14D

다음 포스트