본문 바로가기

분류 전체보기

 (112)
브라우저 - 개발자도구 : 네트워크 / chorme browser - DevTools : Network 크롬 Ver. 브라우저에서 (mac 단축키) cmd + opt + i => network - status : 상태 200이면 정상 -> 각 숫자별 오류 확인 https://developer.mozilla.org/ko/docs/Web/HTTP/Status 1) 빨간색 점을 통해 레코딩이 진행된다. 다시 클릭하면 기록을 멈출 수 있으며 정지되기 전까지 주고받은 모든 Network 요소를 보여준다. 오른쪽 🚫을 클릭하면 기록된 모든 요소를 지운다. 2) Filter▽와 Search🔍는 이름과 같이 필터링하고, 검색하는 기능. Filter는 네트워크 소스를 타입별로 볼 수 있으며, 대체로 Fetch/XHR 이 주로 사용된다. 별도의 Filtering 방식을 : 예를들어 HTTP Method 가 GET 인 인터페..
22.06.23 TIL - 컴퓨터처럼 사고하는 것이 무엇인지 설명할 수 있다. 논리적이며 순차적으로 해결할 수 있도록 문제를 구조화 한다. 작게 쪼개어 분석, 해체, 과거의 문제들과 어떤 연계가 되는지 패턴을 이해 문제를 이해하고, 문제를 작게 분해해서 어떻게 해결할 지 생각해보자. 개발자란? 문제를 해결하는 사람. - 객체의 키에 동적(변수)으로 접근하기 Object 두번째 강의에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다. const information = { name: '김개발' } 여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 합니다. 그런데 키와 값을 변수를 통해 받아온다면..
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.이벤트 루프 이벤..

티스토리툴바