본문 바로가기

[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹

[유데미x스나이퍼팩토리] 10주 프로젝트 캠프 솔직한 후기와 회고.
[부트캠프] IT 코딩 부트캠프 후기/[웅진씽크빅X유데미] 스나이퍼 팩토리 🤹 2023. 11. 3. [유데미x스나이퍼팩토리] 10주 프로젝트 캠프 솔직한 후기와 회고. 프로젝트 캠프가 끝난 당일 날까지도 얼마나 썼다 지웠다 하면서 후기를 남기기를 고민했는지 모른다. 이유는 다음과 같다. 1) 자세한 사항까지 적었을 때, 내 팀원등에 돌아올 수 있는 혹시 모를 불이익 2) 그 당시에는 감정이 격해져서 객관적이기 어려웠던 점 3) 특정 회사를 비난하지 않고, 최대한 이해해보려고 기다린 점 내 다이어리에만 살짝 적었던 내용을 3개월이 지나서야 객관적으로 회고 겸 후기를 적어보려고 한다. 우선 내가 유데미 웅진씽크빅 캠프에 지원한 이유는, 처음 코딩을 시작할 때 타 회사와 연계한 유데미 캠프에 신청했다가 광탈(!)한 경험이 있어, 이를 실패에서 성공으로 바꾸기 위해서였다. 그 김에 겸사겸사 캠프에 들어가 인턴 경험까지 쌓으면 최고의 결과이니, Best is Best! 하며 지..
[유데미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이면 챌린..

티스토리툴바