본문 바로가기

전체 글235

JS 스코프와 클로저 오늘은 자바스크립트의 스코프와 클로저에 대해 알아보자. 사실 이부분 공부하면서 머리에 쥐가... 중요한 개념인데 겁나 헷갈린다. 스코프란? Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global: 스코프란 현재 코드의 문맥을 의미하며 자바스크립트 변수의 접근성을 결정한다. 스코프는 로컬과 글로벌로 나뉜다. Global variables are those declared outside of a block 블록 밖에서 선언된 변수는 글로벌 Local variables a.. 2021. 10. 21.
JS 원시타입과 참조타입 배열과 객체를 배우면서 알아야 할 아주 중요한 개념이 있다. 바로 원시타입(primitive type)과 참조타입(reference type)이다 . 원시타입이란? method를 가지지 않는 6가지 타입을 뜻한다. 이름에서 유추 할 수 있듯이 아주 먼 컴퓨터 조상분들 때 부터 사용된 타입이다. string number bigint boolean undefined symbol (null) 원시타입의 작동원리 원시타입의 작동원리는 우편함에 편지를 넣는것과 비슷하다. let a = 'swimming in dev'; 위와 같은 선언과 할당을 했다고 하자. 이는 a씨가 사는 우편함에 'swimming in dev'라는 편지를 넣는 것과 같다. 그리고 이후 변수 a를 사용할 때 마다 안에 있는 편지를 꺼내오는 방식.. 2021. 10. 20.
CSS Flexbox 말로만 듣던 Flex 오늘 한 번 해보도록 하자. 물론 방구석 css flex... Flex는 flexible의 약자로 유연하게 박스가 움직이며 레이아웃을 구성하는 방법이다. 딱딱하게 굳어있는 내 웹페이지에 유동성을 불어넣어 줄 아주 유용한 스타일이라 할 수 있다. 적용방법 1. 부모박스와 자식박스를 준비한다. 2. 부모박스에 "display: flex"를 적용한다. 3. 부모박스에 flex가 적용되면, 아래 자식 박스들은 그 영향을 받게 되고 왼쪽 정렬로 착 정렬된다. (약간 inline-block 같은 느낌이랄까...) 4. 마지막으로 부모 혹은 자식박스에 하위속성들을 적용해서 예쁘게 꾸민다. 하위속성 flex: 하위속성으로 자식박스의 grow, shirnk, basis 값을 설정할 수 있다. 부모박.. 2021. 10. 19.
CSS 셀렉터 오답노트 오늘은 CSS 연습문제를 풀면 틀렸던 부분과 몰랐던 개념들을 정리해 본다. 오답리스트 #lable.center {...} id가 label이면서 동시에 class가 center인 엘리먼트를 선택합니다. .show#only {...} class가 show이면서 동시에 id가 only인 엘리먼트를 선택합니다. section h2 {...} swection의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다. article + p {...} +는 article과 인접한 형제 엘리먼트 p를 선택합니다. section ~ p {...} ~는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다. div:nth-last-child(2) {...} div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div.. 2021. 10. 19.
JS 배열과 객체 오늘은 대량의 데이터를 다룰 때 유용하게 쓰이는 배열과 객체에 대해 알아보자. 배열과 객체는 Boolean 혹은 String 등과 같이 별도의 자료형으로 취급하는데, 정확히는 참조 타입[Reference Type]이라고 한다. 1. 배열 배열은 순서를 의미하는 인덱스와 각 인덱스별로 값을 지니는 요소(Element)로 구성된다. 문법 let '배열명' = [ element0, element1, element2, ~ ]; 값접근식 '배열명'[접근하고자 하는 요소의 인덱스 값]; 배열을 활용한 속성 / 메소드 '배열명'.length; >> 배열의 길이 반환 (인덱스+1) '배열명'.push('추가하고자하는 요소의 값'); >> 요소를 맨마지막 인덱스로 추가 '배열명'.unshift('추가하고자하는 요소의 값.. 2021. 10. 16.
Git 워크플로우-Advanced Basic에서는 포크를 통해 파일을 내 워크스페이스로 옮겨와서 작업을 하고 Pull Request를 하는 방법을 알아보았다. 이번에는 다른 사람들과 협을 할 때의 워크플로우를 알아보자 1. Init 명령어 git init 프로젝트를 시작하면서 내 컴퓨터에 새로운 디렉토리를 만들었다면 이 디렉토리는 내 컴퓨터에만 존재하는 상태다. init을 이용하면 새로만든 디렉토리를 Git의 관리하에 있는 Git Repository(Local Repository)로 변환이 가능하다. 새로운 Repository를 초기화하는 데에도 사용한다. 2. Remote add origin 명령어 git remote add origin init을 통해 Local Repository를 생성했다면 이제는 Local을 Remote에 연결해.. 2021. 10. 15.
Git 워크플로우-Basic 개발자들의 버전관리를 위해 이용하는 Git 오늘은 Git에 대해 알아보자. Git 개념도 1. Fork 위의 개념도에는 나와 있지 않지만, 우선 제일 먼저 Fork를 진행해야한다. Fork란 마치 나무에서 잔가지가 뻗어나가듯이 다른 버전으로 나의 Remote Repository에 다른사람의 Remote Repository를 옮기는 작업을 뜻한다. 2. Clone 명령어 git clone 'repository 주소' Clone은 나의 Remote Repository에 있는 파일과 폴더들을 로컬 저장소(컴퓨터)에 옮기는 작업을 뜻한다. 그리고 작업 시작! 작업이 끝났다면 아래 과정을 거치게 된다. 3. Status 명령어 git status 변경된 파일을 Rocal Repository에 저장하기 이전에 변경.. 2021. 10. 15.
Linux 패키지 매니저 apt 우분투에는 기본적으로 apt라는 패키지 매니저가 내장 되어 있다. apt란 Advanced Pacakge Tool의 약자로 소프트웨어의 설치와 제거를 핸들링한다. apt update: 패키지 목록 갱신 apt list --upgradable: 업그레이드 가능한 패키지 목록 출력 apt upgrade: 전체 패키지 업그레이드 apt --only-upgrade install "패키지 이름": 특정 패키지만 업그레이드 apt install "패키지 이름": 패키지 설치 apt list --installed: 설치된 패키지 보기 apt search "패키지 이름": 패키지 검색 apt show "패키지 이름": 패키지 정보 확인 apt remove "패키지 이름": 패키지 삭제 2021. 10. 13.
Linux CLI 명령어 해당 명령어는 Linux - Ubuntu를 기준으로 작성되었습니다. 1. Terminal 단축키 컨트롤 + 알트 + t 2. 현재 위치 확인 pwd print working directory의 약자 3. 폴더 생성 mkdir '생성할 폴더명' make directories의 약자 4. 폴더의 파일 확인 ls list의 약자 -a : all을 뜻한다. 숨어있는 폴더나 파일까지 모두 보여준다. -l : long format을 뜻한다. 폴더나 파일의 포맷을 모두 보여준다. * d로 시작하는 포맷은 폴더를 -로 시작하는 포맷은 파일을 뜻한다. 5. 폴더를 GUI 탐색기로 실행하기 nautilus '실행할 폴더명' nautilus는 파일 관리자 시스템으로 이름 '노틸러스'는 앵무조개를 뜻한다고 한다. shell과.. 2021. 10. 13.
CSS 박스모델 HTML/CSS 태그들은 각자의 영역을 가지게 되고 각자의 영역들이 박스(공간)을 가지게 된다. 박스는 항상 직사각형이고, 너비와 높이를 가지게 되는데 CSS를 통해 그 크기를 설정할 수 있다. 그중 필수적으로 이해해야할 개념이 하나 있는데, 바로 block / inline / inline-block 개념이다. 줄바꿈이 되는 박스 : block 대표적 태그: 줄바꿈이 되는 박스란 태그를 사용했을 때 다음 태그가 저절로 줄바꿈이 되는 태그를 뜻한다. 즉 태그를 사용하면 줄 전체 공간을 차지하며 이외의 태그가 배치되지 못한다. 옆으로 붙는 박스 : inline 대표적 태그: 옆으로 붙는 박스란 콘텐츠의 내용만큼 공간을 차지하기 때문에 줄 전체 공간을 차지 하지 않는다. 남는 공간에는 다른 태그들이 공간을 차.. 2021. 10. 10.
HTML 태그 오늘은 마크업언어 HTML에서 자주사용되는 태그들에 대해 알아보자 자주 사용되는 태그 리스트 태그 설명 Division Span Image Link & Unordered List & List Item Input (Text, Radio, Checkbox) Multi-line Text Input Button HTML태그는 수십개가 넘지만 다른 언어의 메소드와 마찬가지로 우선은 자주사용하는 것들을 위주로 배우고, 필요한 기능이 있으면 그때 그때 찾아서 사용하는게 좋다. div vs span div와 span태그는 웹페이지의 공간을 나눌 때 사용한다. 이전에는 많이 사용된 태그이지만 HTML5 이후 시멘틱 태그가 소개되면서 이후 Section태그로 대체되고 있다. 이 둘의 차이점은 대략 다음과 같다. div는 .. 2021. 10. 9.
HTML 기본구조 이번에는 HTML의 구조에 대해 알아보자 HTML 요소(element) 콘텐츠내용 위의 구성요소들을 모두 HTML의 요소라고 부른다. 그리고 위와같이 시작과 끝을 알리는 태그를 시작태그(opening tag) 종료태그(closing tag)라고 한다. class="클래스명" 시작태그 내에서 클래스나 스타일 등을 설정하는 것을 속성( attribute)이라고 부른다. 속성은 다시 두가지로 나눠질 수 있는데, 속석의 이름(attrbute name)과 속성의 값(attribute value)이다. 위의 예제를 통해 알아보자면, class는 속성의 이름(attribute name) 그리고 "클래스명"은 속성의 값(attribute value)가 된다. 2021. 10. 9.

티스토리툴바