본문 바로가기

Programming

(47)
Flex 이번에 다룰 주제는 CSS 내용 중의 Flex 속성이다. 물론, 우리가 아는 요즘의 신조어 Flex가 아니다! 어제 작성한 레이아웃 관련 글 중에 Flex 키워드를 잠깐 소개했었는데, 레이아웃을 잡을 때 이 Flex 속성은 도움이 많이 된다. 이렇게 만들어진 Flexbox 레이아웃은, 말 그대로 박스를 유연하게 늘리거나 줄이는 방법을 토대로 레이아웃을 잡는 방법이다. 그렇다면 이 Flex 라는 CSS 속성은 도대체 무엇인가. 쉽게 말해서, Flex 속성은, 수직 분할 혹은 수평 분할을 도와주고, 부모 박스에 display: flex를 적용해줌으로, 자식 박스의 방향과 크기를 조정할 수 있는 게 특징이다. 1. 방향 (Flex-direction) flex-direction 속성의 기본값은 가로 (row)로..
PRE-Course 2nd Week Reflection 기수이동을 하고 기초 과정을 새로운 기수와 함께 다시 듣게 된지 2주가 지났다. 처음에 7기 수강생으로 들어와 배울 때 아쉽고 차마 말로 못할 상황 가운데에도 열심히 했다. 심화 과정으로 넘어가기 위한 테스트에서 결과가 좋지 않아 안타깝게 기수이동이 되었지만 나는 바로 받아들일 수 있었다. 사실 이번 기회로 나를 전체적으로 다시 돌아보고 다시 다짐하는 훌륭한 계기가 되어주었다. 나 자신이나 내가 가장으로서 내 가족이 아닌 또 다른 한사람.. 우리 어머니를 위해서 이제는 반드시, 꼭.. 개발자로 성공해야만 했다. 전과는 다른 마음으로 8기 수강생으로 다시 시작하면서 Blog도 매일 TIL을 작성하기로 자신과 약속했고 전보다 개인 학습시간을 2배로 늘리기로 작심했다. 아직까지는 매일 TIL을 작성을 했고 추..
HTML 구성 전 와이어프레임 설계 및 Mock-up 구현 깔끔하고 단정된 구조의 HTML을 만들기 위해서는 아래의 단계를 거쳐야 한다. 1. HTML 구성 전 와이어프레임 설계 및 Mock-up 구현. 와이어프레임 (Wireframe)은 '골격'의 의미로, 단순한 도형만을 사용해 제품의 인터페이스를 시각적으로 묘사한 것을 말한다. 이런 작업 없이 바로 HTML을 작성한다는 것은 기초설계도 없이 건물을 짓는 것과 마찬가지다. 이렇게 간단한 레이아웃을 미리 작성함만으로 HTML을 효율적으로 작성할 수 있다. 그 후, 만들어진 와이어프레임을 토대로 HTML을 실제 작동되는 모습처럼 만드는 작업을 목업 (Mock-up)이라고 한다. 이 단계에서 우리는 서버에 연결시키거나, Javascript도 사용하지 않고, HTML 출력을 하나하나 입력을 해주는 작업을 하는 건데,..
new Data() 1. new Date() 내장 함수 오늘은 필자가 이전에 Javascript 문제를 몇 개 풀던 도중 알게된 한 가지 신기한 내장 객체에 대해 얘기해보려 한다. 먼저, 아래 코드를 살펴보자. 1) currentYear 이라는 변수가 있고, 이 변수에 new Date().getFullYear() 가 할당이 되어있다. 2) 이 변수를 조회를 했을 때, 나오는 값은 2020 이길 바라는 것이다. 어떻게 currentYear가 2020이 되었을까? 해답은 바로 Date() 내장 객체 때문이다. 이 Date() 내장 객체는, 날짜와 시간 (년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 생성자 함수 이다. * 하루는 86,400,000 밀리초(millisecond)로 계산 한다. 콘솔창에 위처럼..
Git 1. Git Git은 아주 작은 단위의 프로젝트부터 중요 프로젝트까지 그 어떤 작업이든 빠르고 효율적으로 다룰 수 있도록 해주는 누구에게나 열려있는 오픈 소스의 버전 관리 시스템 (Version Control System) 이다. 1 - 1. VCS VCS를 통해 버젼을 수정 및 저장을 할 수 있다. 이전 버젼으로 복원 시킬 수가 있다. 문제 원인 파악 및 추적이 바로 가능하다. 협력 및 Collaboration이 가능하다. 백업 용도로도 사용된다. * Github : VCS Social Platform for all git users. * Git과 Github는 마치 커피와 커피숍과 같다. 1 - 2. Local Repository / Remote Repository Git 중에서도 프로그래머로서, 가..
Linux CLI (Command Line Interface) 1. Linux CLI (Command Line Interface) Graphic User Interface (GUI) 와는 다르게, CLI는 마우스와 각종 UI 컴포넌트 대신에 표준 입출력 시스템 (Standard I/O) 을 통한 입력과 그에 따른 결과를 출력하는 형태로 나타난다. 컴퓨터의 시작은 GUI가 아닌 CLI 였다고 한다. 맥북을 사용하는 개발자라면 Terminal 이라는 툴이 익숙할텐데, 이 Terminal에서 우리는 CLI를 사용한다. ls : 'list' 의 약자로, 현재 위치한 디렉토리 (폴더) 안에 있는 파일들을 나열해준다. cd : 'change directory' 의 약자로, 다른 디렉토리로 이동할 수 있게 해준다. Ex., cd ~ => cd Desktop mkdir : 'ma..
Primitive & Reference, Scope & Closure 1. Primitive & Reference 원시 자료형 (Primitive type) 과 참조 자료형 (Reference type) 의 구분에 대해서 알아볼텐데, 자료형 각자 맞는 상황과 각자 할당할 때의 차이 또한 중요하니 이 또한 알아보자. 원시 자료형 : 원시 자료형의 값의 크기는 다르지만, 변수의 크기는 같다. 원시 자료형들은 'Call stack' 이라는 저장소에 담김. 원시 타입의 데이터 (Primitive type data: 원시 자료형) 은 객체가 아니면서 method를 가지지 않는 6 가지의 타입들이 있다. Ex. 6 가지 타입들: string, number, bigint, boolean, undefined, symbol, (null) * 이 중, bigint 와 symbol 은 특별한..
Array_Methods & Object 1. 배열 배열은 순서 (index) 가 있고, 값 (element) 으로 구성되어 있다. 이를 통해 배열을 조회 또는 변경이 가능한데, 배열 안에 배열이 있는 '이중 배열'인 경우에도, 동일 방법으로 할 수 있다. 아래의 예시를 보자. 1 - 1. 배열의 기초 메소드 배열에서 사용되는 용어들은 기본적으로 이런 것들이 있다. index : 문자열에서 사용했던 것과 비슷하게, 배열의 인덱스를 조회 또는 가져올 수가 있다. Ex., arr[i], arr[0] element : 배열 안의 것들을 요소 (element) 라고 부른다. length : 문자열에서의 사용법과 비슷하게 배열의 길이를 조회하는데 사용된다. push, pop push(el) 는 배열의 맨 마지막에 'el' 이라는 요소를 추가할 때 사용한..