본문 바로가기

Alice53

[ 엘리스 SW 엔지니어 트랙 ] 62일차 📍 62일 차 1.19. 수. 온라인 강의 오늘은 SSR과 CSR, 간단하게 Next.js를 사용하는 법에 대해서 배웠다. 이전에 병과 테스트 프로젝트를 react로 구현하면서 SSR에 대해서 관심이 생겼는데 이번에 깊게는 아니어도 작동하는 원리, 간단한 예제 등을 배울 수 있어서 좋았다. ❏ Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드 클라이언트는 별도의 처리 없이 웹페이지 노출 이를, Server Rendering 이라고 함 ❏ Client Side Rendering Ajax 등의 기술, 자바스크립트 프레임워크를 활용하여, 데이터를 받아 자바스크립트로 페이지를 동적으로 만들 수 있게 됨(XM.. 2022. 1. 19.
[ 엘리스 SW 엔지니어 트랙 ] 61일차(13주차: React Ⅳ - SSR, CSR, 배포, CI-CD, Nginx, web-hook, styled-components) 📍 61일 차 1.18. 화. 실시간 강의 이번 주가 마지막 정규 수업이고 다음 주부터 교육과정이 종료되는 주까지는 2차 프로젝트 기간으로 진행된다. 벌써 교육을 들은 지도 4개월이 되어간다니... 시간이 참 빠른 것 같다. 엘리스 교육을 들으며 프런트부터 백엔드까지 네트워크 통신에 대해 대략적인 큰 틀과 프론트엔드에서 사용하는 언어, 프레임워크 등 다양한 내용들을 배웠다. 참으로 도움이 많이 되었다. 교육이 끝날 때까지 열심히 공부해서 현업에서 함께 일하고 싶은 개발자가 되고 싶다. 그럼 SSR, CSR, style-components, 배포에 대해서 배워보자. 덧붙여 오늘은 json-server, github-action, CI-CD, webhook, nginx에 대해서도 배웠다. ❏ 이론 강의 de.. 2022. 1. 18.
[ 엘리스 SW 엔지니어 트랙 ] 60일차 📍 60일 차 1.15. 토. 온라인 강의 오늘은 testing, jest에 대해서 배웠다. 취업 공고를 보다 보면 jest도 사용 스택에 포함되어있는것을 많이 봤는데, 언제 공부하나 이런 생각이 들었다. 이번을 계기로 test와 많이 친해지고, jest도 많이 다뤄야 겠다는 생각이 들었다. ❏ React 테스팅 코드 테스트가 필요한 경우 1. 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 함 2. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 함 3. 코드를 리팩토링하면, 원래대로 동작하는지 테스트함 4. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아짐 5. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있음.. 2022. 1. 17.
[ 엘리스 SW 엔지니어 트랙 ] 58일차 📍 58일 차 1.13. 목. 실시간 강의 오늘은 기존에 vanilla JS를 연동하여 redux로 상태관리를 진행한 것에 이어서 react로 redux, react-redux 라이브러리를 사용하여 상태 관리하는 법을 배웠다. 실습을 위주로 강의를 진행했기 때문에 글로 남길만한 내용이 별로 없다. 그리고 마지막에는 test 코드 작성하는 법을 배웠는데, 이 과정은 내일이나 내일모레 이론강의 수강 이후에 작성하겠다. ❏ 리덕스의 3가지 규칙 단일 스토어: 나의 애플리케이션 안에는 하나의 스토어가 들어가있다. 여러 개의 스토어를 사용할 수 있지만 상태 관리가 복잡해질 수 있으므로 권장하지 않는다. 읽기 전용 상태: 리덕스 상태는 읽기 전용이다. 리덕스의 상태를 업데이트할때는 기존의 객체는 건드리지 않고 새로.. 2022. 1. 13.
[ 엘리스 SW 엔지니어 트랙 ] 57일차 📍 57일 차 1. 12. 수. 온라인 강의 오늘은 상태관리를 중심으로 redux, contextAPI, prop drilling, MVC, Flux 패턴에 대해서 배웠다. MVC과 Flux패턴의 가장 큰 차이는 상태가 연속적으로 바뀌는지 여부인데, MVC 패턴에서 만약, view의 특정 값이 업데이트된다면, 해당 view를 관리하는 model이 업데이트되고 해당 model을 구독하는 view도 함께 업데이트되는 연쇄적인 모습이 일어난다. 만약에 앱의 사이즈가 클 때 이와 같은 연쇄적으로 동작하게 된다면 업데이트의 흐름을 따라가기 힘들다. 반면에 Flux는 하나의 Action이 하나의 update만을 만들도록 한다. (최종적으로는 데이터가 store에서 view로만 흐른다.) 이것의 장점은 업데이트가 한.. 2022. 1. 12.