0-0eong_dev_log

0-0eong

기록하는 것을 좋아하는
FE개발자 정준영입니다
🌊🏄🏻‍♂️💙

[북스터디] 6장_데이터타입

writed by hanruy1109 데이터 타입이란 데이터 타입(data type)은 값의 종류를 말한다. 자바스크립트(ES6)는 7개의 타입을 제공한다. 7개의 데이터 타입은 원시 타입(Primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 데이터 타입에 따라 확보해야할 메모리 공간의 크기도 다르고, 메모리에 저장되는 2진수도 다르고, 읽어 들여 해석하는 방식도 다르다. 따라서 개발자는 명확한 의도를 가지고 타입을 구별해서 사용해야 한다. 1. 숫자 타입 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 숫자 타입은 추가적으로 세 가지 특별한 값도..

javascript/Deep Dive 북스터디

[북스터디] 5장_표현식과 문

값 값(value)은 표현식(expression)이 평가(evaluate)되어 생성된 결과이다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 아래 코드 처럼 10 + 20 이라는 표현식이 평가되어 숫자 값 30을 생성한다. 10 + 20; 리터럴 을 사용해 값을 생성할 수도 있는데 리터럴이란 무엇일까? 리터럴 리터럴이란 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임 시점에 리터럴을 평가해 값을 생성한다. 표현식 표현식(expression)은 값으로 평가될 수 있는 문이다. 표현식이 평가된다는 말은 새로운 값을 생성하거나 기존 값을 참조한다는 말과 같다. 다른 말로 값으로 평가될 수 없다면 표현식이라고 ..

javascript/Deep Dive 북스터디

[북스터디] 4장_변수

변수란? 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 메모리 공간을 *식별하기 위해 붙인 이름 이다. 쉽게 말해 변수란, 특정 메모리 공간의 별명이다. 컴퓨터의 연산과정 먼저 컴퓨터가 아래 식을 연산하는 과정을 살펴보자. 10 + 20 컴퓨터는 CPU를 사용해 연산을 하고, 메모리를 사용해 데이터를 기억한다. 메모리는 메모리 셀의 집합체이다. “10+20” 이라는 식을 연산하기 위해서는 메모리에 10과 20이라는 데이터 값이 저장되어야 있어야 한다. 메모리 셀 하나의 크기는 1바이트(8bit)이며, 데이터를 저장하거나 읽어드릴 때 셀 하나씩 사용한다.(=8비트씩 읽어들이고 저장한다.) 그림을 보면 0x00001332(8비트)와 같은 것들이 메모리 주소이다. 값 10과 20이 저장되어 ..

javascript/Deep Dive 북스터디

✅ 처음 계획했던 것들 점검 1. To-dolist 누락하지 않기 ⭐️⭐️ 투두리스트 진행률이 현재 95퍼센트이다. 낮은 수치가 아니고 오히려 높은 수치이지만 하루에 몰아서 하는 날이 빈번한 것이 문제이다. 공부의 우선순위를 정하고 하자. 1순위는 하루 투두리스트를 달성하는 것이다. 하루에 일도 하고 운동도하고 5끼니를 먹어가면서 공부까지 열심히 하자니 너무 욕심을 부리고 있는 것 같다ㅜ (하지만 무엇 하나 중요하지 않은게 없어서 놓지 못하고 있다) 잠을 줄여서라도 다음날로 미뤄지는 일은 없도록 해야 한다. 2. 동기들과 적극적으로 컨택하기 ⭐️⭐️ 동기들과 만나는 시간이 하루에 데일리스크럼 하는 시간밖에 없다는 것이 너무 안타깝다..ㅜ 취업준비하는데 친구가 왜 필요해!! 라고 생각할 수 있겠지만 6개월..

부트캠프

[CSSS] noopener, noreferrer, nofollow가 뭐야??

..들어가며 Html로 하이퍼링크를 작성할 때 noopener, noreferrer, nofollow 라는 속성을 넣어줄 수 있다고 한다. 위에 속성들은 무엇이고, 언제 사용해야 하는지 알아보자. noopener 웹사이트를 만들 때 a 태그에 target=blank 속성을 자주 넣게 되는데 이는 자칫 사이트의 성능과 보안을 취약하게 만들 수 있다고 한다. 이유는 바로 탭 내빙(Tab nabing) 이라는 피싱 공격 때문인데 JS만 있다면 *window.opener를 이용해 새롭게 연 페이지에서 기존에 원본 페이지에 직접 접근할 수 있게 된다. noopener 속성값은 이를 방지하기 위한 녀석이다. noopener를 사용하면 원본 페이지에 대한 *컨텍스트 액세스를 허용하지 않고 새 탭에서 *최상위 브라우징..

HTML&CSS

[웹 최적화] 미디어쿼리 최소화 하기

... 들어가며 현대에서 웹 서핑을 할 때 사용하는 도구는 모두 제 각각이다. 누구는 휴대폰, 누구는 태블릿, 누구는 노트북을 사용한다. 문제는 기기마다 띄워야 하는 웹 페이지의 해상도, 즉 ViewPort가 모두 다른데 웹페이지 하나를 띄우기 위해서 Html1, Html2, Html3 다수의 파일을 만들자니 너무 비효율적이었고 이 때문에 나온 것이 바로 "반응형 웹페이지"이다. 반응형 웹 반응형 웹이란 뷰포트의 크기에 따라 서로 다른 레이아웃으로 보여지는 것을 의미한다. 핸드폰, 태블릿, 노트북 등 다양한 기기의 화면 크기에 따라 웹 사이트가 자동으로 조정되어 해당 기기에서 최적화된 레이아웃을 보여주는 것이다. 이 반응형 웹을 만들 때 자주 사용하는 기법이 바로 미디어 쿼리이다. 🤔 미디어 쿼리 그게 ..

Web

[CSS] Grid vs Flexbox

... 들어가며 Html의 레이아웃을 정의하는 속성에는Float Grid Flexbox 3가지가 있습니다. 그렇다면 우리는 언제 어떤 레이아웃을 쓰는 것이 가장 이상적이고 현명한 마크업이라고 할 수 있을까?? 답을 먼저 말하자면 아직 이 질문에 대한 정답을 정확하게 내릴 수는 없다는 것이 학계의 점심이다. 하지만 그럼에도 불구하고 FlexBox와 Grid의 차이점에 대해서 끈임없는 물음표를 던지면서 어떻게 해야 각 목적에 맞게 레이아웃을 구성할 수 있는지 탐구하는 자세는 분명 필요하다. 🤔 각각의 레이아웃의 특징을 알아보자. FlexBox 1차원 레이아웃 시스템이다. 박스의 방향지정이 가능하기에 매우 Flexible하다고 볼 수 있다. FlexBox 내에서 Flex-item들을 "정렬"하는데 특화되어 있..

HTML&CSS

[CSS] 3d animation 최적화 기법

✍️ 3D transform을 사용하는 이유 기본 transform을 사용하지 않고 3d transform을 사용하는 이유는 간단하게 2d 이상의 다이나믹한 animation을 기대하기 때문도 있고 후반에 이야기할 animation을 사용할 때 발생하는 문제점을 보완하기 위해서도 있다. 우선 3d transform에 대해서 알아보자. MDN 문서에서 이야기하기를 우리가 기존에 2d로 보였던 요소들이 3d요소로 보일 수 있는 원인은 모두 perspective(원금감) 속성 덕분이라고 한다. 원리는 간단했다. 부모요소에는 perspective 속성을 부여하고(관측자로부터 멀어지게 하거나 가깝게 하고) 자식요소 에게는 기존에 2d transform 속성을 부여해줌으로써 자식요소가 마치 공중에 떠있다거나 움직이..

HTML&CSS

web font vs local font

웹 폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다. 예를 들어, 나눔고딕 폰트를 사용하고 싶은데 PC에 설치가 안 되었다면 기본 폰트인 돋움 글꼴이 노출되고, 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출된다. 그러나, 웹 폰트를 사용할 경우 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출된다. 로컬 폰트는 또 뭔데? 로컬폰트 폰트를 불러올 때 @font-fac CSS코드를 사용해서 코드를 정의하는 기법을 이야기한다. 아래 코드를 보면 @font-face { font-family: ; src: [,]*; [font-weight: ]; // font 굵기 값 [font-style..

Web

Prev 1 2 3 4 Next

티스토리툴바