ETC (31) 썸네일형 리스트형 [#. ] 프로그램 설치 없이 블러, 모자이크 Blur Pixelize 기능 사용 후 저장 가능한 웹사이트 facepixelizer www.facepixelizer.com/ Facepixelizer | Pixelate - Blur - Anonymize Protect the privacy of your friends on Facebook with facepixelizer.com www.facepixelizer.com 코드나 정보를 가려야 하는데 프로그램까지 설치할 일은 아니고 이럴 때 이 웹사이트를 이용하면 편하다 모자이크, 블러 처리를 간편하게 이용할 수 있다 [#. ] CSR(Client Side Rendering)과 SSR(Server Side Rendering)이란? 차이점 최근 React로 유튜브 클론, 쇼핑몰 Vue로 Todo 웹을 개발해 보면서 React와 Vue의 공통점과 차이점에 대해 정리해가는 중이었다 그 과정에서 CSR, SSR 개념을 알게 되었고 정리해 보려고 한다 CSR(Client Side Rendering) 최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식 이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링 클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리 SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식 (React SSR 라이브러리=Next.js, Vue SSR 라이.. [#. CodePen] HTML, CSS, JS 코드와 화면을 동시에 볼 수 있는 코드펜 티스토리에 가져와서 사용하기 앞으로는 HTML, CSS, JS 관련 코드를 작성할 때 각각의 코드와 완성된 화면을 동시에 볼 수 있는 코드펜 CodePen을 사용하려고 한다 codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io ① 가입 후 Pen 생성 가입한 후 왼쪽에 Pen 클릭 ② 코드 작성 이렇게 펜이 생성되면 여기에 각각의 코드를 작성한다 ③ 작성 후 링크 가져오기 펜 하단에 Embed 클릭 => HTML 코드 가져오기 ④ 티스토.. [#. Markdown] Git README.md, Markdown 작성법 git README.md 작성 시 사용하는 마크다운 문법에 대해 정리해 보자 마크다운 마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다 마크업 언어 마크업 언어(markup)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다 장점 간결하고, 읽기 쉽다 단점 표준이 없다 제목 텍스트 앞에 #을 붙인다 최소 1개 최대 6개까지 사용 가능하고 ~과 동일하다 # H1 ## H2 ### H3 H1, H2은 아래와 같.. [#. Markdown Editor] Markdown Editor for Chrome 크롬 마크다운 에디터 github 프로젝트에서 README.md 파일을 관리하려고 하는데 수정하고 확인하고 수정하고 확인하는 과정이 번거롭다면 markdown editor를 사용하면 된다 vs code로도 확인이 가능하다고 하지만 나는 atom을 사용하고 있고 최대한 간편한 방법의 markdown editor를 사용하고 싶다 그래서 크롬 확장프로그램을 사용할 것이다 chrome.google.com/webstore/detail/markdown-editor-for-chrom/dkpldbigkfcgpamifjimiejipmodkigk?hl=ko Markdown Editor for Chrome Create and view markdown files from any were. Simple and easy. A Github Flavor.. [#. HTTP] HTTP의 특징과 쿠키(cookie), 세션(session)의 차이 쿠키(cookie), 세션(session)의 차이 사용하는 이유 HTTP 프로토콜의 특징이자 약점인 Connectionless(비연결성), Stateless(상태없음, 무상태) 을 보완하기 위해 사용한다 HTTP 특징 ① Connectionless(비연결성) 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어 버리는 성질 ② Stateless(상태없음, 무상태) 클라이언트의 상태 정보를 가지지 않는 서버 처리 방식 => 이렇게 HTTP의 Connectionless, Stateless 특징 때문에 발생하는 문제가 있다 쇼핑몰 접속 로그인 상세 페이지 로그인 장바구니 로그인 주문 로그인 … 상태 정보를 가지고 있지 않기 때문에 로그인 무한 반복을 수행.. #9. iframe 동영상 위에서 swiper slide not work 슬라이드 안 될 때 해결 swiper.js를 사용해서 동영상 리스트를 생성했는데 iframe 동영상 위를 슬라이드하면 작동하지 않는다 iframe이 터치 이벤트를 삼켜서 그렇다고 한다 iframe { pointer-events:none; } css에서 iframe 터치 이벤트를 무력화한다 동영상 재생이 되지 않지만, iframe youtube 이미지를 썸네일처럼만 사용하고 싶을 때는 가장 간단한 방법이다 #8. iframe youtube 썸네일을 이미지 주소로 가져오기 iframe으로 youtube 동영상을 끌어오고 싶은데 동영상 재생 화면이 아니라 썸네일로 끌어오고 싶다 youtube 썸네일을 따로 캡처하거나 수동으로 뭔가를 하지 않고 바로 이미지 주소를 끌어올 수 있다 https://www.youtube.com/embed/FNF_a8D2UEc 이렇게 youtube 주소가 있을 때 가장 뒤에 있는 저 값을 https://img.youtube.com/vi/FNF_a8D2UEc/0.jpg 이 위치에 넣어주면 자동으로 썸네일을 보여준다 위 아래 검정색 띠가 생기는데 이게 싫다면 아래를 사용한다 https://img.youtube.com/vi/FNF_a8D2UEc/mqdefault.jpg 이전 1 2 3 4 다음
