개발바닥/FrontEnd (6) 썸네일형 리스트형 Nunjucks에 대해 알아보자. 안녕하세요 Devport 입니다. 회사에서 서버는 Flask Framework를 사용하고 있는데요. Flask의 템플릿엔진을 사용하는 페이지 들이 있는데 매번 서버에 도큐먼트를 올려 검증을 하는 과정으로 인하여 Nunjucks 모듈에 대해서 알아보려고 합니다. Nunjucks(넌적스)? Nunjucks는 Javascript를 위해서 강력하고 정교한 템플릿 엔진을 제공 합니다. jinja2에 영감을 받아 개발되었기 때문에 많은 부분에서 Flask의 Template 엔진과 유사한 부분이 많이 있다고 볼 수 있습니다. Nunjucks에서는 Rich: 블록 상속, 자동 이스케이핑, 매크로, 비동기 제어 등의 기능을 제공합니다. Fast & Lean: 브라우저에 미리 컴파일된 템플릿으로 빠른 성능 Extensib.. E2E 테스트 프레임 워크 - Playwright_번역본 안녕하세요 Devport 입니다. 이번에 테스트 프레임워크 중 하나인 E2E에 대해서 스터디 하기 위해서 일단 Github 문서를 번역해두고 추후에도 쉽게 확인하기 위해서 해당 블로그를 작성하였습니다. 의역 및 오역이 있을 수 있을 수 있기 때문에 잘못 번역된 부분은 알려주시면 감사하겠습니다. Playwright? 단일 API로 Chromium, Firefox 및 WebKit을 자동화하는 Node.js 라이브러리 입니다. Playwright는 항상 친환경적이고 유능하고 안정적이며 빠른 크로스 브라우저 웹 자동화를 가능하게도록 구축되었습니다. Linux macOS Windows Chromium 97.0.4681.0 ✅ ✅ ✅ WebKit 15.4 ✅ ✅ ✅ Firefox 93.0 ✅ ✅ ✅ 사용방법 npm.. [개발] Chrome 비밀번호 변경 팝업이 뜨는 이유 안녕하세요 devport 입니다. 이번 포스팅에서는 아래와 같은 팝업이 뜬다면? 왜 뜨는지에 대해서 알아보도록 하겠습니다. 저는 웹을 개발 하던 중에 패스워드를 입력하여 권한을 습득하고 수정할 수 있는 컴포넌트에 대한 개발을 진행하고 있었습니다. 무심코 패스워드를 입력하고 확인을 하였을 때 위와 같은 "사이트 또는 앱의 정보 유출로 인해 비밀번호가 노출되었습니다." 라는 팝업이 노출 되는 것을 확인하였습니다. 로컬에서 개발이 진행이 되는데 어떻게 유출이 되었다고 하는 것일까요? 어떻게 하면 저 팝업이 사라질 수 있는지 그리고 팝업이 출력되는지 이유를 확인해보도록 하겠습니다. 일단 Google Chrome에서 2019-12에 비밀번호 확인 기능이 추가되었다고 합니다. 웹사이트에서 로그인시에 "사용자 계정과.. [개발] Chrome 자동완성을 막아보자 안녕하세요 devport 입니다. 이번에 개발을 진행하면서 Chrome에서 Input타입 컴포넌트에 Name과 Password가 자동으로 입력되어 불편함을 느끼게 되었고 Chrome 버전마다 해결 하는 방법들이 상이하여 이를 막을 수 있는 방법을 히스토리 형식으로 남겨두려고 합니다. Chrome version Solution 87.0.4280.88 autocomplete="new-password" [개발] CSS - Flex Box 요점 정리 안녕하세요 Devport 입니다. 이번 포스팅에서는 CSS 스타일 중 하나인 Flexible Box에 대한 사용방법에 대해서 간단하게 정리해보려고 합니다. Flex Container display: flex; flex-direction (default: row) Flex Items의 주가 되는 축을 설정합니다. 수평축 or 수직축 등.. row: 방향으로 표시 row-reverse: 방향으로 표시 column: 방향으로 표시 column-reverse: 방향으로 표시 flex-wrap (default: nowrap) Items의 여러 묶음을 설정합니다. nowrap: 줄바뀜이 되지 않고 영영을 벗어날수 있음 wrap: Items를 여러 줄로 묶음 (Item들이 컨테이너의 범위를 넘어서게 되려 할때 다음줄.. [개발] Frontend에서 Cors 해결방법 안녕하세요 devport 입니다. 웹 개발을 하다보면 같은 출처가 아닌 외부의 API를 사용하고자 할때 웹 브라우저에서 에러가 발생하게 됩니다. 에러가 발생하는 이유는 브라우저의 CORS 정책에 위반되기 때문입니다. FrontEnd개발 시에 극복할 수 있는 방법들에 대해서 알아보도록 하겠습니다. 우선 간단히 SOP, CORS 정책에 대해서 알아보도록 하겠습니다. SOP (Same-Origin Policy) 위키에서는 SOP를 "동일 출처 정책"이라고 합니다. 정책명 그대로 동일 출처의 리소스 (HTTP, IMG, CSS... 등)만을 요청할 수 있습니다. 그렇기 때문에 다른 출처의 데이터를 요청을 한다는 것은 정책에 위배되는 행위라고 볼 수 있습니다. 하지만 다른 출처의 요소들에 대해서 허용도 가능해야하.. 이전 1 다음
