밤토리
728x90
article thumbnail
[꿀팁] 엣지/크롬 개발자도구 Device Mode 활용
IT기술용어/FrontEnd 2023. 7. 20. 19:08

최근 media query에 대해서 공부를 하다가 이제서야 발견한 사실.. 브라우저내에서 지원하는 Device Mode인데요. 사실 반응형웹에 대해서 크게 관심이 없다면 스쳐지나갈법 합니다. Device Mode Device Mode는 모바일이나 데스크탑의 장치별로 Viewport를 확인하거나 조정할 수 있습니다. 그동안 브라우저 창의 크기를 마우스로 수동 조정하여 해상도별 디자인을 확인해야했던 시간들을 단축시킬 수 있습니다. 개발자도구 (브라우저 + F12 혹은 아래 이미지 참고)를 엽니다. 개발자 도구를 확인할 수 있는데, 아래 이미지중 노란색으로 동그랗게 칠한 아이콘을 누릅니다. width, height 조정 (웹페이지 해상도 수동 확인) 아래의 이미지처럼 width와 height를 원하는 크기만큼..

article thumbnail
[Meta Tags] 메타 태그란
IT기술용어/FrontEnd 2023. 7. 17. 22:47

메타태그란 무엇일까요? 프론트 개발을 하면서 메타태그를 스쳐지나간 경험이 있을거라 생각합니다. 메타태그란 html의 태그 요소중 하나입니다. html 문서가 어떤 내용물을, 핵심 키워드는 무엇인지, 어떤 정보들이 있는지를 담고있는 태그라고 볼 수 있습니다. 성공적인 SEO를 위해서도 사용됩니다 기본적인 문법은 로 이루어져 있습니다. 아직 meta 태그를 본적이 없으신가요? 가령 티스토리의 meta태그는 아래와 같습니다. 1. viewport 모바일웹이나 반응형웹에서 기기장치를 인식할 때 사용 사용중인 장치와 동일하게 뷰포트의 너비를 설정하는데 사용 width=device-width : 모바일 기기(장치)의 화면 너비를 따르도록 페이지 너비를 설정 initial-scale=1.0 : 브라우저에서 페이지를 ..

article thumbnail
[React] Side-effect와 순수함수
Frontend/React 2023. 7. 9. 01:09

"사이드 이펙트"라는 용어들을 종종 듣게 되었다. 사이드 이펙트는 번역하면 "부작용"인데, 음 도대체 어쩌라는거지... 뭔소리지.. 라는 의문을 가졌다. Side-effect란 보통 함수형 프로그래밍에서 주로 쓰이는 용어로 순수 함수와 다른말이다. 📌 Pure Function 순수함수 1. 함수의 리턴값은 예측 가능하며 동일하다 2. 함수 외부의 값이나 함수에 전달된 값을 변경하지 않는 함수 위의 이미지처럼 addNum에 a와 b를 넣었을때 리턴되는 값은 3이라는걸 예측할 수 있다. 이를 순수 함수라고 부른다. 이와 반대되는 Side-effect는 무엇일까? 📌Side-effect 예측되지 않은 것 Side-effect는 항상 같은 결과를 리턴하지 않는, 즉 예측할 수 없는 특징을 가지고 있다. 예를들어..

article thumbnail
[NextJS] v13 정리 (12↔13 차이점)
Frontend/NextJS 2023. 7. 4. 13:25

NEXTJS 13 정리 13버전부터는 모든 React 컴포넌트는 서버사이드 컴포넌트입니다. app 디렉토리 v12 : pages 폴더 하위의 모든 파일들이 하나의 경로였습니다. v13 : app/ 이라는 디렉토리가 만들어졌습니다. 그리고 아래의 컴포넌트 들을 구성할 수 있습니다. 12버전의 pages 와 별 다를것 없어보이지만 app 디렉토리를 사용하면 디렉토리 구조도 깔끔해지고 layout, React 서버 컴포넌트, 스트리밍의 여러가지 기능이 존재합니다. layout.tsx 기존 pages 폴더 밑에 있던 _app.tsx 파일과 _document.tsx 파일의 역할을 합니다. app 폴더 밑에 이렇게 꼭 한 개의 layout.tsx 파일이 있어야 합니다. export default function R..

728x90