개발 여행 개발 여행

Front-end

• 자바스크립트의 데이터 타입에는 어떤 것들이 있을까?

  Front-end/Javascript 2020. 7. 27. 18:01

  자바스크립트의 데이터 타입 자바스크립트는 말 그대로 스크립트 프로그래밍 언어이며, 빠르게 배우고 쉽게 접근할 수 있도록 하기 위해 개발되었습니다. 자바스크립트가 만들어졌던 1995년 말에 본격적으로 보급형 컴퓨터가 생산되고 사용되면서 자바스크립트도 동시에 함께 개발되어 사용되어졌습니다. 기존에 존재했던 Java 등의 언어는 개발자가 직접 데이터 타입을 정하여 선언하는 등 고려해야할 점이 많았습니다. 하지만 스크립트의 특징을 가진 자바스크립트는 개발자가 직접 데이터 타입을 정하지 않는 정책을 사용하였습니다. 그래서 그 때 당시 보급형 컴퓨터에서 감당할 수 있는 데이터를 고려하여 모든 타입의 데이터를 8 byte로 고정 후 자바스크립트 엔진에서 타입을 대신 정해주었습니다. 즉, 넣는 값에 따라서 변수의 데이..

• [CSS Pattern] 탭(Tab) 패턴

  Front-end/CSS 2020. 7. 23. 17:00

  네비게이션에서 자주 사용되는 탭 패턴에 대해서 알아보겠습니다. HTML HTML CSS Javascript React 전체를 감싸는 div 내에 순서 없는 리스트들을 선언해주었습니다. CSS * { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .wrap-box { display: flex; justify-content: center; width: 100%; background-color: #fff; } .tabs { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .tab { position: relative; padding:..

• [CSS Pattern] 도트(Dot) 패턴

  Front-end/CSS 2020. 7. 23. 14:12

  네비게이션에서 자주 사용되는 도트 패턴에 대해서 알아보겠습니다. HTML 구조는 전체를 감싸는 wrap-box와 도트들을 만들어내기 위해 ul, li를 활용하였습니다. CSS * { list-style-type: none; box-sizing: border-box; margin: 0; padding: 0; } .wrap-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 400px; margin: 0 auto; background-color: #34495e; } .dots { display: flex; justify-content: center; align-..

• 꼭 알아야 할 HTML 태그들

  Front-end/HTML 2020. 7. 20. 11:32

  HTML에는 정말 많은 종류의 태그들이 있는데요, 현재 HTML5 기준 약 115개의 태그가 있습니다. 🤪 하지만 115개의 태그를 전부 외우고 활용하기는 참 멀고도 험하겠죠..? 전부 각자의 기능이 있지만 실질적으로 마크업을 할 때 꼭 알아야 할 태그들이 있기 마련입니다. 그래서 도대체 그 태그들이 뭔지 알아보려합니다. DOCTYPE DOCTYPE은 document Type의 줄임말로 문서의 타입을 말합니다. HTML의 문서에 최상단에 선언하는데 보통 HTML의 버전을 명시하는데에 사용됩니다. !로 시작하여 대문자로 DOCTYPE을 선언하고 html의 버전을 명시합니다. 예시는 html로서 5버전을 나타냅니다. 만약 xhtml, xml을 사용하고 싶다면 html 대신 선언하면 해당 타입으로 마크업 하겠..

• [React] useEffect Hooks 알아보기

  Front-end/React 2020. 7. 1. 14:03

  useEffect 컴포넌트가 최초, 업데이트, 사라질 때 특정 작업을 할 수 있도록 해줍니다. useEffect 선언하기 import React, { useEffect } from "react"; useEffect 사용하기 useEffect(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. 컴포넌트가 최초 화면에 렌더링 될 때만 실행 useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // mount }, []); 빈 배열을 넣게 되면 의존하는 값이 없어 최초 화면에 렌더링 될 때만 실행됩니다. 이를 mount 된다라고 표현합니다. 보통 mount에 사용되는 기능에는 아래와 같습니다. pr..

• [React] useState hooks 알아보기

  Front-end/React 2020. 7. 1. 14:01

  useState 동적인 상태값을 관리할 때 사용합니다. 기존에 함수형 컴포넌트에서는 상태관리가 불가능 했지만 16.8 버전 이후에는 useState를 활용하여 상태값을 관리할 수 있게 되었습니다. 카운팅 예제를 통해서 상태값 관리를 알아보겠습니다. 이벤트 선언 import React from "react"; function Counter() { const onIncrease = () => { console.log("+1"); }; const onDecrease = () => { console.log("-1"); }; return ( 0 +1 -1 ); } export default Counter; 각각의 버튼별 onClick 이벤트를 가지며 해당 함수를 정의하여 선언해줍니다. 이 때 주의할 점으로 즉시실..

• 자바스크립트 기초 간단하게 살펴보기

  Front-end/Javascript 2020. 7. 1. 13:58

  1. CSS 추가하는 방법 head 태그 내부에 추가합니다. link 태그를 활용하여 href에 css파일 경로를 입력합니다. index.css body { background-color: peru; } h1 { color: white; } 결과 2. JS 추가하는 방법 This Works! body 태그 밑에 추가합니다. script 태그를 활용하여 src에 js파일 경로를 입력합니다. index.js alert("Hello World!"); 결과 variable(변수) 1. let let a = 100; let b = 100 - 10; a = 10; console.log(b, a); 90, 10 let은 초기화한 변수값을 다시 할당하는 순간 그 값을 가진 변수가 됩니다. 2. const const a..

• HTML 간단한 총정리

  Front-end/HTML 2020. 7. 1. 13:44

  규격 HTML 문서를 작성할 때 어떠한 규격을 사용할지 선언해줍니다. DOCTYPE document Type의 줄임말로 문서의 타입을 말합니다. HTML 문서 최상단에 위 태그를 입력하면 브라우저에게 이 문서는 HTML5 버전 이라는 것을 명시하는 것입니다. 즉, HTML5 기준으로 맞추어 렌더링을 해달라는 의미입니다. 제목(Headings) 어떤 주제에 대한 제목을 나타낼 때 사용합니다. 총 6가지 종류로 표현 가능합니다. h1 부터 h6까지 숫자가 커질 수록 폰트가 작아지는 특징을 가지고 있습니다. 이 태그는 제목입니다. 이 태그는 h3을 이용한 제목입니다. 문단(Paragraph) 어떤 주제에 대한 내용을 감싸는 용도로 사용합니다. p로 감싸서 표현합니다. 김준형의 Github 닉네임은 junjan..