인프런 워밍업 클럽 스터디 1기 FE - 3주차 발자국

FE 강의 진도율 100% 달성자바스크립트 과제 완료음식 메뉴 앱가위 바위 보 앱퀴즈 앱책 리스트 나열 앱Github Finder 앱비밀번호 생성 앱타이핑 테스트 앱리액트 과제 완료예산 계산기 앱디즈니 플러스 앱포켓몬 도감 앱리덕스를 이용한 쇼핑몰 앱(Nextjs 사용) 드디어, 3주가 다 지나갔다.강의는 라디오를 청취하듯이 듣고, 과제를 진행하면서 막히는 경우에 재청취 하였다.자바스크립트 강의는 총 12시간, 리액트 강의는 총 18시간 분량이었는데 청취하면서 사실 쉽지는 않았다. 아는 내용은 가볍게 넘기기도 하였다. 개인적으로 좋았던 점은 강의에 대부분의 내용이 담겨있어서 복습하기 좋았다. 그리고 리액트 강의에서는 React v18 에 추가된 부분도 있고 Docker 를 사용하여 컨테이너 기반으로 리액트 프로젝트를 해보는 강의도 있어서 좋았다.React v18 에 제일 큰 변화는 향상된 automation batching 과 Suspense 가 SSR도 지원하여 Streaming HTML 이 아닐까 생각한다. SSR은 데이터가 다 준비가 되고 렌더링이 될 때까지 기다려야 한다. 하지만 리액트팀은 이러한 부분을 개선하여 UX를 향상 시켰다. 해당 스터디를 참여를 해야하나 조금 고민을 했었다. 혼자서 공부가 가능한 내용들이기 때문이었는데 결론적으로는 참여하길 잘 했다고 생각한다. 반 강제적이긴 하지만 과제들을 하면서 복기를 할 수 있었고 강의를 들으면서 내용을 다시 한번 흩어볼 수 있어서 유익한 시간이었다. 리액트 과제같은 경우에는 전부 TS 를 기반으로 작성 하였다. JS를 활용한 프론트엔드 또는 백엔드 개발에서 TS는 사실 이제 필수라고 생각한다. JS 자료형이 외부 도구에 의존을 해야 할 만큼 나쁜가? 라고 생각을 한다면 꼭 나쁘다고 단정 지을 수는 없다. 아무래도 동적 타이핑에서 발생하는 문제를 해결해주는 가치가 크기 때문이 아닐까 생각한다.동적 타이핑은 값이 할당 된 순간 타입이 결정이 되므로, 타입 관련 에러가 런타임 환경에 발생할 수 있다.동적 타이핑은 값이 할당 된 순간 타입이 결정이 되므로, 타입 관련 에러가 발생 했을 때 규모가 큰 프로젝트에서 이를 추적하기 어렵거나 예측하기 어렵다.위 문제를 해결하고자 우리는 TS 를 사용한다. 조기에 더 많은 오류를 포착해주기 때문이다. 그리고 정적 타이핑을 통한 코드 가독성이 향상 된다.(어떤 함수를 호출한다고 가정하면, 해당 인자가 어떤 타입인지 추론이 가능하기 때문이다)TS 를 사용함으로써 제일 큰 이점은 리팩토링이다. 예를 들어, API Response 명세가 바뀌었다고 가정하자. 프론트엔드단에서 이 명세에 맞게 모델을 바꿔야 할 거다. 해당 모델에 대한 타입이 정의가 되어있으므로 우리는 자신있게 이 부분을 리팩토링 할 수 있다.(틀리면 바로 에러로 알려주기 때문이다.)만약, 그냥 JS 환경이라면 실행이 잘 될수도 있고 놓친 부분이 있다면 런타임에서 에러가 발견이 될 거다. Angular 는 애초에 First party 로 TS 를 사용해 왔다.Vue, React 는 이후에 지원을 하기 시작했다. 이런거 보면, Angular 를 관리하는 구글이 선견지명이 있는거같다. 그렇지만, TS도 만능은 아니다.TSC 를 통해 나온 컴파일 결과물인 js 파일들을 확인해보면, TS 관련 코드들은 전부 사라져 있다. 결국에는 완벽하게 런타임 오류를 완전히 방지하지는 못한다. 그리고 TS를 사용하면 코드량이 증가하며 학습 비용이 발생하므로 이 부분도 프로젝트 규모의 따라 고민을 해보면 좋을 것 같다.(킹치만, 사용 안하면 너무 불안한걸?)

인프런 워밍업 클럽 스터디 1기 FE - 2주차 발자국

2주차는 드디어 본격적으로 리액트와 Next.js 를 하는 주간이었다! useState()useEffect()useLayoutEffect()useRef()useMemo()useCallback()useContext()useReducer()등에 다양한 훅을 복습 하였다. 리액트 훅은 16.8 에 추가가된 기능이다. 등장하면서, 클래스 컴포넌트의 시대는 저물었다. 리액트 훅 함수는 반드시 함수 컴포넌트에서만 사용해야만 한다.리액트 훅은 조건에 또는 반복문에 따라 호출이 되면 안된다.useState() 는 함수 컴포넌트내에서 상태를 관리하는 훅이다.useEffect(), useLayoutEffect 는 함수 생명주기에 대응하는 훅이다.2번째 인자로 배열을 가지는(의존성 배열) 훅들은 사용할 때 항상 주의해야한다. -> 안그러면 클로저로 인해 이전 값을 계속 참조한다.useEffect() 훅은 함수 컴포넌트가 반환하는 JSX 구문 즉 ReactElement 가 실제DOM에 렌더링 된 후 paint 후에 비동기로 동작하는 반면 useLayoutEffect() 훅은 동기적으로 페인트 이전에 실행이 된다. 리액트 함수 컴포넌트 생애주기는Render 단계와 Commit 단계로 나뉜다.Render 단계에서는 함수가 실행되어, JSX 를 반환한다. JSX 는 ReactElement 를 생성하는 함수로 변환이 되어 ReactElement 를 생성한다. 이걸 가지고 가상 DOM을 만든다. 이전에 만든 가상DOM이 있다면 이를 비교하는 작업을 한다.Commit 단계에서는 가상DOM을 실제 DOM에 반영한다. Next.js는 React 프레임워크를 기반으로 한 웹 개발 도구로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 최근에는 클라이언트 사이드 렌더링(CSR)과 같은 다양한 렌더링 방식을 지원합니다. 각 렌더링 방식에 대한 설명과 특징을 살펴보겠습니다. 서버 사이드 렌더링 (Server-Side Rendering, SSR)개념: SSR은 각 요청이 있을 때마다 서버에서 HTML을 동적으로 생성하여 클라이언트에게 전송하는 방식입니다. 이는 초기 페이지 로딩 시 서버에서 모든 페이지를 미리 렌더링하고, 완성된 HTML을 클라이언트에게 보내줍니다.장점: 검색 엔진 최적화(SEO)에 유리하고, 초기 로딩 시 사용자에게 완성된 페이지를 보여줄 수 있어 사용자 경험이 개선됩니다.단점: 서버 부하가 늘어날 수 있으며, 렌더링 시간이 길어질 수 있습니다.정적 사이트 생성 (Static Site Generation, SSG)개념: 빌드 시 모든 페이지를 미리 HTML로 변환하여 저장합니다. 사용자의 요청에 따라 미리 생성된 HTML 파일을 그대로 전송합니다.장점: 서버 부하가 감소하고, 빠른 로딩 속도를 제공합니다. 보안이 강화되며, CDN을 통한 쉬운 배포가 가능합니다.단점: 실시간 업데이트가 필요한 경우 적합하지 않을 수 있습니다. 사이트 빌드 시간이 길어질 수 있습니다.클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)개념: 초기 로딩에서는 기본적인 HTML과 JavaScript를 로드하고, 이후 모든 렌더링은 브라우저에서 JavaScript를 통해 이루어집니다.장점: 서버 부하가 줄어들고, 사용자 인터랙션에 따라 동적인 페이지 변화를 빠르게 구현할 수 있습니다.단점: 초기 로딩 시 필요한 자원이 많아져서 속도가 느려질 수 있으며, SEO에 불리할 수 있습니다.증분형 정적 재생(Incremental Static Regeneration, ISR)개념: ISR을 사용하면, 빌드 시 생성된 정적 페이지를 배포 후에도 필요에 따라 업데이트할 수 있습니다. 이는 특정 페이지를 새로운 데이터로 다시 생성하게 할 수 있는 옵션을 제공하여, 정적 사이트의 장점을 유지하면서도 동적 콘텐츠의 필요성을 충족시킬 수 있습니다. 장점성능과 캐싱: 정적 파일로 서빙되기 때문에 빠르고, CDN을 통해 캐싱될 수 있어 성능이 우수합니다.스케일링: 정적 파일을 사용하기 때문에 트래픽 증가에 따른 서버 부하가 적습니다.신선도: revalidate 옵션을 통해 정적 콘텐츠임에도 불구하고 일정 기간마다 콘텐츠를 자동으로 업데이트하여 최신 상태를 유지할 수 있습니다.단점복잡성: ISR 설정과 관리는 일반적인 SSG나 SSR에 비해 복잡할 수 있습니다.비용: 재생성 로직에 따라 추가 서버 자원이 필요할 수 있으며, 이로 인해 비용이 발생할 수 있습니다.Next.js 에서는 개발자를 위해 다양한 기능을 제공해 주고 있다.파일 기반 라우팅api 라우팅Image 최적화Metadata API등 다양해서 좋다. 그런데 프로젝트를 작성해나가다보면 예약어 파일들이 너무 많아져서 큰 회사들은 이걸 어떻게 관리하는지 궁금해진다.

인프런 워밍업 클럽 스터디 1기 FE 과제(13번 과제)

[13번 과제(Day13)-리덕스를 이용한 쇼핑몰 앱]따라하며 배우는 리액트 A-Z학습 범위: Section 9 ~ 10https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/redux-shopping과제 이미지gif 용량이 큰 관계로 스크린샷으로 대체 합니다.Next.js + TS + Tailwind CSS 를 사용했다.데이터 페칭은 Vercel SWR 라이브러리를 활용 하였다. 실제 상품 전체보기에는 무한 스크롤링이 구현이 되어있다.cva, clsx, twMerge 를 통해서 Tailwind CSS 를 사용하면서 조건부로 Tailwind CSS 제어가 가능한 컴포넌트를 작성 하였다.당연히 Next.js 최신 버전이기에, app router 방식으로 작성 하였다. 기본적으로 app 폴더에 있는 컴포넌트는 RSC 다. 서버에서 동작하는 컴포넌트 이기에 훅이라던가 DOM API는 사용이 불가능하므로 주의해야 한다.RSC는 서버에서 동작하므로, 번들 사이즈를 줄일 수 있다는 이점이 있다. 그리고 장바구니 기능을 구현하고자 RTK를 사용하였다. slice 덕에 한 파일내에서 상태와 액션 리듀서를 관리하기가 너무 편리하다.

인프런 워밍업 클럽 스터디 1기 FE 과제(10번 과제)

[10번 과제(Day11)-포켓몬 도감 앱]따라하며 배우는 리액트 A-Z학습 범위: Section 6 ~ 7https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/pokemon-list과제 이미지힘들었다.poke API 는 HATEOAS 형태의 응답이 많다. 그래서 데이터 페칭 해오면서 가공하는거에 주의해야한다.그리고 한번 불러온 데이터를 클라이언트에서 최대한 사용하는 구조로 사용하였다. 매번 커넥션 맺어서 API 호출하는것도 리소스 낭비이기 때문이다.컴포넌트 스타일링은 vanilla extract 모듈을 사용하였다. 기존 css-in-js 모듈들은 런타임 시점에 스타일을 적용해야한다. CSSOM 을 조작하니 당연히 서버사이드 렌더링하는 Next.js 와도 궁합이 좋지 않다. + CSS 조작하는 코드가 생기기에 번들 사이즈도 커진다. 그래서 나온 대안이 zero-runtime 이다. 쉽게 생각하면, CSS 를 빌드 시점에 다 만들어 놓는거다.이번에 처음 사용해보았는데, 아직은 미숙해서 뭐가 좋았다라는 느낌은 없다.서버 상태 관리는 react-query 를 사용하였다.

인프런 워밍업 클럽 스터디 1기 FE 과제(9번 과제)

[9번 과제(Day10)-디즈니 플러스 앱]따라하며 배우는 리액트 A-Z학습 범위: Section 4 ~ 5https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/disney-plus과제 이미지gif 또는 webp 움짤을 올릴려고 했으나.. 용량 초과로 스크린샷 이미지로 올리겠습니다 :)768px 에서는 반응형 처리를 해뒀다.(초기 페이지만)vite + react + ts 를 사용하였다.스타일링은 module css 방식으로 작성하였다.처음에 나오는 페이지는 실제 디지니 플러스를 참조하여 반응형까지 구현이 되어있다.영화 정보는 TMDB API 를 활용하였다.로그인을 하여, 토큰을 받으면 이를 Context 에 저장하여 공유를 해주고 있다.Modal 은 Portal 을 사용하여 렌더링을 하고 있다.crousel UI 는 slick 을 사용하였다.(중간에 이미지가 비어있는건, API 에서 이미지 데이터가 없는 경우이니 무시해 주세요.)

인프런 워밍업 클럽 스터디 1기 FE - 1주차 발자국

인프런 워밍업 클럽이 스터디 1기 FE 를 시작한지 어느덧 1주차현재 과제 1~7까지 완료를 해놓은 상태다.음식 메뉴 앱가위 바위 보퀴즈책 리스트 나열Github Finder비밀번호 생성타이핑 테스트 과제들을 진행하면서, DOM API 에 대한 복기를 할 수 있어서 좋았다. 그리고 퀴즈 및 타이핑은 이런저런 로직을 고민하게 해줘서 좋았다. 퀴즈는 처음에 뭔가 가상의 데이터를 통해서 처리를 해야하는줄 알았다.(실제 현업에서는 DB에 문제은행식으로 관리하는걸로 알고 있다.)이걸 Math 객체를 생성하여 랜덤하게 문제와 정답을 생성하는 방식으로 처리하였다.Math.random() 함수는 0~1 사이의 난수를 발생 시킨다.(1은 포함하지 않는다)Math.random() * 10; 을 하게된다면 0~9까지의 난수를 얻을 수 있다. 이때 소수점 이하를 버려주면 정수값을 추출하는거다.그러면, 1~10까지를 얻고싶다면 어떻게 해야할까? 간단하다.min = 1;max = 10;(Math.random() * (max - min + 1) + min);max - min + 1 = 100 ~ 9 까지 난수를 얻을 수 있다. 그럼 여기에, 소수점 버린 정수에 min 을 더해주면?1~10 까지가 되는거다. 그리고 반복되는 UI 는 template 요소를 활용하여 처리 하였다. This is a template. It will not be rendered. template 요소는 렌더링 되지 않는다. 렌더링 하려면, JS로 무조건 조작을 해줘야 한다.물론 DOM Node 를 조작할 때, 원본 Node 에 영향을 끼치지 않으려면 cloneNode 또는 importNode 등으로 조작을 해줘야 한다. 마무리하며변수와 데이터 타입: 자바스크립트의 기본적인 변수 선언부터 시작하여, 다양한 데이터 타입(문자열, 숫자, 객체 등)을 배웠습니다.함수: 함수의 기본적인 선언 방법과 화살표 함수 등 최신 문법에 대해서도 배웠습니다.DOM 조작: HTML 요소를 자바스크립트를 통해 조작하는 방법을 배우고, 실제로 몇 가지 프로젝트를 통해 연습했습니다.비동기 처리: Promise, async/await를 통해 비동기 처리 방법을 배웠습니다. API 호출과 같은 작업을 처리하는 방법을 실습했습니다. null 과 undefined: 둘다 원시타입이다. 하지만 typeof 로 null 을 출력해보면 object 를 출력한다. 이는 JS 초기 설계 오류가 지금까지 이어져온것이며 웹 호환성을 위해 수정을 하지 않았다. 그러니 null 은 체크할때 이 특성을 기억해야 한다.자바스크립트 공부를 통해, 단순히 코드를 작성하는 것 이상의 귀중한 경험을 하였다. 문제 해결 능력, 창의적 사고, 그리고 끊임없는 학습의 중요성을 깨닫게 되었으며, 앞으로도 지속적으로 새로운 기술을 배우며 성장해 나갈 것이다.

인프런 워밍업 클럽 스터디 1기 FE 과제(8번 과제)

[8번 과제(Day9)-예산 계산기 앱]따라하며 배우는 리액트 A-Z학습 범위: Section 1 ~ 3https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/budget-calculator과제 이미지

인프런 워밍업 클럽 스터디 1기 FE 과제(4번, 5번, 6번, 7번 과제)

[4번 과제(Day5)-책 리스트 나열 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 5 ~ 6https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/list-books과제 이미지[5번 과제(Day5)-GitHub Finder 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 5 ~ 6https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/github-finder[6번 과제(Day6)-비밀번호 생성 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 7 ~ 8https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/password-creator[7번 과제(Day7)-타이핑 테스트 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 9https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/typing-speedgif 녹색이랑 빨간색이 좀 이상하게 나오는 겁니다 🙂 글작성 참조https://www.inflearn.com/blogs/6515

인프런 워밍업 클럽 스터디 1기 FE 과제(1번, 2번, 3번 과제)

[1번 과제(Day2)-음식 메뉴 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 1 ~ 3https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/food-menu과제 이미지 [2번 과제(Day3)-가위 바위 보 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 4(1~8)https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/rock-paper-scissors과제 이미지[3번 과제(Day4)-퀴즈 앱]따라하며 배우는 자바스크립트 A-Z학습 범위: Section 4(9~17)https://github.com/katanazero86/inflearn-warming-up-1-fe/tree/master/quiz과제 이미지- 다음 문제 넘어가면, next 버튼 숨겨지는부분 처리 되었습니다 :)글작성 참조https://www.inflearn.com/blogs/6515