까막눈코딩

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

1초에 하나씩 번호를 뽑아 보여 주는 프로그램이다. 1. Class import React, { Component } from "react"; import Ball from "./Ball"; function getWinNumbers() { console.log("getWinNumbers"); const candidate = Array(45) .fill() .map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push( candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0] ); } const bonusNumber = shuffle[shuffle...

Knowledge/React.js 2021. 8. 1. 16:09

컴퓨터와 가위바위보를 해서 점수를 누적해 나가는 게임이다. 1. Class import React, { Component } from "react"; const rspCoords = { 바위: "0", 가위: "-142px", 보: "-284px", }; const scores = { 가위: 1, 바위: 0, 보: -1, }; const computerChoice = (imgCoord) => { return Object.entries(rspCoords).find(function (v) { return v[1] === imgCoord; })[0]; }; class RSPClass extends Component { state = { result: "", imgCoord: rspCoords.바위, score..

Knowledge/React.js 2021. 7. 27. 10:37

1. 반응 속도 체크 빨간색 상자가 초록색으로 변한 뒤 클릭하면, 색깔 변화와 클릭 사이의 시간을 체크하는 게임이다. 2. Class import React, { Component } from "react"; class ResponseCheckClass extends Component { state = { state: "waiting", message: "클릭해서 시작하세요.", result: [], }; timeout; startTime; endTime; onClickScreen = () => { const { state } = this.state; if (state === "waiting") { this.setState({ state: "ready", message: "초록색이 되면 클릭하세요." }..

Knowledge/React.js 2021. 7. 25. 16:50

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. Number Baseball 무작위로 주어진 네 개의 숫자를 순서를 포함하여 맞추는 게임이다. 숫자의 자리와 값을 맞추면 스트라이크(?), 값은 맞췄으나 자리가 틀린 경우에는 볼이 된다. 총 10회의 기회 안에 맞추면 된다. 2. NumberBaseball.jsx import React, { Component } from "react"; import Try from "./Try"; function getNumbers() { const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const array = []; for (let i = 0; i < 4; i++) { const chosen = candidate.splice(Math.floor(Math.random() * (9..

Knowledge/React.js 2021. 7. 23. 21:23