본문 바로가기

Front-End/Udemy&스나이퍼 팩토리

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기

1.2주차 후기

2.배운 것들 링크

 

1. 2주차 후기

직무교육을 한지 벌써 2주차가 끝났다.

굉장히 빠른 속도로 진도를 나갔고 알고 있던 부분 , 모르는 부분 고루 있었다.

React에 대해 잘안다고 생각했는데 많이 부족하다는 걸 느꼈다.

 

어색했던 동기들과 하나 둘 같이 지내며 친해진 거 같아서 좋았다.

첫날보다 오프라인 인원이 조금 줄었으나 여전히 많은 사람들이 강의를 함께 들었다.

 

이번주는 자바스크립트 , 리액트까지 마무리를 했는데

메모이제이션이라는게 특히 인상 깊었다.

 

최적화는 이런 식으로 진행되는거구나.

내가 이런 부분이 부족한거구나.

여기 들어오기 전에 나태해질 뻔 했다.

뭐가 중요한지 몰라 뭘 공부해야할지 몰랐기 때문이다.

유데미에 들어오게 된 건 정말 잘한 거 같다고 다시금 생각했다.

 

강사님의 강의는 여전히 퀄리티가 높았다.

설명도 정말 잘해주시는데 열정도 상당하셔서 강의자료도 놀라울 정도다.

용기는 없지만 친해지고 싶다..!

 

다만, 오프라인으로 왕복 2시간이 넘는 시간일 할애하다보니

피곤해져서 조는 건 어쩔 수 없나보다.

 

"수강생이 조는 건 강사탓이다" 라고 하셨지만 ,

아니다... 메모 할 시간을 주시는데 다 알고 메모 되있는 내용인지라

긴장을 놓게 되서 조는 거 같다.

 

그래도 놓치면 안되니까 일찍 와서 공부하고 미리 예습도 조금 하고 간다.

 

요새는 깃허브에 무언갈 커밋 할 시간이 많이 없다.

배운 내용이 너무 알차기에 내용 정리하기도 바쁘다.

 

다음주엔 next.js에 들어간다.

내가 정말 바랐고 기대하는 내용이기에 꼭 잘배웠으면 좋겠다.

 

아래는 내가 이번주에 유데미&스나이퍼팩토리 교육과정을 통해 배운 내용들이다.

정말 많이 배웠다.

 

2.배운 것들

https://dailycoding777.tistory.com/39

 

설치(NPM , YARN , NPX)

일단 먼저 짚고 넘어가야 할 게 있다.보통 어떤 설치든, 관리하기 어렵기 때문에 전역으로 설치하면 좋지 않다.근데 node와 npm은 전역으로 설치하는 게 좋다.어떤 것을 사용하더라도 패키지는 버

dailycoding777.tistory.com

https://dailycoding777.tistory.com/40

 

리액트 왜 씀?

강력한 커뮤니티와 광범위한 생태계원래 유저 수가 많으면 내가 겪을 문제를 미리 해결하신 분들이 많다는 뜻이다.정보량이 많아 문제해결이 비교적 쉽다. 가상 돔 - 원래 돔 구조 카피한게 가

dailycoding777.tistory.com

https://dailycoding777.tistory.com/43

 

children

props는 값을 내려주는 건데, 칠드런은 뭐하는 놈인가..props만 있으면 되는거 아닌가? 라고 생각을 했다. 말그대로 자식이라 생각하면 편하다. app.tsx내에서 , props는 내려주면   이렇게 썼다. chi

dailycoding777.tistory.com

https://dailycoding777.tistory.com/44

 

구조분해할당(Destructuring) {...rest}

비구조화할당이라고도 불린다. 구조분해 할당 정의"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법" 두가지를 주로 쓰게 될 것이다.1. 받은 값의 이름 그대로 현재 컴포넌트의 변수

dailycoding777.tistory.com

https://dailycoding777.tistory.com/45

 

조건부 렌더링

조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것if문 , 삼항 연산자 , 논리 연산자(&&) if문 if (isLoggedin) { return 로그인 성공; } return ( 실패! );} 삼항 연산자 true false에 따라 결과를 다르

dailycoding777.tistory.com

https://dailycoding777.tistory.com/46

 

코드분석(To-do-list)

오늘은 To-do-list를 만들어봤다. 투두리스트는 기본기(CRUD)에 정말 좋은 예제라고 생각한다. 어떤 기능인지 살펴보면 ,인풋창에 데이터를 입력하고 버튼을 누르면 밑에 목록이 생기고 ,체크를

dailycoding777.tistory.com

https://dailycoding777.tistory.com/47

 

useRef

Ref = reference = 참조 = 다른 자료나 정보를 인용함 (필요한 정보를 얻기 위해 다른 자료를 살펴보는 것) 일단 이 훅에 기능이 두개 있다. (이러니까 어렵지..)  1.저장 공간으로서의 기능2.DOM요소를

dailycoding777.tistory.com

https://dailycoding777.tistory.com/48

 

리액트 불변성

State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것  불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게

dailycoding777.tistory.com

https://dailycoding777.tistory.com/49

 

메모이제이션

리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가

dailycoding777.tistory.com

https://dailycoding777.tistory.com/50

 

Context API

어떤 상태(state)를  전체적으로 공유하기 위함이다. 3가지만 기억하면 된다.1.createContext 만들기2.Provider(껍데기) 만들기3.내가 쓸 곳에 씌워주기. 1.createContext 만들기const UserContext = createContext(초

dailycoding777.tistory.com

https://dailycoding777.tistory.com/51

 

서버 띄우는법 , http통신

json-server라는 놈을 사용한다.다운 방법https://www.npmjs.com/package/json-server json-server[![Node.js CI](https://github.com/typicode/json-server/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/json-server/actions/workfl

dailycoding777.tistory.com