둥이의 개발여행

HTML 실행 위치에 따른 오작동HTML 문서는 객체 태그들을 위에서부터 아래로 차례차례 읽어 들인다. 그런데 이러한 특성으로 인해 가끔 자바스크립트의 작성 위치에 따라 오류를 일으키기도 한다.  예를들어 아래 코드와 같이 hello   이러한 까닭은 HTML은 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해, 자바스크립트의 document.getElementById('name') 가 html 내부 id인 name 태그가 생성되기도 전에 실행되므로 요소를 가져올 수가 없어 문제가 일어나는 것이다. 그러므로 자바스크립트 태그를 문서의 뒤로 옮겨야만 하는데, 문제가 해결되기는 하지만 html 문서가 길어진다면, 아래쪽에 놓여있어 휠을 내리기도 귀찮고 보기에..

CORS란?교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 웹 애플리케이션에서 발생하는 보안 정책 중 하나입니다. 이는 웹 애프리케이션의 동일 출처 정책(Same-Origin Policy)을 우회하기 위한 매커니즘으로(서로 다른 Origin에서 리소스를 로드할 수 있도록 하는 매커니즘), 다른 출처(프로토콜, 도메인, 포트)로부터의 리소스 요청을 허용하는 방법을 정의합니다. 기본적으로 브라우저는 보안상의 이유로 스크립트에서 온 요청의 출처가 같은지 확인합니다. 다른 출처에서의 요청은 일반적으로 차단됩니다. 그러나 CORS를 통해 다른 출처에서의 요청을 허용할 수 있습니다. 프로토콜(scheme), 도메인(host), 포트 번호가 모두 일치하면 동일 출처(Same..

소개브라우저는 아마도 가장 많이 사용하는 소프트웨어입니다. 이 글을 통해 브라우저가 어떻게 동작하는지 설명하려고 한다. 브라우저 주소 창에 naver.com을 입력했을 때 어떤 과정을 거쳐 네이버 페이지가 화면에 보이게 되는지 알게 될것입니다. 웹 브라우저란?웹 브라우저란 웹에서 정보를 탐색하고 HTML문서, 이미지 등 여러 콘텐츠를 우리에게 표현해주는 소프트웨어로 구글 크롬, 애플의 사파리, 마이크로소프트 엣지, 모질라 파이어폭스 등이 있다. 브라우저의 기본 구조사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어렌더링 엔진 : 요청한 콘텐츠(HTML/CSS 등)를 파싱(parsing..

웹 페이지에서 마진(margin)과 패딩(padding)은 여백 공간을 의미합니다. 마진과 패딩을 잘 활용하면 웹 페이지 상에서 원하는 공간에 콘텐츠를 삽입할 수 있게됩니다. 그렇다면 마진과 패딩은 무엇을 뜻하고 이들을 어떻게 사용해야 할까요? 웹 페이지 요소웹 페이지에 요소를 삽입하면 다음과 같은 구성을 갖습니다. 제일 내부에 실제로 우리가 보게되는 콘텐츠가 있고, 그 밖을 패딩이, 패딩의 겉은 테두리가 둘러싸고 있습니다. 그리고 테두리와 다른 요소사이의 공백은 ㅁ영역이라고 합니다.마진 margin 마진(margin)은 현재 요소 주변의 여백 공간을 의미합니다. 마진을 조절하면 현재 요소와 다른 요소간의 공간을 조절할 수 있습니다.마진 속성마진은 다음과 같은 속성으로 영역을 조절할 수 있습니다.marg..

시맨틱 (Semantic)이란?우선 '시맨틱'이라는 단어는 '의미의, 의미론적인' 라는 뜻이 담겨있습니다. 이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있습니다. 시맨틱 태그는 웹 페이지에 보이는 것 이상의 정보를 제공합니다. 웹 기술이 발전함에 따라 태그의 내용은 정보로서 높은 가치를 포함해야 한다는 점이 점점 더 중요해지고 있습니다. 그래서 개발자들은 유용한 형태의 데이터로 웹을 만들기 위해 노력해야 합니다. 그러한 노력 중 하나가 바로 시맨틱 태그를 사용하는 것입니다. 이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉, 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있습니다. 따라서 SEO (검색엔진최적화) 성능을 더욱 향상할 수 있습니다.시맨틱 ..

문제출처 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 입출력 예 소스코드 풀이가로 혹은 세로가 긴 명함이지만 명함은 회전 시킬 수 있기 때문에가로와 세로 중 더 큰 값을 가로에, 작은 값은 세로가 되도록 명함의 사이즈들을 변경한 후가로 길이 중 max값 * 세로 길이 중 max값을 통해 모든 명함이 들어갈 수 있는 최소 사이즈를 구할 수 있습니다.

문제출처 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 소스코드1 - `` 백틱 사용소스코드2 - map() 사용

문제출처 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 소스코드

문제출처 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 소스코드

문제출처 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 소스코드