들어가기 이번 블로깅은 16일차 과제인 Vanilla JS를 활용한 웹애플리케이션 제작이다. 크게 이름을 입력하면 인사가 나오는 기능, 시계 기능, 랜덤한 이미지로 배경화면이 바뀌는 기능을 포함하고 있다. Javascript 배경화면 랜덤 변경 기능 이 기능을 구현하면서 신경쓴 부분은 슬라이드바를 이용하여 랜덤하게 이미지가 바뀌는 시간을 조정하는 것이었다. 시간을 조정하여 다시 시작하기 전에 이미 실행중인 interval을 중지하고 새로운 interval을 생성하는 것이 핵심이었다. 고민끝에 완성한 코드는 아래와 같다. 변수 speed는 배경화면이 변경되는 속도를 위한 변수로 speed가 0일 경우 배경화면이 변경되지 않고 멈추게 된다. 가장 빠른 속도는 1초이며, 가장 느린 속도는 10초이다. 변수 currentInterval은 현재 실행중인 interval을 저장하는 변수이다. clearTimeout 함수의 매개변수로 사용했다. 앞서 정의한 변수

들어가기 이번 블로깅은 저번 9일차 과제인 세이프 홈즈 HTML에 CSS와 JS를 추가하여 랜딩페이지를 완성하는 과정이다. CSS CSS의 전체코드를 다 올리기보단 전체적인 구조를 작성해봤다. 전체코드는 아래 전체코드 섹션에서 확인할 수 있다. 이번 CSS는 관계선택자를 최대한으로 활용해봤다. 장점으로는 class명이나 id명을 깊게 생각하지 않아도 된다는 점이었다. 반대로 단점으로는 직관적이지 않아 코드를 짜는데 조금 어려움이 있었고, 유지보수를 생각해봤을 때 비효율적일 것 같다는 생각이 들었다. 다음부터는 적절히 섞어서 사용해야겠다. 최대한 반응형 코드를 추가로 작성하는 일이 없게 끔 신경써서 코드를 작성했다. 레이아웃이 바뀌는 feature 섹션이 아니였다면 media query도 사용하지 않아도 됐을거 같다. 폰트 사이즈가 바뀌는 부분은 em, rem을 사용했다면 어땠을까하는 생각이든다. JS Javascript를 활용해서 리뷰섹션의 리뷰들이

들어가기 이번 수업은 홈 페이지에 옷을 입히는 작업 CSS에 관한 내용이었다. 아직도 쉽지않다고 생각되는 grid, animation에 대해 조금더 알게되었다. 이번 블로깅은 10일차 수업에 관한 과제로 자기소개 페이지를 꾸며보았다. 자기소개 페이지 HTML 구조 html 구조는 다음과 같이 작성했다. header profile skills goal contact CSS 전체코드 !codepen[vrgvutic-the-vuer/embed/xxQZpMx?default-tab=html%2Cresult] 마치며. 화려한 자기소개 페이지보단 단순하고 한눈에 들어오는 사이트를 만들고 싶었다. 과한 디자인은 과감하게 생략하고 새로로 늘어진 디자인을 채택했다. 어렵고 힘든 스타일이 아니다보니 클래스명은 과감히 생략하고 관계선택자만을 사용해봤다.

들어가기 2주차 첫 강의는 프론트엔드 개발의 입문 단계인 HTML 강의였다. 이미 알고 있는 내용이었지만, 초심으로 돌아가 하나하나 열심히 한다는 생각으로 수업에 임했다. 오늘은 2주차 첫 과제인 세이프홈즈 클론 코딩에 대해 블로깅 할 것이다. 세이프 홈즈 클론 코딩 페이지 구조 세이프홈즈의 랜딩페이지 구조는 다음과 같다. HTML 코드 Nav Header Section1 Footer 전체코드 !codepen[vrgvutic-the-vuer/embed/PoxPJmy?default-tab=html%2Cresult] 진행상황 이번 과제의 목표는 HTML코드를 작성하는 것이었다. 과제 목표에 맞게 스타

들어가기 3일간의 기획강의의 마지막 시간이다. 이번 주제는 아이디어 스케치다. 내 머릿속에 있는 조각조각들을 종이위에 그려보는 과정이라고 생각해본다. 아이디어 스케치란? 공상을 현실로 만드는 과정이다. 과거의 경험들 혹은, 상상들로부터 쌓여온 데이터를 기반으로 규칙을 세워보고, 나열 및 배치 하며 마인드 맵 등을 통해 시각화해본다. 아이디어 스케치 과정 개념프레임 구조 잡기 컨셉 도출 프레임 구체화 설계 컨셉 데이터 정리 기능 단위의 디테일 정리 프레임 확정 효과적인 스케치 방법 1장에 1개의 주제만을 담는다. 1장을 스케치하는데 3분 이상을 소요하지 않는다. 자신이 머릿속으로 생각한 스토리를 그려본다. 내가 알고 있는 개념은 과감히 생략하거나 치환한다. 이미지가 그림이 되는 것이 아니라 그림이 이미지를 만들어 준다고 생각하자. 아이디어 스케치의 용도 스토리보드 제안서 *

들어가기 3일차 강의는 저번 강의에 이어 서비스기획에 대한 내용이다. 그 중에서도 UML의 개념을 알아보려고 한다. UML Unified Modeling Language의 약자로 복잡한 사람들의 사고와 생각을 표현하는 도구다. 구축에 대한 소프트웨어, 프로그래밍이 아닌 시스템 자체의 산출물의 역할을 시각화 하여 규정하는데 목적을 두고 있다. 이런 과정을 통해 꼭 필요한 행위를 기반으로 한 객체 지향 모델링이 가능해진다. UML에서 정의하는 모델링 어떠한 현상들을 단순화, 일반화, 추상화 하는 과정으로 아래와 같은 장점을 가지고 있다. 내부 구조나 동작하는 행위에 대한 표현의 자유 시스템의 구성 요소들이 서로 어떻게 연결되어 있는지 확인 가능 설계와 구현 간의 일관성 유지 레벨화 가능 명확한 의사 소통의 도구 UML을 배워야 하는 이유 UML은 이야기가 가능한 시각화 도구이다. 텍스트로 표기된 상품에 대한 설명보단 이미지로 설

들어가기 두근두근 첫 강의 시간. 오늘의 주제는 서비스기획이다. 배운 내용을 나만의 방법으로 정리해봤다. 그럼 시작! 플랫폼(Platform)이란? 인간의 관계에서 생성되는 교류의 정류장 역할 교류 속에 이뤄지는 다양한 소통, 거래를 통해 발생하는 트래픽을 기준으로 기업과 개인이 공동의 이익을 형성하는 곳이다. 플랫폼의 진화 디바이스의 발전 과정 플랫폼은 디바이스에 밀접하게 관련되어 있다. 멀지 않은 과거, TV, 전화기, 개인용 컴퓨터 등 개인 디바이스의 등장으로 정보의 소유라는 개념이 등장했다. 2010년대에 들어서며, 개인 디바이스는 스마트폰, 테블릿 등으로 발전하게 되었고, 정보의 교류와 함께 Big Data라는 개념이 출현하게 되었다. 현재 개인 디바이스는 스마트 워치와 무선이어폰 등 웨어러블 형태와 스피커, 자동차, 로봇 등 하드웨어에 AI가 결합한 형식으로 진화했다. 이 시기에는

들어가기 이번 블로깅은 프로젝트 진행에 앞서 프로젝트를 설정하는 과정. 그 중에서도 Vite 이용한 Typescript 기반의 React 프로젝트 생성과 정적분석툴인 Eslint 그리고 코드포멧터인 Prettier와 Git hooks를 보다 쉽고 편하게 사용할 수 있게 도와주는 npm 모듈인 Husky를 적용한 프로젝트 생성에 대해 작성해보려고 한다. Vite "Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다." > Vite 공식문서 일부 발췌 도대체 얼마나 빠르면 이름부터가 빠르다 일까? 우선 Vite를 이용하여 프로젝트를 생성하고 비교해 보자. Vite로 typescript 기반 React 프로젝트 생성하기

들어가기 완성된 react 앱을 배포하기 위한 방법에는 여러가지 방법이있다. 그중 CI/CD를 보다 쉽게 해주는 vercel, netlify와 같은 클라우드 시스템을 사용하는 방법과 오늘 블로그에서 이야기해볼 github action을 이용하는 방법이다. 물론 다른 방법도 아주 많다! Github action 오늘 github action을 연습하려고 만든 레포지토리다. 이미 여러번 시도했고 뼈아픈 실패를 겪었다. 이 글은 실패와 성공, 그리고 해결방법을 기록하는 글이다. workflow 작성하기 최종적으

들어가기 이번 블로깅에서는 상태관리의 의미와 전역상태를 관리하기 위한 모듈 Redux에 대해 알아보자! 상태관리 React가 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 구조적으로 아름다운 코드를 작성할 수 있다. > 상태란 "UI에 동적으로 표현될 데이터" 다. Side Effect에 대해서 알아보자. 상태를 다룰 때에 Side Effect는 주요 고려 대상이다. Side Effect는 "함수의 입력 외에도 함수의 결과에 영향을 미치는 요인" 이다. 대표적으로 네트워크 요청, API 호출이 Side Effect다. Side Effect로 인해 상태의 변화가 생길수 있다. 요청한 데이터가 불러와지면 불러와진 데이터에 의해 상태가 변하고, 그렇지 않은 경우에도 상태는 변한다. 상태를 구분하는 데에는 절대적인 기준이나 법칙이 있는 것은 아니지만, 우리가 처음 JavaScript를 배울 때처럼 로컬

들어가기 이번 블로깅에서는 리액트로 프론트엔드를 구축할 때 구조적으로 코드를 작성하는 방법에 대해 알아보려고 한다. CDD(Component Driven Development) CDD는 개발 방법론 중 하나로, bottom up UI를 설계하는 과정을 뜻한다. 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 같은 UI가 필요한 곳에 공통으로 사용한다. 즉, 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. CSS in JS CSS의 발전 인터넷이 만들어진 이후 기술의 발달과 함께 사용자들은 다양한 환경에서 인터넷을 사용하기 시작했다. 개발자들의 CSS 작성 방식도 꾸준히 진화한다. CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었고, CSS를 구조화하는 방법에 대한 연구가 필요해졌다. 문제점들을 해결하기 위해 CSS 전처리기(CSS Preproces

들어가기 그동안 배운 개념을 통해 API에서 정보를 받아와 브라우저에 출력해보는 간단한 애플리케이션을 만들어 보고 싶었다. 데이터를 불러오는 것에는 성공했지만, API요청이 끝도 없이 반복되었다. 해결법을 찾다보니 Side Effect를 일으키는 함수를 제어해줄 수 있는 방법이 있다는 것을 알게되었다. Side Effect(부수 효과)와 Pure Function(순수 함수) Side Effect 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말한다 Pure Function 순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부

들어가기 오늘은 React state와 props에 대해 블로깅을 진행해보려한다. 그럼 이번 글도 화이팅! state와 props란? 컴포넌트 내부에서 변화 하는 값을 state라고 한다. 컴포넌트 외부에서 전달 받은 값을 props라고 한다. 일상 생활 중 state와 props의 예를 들어보자면 아래와 같다. 이름 props 성별 Props 나이 state 현재 사는 곳 state 취업 여부 state 결혼/연애 여부 state state state는 컴포넌트 내부에서 변경 할 수 있는 값이다. 특정 변수의 상태로, 클릭 시 1씩 증가하는 변수 count의 값은 state라고 볼 수 있다. React에서 state를 다루는 방법 중 하나로 useState라는 함수를 사용한다. 다음과 같이 useState 함수를 import한다. 이후 useState 함

들어가기 오늘은 코드스테이츠에서의 리액트 2일차 블로깅을 진행하려한다. 처음 배우는 기술이라 그런지 아직까지는 정말 재밌다. 앞으로도 재밌는 내용만 배웠으면 좋겠다ㅠㅠ SPA란? 기존의 웹사이트는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야만 했다. 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만, 기존의 웹사이트 처럼 중복된 요소들을 매번 불러오는 것은 서버와의 불필요한 트래픽을 발생시켰다. 이로인해 사용자로 하여금 사이트의 반응이 느리다와 같은 부정적인 인상을 주었다. 이것을 해결하기 위해 SPA라는 개념이 등장했다. SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 중복되는 부분들. 예를 들어 Navbar, Footer,

들어가기 코드스테이츠 부트캠프 탑승 5주차 드디어 리액트에 대해 배운다! 이제 진짜 프론트엔드 개발자가 된 기분이다. 아직 배운건 많이 없지만.... 아무튼 시작해보자! 리액트란? 우선 리액트는 프론트에는 개발을 위한 자바스크립트 오픈소스 라이브러리다. 리액트는 크게 3가지의 특징이 있다. 선언형 컴포넌트 기반 범용성 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠적기 보단 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능한 코드가 된다. 따라서, 기능 자체에 집중하여 개발하기 용의하다. 반대 개념으로는 명령형 프로그래밍이 있다. 리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다. 라이브러리와 비슷하지만 다른 프레임워