까막눈코딩

1. 배경 유튜브 클론을 하기 위해 유튜브를 분석하던 중, Styled-Components의 존재에 대해 알게 되었다. CSS in JS가 가능해지는 CSS 프레임워크인데, 그렇지 않아도 코드가 길어지면 일반 CSS로는 가독성이 떨어진다고 생각했었는데 Styled-Components를 리액트와 함께 사용하면 컴포넌트별로 파일을 나눌 때, 한 파일 안에 HTML, CSS, JS가 모두 들어가 있게 되므로 가독성이 한층 좋아질 것 같아 이를 사용하기로 마음먹었다. 사용법을 이해하는데 시간이 걸려서 애를 먹었다. 2. 구조 먼저 최상단의 header 구조를 만들기로 했다. 컴포넌트 단위로 쪼개서 다음과 같이 폴더를 나누었다. 이를 다시 세분화하는 작업을 진행했는데, 가장 먼저 headerBtns를 다음과 같이..

Experience/[Clone YouTube] GyuTube 2021. 8. 5. 00:35

1. 배경 3월에 개발자로의 전향을 시작하여 5개월이 지났다. 국비지원 학원에 들어가기 전까지는 JS로 달력, 계산기, to-do 리스트 등의 간단한 프로그램을 만들어 보았다. 이후, 국비지원 학원에 들어가 6월 말에는 자바 콘솔 프로젝트로 도서 관리 시스템을, 7월 마지막주에는 팀 프로젝트로 학사 관리 프로그램을 제작했다. 학원에 들어가기 전에 만든 프로그램들은 단순한 기능을 가진 프로그램들이고, 학원에서 진행한 프로그램들은 불가피하게 현재는 잘 사용하지 않는 스택을 사용하여 만들었기 때문에(Java Swing과 같은..) 포트폴리오를 만들기에는 적합하지 않다고 생각되었다. 두 번의 소중한 협업 기회 중 하나를 포트폴리오에 쓰지 못하는 것은 아쉽지만 학원 수료 전에 취업하는 것을 목표로 하고 있기 때문..

Experience/[Clone YouTube] GyuTube 2021. 8. 3. 14:49

1. main branch repository를 개설하여 작업을 진행한다. master branch와 혼동이 생길 수 있으므로, 저장소를 생성한 직후에는 main만을 남겨두고 모든 master를 포함한 branch를 삭제해 둔다. main branch는 배포할 수 있는 상태의 코드, 즉 완성본만을 업로드할 예정이다. 2. develop branch 최초의 main branch를 clone한 develop branch를 생성했다. 이 branch는 각각의 기능이 merge되는 branch가 될 것이고, 이 branch에서 최종적으로 통합된 후에 main branch로 push될 것이다. 3. feature branch 작업을 진행할 때는, 나눈 기능별로 각자 로컬 저장소를 만든다. 이 때, 각자의 로컬 저..

Experience/[Java] Online Registraion 2021. 7. 25. 15:01

1. 개요 두더지 잡기 게임이다. 여섯개의 hole에서 무작위로 두더지가 등장했다가 사라지며, 이 속도 또한 랜덤이다. 두더지를 클릭하면 점수가 1씩 올라간다. 2. HTML Whack-a-mole! 0 Start! 3. CSS html { box-sizing: border-box; font-size: 10px; background: #ffc600; } *, *:before, *:after { box-sizing: inherit; } body { padding: 0; margin: 0; font-family: 'Amatic SC', cursive; } h1 { text-align: center; font-size: 10rem; line-height: 1; margin-bottom: 0; } .score ..

Experience/[Javascript] JS 30 2021. 5. 14. 14:50

1. 개요 카운트다운 기능을 만든다. 2. HTML 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 3. CSS html { box-sizing: border-box; font-size: 10px; background: #8E24AA; background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%); } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; text-align: center; font-family: 'Inconsolata', monospace; } .display__time-left { font-weight: 100; font-siz..

Experience/[Javascript] JS 30 2021. 5. 13. 14:22

1. 개요 공휴일을 표시하는 기능을 추가하고, 오늘 날짜를 표시했다. 2. CSS #holiday { color: #eb3b5a; } #today { background-color: #f78fb3; border-radius: 100%; height: 24px; width: 24px; margin: 10px calc(100%/7/2 - 12px - 10px); padding: 10px; } 공휴일의 색깔을 표시하기 위한 holiday id와 오늘 날짜를 표시하기 위한 today id의 내용이다. 이전 포스팅에서 토요일이 빨간색으로 덮어씌워지지 않는 이유는 자바스크립트의 문제가 아닌 css 적용 우선순위의 문제였다. holiday class와 :nth-child 수도클래스의 적용 우선순위가 같은데, 이 경우..

Experience/[Javascript] Calendar + To-do List 2021. 5. 13. 11:46

1. 개요 만들면서 포스팅 하는 것을 잊고 있었다. 다른 블로그를 참고해서 달력 기능을 구현했다. 2. HTML 2021.05.08 토요일 ✅ 2 Sun Mon Tue Wed Thu Fri Sat 날짜 자바스크립트로 달력 기능만 완성된 상태이나, to-do list도 일단 마크업은 해 두었다. 3. CSS /* 전체 레이아웃 */ body { display: flex; border: 2px solid #227093; border-radius: 4px; font-family: 'Anton', sans-serif; } .todo_conatiner, .calendar_container { width: 50% } /* to-do list 레이아웃 */ .todo_date { text-align: center; ..

Experience/[Javascript] Calendar + To-do List 2021. 5. 12. 23:16

1. 개요 마우스 이동으로 비디오 속도를 조절하는 기능이다. 2. HTML 1× 3. CSS body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #4C4C4C url('https://unsplash.it/1500/900?image=1021'); background-size: cover; font-family: sans-serif; } .wrapper { width: 850px; display: flex; } video { box-shadow: 0 0 1px 3px rgba(0,0,0,0.1); } .speed { background: #efefef; flex: ..

Experience/[Javascript] JS 30 2021. 5. 12. 13:58