까막눈코딩

Intersection Observer는 타겟 요소와 상위 요소(또는 뷰포트) 사이의 변화를 비동기적으로 관찰하는 방법이다. MDN의 예시를 참조하여 사용 방법을 익혀 보고자 한다. 1. HTML Welcome to The Box! 2. CSS #box { background-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; padding: 20px; } .vertical { color: white;..

Knowledge/Javascript 2021. 11. 5. 10:22

1. 개요 - 프로젝트명: PlanD - 사용자의 장소/시간/테마 선택 및 날씨에 따라 데이트 코스를 추천해 주는 웹 어플리케이션 2. 프로젝트 일정 및 역할 - 프로젝트 기간: 2021.10.04 ~ 2021.10.29 - 역할: 팀장, 사용자 모드 프론트엔드 구현, 로그인 기능 구현, 발표 3. 유스케이스 4. 개발환경 - Front-end: HTML5, CSS, Javascript, React.js - Back-end: Java, Spring, MyBatis - Server: Apache Tomcat, - DB: Oracle - Configuration Management: Git & GItHub 5. DB 설계 프로젝트 개요는 위와 같다. 담당한 기능들을 하나씩 리팩토링하면서 공부한 내용들을 정리..

Experience/[Bit Final] Date Planner WebApp 2021. 11. 4. 16:52

국비 학원 수료를 2개월 남기고 프로젝트를 시작하게 되었다. 6주 전에 프로젝트를 시작한다고 들어서 개인 프로젝트인 규튜브는 조금 더 여유있게 완성할 수 있을 거라고 생각했는데, 예상보다 2주 빠르게 프로젝트 설계에 들어가서 규튜브를 사이드 프로젝트로 만들어야 하는 상황이 되었다. 게다가 팀장이 되는 바람에 프로젝트 셋팅이나 깃 활용 등에 대해서도 신경을 쓰지 않을 수 없다. 여태 한두 페이지 정도의 간단한 기능들만을 만들던 때와 달리, 프로젝트 규모도 어느 정도 있는 편이어서 필요한 기능을 아래와 같이 정리해 두었다. 프론트 엔드의 대부분을 담당하게 될 것 같은데, 규튜브 때보다 전체적인 폴더 구조나 재사용성 등을 생각해 가면서 프로젝트를 진행해 보려고 한다.

Experience/[Bit Final] Date Planner WebApp 2021. 9. 9. 11:43

국비 학원 파이널 프로젝트가 얼마 남지 않아 조바심이 나서인지, 시간이 나면 코드를 붙잡고 있느라 블로그에 정리하는 것을 미루곤 한다. 무려 열흘 동안 밀린 코드 업데이트 사항을 작성하면서, 그 사이에 공부한 것들을 복습해야겠다. 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