티스토리

디비의 DB
검색하기

블로그 홈

디비의 DB

dbdbd.tistory.com/m

Deeb 님의 블로그입니다.

구독자
6
방명록 방문하기

주요 글 목록

  • [React, next-auth] DefaultSession - session에 넣을 정보 변경하기 next-auth를 사용해서 useSsession으로 session에 올라간 정보를 받아오는 과정에서 token에는 다른 정보들이 다 저장되어있는데 defaultsession이라는 만들지도 않은 게 지정되어있었다 아무리 파일내에서 찾아도 안 나왔다... 그래서 이름처럼 기본적으로 설정된거라고 짐작해서 공식문서를 찾아보았고 역시 공식문서가 최고다 https://next-auth.js.org/getting-started/typescript#module-augmentation TypeScript | NextAuth.js NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use T.. 공감수 1 댓글수 0 2022. 10. 14.
  • [CSS] 중앙정렬 하는법 1. position: absolute 이용하기 부모요소에 relative를 주고 height을 뷰포트 기준으로 잡아준다. position: relative; height: 100vh; 중앙정렬을 할 요소에 absolute를 주고 transform으로 요소 사이즈만큼 반대로 이동시킨다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 공감수 0 댓글수 0 2022. 8. 21.
  • [React] fetch 와 axios 어떤 차이가 있을까? + axios 설치하지 않을 경우 에러 리액트 프로젝트를 진행하면서 fetch와 axios 둘 중 어떤 걸 사용할지 논의를 했었는데 둘 다 큰 차이가 없고 비동기 통신할 때 사용하는 걸로만 알고 있었지만 내가 이걸 왜 사용하는지 알고 쓰고 싶어서 정리해 보았다. fetch와 axios 둘 다 js의 비동기 통신을 할 때 사용하는 방법이다. fetch는 전역 fetch()를 통해 비동기적으로 가져올 수 있고 자바스크립트에서 기본적으로 제공해주는 것이기때문에 별도의 설치가 필요없지만 사용하기 위해서는 .json()을 사용해 JSON데이터 형식으로 변환해서 사용해야한다. axios는 node.js에서 사용할 수 있는 promise 기반 라이브러리로 npm, yarn 같은 패키지 매니저를 통해 설치할 수 있다. 자동으로 JSON데이터 형식이 된다. .. 공감수 0 댓글수 0 2022. 8. 20.
  • 반응형 단계별로 쉽게 접근해보기 css를 하다보면 반응형 만들기가 쉽지 않다. css는 넘쳐나고 어떤 부분을 반응형으로 바꿔야한 고민되는데 조금 가볍게 접근하는 방법에 대해 알아보자! 반응형으로 바꾸는 순서 1. reset빼고 @media태그 안에 전부 ctrl + c, ctrl + v한다. - reset 관련 속성을 제외하고 /* layout */부터 footer 영역까지 반응형이 필요한 부분 다 그대로 넣는다. 2. 길이나 크기를 조절하는 요소외에 나머지 지우기 3. font나 margin등 변경되는 부분들 수정하기 Tip! 되도록 반응형을 할 때 추가 property가 없게 만든다. 그래서 처음부터 단축 속성을 미리 써두면 좋다고한다. property value만 바꿔주면 되기때문인데 property 하나하나 쓰면 property.. 공감수 0 댓글수 0 2022. 7. 3.
  • [React] 단축키 https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md 공감수 0 댓글수 0 2022. 6. 16.
  • [React] Hook에 대해 알아보자. 그런데 useState 등을 곁들인 다들 Hook부터는 어려워진다. 인강을 들어도 이해하는게 힘들다고하는데 역시나 쉽지 않다. 그래서 나름 시리즈(?)에 걸쳐 Hook과 useState, useRef, useMemo에 대해 포스팅 하려고한다. Hook이란 뭘까? "기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다" 특징 - 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 이러한 훅은 함수의 최상위 레벨에서만 정의한다. 조건으로 훅을 할당하지 않는다. 렌더링 될 때 항상 같은 순서로 렌더링이 되야 한다 공식문서의 글을 읽어보면 간결하게 사용할 수 있게 한다고 이해할 수 있다. 📌 useState 변수의 변화를 감지하여 재렌더링하게 해주는 훅으로 .. 공감수 0 댓글수 0 2022. 6. 14.
  • [React] 조각조각 땃따따 컴포넌트 만들어보기 앞서 리액트의 장점이 컴포넌트화라는 포스팅을 했다. 재사용 하기위해 컴포넌트가 중요하다고하는데 그래서 그 컴포넌트화가 대체 무엇인지 어떻게 하는지 정리해보려고 한다. 리액트에서 컴포넌트로 만들 때 이 3가지 방법을 사용한다. 본인이 마음에 드는걸 써도 되고 회사 컨벤션을 따라가면된다. const Section =()=>{} const Section = function(){} function Section(){} 컴포넌트를 어디까지 해야할까?? import './App.css' function Menu () { return ( menu ) } function Header(){ return ( header ) } function Main(){ return ( section ) } function Footer.. 공감수 0 댓글수 0 2022. 6. 9.
  • [CSS] height과 min-height 똑같아 보이는데 무슨 차이지? 요소를 가운데 정렬하기 위해서는 flex를 쓰고 align-items와 justfy-content는 가운데 정렬이 되게 한다는걸 알고 있다. body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } 그런데 min-height : 100vh;를 적용했더니 화면을 기준으로 정가운데 정렬이 되었다.🤔 여기서 헷갈리는 점은 height : 100vh;와 min-height : 100vh;의 결과가 같아 보인다는 점이다. 이유는 min-height은 말 그대로 "최소 높이"라는 뜻인데 만약 값으로 min-height 100vh를 준다면 뷰포트 높이 100%가 최소값이 된다. 즉 요소의 최소높이.. 공감수 0 댓글수 0 2022. 5. 26.
  • [JS] 온라인 컴파일러 https://www.programiz.com/javascript/online-compiler/ Online JavaScript Compiler (Editor) www.programiz.com 공감수 0 댓글수 0 2022. 4. 28.
  • [Error] VSCode Extension , Sass 에러 해결하기 문제 HTML, CSS할 때까지만해도 아무 문제없던 Extension들이 Sass를 하면서 갑자기 동작하지 않았다. 캡처해둔 에러는 이것뿐이지만 open.live.server~~~ 이러면서 emmet도 안되고 open live server도 안되는 상황이었다. 자동완성이 안되니 태그 하나하나를 일일히 써야했다. 해결 방법 1. 정확한 문제 파악하기 - 다른 폴더에서는 잘 됐었기때문에 특정 폴더에서만 생긴 문제라는걸 알았다. 그래서 폴더 별로 옮기면서 어느쪽에 문제가 있는지 찾았고 Sass폴더가 문제였다는걸 발견했다. 2. extension 변경 - 기존에 사용했던 extension 삭제하고 다른 extension 설치하기 다른 블로그에서 캡처한걸 보고 소리쳤다,,, 읽자마자 이게 내 문제를 해결해줄 답인.. 공감수 0 댓글수 0 2022. 4. 27.
  • [CSS] 11 float + 실습 피드백 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 4. 26.
  • [CSS] IR(Image Replacement) 기법, .blind & .screen_out IR(Image Replacement) 기법 이미지를 볼 수 없는 사용자를 고려하여 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다. 모든 곳이 동일하게 했으면 좋겠지만 여러 방법이 있는 이유는 브라우저도 다양하고 스크린리더 종류마다 다르기때문인것같다. 네이버와 다음 두 사이트에서 IR 기법을 어떻게 처리하는지 비교해보았다. 1. 다음 .screen_out { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } -> width나 height이 0으로 되면 안 읽는 경우가 있다. SEO를 위한거지 스크린 리더를 위한.. 공감수 0 댓글수 0 2022. 4. 12.
  • [CSS] reset.css 그리고 common.css 💡 reset.css 꼭 해야할까? 많은 브라우저들과 각 브라우저별 스타일이 다르다! 하나의 브라우저에서만 지원할 수 없기에 브라우저별 다른 스타일을 동일하게 맞추고 css가 적용될 때 동일한 효과가 적용되기 위해 사용한다. 왼쪽 그림은 사파리, 오른쪽 그림은 크롬의 스타일이다. 이처럼 각 브라우저마다 제공하는 요소의 기본 스타일이 모두 다르다. 개발자들은 디자이너에게 받은 웹디자인을 구현하기 위해 각각의 브라우저에 따라 다른 스타일을 부여 해야한다는 문제가 생긴다. 이렇게 비효율적인 상황을 해결하기위해 reset.css를 사용한다. 💡 그렇다면 reset.css는 모두 똑같은걸 쓸까? 일단 회사마다 다르다. reset.css를 제공해주는 사이트들이 있지만 그걸 베이스로 회사마다 수정하여 사용한다고 한다.. 공감수 0 댓글수 0 2022. 4. 6.
  • [HTML] Tabular data <table> 1. 테이블을 생성할 때 사용하는 태그로 하나의 테이블을 정의한다. 컨테이너 요소로 내부의 요소들을 묶을 때 사용하는데 내부에는 제목(caption)과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용된다. 제목부터 표까지 포함한 큰 영역을 의미한다. 2. 테이블의 제목이나 설명을 의미하므로 제목에 맞게 요소의 첫번째 자식으로 사용해야한다. 스크린리더를 고려해 달아주어야한다. 3. , , : 머리글 : 본문 : 바닥 글 테이블의 내용이 많을 때 와 는 머리글과 바닥 글, 본문으로 테이블의 구역을 나누는 요소로 사용한다. 이 요소들은 테이블의 레이아웃에 영향을 미치지 않지만 CSS를 사용하여 디자인의 스타일을 지정할 수 있다. 4., , : 테이블의 행.. 공감수 0 댓글수 0 2022. 4. 5.
  • [HTML] 웹표준 맞는지 검사하는 법(validator.w3.org) 웹 표준이란? 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 크롬, 파이어폭스 등 브라우저마다 보여주는 다른 부분들이 있다. 나는 주로 크롬을 쓰는데 보다보면 '해당 사이트는 크롬을 기준으로 만들어졌습니다.' 라는 문구를 보게 된다. 이처럼 여러 브라우저들을 맞추기란 쉽지 않다. 하지만 공공기관이나 은행같은 곳에서는 대부분 어느 브라우저를 쓰더라도 동일하게 보여지는데 그게 웹 표준을 지킨 방식이다. 배운지 얼마 안된 입장에서 표준을 지키라는것은 어려운데 레포트계에 카피킬러가 있듯이 코드계(?).. 공감수 0 댓글수 0 2022. 4. 5.
  • [HTML] Forms 1. 폼은 정보를 입력하는 영역입니다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용합니다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송합니다. 웹 페이지에 있는 form에 데이터를 입력합니다. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동하게 됩니다. 웹 서버는 데이터를 처리하기 위해 APP을 호출합니다. 이때 APP은 물리적으로 별도의 서버일 수도 있습니다. 필요에 따라 APP은 DB로 데이터를 전송합니다. 이때 DB는 물리적으로 별도의 서버일 수도 있습니다. DB에서 CRUD 작업이 일어나고.. 공감수 0 댓글수 0 2022. 4. 4.
  • [HTML, CSS] img? background-image는 언제 써야할까 html, css에서는 image를 다룰 수 있는 방법이 많지만 그 중 가장 많이 쓰이는 img, background-image를 언제 사용해야할지 구분이 잘 되지 않았습니다. HTML - img CSS - background-imgae background-image: url(images/background.gif); 는 내가 표현하고 싶은 컨텐츠인 경우에 넣고 background-image는 단순히 데코레이션, 꾸미는 용도의 이미지 삽입일 때 활용한다. 예를 들어, 프로필 사진은 내가 표현하고 싶은 (전달하고 싶은) 컨텐츠임으로 img를 활용하고 배경사진은 전달하는 용도가 아니기에 background-image: url을 활용한다. 공감수 0 댓글수 0 2022. 4. 1.
  • [CSS] 가상 클래스? 가상 요소? 이전에 로그인 버튼 만들기를 하면서 ::before, ::after를 사용해서 만들어봤었습니다. 이걸 가상요소라고하는데 기존에 많이 사용했던 :hover같은 가상 클래스와는 다르다고해서 어떤 종류가 있는지 정리해봤습니다. 가상 클래스(Pseudo Classes)❓ - 하나의 콜론(:)을 사용하며, 별도의 class를 지정하지 않아도 요소를 선택할 수 있다. 즉, 가상 클래스는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. Selector Example Example Description :active a:active Selects the active link :checked input:checked Selects every checked element :disable.. 공감수 0 댓글수 0 2022. 3. 30.
  • [Frontend] 책 추천 수업 시간에 강사님으로부터 읽어두면 좋을 책들을 추천받아서 정리해보았습니다. 1. 함께 자라기: 애자일로 가는 길 - 김창준 2. 자바스크립트 완벽가이드 - 데이비트 플래너건 3. DOM을 깨우치다: 가치에 대한 완전한 이해 - 코디 린들리 http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788994774510&orderClick=LAG&Kc= DOM을 깨우치다 - 교보문고 가치에 대한 완전한 이해 | 모던 웹을 위한 자바스크립트와 DOM에 대한 고찰“더글라스 크락포드(Douglas Crockford)는 저서인 『자바스크립트 핵심 가이드』에서 JavaScript 언어의 내부를 이해하기 위 www.kyobo.. 공감수 0 댓글수 0 2022. 3. 30.
  • [CSS] White-space ✍ white-space : 요소가 공백을 지정하는 속성 normal : white-space의 기본 값으로 화면에서 보여지는 영역만큼 줄바꿈을 하게 된다. nowrap : 의 내용이 화면을 넘어가도(뷰 포트보다 문장의 길이가 짧으니) 감싸지 않겠다.는 의미로 화면을 벗어나면 가로 스크롤이 생기며 한 화면에서 보이지 않게 된다. 을 함께 쓰면 한 문장 단위로 줄 바꿈 시행 (영어 기준, 한글은 한 글자씩)=> 반응형 디자인할때 쓰인다. 단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요. word-break : keep-all ➡ 단어 단위로 묶는다. https://developer.mozilla.org/ko/docs/Web/CSS/white.. 공감수 0 댓글수 0 2022. 3. 30.
  • [HTML, CSS] 로그인 화면 만들기 + 가상요소 썸네일과 같은 간단하게 버튼만 있는 로그인 화면을 만들었습니다. 로그인페이지는 을 쓰거나 다른 버튼을 추가해 다양하게 만들어봤는데 이번엔 가상요소 ::after을 써서 만들어봤습니다. 아이콘 이미지 출처 : flaticon 공감수 0 댓글수 0 2022. 3. 30.
  • Grouping Content란? <div> 만 쓰는거 금지..! ✍Grouping Content : 무엇인가를 감쌀 때(그룹화 할 때) 사용하는 태그의 명칭 HTML 구조를 처음에 짤 때는 무조건 그룹핑할때는 ! 라는 생각으로 범벅을 시켜놨었다. 하지만 배울수록 이건 잘못되었다는걸 알았다.. (처음에 만든 코드들 보면,, 한숨만) Sementic Tags를 지킨다고 생각하면 될 것 같다. 쉽게 이야기하자면, 수십 수백 줄이 되는 코드를 보면서 어느 부분이 네비게이터인지 어느 부분이 본문인지 한 눈에 이해할 수 있게 해준 방법이라 생각한다. 🔎 Semantic Tags란? : '의미가 있는 태그'라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들이다. (자세한 내용은 아래 링크에서 확인할 수 있다.) https://www.w3schools.com/.. 공감수 0 댓글수 0 2022. 3. 29.
  • [HTML] HTML Living Standard란? HTML5는 처음 개발 공부할때부터 들어왔고 로고로도 굉장히 익숙하다. 그런데 수업 중 HTML Living Standard를 HTML5라고 지칭하는게 옳지 않다고 하셔서 그 이유에 대해 정리해보았다. 🚩 HTML Living Standard란 ? 버전 숫자와는 상관없이 HTML 문법 등을 규정한 표준으로, 버전이라는 개념을 사용하지 않고 유동적으로 계속 업데이트한다는 의미이다. 현재 WHATWG에서 HTML5를 현존하는 LIving Standard로서 인정하고 있기 때문에 HTML5와 혼동하여 사용되기도 한다. WHATWG 에서도 확인할 수 있다. 1.2 Is this HTML5? The HTML Living Standard (sometimes informally called HTML5). The HT.. 공감수 0 댓글수 0 2022. 3. 29.
  • [HMTL] emmet이란? ✍ emmet : HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 실습 h1 h1+h2 h1>p h${hello} hello h1>[*2 h1>p*5 h1#one h1.one .one #one (div>table>(tr>(td*2))*3)+(footer>p) lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id nemo adipisci dolores corrupti? Ipsam explicabo commodi blanditiis expedita placeat quis ad quod nihil recusandae. Voluptates blanditiis optio pariatur odio. im.. 공감수 0 댓글수 0 2022. 3. 29.
  • [VSC] 코드스니펫 html lang ko로 설정하기 VSC를 키고나면 가장 먼저 설정하는 기본구조가 있습니다. ! + tab을 눌러도 바로 되지만 그럴경우엔 기본언어가 en으로 되어있어서 매번 바꾸기 번거롭습니다. 그래서 변경해보려고합니다! 🚩 DOCTYPE html> ko로 설정하기 1. ctrl shift p 로 명령 팔레트를 엽니다. 2. >snippets 입력 후 enter 3. html.json 선택 후 아래 코드를 입력합니다. { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet an.. 공감수 0 댓글수 0 2022. 3. 29.
  • [VSC] VSC실행마다 사용중인 프로젝트 바로 열기 VSC를 킬 때마다 이전에 사용했던 프로젝트가 뜨는데 한 가지만 할 때는 참 유용하지만 여러 프로젝트를 사용중일 때는 너무 불편했습니다. 그래서 이번엔 VSC실행할 때 마다 원하는 폴더를 지정해서 기본으로 열게 하려고합니다! 1. 기본으로 설정할 폴더 선택 2. PowerShell에 입력하기 - SHIFT + 우클릭 ➡ code . 입력 (띄어쓰고 점까지 입력!) ➡ enter 하면 끝 공감수 0 댓글수 0 2022. 3. 29.
  • [VSC] 알아두면 좋을 단축키 모든 단축키 : Ctrl + K + S Settings : Ctrl + , (오른쪽 상단에 Settings.json file open으로 좀 더 다양한 커스터마이징 가능) Sidebar : Ctrl + B Terminal : `Ctrl + Shift + `` (백틱, 틸트, 템플릿리터럴) Command palette : Ctrl + Shift + P, F1 동시 선택 : Ctrl + D (2번 입력, Ctrl + Shift + D와 같은 역할) 동시 수정 : Ctrl + Alt + 방향키(상, 하), Alt + Click, Alt + Shift + Drag, Alt + Shift + i Quick Open : Ctrl + P 문장의 양 끝 : Home / End 코드의 양 끝 : Ctrl + Home /.. 공감수 0 댓글수 0 2022. 3. 29.
  • [CSS] 색상 컬러 사이트 :: HTML Color Codes, Adobe Color, Two Color Combinations 화면을 꾸미다보면 기본으로 제공하고있는 컬러들이 많습니다. coral, darkgreen등 많지만 내가 원하는 색상을 정하기 위해서는 디테일한 조정이나 색조합을 먼저 보고싶을때 사용하면 좋은 사이트들입니다. 1. HTML Color Codes https://htmlcolorcodes.com HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 원하는 컬러는 잠금 표시를 해 고정해 두며 다른컬러와의 조합을 해볼 수 있습니다. 2. Adobe.. 공감수 0 댓글수 0 2022. 3. 29.
  • 리액트 스터디 시작하기 혼자서 하는것보다 스터디로 하면 좋겠다고 생각하던 때 운 좋게 스터디에 들어가게 되었다. (전부 초면인 분들) 팀장님이 만들어준 스케쥴을 따라가는식인데 그 따라가는 과정부터 전에 못해본 것들을 해보고있다. 스터디하면서 공부 외에 알게 된 것 1. 개인 Repository 올리고 fork하기 2. 공부내용은 ReadMe에 정리하기 3. Github에서 Projects와 Discussions 사용 Projects : 일정 공유하기에 좋다. Discussions : 공부관련으로 질문을 주고받기 유용하다. 앞으로 공부계획 책과 노마드코더의 React 강의로 학원 진도 전에 리액트 해보기! 공감수 0 댓글수 0 2022. 3. 22.
  • [CSS] 레이아웃3 :: 여백(content, border, padding, margin) HTML 요소는 총 네 가지의 영역으로 구성되어 있다. content 영역 : 요소의 내용이 작성되어지는 영역 border 영역 : 요소의 테두리가 지정되는 영역 padding 영역 : content와 테두리 사이 영역 margin 영역 : 다른 요소와의 간격을 나타내는 영역 * width, height는 기본적으로 content 영역의 크기를 지정하는 속성 공감수 0 댓글수 0 2021. 12. 3.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.