본문 바로가기

전체 글

 (73)
Git 기본 명령어 Git 기본 명령어 1) 변경사항 확인 git status 2) 변경사항 스테이지에 올리기 git add (파일명) git add .//변경된 모든 파일 add 3) commit하기 git commit -m "(커밋 메세지)" git commit -am "(커밋 메세지")//add + commit 동시에(한번은 commit 되어 있는 파일만 가능 => 즉, 처음엔 불가능) 4) commit 로그 확인하기 git log git log --oneline //커밋 내역을 한줄씩 보여줌. git log --graph //커밋 내역을 시각화해서 보여줌. git log --branches//각 브랜치의 커밋내역을 보여줌. git log main..test//test브랜치에만 있는 5) 수정내용 확인하기 git di..
CSS Modules CSS Modules란? CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술 모듈화된 CSS를 번들러로 불러오면 다음과 같이 사용자가 정의했던 클래스네임과 고유한 클래스네임으로 이뤄진 객체가 반환됨 장점 클래스명이 충돌하는 단점을 극복할 수 있다. 컴포넌트 단위로 스타일을 적용할 때 유용하다. 유지보수가 편해진다. 단점 CSS Modules 는 컴포넌트를 작성할 때 한곳에서 모든 것을 작성하지 않는다. 많은 CSS 파일을 따로 관리해야하는 문제점 발생 사용법 [파일이름].module.css 으로 파일 명을 저장해야함 module.css 파일을 import 해준다 styles 를 console.log 로 확인해보면 객체로 받아와진..
크로스 브라우징 (Cross browsing) 크로스 브라우징이란? 웹 페이지가 웹 브라우저의 종류에 구애 받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업 HTML5, CSS3, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법 발생하는 이유 브라우저마다 렌더링 엔진이 다름 작동되지 않은 HTML , Javascript 코드가 존재 해석하지 못하는 CSS 코드가 존재 브라우저 버그 존재 브라우저마다 자체적인 CSS 스타일 렌더링 엔진 (or 레이아웃 엔진) 종류 페이지를 렌더링할 때 실질적으로 작업을 하게 되는 엔진 같은 엔진을 사용하면 다른 브라우저여도 비슷하게 출력 엔진의 종류 트라이던트 (Trident) 게코 (Gecko) 웹킷 (We..
렌더링 엔진 렌더링 엔진에 대해서 1. 요청받은 내용을 브라우저 화면에 표시해주는 역할 2. 브라우저마다 사용하는 렌더링 엔진이 다름 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않음. 엔진마다 읽을 수 있는 코드의 버전이 다름. 결론 : 크로스 브라우징 이슈가 발생 렌더링 엔진 동작 과정 Parsing 이란? 데이터를 렌더링하기에 앞서 브라우저는 서버로부터 받은 데이터를 해석해야함. 대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML, CSS 를 해석함. 이렇게 해석하는 과정을 뜻함. 브라우저의 렌더링 엔진은 HTML 을 Parsing 하여 DOM Tree 를 생성 렌더링 엔진이 스타일 태그 (CSS) 를 만나면 DOM 생성을 중지하고, CSS Parsing 작업을 시작해 CSSOM Tr..
웹 브라우저의 동작 순서 웹 브라우저에 대해 특징 웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신함 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 대표적인 HTTP 사용자 에이전트의 하나 웹 페이지를 가져오기 위해서, HTTP(HyperText Transder Protocol) 라고 하는 통신규약을 이용해 웹 서버와 통신하는 어플리케이션 종류 모질라 파이어폭스 구글 크롬 인터넷 익스플로러 (현재는 MS에서 지원을 중단) 마이크로소프트 엣지(MS가 새롭게 권고하는 웹 브라우저) 오페라 삼성 인터넷 사파리 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시 자원이란? 보통 HTML 문서지만 PDF 나 이미지 또는 다른 형태일 수도 있음. 북마크 관리자, 다운로드 관리자,..
코드 리팩토링와 클린 코드 리팩토링(refactoring) 이란? 결과의 변경 없이 코드의 구조를 재조정함 주로 가독성을 높이고 유지보수를 편하게 함 버그를 없애거나 새로운 기능을 추가하는 행위는 아님 사용자가 보는 외부 화면은 그대로 두면서, 내부 논리나 구조를 개선하는 유지보수 행위 리팩토링의 목적 / 하는 이유 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하기 위해서 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해서 소프트 웨어를 더 이해하기 쉽고 수정하기 쉽게 만들어서, 코드의 품질을 좋게 만들기 위함 리팩토링의 사용 시기 기능을 추가할 때 버그를 수정해야 할 때 코드 검토 (Code Review) 할 때 클린 코드 이란? 원하는 ..
가상 메모리 메모리란? 프로그램과 프로그램 수행에 필요한 데이터 및 코드를 저장하는 장치 메모리는 크게 내부 기억장치인 주 기억장치와 외부 기억장치인 보조 기억장치로 분류 주 기억장치 DRAM, CPU 안에 있는 레지스터 (register) 와 캐쉬 (cache memory) 등 외부 기억장치 SSD, HDD 등 가상 메모리란? 애플리케이션이 실행될 때, 실행에 필요한 일부분만 메모리에 올라감 애플리케이션의 나머지는 디스크에 남게 됨 디스크가 RAM의 보조 기억장치처럼 작동됨 빠르고 작은 기억장치(RAM)을 크고 느린 기억장치(디스크)와 병합하여, 하나의 크고 빠른 기억장치(가상 메모리)처럼 동작하게 됨. 가상 메모리를 구현하기 위해서는 컴퓨터가 특수 메모리 관리 하드웨어를 갖추고 있어야만 함. MMU (Memory..
CPU 스케줄러 스케줄러란? 프로세스 들 중에 무엇을 어떻게 어떤시간에 선택해야하는 것인지 원칙을 세워 실행하는 것 큐 (Queue) 프로세스를 스케줄링 하기 위한 큐는 세가지 종류가 있음. Job Queue : 현재 시스템 내에 있는 모든 프로세스의 집합 Ready Queue : 현재 메모리 내에 있으면서 CPU를 기다리는 프로세스의 집합 Device Queue : Device I/O 작업을 대기하고 있는 프로세스의 집합 스케줄러의 종류 장기 스케줄러 (Long-term scheduler or job scheduler) 메모리는 한정되어있는데 많은 프로세스들이 한꺼번에 메모리에 올라올 경우, 대용량 메모리(일반적으로 디스크)에 임시 저장이 저장되어 있는 프로세스 중 어떤 프로세스에 메모리를 할당하여 준비큐 (ready..

티스토리툴바