까먹은 지식 437

69 :: 팀 프로젝트 4일차

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

Web Dev/ELICE 2022.01.28

68 :: 팀 프로젝트 3일차, 기획의 날 2

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

Web Dev/ELICE 2022.01.27

67 :: 팀 프로젝트 2일차, 기획의 날

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

Web Dev/ELICE 2022.01.26

66 :: 2차 팀프로젝트 시작, 개인 프로젝트 완성

엘리스 SW 엔지니어 트랙 66일차 팀 프로젝트 1일차 2차 팀 프로젝트 시작! 새로운 팀원, 새로운 아이디어를 모으는 첫 번째 날 목표는 한 가지 6명 모두 즐겁게 마무리할 수 있도록 어떤 주제건, 어떤 기술을 사용하든 뭐든 배운다 첫 날 회의는 역시 길었다 기획 단계라 이것 저것 다 정해야되니까 온라인으로만 하니까 답답한 것은 한 뭉치지만, 온라인이라 좋은 점도 많다. 오늘은 서비스 명, 목적 등 기본이 될 것들을 정했고, 내일부터 본격적으로 기획이 들어갈 것 같다 Wireframe과 Design 그리고 MVP, 일정에 맞게 기획을 가다듬으면 개발 시작이 되겠지 마침내 첫 리액트 프로젝트 개인 프로젝트 완성을 완성했다 리액트, 리액트 라우터 연습을 위해 만들었다 기능을 먼저 구현하고자 디자인, 기획에..

Web Dev/ELICE 2022.01.25

65 :: 마지막 온라인 강의, styled components, React에서 타입스크립트

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

Web Dev/ELICE 2022.01.22

64 :: CSS Module, UI, CSS 프레임워크, CS in JS

엘리스 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..

Web Dev/ELICE 2022.01.21

63 :: 마지막 실시간 강의, Material UI, Tailwind

엘리스 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..

Web Dev/ELICE 2022.01.20

62 :: SSR, 페이지 로드 방식, React 앱 배포

엘리스 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..

Web Dev/ELICE 2022.01.19

알고리즘 :: 그래프, 그래프 알고리즘, BFS, DFS

그래프 정점: 여러가지 특성을 가지는 객체 간선: 정점들 간의 관계 그래프 종류 무방향그래프: 정점간 방향이 없는 그래프 방향 그래프: 정점간 방향이 있는 그래프 그래프 특징 자기 자신을 향하는 간선은 없다 중복된 간선은 없다 그래프 표현 방식 인접행렬 - 무방향 그래프 대각선 기준으로 대칭이다 가중치 없을 때 0, 1로 표현 인접행렬 - 무방향 그래프 feat. 가중치 가중치 있어서 가중치 인접행렬 - 방향 그래프 인접행렬 - 방향 그래프 feat 가중치 # 그래프 표시 # Dictionary graph = {0: {1: 5, 2: 1, 3: 1}, 2: {1: 4}, 3: {0: 3}} # List graph = [[0, 5, 1, 1], [0, 0, 0, 0], [0, 4, 0, 0], [3, 0,..

61 :: json-server, RESTFul API, Development, Production

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

Web Dev/ELICE 2022.01.18
728x90