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 : 스케치의 정의 아이디어 스케치의 정의 아이디어 스케치 도구 아이디어 스케치 예시 및 실습 아이디어 스케치란? 공상(혼돈) 사이에서 규열, 나열, 배치조사를 바탕으로 스케치를 하는 것을 말한다. 스케치의 효율성은? 시간절약, 큰 구조파악(개념정리, 전략과 전술), 스토리텔링(진행과정의 스토리를 파악)으로 나뉜다. 스케치는 처음에 러프하게 작업을 하면 된다고 하는데 이미지가 그림이 되는 것이 아니라 그림이 이미지를 만든다. 아이디어 스케치는 가장 큰 사이트를 설계하기 위한 가장 작은 그림으로 이 것을 통해 스토리보드, 제안서, 시놉시스, 회의, 다이어리에 사용이 된다. 아이디어 스케치 스토리 아이디어 스케치 스토리는 개념프레임 구조를 잡고 프레인 구체화 설계, 프..
서비스기획 2 (온라인강의) : UML을 통한 서비스 흐름 잡기 UML을 통한 서비스 흐름 잡기 - UML의 개념 및 모델링 - 유스케이스 다이어그램 개념 및 실습 - 액티비티 다이어그램 개념 및 실습 UML의 개념 및 모델링 Unified Modeling Language(통합 모델링 언어)로 복잡한 사람들의 사고와 생각을 표현하는 도구, 애플리케이션을 개발할 때 애플리케이션을 쉽게 이해할 수 있도록 도와주는 여러 가지 유형의 다이어그램을 제공. UML의 목적은 시스템 자체의 산출물의 역할을 시각화하여 규정한다. 그렇다면 우리는 왜 UML을 배워야 하는가? UML은 이야기가 가능한 시각화 Tool이기 때문이다. 텍스트로 나열하기보단 규격화된 규칙으로 손쉽게 이해할 수 있는 시각화 이미지가 더욱 눈에 들어..
