뭘 배웠지?

엘리스 SW 엔지니어 트랙 71일차 팀 프로젝트 6일차 설날 주간에 부트 캠프 방학이 있었다 🎊🎊🎊🎊🎊🥳🥳🥳🥳🥳🎉🎉🎉🎉🎉 방학 부트 캠프 시작 이래로 계속 달려온 것 같다 팀 프로젝트가 끝나면 부트 캠프도 종료된다 이후 어떻게 움직일지에 대해 계획도 세우고, 오랜만에 한 숨 돌릴 수 있는 주간이었다 2주간의 팀 프로젝트 불태우기 시작! 오늘은 각 페이지에 프론트 1명, 백엔드 1명이 같이 개발하기로 정했다 프론트엔드 코스라 백엔드 하시는 파트너분도 프론트 정답게 한다 그렇다곤 하지만 맡은 페이지에 오픈 데이터 API를 사용하기에 어떻게 하면 더 효과적으로 사용할 수 있을까에 대해 의견을 나눴다 개발에 들어가서 처음부터 컴포넌트를 딱딱 나누고, 재사용되는 코드를 묶고, styled-components를 고..

엘리스 SW 엔지니어 트랙 70일차 팀 프로젝트 5일차 기획 발표 준비 내일 있을 기획 발표를 위해 기획을 전체적으로 돌아본다 페이지도 많고, 기능도 짧은 기간에 구현하기에 조금 많네 기획의 목적 그리고 유저가 왜 사이트를 사용할까 생각해서 기능의 우선 순위를 정했다 1차 2차 3차 그리고 추가로 구분해서 일정을 정하고 안전장치를 마련하면 될 것 같다 개발 준비 사용될 기술에 대해 다큐먼트를 읽어보는 시간을 가지려고 한다 개인적으로 styled componenets 그리고 하단 참고 링크 리액트 리팩토링를 통해 리액트 작성법을 엿보자 팀 미팅외에도 여러 미팅(오피스 아워, 커리어 빌드업) 있는 날이라 조급하지 않고 여유롭게 오늘을 가져가자 컴포넌트 내가 맡은 페이지를 이렇게 개발하려고 한다 1. 페이지를..

엘리스 SW 엔지니어 트랙 69일차 팀 프로젝트 4일차 스크럼으로 시작 어제 할 일에 대해 역할 분담을 했고 각자 한 일을 공유하고 피드백으로 회의를 시작 프론트 폴더 구조, Git Flow, 상태 관리, 개발 일정 등 생각과 다르게 비교적 가볍게 의견을 교환을 했고 오후에 현업 코치님께 여쭤보기로 했다 드는 생각은 조금 더 시간을 투자해서 왜 필요한지, 어떻게 하는게 좋을지 생각과 토론의 시간을 가지고 우리 팀이 생각한 일리있는 아이디어를 가져가도 좋았을 것 같다 온라인으로 짧은 시간에 진행되는 프로젝트고 개발을 배우러 모인 우리는 개발자적(?) 사고로 기울다 보니 그럴 수 있을 것 같다 엘리스 끝나고도 온라인으로 진행되는 일들이 분명 많을텐데 타인을 배려하면서, 생각들을 자유롭게 펼칠 수 있고, 피드..

엘리스 SW 엔지니어 트랙 68일차 팀 프로젝트 3일차 기획의 날 2 기본적인 기획은 나오고 100% 이해는 아니지만 전체적으로 어떤 것을 만드는지에 대한 감을 잡은 것 같은 상황에서 역할 분담을 했다 디자인, 기획 확립, DB 구조, 개발 셋팅, 로고 등 각자 지금까지 기획에 이해한 내용으로 만들고 피드백을 주고 받는 것이 내일까지 이뤄질 내용이다 아마도 빠르면 내일부터 코드를 볼 수 있지 않을까 하는 예상 포스트 쓰는 것을 깜빡해서 포스트 내용이 짧은 오늘

엘리스 SW 엔지니어 트랙 67일차 팀 프로젝트 2일차 기획의 날 방향을 어디로 잡을지에 대한 의견 교류 페이지 구성, 기능 등 여럿이 모여 정하는게 쉬운일이 아니지만 이 단계에서 기획과 디자인을 골똘히 생각해 놓으면 개발할 때 분명 수월하게 진행되겠지 팀원 분들과 1차 프로젝트에서 잘된 것, 생각만큼 안흘러 갔던 것을 이야기 나누며 기획을 해나갔다 오늘은 페이지 구성하고, 페이지별 기능을 구성하고 피그마로 각 페이지별 레이아웃을 구성했다 이제는 메인 색상을 정하고, 레이아웃, 디자인 통일을 시키고 MVP와 일정 등 기획 단계를 마무리하면 개발로 넘어가지 않을까 싶다 개발전에 확인해볼 것 https://nextjs.org/ https://techblog.woowahan.com/2553/ SSR, CSR ..

엘리스 SW 엔지니어 트랙 65일차 온라인 강의날 마지막 온라인 강의 엘리스에서 하는 마지막 온라인 강의다 짧은 시간에 많은 내용을 살펴볼 수 있어 좋았다 원하는/필요한 내용을 추리고 강화시키자 다음주부터 팀프로젝트가 시작된다 React를 팀 단위로 사용해볼 수 있는 기회다 한 가지 컨텐츠 아이디어로는 복습 하면서 정리를 다시하고, 배운 내용과 순서를 공유하는 것 그럼 혼자 공부하는 사람들에게 약간의 길잡이가 될 수 있지 않을까 싶다 styled components 실습 오늘은 React UI에 대한 듀토리얼이고 styled components로 만드는 실습을 한다 styled components는 아직 강의만 들은거라 스타일과 프로그래밍 코드를 같이 적는 것이 익숙치 않지만 좋은점들이 보인다 props..

엘리스 SW 엔지니어 트랙 64일차 온라인 강의날 CSS Module class, id 등에 랜덤 문자열(hash) 달아 준다 CSS Module 사용 예시 app.module.css .title { font-size: 2.5ream; color: palevioletred; } App.jsx import styles from "./app.module.css" export default function App() { return ( Hello World ) } UI 프레임워크 이미 만들어져 쉽게 쓰기에 좋다 해당 프레임워크 디자인 벗어나기 쉽지 않다 컴포넌트 커스터마이징 어렵다 Ant Design, material UL 등 Ant Design 사용 예시 import "antd/dist/antd.css" i..

엘리스 SW 엔지니어 트랙 63일차 마지막 실시간 강의날 React, Redux, Router 실습 저번주 Create에 이어서 실습 시작 node modules Github에서 받은 것에 node modules 없다 npm install 하면 package.json에 맞춰서 node_modules 만들어준다 npm install MUI: Material UI React 라이브러리 컴포넌트 가지고 스타일 Material UI는 컴포넌트들으 가져다 쓰면 되고 Tailwind CSS는 컴포넌트를 만들어 주게 도와주는 것처럼 보인다 신기한 기능 전자 음성 speechSynthesis.speak(new SpeechSynthesisUtterance('축하합니다. 화이팅. 고마웠어요 ')); Firebase Baa..

엘리스 SW 엔지니어 트랙 62일차 온라인 강의날 SSR Server Side Rendering CSR의 한계를 SSR로 함께 처리 가능 (CSR 한계: SEO, 페이지 로딩) 서버에서 자바스크립트 이용해서 페이지 미리 빌드 API 요청, routing, redux store 생성 등 처리 클라이언트는 빌드된 페이지, 자바스크립트 받아서 웹앱을 CSR처럼 동작하게 한다 이런 방법을 Universal Rendering 이라고도 한다 웹 퍼포먼스 웹 페이지 로드되고 유저와 상호작용 하는 것들 측정 성능 측정으로 사용성 개선 가능 좋은 UX만들 수 있다 성능 측정 키 메트릭 Time To First Byte(TTFB) 페이지 요청 후 처음 데이터 도착하기까지 걸리는 시간 First Contentful Pain..

엘리스 SW 엔지니어 트랙 61일차 실시간 강의날 프로젝트 대비 git 복습으로 시작 json-server 간단한 앱에 사용 가능한 json-server RESTFul API 서버와 클라이언트가 통신할 때 사용하는 최고의 예시 HTTP이 주는 프로토콜을 최대한 잘 활용하자 전체를 바꾸는 PUT 부분만 바꾸는 PATCH React에서 Redux 사용 이 방법을 알아야겠다. CRUD를 할 수 있고, 데이터를 가져오고 보내고, 저장까지 한다면 왠만한 것들을 다 만들 수 있지 않을까? Development | Producttion Development 디버깅 및 개발 환경에 포커스 디버깅 기능이 있어서 느리다 Production 실제 배포 프로덕션으로 만들기 npm run build 이걸로 build, 프로덕션..