웹 개발 알아두기 (33) 썸네일형 리스트형 환경변수 사용하기 환경변수는 고정된 값이 아닌 변수를 사용하게 해 주어 개발환경과 프로덕션환경 사이에서 필요한 설정 값을 변경할 필요 없이 한 번의 설정으로 모두 적용되게 하며, 민감한 정보의 노출을 숨길 수 있는 장점이 있습니다 (프로젝트 빌드 파일에 포함되므로 완벽히 보호되는 것은 아님). 웹 애플리케이션을 만드는데 다양한 프레임워크와 도구가 사용되는 만큼 환경변수를 지정하는 방법도 조금씩 다르므로 다양한 예시를 통해 환경변수를 설정하는 방법을 볼까 합니다. HTML 삽입 미리보기할 수 없는 소스 티스토리 - 스타일링 완성된 공통스타일 코드 /* Custom Styles */ img { border-radius: 5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); margin: 10px 0 !important; } .entry-content p, span, a, td { font-size: 1.2rem !important; } .entry-content h1 { font-size: 1.8rem !important; } .entry-content h2 { font-size: 1.7rem !important; } .entry-content h3 { font-size: 1.6rem !important; } .entry-content h4 { font-size: 1.5rem !impo.. Single-Page-Application Single Page Application (SPA)은 화면의 일부를 동적으로 변화하는 방식으로 기존에 화면전체를 불러오는 방식과 달리 화면의 일부만 변경이 가능하며 세션의 변화가 없기 때문에 화면 로딩시간이 단축됩니다. 작동방법 전통적인 방식 (MPA: Multi-Page-Application)은 요청이 있을 때마다 화면전체 구성을 새로이 해서 전송합니다 (매 요청이 있을 때마다 HTML을 새로 다운로드). 하지만 SPA는 최초에 HTML파일이 다운로드되고 나면 해당 템플릿을 사용하여 변경요청이 있는 부분만 새로운 정보로 대체하며 HTML을 다시 다운로드하지 않습니다. 장점 SPA의 가장 큰 장점은 속도 향상인데요. 사용자에게 네이티브 앱과 같은 수준의 속도를 제공함으로써 사용자의 경험을 크게 향상할 .. 티스토리 목차 링크 만들기 티스토리에서 글을 쓰다 목차가 필요해서 목차에 hyperlink를 다는 기능을 찾아보았습니다. 결론은 없더군요 ㅎㅎ 그래서 검색을 해 보니 결국 html블록을 통해 입력하는 형식으로 구현하길래 저도 한번 만들어 보았습니다. 방식은 가장 일반적인 목차를 태그를 사용하여 HTML블록에 지정하고 해당 섹션의 아이디와 연결하는 방법으로 구현하였는데요. 구현하기 먼저, 상단에 목차라는 글을 쓰고 아래 코드를 HTML 코드 블록에 삽입합니다. 미팅참석하기 화면공유하기 채팅하기 상대방이 공유한화면 크게보기 화면 레이아웃 바꾸기 전체화면 ※ HTML블록 찾기 그러면 저장된 글에서 아래와 같이 표시되는데요. 다음으로 해당 섹션을 id요소로 연결만 해 주면 됩니다. 주의할 점은 목차의 각 메뉴의 태그 href요소에 사용된.. CORS CORS (Cross-Origin Resource Sharing)은 http 프로토콜 헤더 중 하나로 서버가 자신 이외의 출처를 가지는 소스를 포함할 경우 이를 표시하는 기능을 합니다. 목적은 브라우저가 데이터 요청하고 서버가 요청받은 데이터를 전송 시 보안성을 향상하기 위함인데요. 설정에 따라 브라우저는 출처에 따라 접근을 제한하는데요. 예를 들어, Fetch API는 애플리케이션과 같은 출처를 가진 소스만 사용할 수 있습니다. 즉, domainA라는 도메인을 명을 가진 브라우저가 domainB라는 서버에 데이터를 요청하는 경우 헤더설정 여부에 따라 아래와 같이 접근이 제한되게 됩니다. 이런 문제는 프로덕션 버전에서는 발생하지 않고 개발환경에서만 발생하는데요. 이유는 브라우저가 스크립트에서 발생한 cr.. 데프리케잇 코드를 짜다 보면 종종 데프리케잇이라는 메시지를 볼 수 있는데요. 데프리케잇은 버전이 업데이트되면서 다른 방법으로 구현할 수 있게 되어 필요가 없어진 기능을 말합니다. 데프리케잇 코드는 삭제되기 전까지는 정상작동 하지만 언젠가는 사라질 기능이기 때문에 대체된 코드를 사용하는 것이 바람직합니다. 예를 들면, HTML canvas 속성 중 mozOpaque이란 속성은 캔버스의 불투명 여부를 설정하는 기능으로 이전에는 사용되었느나, 사용할 수 있는 브라우저가 제한되고 같은 기능을 캔버스 설정 시 구현할 수 있는 방법이 생기면서 데프리케잇 코드가 되었습니다. 데프리케잇이 된 코드는 통상적으로 아래와 같이 경고 메시지와 대체 가능한 코드를 안내해 줍니다. 이상으로 데프리케잇에 대해 알아보았습니다. HTML 삽입 .. 브라우저 브라우저는 유저가 서버로부터 HTML형태의 정보를 가져와서 이를 문자와 이미지 등의 형태로 변화하여 화면에 표시해 주는 역할을 합니다. 불과 2000년대 초반까지 윈도 익스플로러가 주를 이루었던 반면 지금은 수를 헤아리기 어려울 정도로 많은 브라우저가 존재하는데요. Google Chrome 구글이 개발한 브라우저로 애플의 Webkit과 모질라의 파이어폭스를 기반으로 2008년에 출시한 이래로 독보적인 인기를 자랑하고 있는 브라우저입니다. 크롬은 자바스크립트의 구동속도를 향상하기 위해 자체개발한 V8엔진 등을 바탕으로 한 빠른 검색속도와 검색에 최적화된 화면구성으로 사용자가 가장 사용하기 편리한 브라우저로 꼽히는데요. 전 세계 브라우저 시장의 점유율이 50%를 넘는 데는 이유가 있겠죠. Mozilla Fi.. Add to Home screen (A2HS) 거의 모든 브라우저에서 제공하는 기능으로 웹앱을 설치할 수 있게 해 줍니다. 설정방법 모바일과 데스크톱의 설정 방법은 같으나 설치에서 조금 차이가 있는데요 먼저 설정방법을 보겠습니다. 설정방법은 간단한데요. 먼저, manifest file을 만듭니다 (root 폴더에 설치 권장). 이때, .webmanifest 또는 .json 연장자를 사용합니다. example.webmanifest 또는 example.json { "background_color": "red", // 배경색이 들어가는 화면에서 제공됨 "description": "test", "display": "fullscreen", "icons": [ // 브라우저 아이콘 { "src": "icon/fox-icon.png", "sizes": "192x.. 이전 1 2 3 4 5 다음
