🍒What I did today(오늘 한 일)

✅Twittler 목업 구현!

Javascript를 사용하지 않고, HTML, CSS로만 웹페이지 목업을 구현했다. 

처음엔 예시만 보고 머리속이 새하얗게 되버렸지만, Twittler를 보고 하나하나 공책에 그려가면서 어떻게 만들지를 고민하면서 구현했다. 

HTML로는 기본적으로 뼈대를 만들고, CSS를 사용해서 디자인을 했는데 하는 과정에서 id, class 를 사용해서 가져오는 과정이 머리아팠지만 사용하다보니 적응되는 것 같다. 이번에는 flex를 대부분 사용했다. 다음 과정에서는 Javascript를 사용해서 기능을 만들텐데 기대가 된다.

 

 

✅BEM(Block Element Modifier)

웹페이지의 와이어프레임을 설계하면서, class나 id의 이름을 잘 지어두면 협업하는 다른 사람들이 봤을 때도 어떤 역할을 하는 요소인지 파악하기가 쉬울 것이다.

주말에 강의해주시는 페어님이 알려주셔서 BEM과 Atomic CSS 방법론에 대해 알게 되었다.

간단히 설명하면 BEM은 'block(전체를 감싸고 있는 블록요소)__element(내부요소)--modifier(기능)' 형식으로 클래스명을 짓는 방법론이고, Atomic CSS는 모든 클래스가 하나의 고유한 CSS 규칙을 갖도록 분리하는 방법론이다. 

BLOCK? : 독립적으로 만들어지는 기능별 단위

ELEMENT? : BLOCK에 연관된 요소들(내부요소)

MODIFIER : ELEMENT에서, 다른 버전을 주고 싶을 때(기능)

 

CSS Architecture와 Component

Component : 컴포넌트는 독립적인 단위 모듈이다.

Module : 기능별로 나뉘어 질 수 있는 프로그램, 파일 등등

 

🍒Remember(기억할 것)

---

✅메모리 구조

코드영역 : 우리가 적은 코드가 적재되는 영역 (컴파일이 끝난 기계어로 들어감)
데이터 영역 : 전역 변수 static 변수들이 적재되는 곳 (프로그램이 끝날때까지 존재)
스택 영역 : 지역변수, 매개 변수들이 저장 (함수 호출시 사용되고 끝나면 반환, 컴파일 시 크기 결정)
힙 영역 : 메모리가 동적으로 할당되는 곳( 런타임시 크기 결정)

 

 

✅SASS(SCSS)는 CSS pre-processor입니다.

종류도 여러가지 SASS, LESS, STYLUS ... 많다.

CSS pre-processor는 뭔데요?

CSS 전-처리기인데, 이게 무슨말이예요?

브라우저는 마지막에, 무조건 CSS 파일만 읽을 수 있습니다.

SASS(SCSS)는, 브라우저가 CSS 파일을 읽기 전에, 어떤 일들을 수행한다.

SASS(SCSS)에 쓰여진 코드들을 자신만의 컴파일러로 해석해서 CSS 파일에 넘겨준다는 뜻이다.

 

 

✅Node.js?

끝이 .js로 끝난다 이것은 자바스크립트랑 연관이 있다.

Node.js라는 것은 자바스크립트 런타임이예요.

 

런타임(runtime)이 뭐예요?

해당 언어가 제대로 잘 실행될 수 있게 만들어주는 일종의 환경이예요. 컨테이너

 

NPM이란?

(Node Package Manger)

패키지는 우리가 개발을 할 때 여러가지 필요한 기능들이 많이 있어요.

패키지는 미리 필요한 기능들에 대해서 만들어 둔 파일들의 묶음

 

✅@mixin

코드를 재사용하는 목적으로 만들어졌다. 사용할 땐 @include 로 사용한다

아래 예시처럼 사용하면 된다.

@mixin flexCenter{
	display : flex;
	justify-content: center;
	align-items: center;
}
    
h1 {
	@include: flexConter;	
}

 

 

🍒More Study

---

✅Twittler처럼 브라우저 동적 움직임 바꿔보기

✅CSS 기능, 속성 찾아보고 기억하기

✅배열(sort(), reverse()) 공부하기

 

 

2021-01-29

---

오늘은 Twittler 목업을 페어랑 같이 진행했는데 뼈대만들고, CSS로 디자인 확인하면서 만드는 게 정말 재밌었따.

하지만 계속하다보니 CSS 속성들을 다 외우고 사용할 수 있을까?🤔 라고 생각을 많이했는데 그 땐 검색을 해서 사용하기로 했다. 그래도 기본 기능은 다 인지하고 있어야겠지? 그래야 검색할 수 있으니까

이제 다음주에 있는 Twittler를 자바스크립트를 사용해서 기능만들기 할 때 잘 만들었으면 좋겠다. 🙏

++번외 ) 블로그를 오늘은 주말에 작성중인데 주말에 모여서 SASS(SCSS)가 무엇인지 강의를 해주셔서 잘듣고 블로그에 조금 담아보는 중이다. 그리고 지금 맥북을 쓰고있는데 전에 쓰고 있었던 노트북보다 너무너무 좋아서 매우 만족하며 잘쓰는 중이다.😂

(속닥속닥) 오늘 에어팟 Pro도 도착했따!