본문 바로가기

Frontend Study - 2

 (94)
22.06.22 TIL - 매개변수(parameter) 함수가 외부에서 입력 받은 데이터를 처리하는 경우. 함수가 외부의 값을 받을 때. 정의된 함수의 소괄호 내부에 name 이라는 단어가 들어 있습니다. 함수 이름 옆 소괄호 자리에 적혀 있는 단어를 **매개변수(parameter)**라고 부릅니다. function getName(name) { return name + '님'; } 매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 합니다. 함수 외부로부터 들어온 값이 담길 '자리' ! - 인자(argument) let result1 = getName('개발자'); let result1 = getName('개발자'); // '개발자님' 출력 let result3 = getName('프론트엔드 ..
22.06.21 TIL - Position 가운데 정렬 팁. img { position : absolute; left : 50%; } 부모의 50%이라는 의미는, 부모가 100px이었다면, 이미지가 left: 50px으로 이동했다는 뜻입니다. 사과이미지의 왼쪽시작선이 50px에서 시작하게 되죠. 그래서 사과가 차지하는 영역은 50%+20px입니다. 한가운데 지점에서 이미지가 시작하고 20px만큼 차지했으니 이미지의 중심점이 한가운데가 아닌것입니다. 다시 사과이미지의 반만큼 왼쪽으로 이동시키면 이제 한가운데로 이동하게 됩니다. -vh, vw와 width % 차이 vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100..
22.06.20 TIL - id 태그 id는 태그에 이름을 주는 속성입니다. 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다. 따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다. 즉, 중복된 id 이름이 있으면 안됩니다. - 인라인 스타일의 스타일 태그 style 속성에 직접 작성할 수 있습니다. FRONTEND 101 빠르고 편합니다. 적용해야할 스타일이 많아지면 코드 가독성이 떨어질 것. html 태그와 style코드가 혼재되어 있어 유지보수에도 좋지 않다. FRONTEND 101 - html - css 연결 파일에 작성: html 파일과 분리하여 css파일에 따로 작성하는 방법입니다. html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를..
CSS : (Position - relative, absolute, fixed) / inline /inline-block / block Position position 속성은 문서 상 요소들을 어떻게 배치할 지 정합니다. Top, Right, Bottom, Left 속성을 이용해서 요소의 최종 위치를 결정합니다. position 속성은 하나의 키워드 값을 선택해 지정할 수 있습니다. static | relative | absolute | fixed | sticky Static 요소를 일반적인 문서 흐름에 따라 배치합니다. Top, Right, Bottom, Left, z-index 속성에 영향을 받지 않는 기본값입니다. Relative 요소를 일반적인 문서 흐름에 따라 배치하고, 현재 자기 자신의 위치를 기준으로 top, right, bottom, left의 값에 따라 위치의 변화를 적용합니다. 다른 요소에는 영향을 주지 않습니다. 즉 ..
Semantic Web & Semantic Tag Semantic Web ‘의미론적인 웹’ 사람의 언어에 대한 이해를 컴퓨터 언어로 표현하고 이것을 컴퓨터가 사용할 수 있게 만드는 것. 무분별하게 축적된 수 많은 정보들이 잡다한 데이터 집합이 아닌 ‘의미’ 와 ‘관련성’을 가지게 하자는 발상. 아래 Semantic tag을 예시로 보면 이해가 쉽다. Semantic tag 사람과 기계가 이해할 수 있는 형태의 Tag, 즉 활용하기 좋은 형태의 tag -> 컴퓨터는 이 부분이 header 라는 것을 이해할 수 있게된다. non-semantic Tag : div , span -> 자신이 무엇인지 설명해주지 않는다. semantic Tag : form , table , img -> 자신이 어떤 요소인지 설명한다.
자바스크립트 엔진(2) 멀티스레드 처럼 작업 수행하기 (Event loop, Task que) 자바스크립트 엔진 : 싱글 스레드(Single thread) 브라우저에 내장된 자바스크립트 엔진은 한 번에 태스크(task) 1개만 처리하는 싱글스레드 방식으로 동작한다. 그런데 자바스크립트로 동작하는 브라우저를 보면 여러가지 일이 동시에 실행되는 상황이 나오기도 한다. 어떻게 싱글 스레드로 여러 가지 일이 동시에 실행되는 것처럼 만드는 걸까? 싱글 스레드에서 여러 가지 일이 동시에 실행되는 것처럼 보이게 하기 위해서는 이벤트 루프(Event Loop)가 필요하다. 이벤트 루프는 웹 브라우저에 내장된 기능. 브라우저 환경 : 태스크 큐, 이벤트 루프 1.태스크 큐 setTimeout 이나 setInterval 같은 비동기 함수의 콜백 함수, 이벤트 핸들러가 일시적으로 보관되는 영역. 2.이벤트 루프 이벤..
프로세스와 스레드 (Process & Thread) 프로그램(Program) : 컴퓨터에서 실행될 때 특정 작업을 수행하는 일련의 명령어들의 모음. 프로세스(Process) 운영체제 위에서 연속적으로 독립적으로 실행되고 있는 프로그램. 실행 중에 있는 프로그램. 프로세스마다 할당된 데이터, 리소스들이 지정되어 있습니다. (CPU 시간..) 운영체제로부터 시스템 자원을 할당받는 작업의 단위 즉, 동적인 개념으로는 실행된 프로그램을 의미합니다. 운영되기 위해 필요한 주소 공간 Code, Data, Stack, Heap의 구조로 되어 있는 독립된 메모리 영역 프로세스는 각각 독립된 메모리 영역(Code, Data, Stack, Heap의 구조)을 할당받습니다. Code : 실행할 프로그램의 코드 및 매크로 상수가 기계어 형태로 저장되는 공간. CPU는 코드영역..
브라우저 렌더링 과정 + 자바스크립트 (browser rendering process & javascript) 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있습니다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해집니다. 브라우저의 주요 구성 요소. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하..

티스토리툴바