12.24 the moment 12.24 the moment

더보기 2022 프론트엔드 개발자 로드맵 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가요? "다른 프론트엔드 개발자 주니어들에게 밀리지 않는" 1. 취업에 필요한 기술의 역량. - html - css - dom - vanilla js - typescript - react - git - figma 해야할 것들이 많다. 2. 자신감. 여러분이 현재 바라는 목표를 모두 이루었다면 ‘나'는 어떻게 변해 있을까요? 취업하면서 확신이 있을 것이다. 그리고 원하는 조건에 맞는 회사에 입사할 수 있을 것이다. 1. 내가 관심있는 분야의 회사일 것 2. 초봉 3천 이상일 것 3. 사수가 있을 것 4. 트렌디하고 새로운 것을 많이 배울 수 있어야 할 것. ‘나'에게서 어떤 모습을 보았을 때, 목표를 이루었다고 말..

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties 문서 전반적으로 재사용할 임의의 값을 변수에 담아줍니다. (대부분 색상에 제일 많이 사용하는 듯) 1. 색상값 변수로 지정하기 color: var(--main-color); :root { --main-color: #000000 } : root 최상위 element = html 태그 = 가상 선택자 :root를 이용하는 이유 가상선택자는 클래스명으로 분류, html태그는 태그명으로 분류됨 => 태그 이름보다 우선순위가 높기 때문입니다. 2. 활용하기 이제 각 색상들을 아래 변수 이름으로 사용할 수 있다. (1) css에서 활용 body { background-color: v..

내가 CSS, HTML을 입문할 때는 Float으로 띄우는 방식으로 배웠었다. 찾아보니 요새는 안쓴다고 한다. 그때도 Flexbox가 있긴 했던데 내가 구식으로 배웠었나보다. (씁쓸) https://heropy.blog/2018/11/24/css-flexible-box/ https://codesandbox.io/s/hardcore-ully-tm0o1s?file=/flex.css 1. 부모 요소에 적용하는 속성 display: flex; (flex의 시작!) display: flex; 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며,가로로 넓게 공간을 차지합니다. display:flex;속성을 넣어주면 요소들이 왼쪽부터 가로로 정렬되며 내용만큼의 공간을 차지하도록 만들어줍니다. flex..

$ git init 코드를 저장할 디렉토리를 만들고 해당 디렉토리에 로컬 Git repository를 생성합니다. init은 initialize의 준말로, git을 쓰기 위해 초기화 설정을 해주는 단계입니다. (맨 처음에 프로젝트를 올릴 때만 해주면 됨) $ git add $ git add . // 전체 파일을 add 할 경우 $ git add index.html // index.html이라는 파일만 add하고 싶은 경우 작업 공간의 파일 및 디렉토리(- untracked files)를 staging area에 추가해 git의 관리하에 두는 과정입니다. $ git status add를 통해 staging area로 옮겨진 파일들의 목록을 확인할 수 있습니다. 변경되었으나 staging area로 옮겨지지..

ex)1 let func = (arg1, arg2, ...argN) => expression arguement(인수)들을 받아 expression이라는 표현식을 평가하고 그 결과를 반환. let func = function(arg1, arg2, ...argN) { return expression; }; 위의 함수를 축약한 것. ex)2 let sum = (a, b) => a + b; 이 둘은 같다. let sum = function(a, b) { return a + b; }; arguement가 하나일 시 arguement를 감싸는 소괄호 생략 가능 let double = n => n * 2; let double = function(n) { return n * 2 } arguement가 없을 땐 빈 소괄..

var 보다는 let 으로 변수 선언을 하는 것을 권장. 블록 스코프(block scope) 중괄호를 기준으로 범위가 구분. 화살표 함수는 블록 스코프로 취급. 함수 스코프(function scope) 함수 선언식 및 함수 표현식은 함수 스코프.

데이터를 저장하는 방식에 따라 원시 자료형과 참조 자료형으로 분류한다. 원시 자료형(primitive data type) number string boolean 고정된 저장 공간을 차지. 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number, bigint, boolean, undefined, symbol, (null) "hello world!" "hello codestates!" // "hello world!" 와 "hello codestates!"는 모두 변경할 수 없는 고정된 값입니다. let word = "hello world!" word = "hello codestates!" // 하지만, word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능합니..

객체 원시형(primitive type) 자바스크립트 여덟 가지 자료형 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있음 객체(object) 다양한 데이터를 담을 수 있음. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장. 주소록에 적합한 자료 구조. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해해야함 1. 객체 선언 let objectName = { keyName1 :'valueName1', keyName2 :'valueName2', keyName3 :'valueName3' } (객체 리터럴 문법) 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, ..