엘리스 코딩
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
[TIL] 엘리스 SW 엔지니어 트랙 Day 071
2022.02.08📖 오늘 배운 내용 - 2022.01.29 폴더구조 결정 웹팩, 바벨 설정 공부 초기 CSS 세팅하기 (GlobalStyles, styled-reset, ThemeProvider) 📝 폴더구조 ├─public │ index.html │ ├─src │ │ App.js │ │ App.test.js │ │ index.js │ │ │ ├─assets │ │ │ ├─components │ │ └─Name │ │ idnex.js │ │ style.js │ │ │ ├─pages │ │ ├─page1 │ │ │ index.js │ │ │ style.js │ │ ├─page2 │ │ │ index.js │ │ │ style.js │ │ │ │ │ └─page3 │ │ index.js │ │ style.js │ │ │ └..
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
[TIL] 엘리스 SW 엔지니어 트랙 Day 070
2022.02.08📖 오늘 배운 내용 - 2022.01.28 피그마 작업 CRA 없이 리액트 보일러 플레이트 구성 연습 프론트엔드 오피스아워 💡 오늘 깨달은 것 오피스아워 때 api를 호출할 때의 성능 문제 해결방법으로 리액트 쿼리를 사용할 것을 추천해주셨다. 모바일 화면에서 창을 키워 데스크톱 화면으로 넘어가면서 모든 기능이 한 화면으로 들어간다면 라우터 부분에서 문제가 생길 수 있다는 말씀을 듣고 앱, 태블릿 사이즈만 구현하기로 결정했다. 타입스크립트 공부하면서 프로젝트에 도입하는 것을 추천하지 않는다. 제한된 시간 안에 플젝하기도 바쁜데 공부하는 것은... 시간이 부족하다..! 또는 일부만 TS를 도입해도 괜찮은 방법 중 하나다. 나중에 도입해도 늦지 않는다. CRA를 사용하면 웹팩이나 바벨 등을 커스텀하는데 제한적..
[TIL] 엘리스 SW 엔지니어 트랙 Day 069
[TIL] 엘리스 SW 엔지니어 트랙 Day 069
2022.01.28📖 오늘 배운 내용 - 2022.01.27 와이어 프레임 작업 💡 오늘 깨달은 것 오늘도 어제와 같이 와이어 프레임 작업을 이어나갔다. 만들면서 기능 구현에 대해서도 짧게 생각할 수 있었다. 그리고 React & TS 강의를 봤는데 어렵게 느껴지면 한없이 어렵고, 쉽게 사용하고자 하면 어렵지는 않다. 내일 와이어 프레임 작업 완료하고 CRA 없이 리액트 앱을 구성하는 부분을 볼 예정이다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 068
[TIL] 엘리스 SW 엔지니어 트랙 Day 068
2022.01.27📖 오늘 배운 내용 - 2022.01.26 와이어프레임 제작 💡 오늘 깨달은 것 피그마로 와이어프레임 제작했다. 이전에는 발사믹이랑 카카오 오븐을 통해 제작했는데 피그마는 처음 사용해봤다. 피그마 커뮤니티에 아이콘 등 자료가 많으며, 실제 구현할 화면의 아이콘, 색상 등 동일하게 작업할 수 있다는 점이 가장 좋았다. 와이어프레임을 작업하면서 앱의 동작을 이해할 수 있었고 기획을 더 구체화할 수 있었다. 또한, 구현 방법에 대해서도 생각할 수 있어서 좋았다.
[TIL] 엘리스 SW 엔지니어 트랙 Day 067
[TIL] 엘리스 SW 엔지니어 트랙 Day 067
2022.01.26📖 오늘 배운 내용 - 2022.01.25 프로젝트 안내 & 개발 코칭 프로젝트 1일 차(주제 및 기술 스택 선정) 📝 프로젝트 안내 & 개발 코칭 소통 능력 자신의 관점을 명확하고 논리 정연하게 설명하는 것 자신과의 다른 의견, 새로운 관점을 환영하고 더 나은 방향일 경우 겸허하게 수용 시간, 태스크 관리 능력 주어진 기한 내에 최대한의 퍼포먼스를 내기 위해서는 선택과 집중 논리력 사용하는 기술 스택과 코드의 작성 방식에는 논리가 필요, 왜 이 기술 스택인지, 왜 이런 코드 구성인지를 논리적으로 설명할 수 있어야 한다. 학습 능력 근본이 되는 언어 기본기와 문제 해결 능력을 갖추고, 개발 과정에서 추가적으로 필요한 기술 스택, 언어가 생긴 경우, 짧은 시간 내에 스스로 배울 수 있어야 한다. 💡 오늘 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 066
[TIL] 엘리스 SW 엔지니어 트랙 Day 066
2022.01.25📖 오늘 배운 내용 - 2022.01.22 styled-components 페이지네이션 - offset 방식 📝 재사용한 스타일을 커스텀하기 import styled, { css } from "styled-components"; export const Container = styled.div` background-color: white; border: 1px solid #f0f1f3; border-radius: 8px; width: 296px; height: 407px; box-sizing: border-box; padding: 28px 24px 20px; position: relative; display: flex; flex-direction: column; ${props => props.large &..
[TIL] 엘리스 SW 엔지니어 트랙 Day 065
[TIL] 엘리스 SW 엔지니어 트랙 Day 065
2022.01.22📖 오늘 배운 내용 - 2022.01.21 styled component SCSS in styled component 📝 인접 요소 연산자(Adjacent sibling combinator) [CSS] 인접 요소 연산자(Adjacent sibling combinator) 🎯 인접 요소 연산자(Adjacent sibling combinator) One Two! Three li:first-of-type + li { color: red; } 📌 참고 Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN lakelouise.tistory.com 📝 SCSS in styled component const SCSSStyledDiv = styled.div`..
[TIL] 엘리스 SW 엔지니어 트랙 Day 064
[TIL] 엘리스 SW 엔지니어 트랙 Day 064
2022.01.20📖 오늘 배운 내용 - 2022.01.20 Proxying API Requests MUI CI/CD Heroku에서 배포 Firebase 📝 Proxying API Requests package.json에 "proxy": "http://localhost:3333" 추가 리액트는 자기가 해당 주소 값을 가지고 있지 않으면, proxy값을 확인하고 있다면 해당 주소로 요청을 보낸다. Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev 📝 MUI 📝 CI/CD CI ⇒ Continuous Integrat..
[TIL] 엘리스 SW 엔지니어 트랙 Day 063
[TIL] 엘리스 SW 엔지니어 트랙 Day 063
2022.01.19📖 오늘 배운 내용 - 2022.01.19 Server Side Rendering Client Side Rendering 성능 측정 키 메트릭 React를 활용한 Server Side Rendering React 앱 빌드와 배포 Azure를 사용한 VM 배포 Next.js 맛보기 📝 SSR과 CSR 차이점 [WEB] SSR과 CSR 차이점 🎯 SSR과 CSR 차이점 Server Side Rendering, Client Side Rendering에 대해 알아보자! 📝 Server Side Rendering 📕 Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹.. lakelouise.tistory.com 📝 성능 측정 키 메트릭 [WEB] 성..
[TIL] 엘리스 SW 엔지니어 트랙 Day 062
[TIL] 엘리스 SW 엔지니어 트랙 Day 062
2022.01.18📖 오늘 배운 내용 - 2022.01.18 json-server 리액트, 리덕스, 라우터를 사용한 프로젝트 복습 Development, Production의 차이 CI/CD 📝 json-server 개발 초기 api가 아직 안 나왔을 때 mock을 사용해서 작업할 수 있다. db.json 파일 만들어주고 사용할 데이터를 객체로 넣어주기 npx json-server --w db.json 실행 npx json-server --w db.json --port 3333(포트 번호) // db.json { "topics": [ { "title": "html5", "body": "html5 is ...", "id": 1 }, { "id": 2, "title": "css", "body": "css is..." }, {..
[TIL] 엘리스 SW 엔지니어 트랙 Day 061
[TIL] 엘리스 SW 엔지니어 트랙 Day 061
2022.01.17📖 오늘 배운 내용 - 2022.01.15 React 테스팅 jest react-testing-library 📝 React 테스팅 [React] React 테스팅 🎯 React 테스팅 📝 코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 코드를 리팩토 lakelouise.tistory.com 📝 jest [jest] jest란? 🎯 jest facebook에서 오픈소스화한 테스팅 프레임워크 assertion 함수들, test runner, mock 라이브러리 등을 모두 제공한다. create-react-app에서 기본적으로 사용된다. (npm test) 사용성이 좋고, 가장 인기.. lakelouise...
[TIL] 엘리스 SW 엔지니어 트랙 Day 060
[TIL] 엘리스 SW 엔지니어 트랙 Day 060
2022.01.17📖 오늘 배운 내용 - 2022.01.14 Redux React Redux redux-toolkit 📝 Redux 데이터 흐름 [Redux] 리덕스 데이터 흐름 🎯 Redux 데이터 흐름 📝 Redux 데이터 흐름 애플리케이션의 상태를 바꾸는 유일한 방법은 스토어를 통해 액션을 디스패치 하는 것뿐이다. 스토어에는 액션을 인자로 받는 디스패치라는 메서드가 lakelouise.tistory.com 📝 Redux 소개 [Redux] 리덕스란? 🎯 리덕스 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 Redux의 많은 개념들이 Flux pattern에서 차용되었다, 주로 React 앱과 같이 사용한다. redux.js.org에서 수많은 문서를 참고할 수 있고, 웹상에 lakelouise.tistory.com 📝..