D.evelop/Projects6 [Team project] 🍿MEGAFOX 🎞 - 회고 MEGAFOX 팀 프로젝트 📆 진행 기간 2021.10.18 ~ 2021.10.29 💻 기술 Front-end View : React Build Tool : Create React App Library : react-router-dom Styled Components (with css3, sass) Code Quality Tool : ESLint, Prettier Back-end Python, Django, MySQL Infrastructure : AWS 🖇 사용 협업 툴 VCS : Git & Github Communication : Slack Task Management : Trello 🦊 팀원별 역할 Front-end github 공통 CRA 초기 세팅 강단 header(Nav, 유저 정보 등 확인 .. 2021. 10. 31. [Team project] 🍿MEGAFOX 🎞 - 초기세팅 1. CRA 설치 // 1. Desktop - 프로젝트 생성할 폴더로 진입 cd Desktop/wecode // 2. 프로젝트 설치 npx create-react-app westagram-react // 3. 프로젝트 진입 cd westagram-react // 4. 로컬 서버 띄우기 npm start 2. 불필요한 파일 삭제 3. react-router 라이브러리 설치 npm install react-router-dom --save 4. node-sass 모듈 설치 후 제거 - 이번엔 styled-components 사용 할 것 npm install node-sass@4.14.1 --save npm uninstall node-sass 5. styled-components 모듈 설치 (styled-com.. 2021. 10. 18. [Team project] ⚾️BBADDA 💢 - 회고 기존 MLB korea 사이트를 프론트엔드는 React를 백엔드는 Django/Python를 사용해 재구성해보았습니다. BBADDA 팀 프로젝트 📆 진행 기간 2021.10.05 ~ 2021.10.15 💻 기술 Front-end View : React Build Tool : Create React App Library : react-router-dom Code Quality Tool : ESLint, Prettier Sass Back-end Python, Django, MySQL Infrastructure : AWS 🖇 협업 툴 VCS : Git & Github Communication : Slack Task Management : Trello ⚾️ 팀원별 역할 Front-end github 공통 CRA.. 2021. 10. 18. [clone project]Danstagram - js (Main page) 첫 클론 프로젝트 Danstagram★ [메인 페이지 - 필수 구현사항] 댓글 작성 후 '엔터키'를 누르거나, '게시'를 클릭하면 댓글 추가 ✔️ 세 번째 버전 (Refactoring 후) - 소요시간 약 2.5h "use strict"; const postComment = document.getElementById('post'); const inputComment = document.getElementById('newComment'); const btnComment = document.getElementById('btnPost'); // 새 코멘트 값 체크 function checkComment(){ if(inputComment.value.length > 0){ addComment(inputCommen.. 2021. 9. 13. [clone project]Danstagram - js (Login page) 첫 클론 프로젝트 Danstagram★ [로그인 페이지 - 필수 구현 사항] id, pw에 각각 한글자 이상 입력되어야 버튼이 활성화 되도록 하기. ✔️ 첫 번째 버전 ( Refactoring 전) - 소요시간 약 1h const isId = document.getElementById('user_id'); const isPw = document.getElementById('user_pw'); const letsLogin = document.getElementById('btn_login'); // id에 키업 때 한 글자 이상 있는지 체크 // pw에 키업 때 한 글자 이상 있는지 체크 // 두 다 글자 있는지 체크 // 둘 다 한 글자 이상 있으면 login버튼 active // 둘 중 하나 비었으면 있.. 2021. 9. 12. [clone project]Danstagram - html, css 첫 클론 프로젝트 Danstagram★ 먼저 clone을 하기에 앞서 내가 이 프로젝트에서 무엇을 얻어갈 것인가에 대한 리스트 업을 했다. ✅ 우선 순위 html - 시멘틱 구성 : 왜? 그 위치, 그 태그를 사용했는지 고민하며 작성하기 css - flex속성 능숙하게 사용하기 css- float:left에 대한 의존도 줄이기 ☓☓ 우선 순위 아닌 것 (= 시선 뺐기지 말 것 제발..) 반응형 욕구 "똑.같.이"의 구현의 집착 (픽셀 크기 , 폰트 스타일 등) common - css @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); *{ box-sizing:border-box; margin:0; padding:0; .. 2021. 9. 12. 이전 1 다음
