까막눈코딩

국비 학원 파이널 프로젝트가 얼마 남지 않아 조바심이 나서인지, 시간이 나면 코드를 붙잡고 있느라 블로그에 정리하는 것을 미루곤 한다. 무려 열흘 동안 밀린 코드 업데이트 사항을 작성하면서, 그 사이에 공부한 것들을 복습해야겠다. 1. Main Page const StyledPage = styled.div` position: absolute; width: 100%; `; const Main = () => { const videoData = VideoData.videos; return ( ); }; 먼저 메인 페이지에서, position을 absolute로 설정하여 StyledPage를 만들고 이것으로 컴포넌트들을 감쌌다. Header 부분의 position이 absolute로 설정되어 있어서, 스크롤 바..

Experience/[Clone YouTube] GyuTube 2021. 8. 30. 23:48

styled components를 이용해 컴포넌트별로 스타일을 하다 보니, 부모 자식 관계가 아님에도 반복해서 적용되는 동일한 스타일을 어떻게 처리해야 할지 고민하게 되었다. 이를 조사한 결과, 글로벌 스타일 파일을 하나 만들어 App.js에 적용해 주면 된다는 것을 알게 되었다. 1. GlobalIconStyle import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` .globalIconBtnRect { flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: 18px; color: hsl(0..

Experience/[Clone YouTube] GyuTube 2021. 8. 19. 00:01

메뉴 버튼을 누르면 나오는 히든 메뉴를 불러오는 기능을 구현했는데, 그 과정에서 무한 재귀가 발생해서 한참 애를 먹었다. 겨우 무한 재귀가 원인임을 파악하고... 이렇게 메뉴 버튼을 클릭하면 사이드의 메뉴가 나타나도록 코드를 짤 수 있었다. import React, { useState } from "react"; import styled from "styled-components"; import HeaderLogoMainLogo from "./headerLogoMainLogo/HeaderLogoMainLogo"; import HeaderLogoOpenMenu from "./headerLogoOpenMenu/HeaderLogoOpenMenu"; import HeaderLogoOpenHiddenMenu fr..

Experience/[Clone YouTube] GyuTube 2021. 8. 16. 23:46

리액트에서 페이지를 이동하는 방법을 찾다가 React Router에 대해 알게 되었다. 사실 이전에 강의를 들으며 Movie App을 만들 때 사용해 보기는 했으나... 잊고 있었다. import React from "react"; import { Route, BrowserRouter as Router } from "react-router-dom"; import Main from "./components/Main"; import Playing from "./components/routes/Playing"; const App = () => { return ( ); }; export default App; 우선 라우터를 사용하기 위해 App.js를 위와 같이 만들었다. 최대한 많은 페이지를 구현해 보고 싶은..

Experience/[Clone YouTube] GyuTube 2021. 8. 15. 20:21

작업을 진행하다보니 며칠동안 기록을 남기지 않았다. 틈틈이 기록을 이어나가야겠다. 1. Main Page import React from "react"; import ContentsBox from "./contentsComponent/ContentsBox"; import Header from "./headerComponents/Header"; import Navigator from "./navigatorComponents/Navigator"; import app from "../styles/app.css"; const Main = () => { return ( ); }; export default Main; 메인 화면에서는 Header, Navigator, ContentsBox 세 개의 컴포넌트를 불러올..

Experience/[Clone YouTube] GyuTube 2021. 8. 13. 10:22

1. Header & Navigator scr는 contens, header, navigator로 다시 나누어진다. 이전에 header의 일부를 마크업했다. 2. Header 얼추 비슷하게는 되고 있는 것 같다. 헤더만 봐도 복잡하다. 이렇게 컴포넌트 하나하나 폴더를 나눠서 넣는게 맞는지에 대한 의문은 남지만, 버튼 클릭 이벤트에 따라 상태가 바뀔테니 나눠 두는 것이 나중에 더 알아보기 쉬울 것 같다. 변수나 파일 이름을 짓는 것은 평생 어려울 것 같다. 마찬가지로 네비게이터도 최대한 나누었다. import React from "react"; import styled from "styled-components"; import HeaderLogo from "./headerLogo/HeaderLogo"; i..

Experience/[Clone YouTube] GyuTube 2021. 8. 7. 00:29

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