본문 바로가기

IT개발캠프

[유데미x스나이퍼팩토리] DB설계 & 회의 내용 정리
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 7. 20. [유데미x스나이퍼팩토리] DB설계 & 회의 내용 정리 슬랙과 노션을 사용하여 남긴 회의록 및 DB설계 복습 🚩Repo Turbo Repo 모노레포 사용하기, 그 중에서 Turborepo 사용하기! 모노레포 사용이유 모노레포 적용부터 yarn berry까지 – 화해 블로그 | 기술 블로그 모노레포 적용부터 yarn berry까지 – 화해 블로그 | 기술 블로그 모노레포 적용부터 yarn berry까지 frontend 플랫폼에서 진행할 과제를 도출했습니다. 목표는 두 가지입니다. 1)모노레포 적용부터 yarn berry까지 빠른 실행력을 갖추면서 높은 퀄리티 결과물을 내는 blog-wp.hwahae.co.kr https://velog.io/@gu2144/Turborepo로-모노레포-개발-경험-넓혀보기 Turborepo로 모노레포 경험해보기 한달 전, 갑자기 회..
[유데미x스나이퍼팩토리] 사전 직무 교육 완료, 프로젝트 회의 회고
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 7. 14. [유데미x스나이퍼팩토리] 사전 직무 교육 완료, 프로젝트 회의 회고 일정들에 치여 살다가 오랜만에 작성하는 회고 우리팀이 맡게 된 기업연계 프로젝트 계획서 ▢ 프로젝트 개요 - 동영상 시청, 과제 제출, 커뮤니티 등의 기능을 각각 구현하여 웹기반 동영상 강의 LMS 시스템을 React를 활용하여 제작한다. ▢ 추진배경 및 목적 - 학습자의 학습진행도를 파악 - 웹기반 동영상 강의 LMS 시스템 ▢ 프로젝트 수행방법 - 개인별 역할 배인해 (팀장) : 프로젝트 개발 & 일정관리 한주연: 프로젝트 개발 정재빈: 프로젝트 개발 - 추진 일정 1주차: 프레임워크 학습 및 연구, 개발 기획 2주차 : 스프린트 데이 (기업 담당자 중간점검 및 피드백) 3주차 : 팀 프로젝트 중간 발표 및 선정 4주차 : 프로젝트 성과 발표회 ▢ 프로젝트 내용 - 4-2. 오픈소스 리액트 비디오 플..
[유데미x스나이퍼팩토리] 리액트 Hook 복습 & 에러해결
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 7. 5. [유데미x스나이퍼팩토리] 리액트 Hook 복습 & 에러해결 프론트엔드의 꽃인 React 중에서 Hooks를 복습하는 시간을 가졌다. 커스텀 hook - 여러 컴포넌트에서 공동퇸 로직 재사용을 위해 만들어진 함수 - 일반적으로 use 접두사 사용 - 즉 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다는 장점. 그런데 강의를 따라가던 중 에러가 났다. Expected an assignment or function call and instead saw an expression no-unused-expressions [React 99% 에러잡기] Expected an assignment or function call and instead saw an expression no-unused-expressions 나는 몰랐다. 이..
[유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (2)
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 25. [유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (2) 이번주에는 Java Script를 이용하여 다양한 서비스를 만들어 보고 있다. 1. vanilla js로 할 일 목록 만들기 먼저 html, css, js로 각각 파일을 만든 다음에 진행하였다. // HTML 요소 가져오기 const completeAllBtn = document.querySelector(".complete-all-btn"); const todoInput = document.querySelector(".todo-input"); const todoList = document.querySelector(".todo-list"); const leftItems = document.querySelector(".left-items"); const showAllBtn = document.querySel..
[유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (1)
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 23. [유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (1) 01. vanilla js로 배경이미지 랜덤 변경 : 카리나 & img의 주소를 가져와서 출력 👈 👉 02. vanilla js로 인사 만들기 Hello, What's your Name? 03. vanilla js로 시계 만들기 (실시간) 참고 Momentum Replace new tab page with a personal dashboard to help you get focused, stay organized, and keep motivated to achieve your goals. chrome.google.com ​ ​ ✍️TIL 후기 적절한 이미지를 찾고, 화면 배치를 신경 쓰는 것은 오히려 즐겁고 재미있다. 다만 돌아가는 구성 원리에 대해 더욱 잘 파악하고 알아야 진짜 개발자이기에 이 부분을 ..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : React 기초 & 간단한 실습
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 23. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : React 기초 & 간단한 실습 React 배우기에 앞서, 기초 명령어 알고 가기 명령어 & 실행내용 npm init package.json 설치 npm install {모듈이름} 모듈 생성 npm uninstall {모듈이름} 모듈 삭제 npm update {모듈이름} 모듈 업데이트 npm ls 설치된 패키지 조회 npm start 로컬 서버 실행 npx create-react-app {app 이름} react 어플리케이션 생성 숙지했다면 다음으로, html에 React 연습하기 이때 코드가 점점 길어지고, 반복되고... = 불편함! useState 사용하기 props : 재활용 바꾸고자 하는 속성을 전달하여 사용 -> 재활용가능 간단한 예제 객체 비구조화 할당 원래는 props.name을 써야하지만 중괄호를 활용하여 {name}만 ..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : JS 기초
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 16. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : JS 기초 금요일에는 HTML에 이어 JS를 공부했다. 기존에 알던 개념 + 복습의 개념이 강했고, JS의 필요성 그리고 바닐라 JS를 이용하기 위해 다양한 실습이 준비되어 있었다. 🚩개념 정리하기 ES6부터 사용가능한 '템플릿 리터럴' 템플릿 리터럴(Template Literal) 구조분해 할당 생애 첫 프로젝트를 들어가면서 props를 전달하는게 너무 어려웠다🤦‍♀️ 로그인과 회원가입에 쓰이는 버튼과 상품 상세 페이지에 버튼 스타일은 똑같아서 Component 하고 width 값만 props로 받으 velog.io 객체 비구조화 할당 객체 비구조화 할당은 ES6에서 추가되었다. 1. 객체 비구조화 할당은 객체구조분해 라고도 한다. 2. 객체 비구조화 할당은 짧고 보기좋게 코드 작성이 가능하다. 3. 객체 안에 ..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : HTML 기초 & 과제
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 14. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : HTML 기초 & 과제 프론트엔드 오프라인 1일차! 오랜만에 HTML 복습하기 HTML5 - 시멘틱 태그 : CSS를 입히지 않은 상태에서도 내용이 잘 읽혀야 함 - 상품화를 하기 위해 SEO가 중요함 FORM 태그 체크박스 : 여러개 radio : 하나만 체킹 가능 1. HTML 제목은 ~ 태그로 정의됩니다. 은 가장 중요한 제목을, 은 가장 중요하지 않은 제목을 정의합니다. This is Heading 1 This is Heading 2 This is Heading 3 This is Heading 4 2. 단락은 태그로 정의됩니다 . This is a paragraph. This is another paragraph. This is another paragraph. 3. 링크는 태..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : 아이디어 스케치
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 11. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : 아이디어 스케치 PM : 스케치란 무엇인가? 아이디어 스케치용 참고자료 블로터 블로터- 가치있는 기술·자본시장 정보제공, 인터넷 경제종합미디어 www.bloter.net SlideShare.net Discover, Share, and Present presentations and infographics with the world’s largest professional content sharing community. www.slideshare.net 🚩아이디어 스케치 : 80%를 20%의 현실로 만드는 것 🌟스케치의 장점 시간절약 : 공상을 현실적 밑그림으로 만든다. → 아이디어, 테이블설계, 의사전달 큰 구조파악 : 전체스토리를 알 수 있음 대>중>소 → 개념정립, 전략과 전술 스토리텔링 : 진행과정의 스토리를 파악할..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : Git & GitHub
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 9. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : Git & GitHub 오늘은 너무도 중요하게 잘 활용하는 git에 대한 강의와 실습을 하였다. Git이란 ? 파일의 히스토리(변경사항)를 관리(추적)해주는 시스템 = 히스토리를 쌓아줌 이러한 파일 히스토리를 관리해야하는 이유? ex. 장애가 났을 때 그 전의 상태로 돌아가기 쉬움 Github란 클라우드 기반의 Git 저장소(Git이 관리하는 파일들) 호스팅 서비스 : 우리의 소스코드를 클라우드 서비스에 올려주는 것 Github 사용 이유 - 소스가 날라갔을때, 쉽게 받기 - 여러 명과 소스코드 공유 Repository (저장소) - Git으로 관리하는 프로젝트 폴더 우리가 폴더를 생성한다고 Git이 단순하게 변경사항을 추적해주지는 않음 🚩초기화 과정을 거쳐서 Git의 감시하에 넣어야 함 이러한 초기화 과정을 거치고나면 그것을..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 DAY3 : UML과 플로우 차트
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 9. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 DAY3 : UML과 플로우 차트 지난 시간 배웠던 UML을 통해 플로우 차트를 그려보기. 플로우차트란 무엇인가? (흐름도, 순서도) / 기호 설명과 그리는 방법, 주의사항 (알고리즘, Algorit 플로우차트란? 플로우차트(Flowchart)는 순서도, 흐름도라고도 한다. 순서도는 어떠한 일을 처리하는 과정... blog.naver.com 액티비티 다이어그램 (활동 다이어그램)이란? : 시스템의 실행과 행위의 흐름을 표현 비즈니스 프로세스 또는 작업에서 이용하는 고객의 흐름을 표현 간단한 시나리오 작성하기 고객 : 회원가입 > admin : 회원관리 > y or n y이면 다음 프로세스 / n이면 alert "다시 로그인해주세요" y이면 미션 page > 미션 확인 or 미션 수정 삭제 > db에서는 미션 저장할지 여부결정 y이면 챌린..
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 DAY2
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 6. 8. [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 DAY2 웅진씽크빅 X 유데미 2일차 시작! UML이란? : Unified Modeling Language로, 복잡한 사람들의 사고와 생각을 표현하는 도구이다. 구축에 대한 소프트웨어, 프로그래밍이 아닌 시스템 자체의 산출물의 역할을 시각화 하여 규정하는데 목적을 두고 있음 이런 과정을 통해 꼭 필요한 행위를 기반으로 한 객체 지향 모델링이 가능해졌다. UML에서 정의하는 모델링이란? : 어떠한 현상들을 단순화, 일반화, 추상화 하는 과정 장점 🚩 내부 구조나 동작하는 행위에 대한 표현의 자유 🚩 시스템의 구성 요소들이 서로 어떻게 연결되어 있는지 확인 가능 🚩 설계와 구현 간의 일관성 유지 🚩 레벨화 가능 🚩 명확한 의사 소통의 도구 UML은 이야기가 가능한 시각화 Tool 문제점을 해결하기 위해서는 규격화된 ..

티스토리툴바