React-router-dom에 대한 이론적인 공부가 필요한 것 같아 여러 강의와 블로그를 참고하여 라우터를 이해하려고 한다. React Routing 이해하기 리액트가 나오기 전 브라우저가 서버에 요청을 하면 URL로 해당페이지에 대한 것을 서버에서 보내는 형식이었다면. 리액트로 넘어오면서 Single Page Application(SPA)로 서버로부터 전체 묶음을 받아온 후에 클라이언트(Browser) URL에 따라 어떤 것을 보여줄지 결정하는 형식으로 변경되었다. SPA 라우팅 과정 브라우저에서 최초에 '/'로 요청 React web app을 내려준다 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌 React app에서 다른 페이지로 이동하는 동작을 수행 새로운 경로에 맞는 컴포..
Vanilla JS를 이용한 서비스 만들기 배경이미지 랜덤 변경 인사 만들기 시계 만들기 할 일 목록 만들기 내 위치의 날씨 만들기 배경이미지 랜덤 변경 const imgs = ["01.jpg", "02.jpg", "03.jpg", "04.jpg"]; const randomImg = imgs[Math.floor(Math.random() * imgs.length)]; const bgImage = document.querySelector("body"); bgImage.style.backgroundImage = `url(img/${randomImg})`; random() 함수의 숫자는 0과 1사이의 숫자다 (0.xxxxxxx) 어떤 수 사이의 어떠한 랜덤한 수를 가져오고 싶을 때 해야할 일은 그냥 그 수를 ..
리액트 가상 DOM으로 랜더링, 실제 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠름 왜 리액트를 사용해야하는가? UI 컴포넌트를 만들고 재사용하는데 매우 용이하며 만들어진 컴포넌트를 통해 사용자와 인터렉션을 하고 화면을 업데이트하는데 최적화되어있다. // Javascript let a = 0; const root = document.getElementById("root"); const h1 = document.createElement("h1"); h1.setAttrivute("id", "h1"); h1.style.color = "blue"; h1.textContent = "Total clicks :0"; const button = document.createElement("button"); bu..
CSS란? Cascading Style Sheets의 약자이며 한 번에 여러 웹 페이지의 레이아웃을 제어가능 외부 스타일 시트는 css 파일에 저장된다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용(Cascading) 연속화 형태로 위에서 아래로 적용 CSS 작성방법 Selector(선택기)는 스타일을 지정할 HTML 요소를 말하며, 각 선언에는 콜론으로 구분된 css 속성 이름과 값이 포함. 여러 css 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 묶임 CSS Selector CSS 선택기는 스타일을 지정할 HTML 요소를 찾는(또는 선택하는)데 사용 p{ text-align : center; color: red; } /* 요소 이름을 기반으로 html 요소를 선택 */ #para1{..
프론트앤드 개발자가 되기 위에 가장 기본스탭인 HTML과 CSS의 핵심 개념, 구문, 구조에 대해 이해하기, 웹에 대해 이해를 목적으로 새로운 한주를 시작했다. 개발자가 지녀야 할 역량으로 프로그래밍 언어, 문제해결 능력, 커뮤니케이션 및 협업 등 다양한 게 있다. 현재 이 강의를 통해서 프로그래밍언어와 문제해결능력, 협업 등을 키워야 겠다. HTML, CSS, JS HTML : 웹 문서 뼈대를 보여주는 정해진 약속 CSS : 뼈대를 꾸며주는 것 JS : 사용자의 액션이다. 이 3가지 작동 순서는 사용자 웹페이지 방문으로 시작 Web Brower 시작 웹 문서 읽기 DOM 생성 HTML을 객체 형태로 변환 Javascript로 접근 가능 페이지 로딩완료 CSS 적용화면 최종 표시 HTML이란? Hyper..
서비스 기획 마지막 강의날 서비스기획 3 : 스케치의 정의 아이디어 스케치의 정의 아이디어 스케치 도구 아이디어 스케치 예시 및 실습 아이디어 스케치란? 공상(혼돈) 사이에서 규열, 나열, 배치조사를 바탕으로 스케치를 하는 것을 말한다. 스케치의 효율성은? 시간절약, 큰 구조파악(개념정리, 전략과 전술), 스토리텔링(진행과정의 스토리를 파악)으로 나뉜다. 스케치는 처음에 러프하게 작업을 하면 된다고 하는데 이미지가 그림이 되는 것이 아니라 그림이 이미지를 만든다. 아이디어 스케치는 가장 큰 사이트를 설계하기 위한 가장 작은 그림으로 이 것을 통해 스토리보드, 제안서, 시놉시스, 회의, 다이어리에 사용이 된다. 아이디어 스케치 스토리 아이디어 스케치 스토리는 개념프레임 구조를 잡고 프레인 구체화 설계, 프..
