본문 바로가기

Frontend/엘리스 SW 엔지니어 트랙87

[ 엘리스 SW 엔지니어 트랙 ] 선택강의 - React에서의 타입스크립트 📍 [선택강의] React에서의 타입 스크립트 이번 글은 필수로 들어야 하는 강의를 기록하기 위해 적는 글은 아니고 선택적으로 듣는 강의 중 React에서의 타입스크립트 강의를 기록으로 남겨 놓을까 한다. 그 이유는 이전부터 사용해왔지만 앞으로도 사용할 언어인 타입 스크립트와 프레임워크인 React기 때문이다. 그리고 지금까지 내가 작성한 코드를 어떻게 더 효율적이게 작성할 수 있을지에 대한 몇 가지의 샘플을 배울 수 있기 때문이다. 한 가지 예로 나는 이거 먹어봄? 프로젝트의 후속조치로 webpack과 babel를 직접 설정하는 간단한 예시(image-drag-and-drop)를 만들었으나, babel을 설정하기 위해 생각보다 많은 플러그인(npm i -D @babel/core @babel/preset.. 2022. 1. 24.
[ 엘리스 SW 엔지니어 트랙 ] 65일차 📍 65일 차 1.22. 토. 온라인 강의 오늘은 직접 React와 Styled-components를 이용해서 트랙카드, 탭, 검색창을 초기 UI로 구현하고 이후에는 실제 API를 연동하면서 검색창에서 검색 데이터를 가져오는 방법까지 응용하는 법을 배웠고, JS에서 TS로 마이그레이션 설정 방법에 대해서 배웠다. 앨리스 수강 전 한 스타트업에서 기술면접을 봤을 때 `TS`로 마이그레이션 하는 방법에 대해 질문을 받았을 때 제대로 대답을 하지 못했던 것이 생각났다. 이번에 배운 내용을 토대로 직접 JS파일을 TS 파일로 마이그레이션 해보는 과정을 겪어보며 잊지 말아야겠다는 생각을 했다. 또 CSS를 배울 때 position과 같은 내용을 직접 적용하려고 할 때 어려움이 많았는데 이번 실습을 보면서 posi.. 2022. 1. 23.
[ 엘리스 SW 엔지니어 트랙 ] 64일차 📍 64일 차 1.21. 금. 온라인 강의 오늘은 CSS Module, UI Framework, CSS framework, CSS-in-JS, Styled-components에 대해서 배우고 전반적인 사용 역사(?)에 대해서 배웠다. 기존에 사용하던 방식의 단점, 불편함 때문에 새로운 방식이 나왔고, 새로운 방식에서 생겨난 단점, 불편함을 통해 새로운 방식을 사용하고.. 이렇게 일련의 과정들을 배우니까 이해가 잘 됐다. 그리고 평소에 관심 있던 리팩토링에 대해서도 배웠는데 일련의 과정들을 보면서 리팩토링의 before / after를 보며 가독성이 어떻게 증가되었는지 한번 살펴보자. 마지막에는 figma의 조작법을 3가지정도만 작성했다. 한번 살펴보자. ❏ CSS Module 기존 CSS의 단점: 하나의.. 2022. 1. 21.
[ 엘리스 SW 엔지니어 트랙 ] 63일차(CI/CD, github actions, heroku, firebase) 📍 63일 차 1.20. 목. 실시간 강의 오늘은 화요일에 배웠던 CI/CD, github-actions, Heroku, 그리고 백엔드 서비스를 구축할 때 서버 인프라 구축을 쉽게 할 수 있도록 도와주는 firebase에 대해서 배웠다. 이 강의를 듣기 전에 CI/CD 관련한 내용을 봤을 때 저게 대체 왜 필요하지?라는 생각이 들었는데, 직접 해보니까 자동화 구축이 주는 효과는 굉장했다!! CI/CD를 배웠지만 여기서 그치지 않고 내가 직접 프로젝트를 만들 때 사용할 수 있을 정도까지 공부하고 싶다는 생각이 들었고 firebase가 무엇인지 배우면서 Authentication, NoSQL, Storage, Hoisting을 적용해보고 싶다는 생각이 들었다. 개념을 새로 배울 때마다 이론에서 그치지 않고 .. 2022. 1. 20.
[ 엘리스 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.

티스토리툴바