코딩시에 자주쓰는 프로그램인 VSC에서 주로 애용해서 쓰는 단축키를 모아봤다. 자주 쓰는만큼 유용할 것이다. ctrl+z, x, c 잘라내기,붙여넣기, 복사 ctrl + D 같은단어 수정 alt + click 여러커서 alt + 위/아래: 행위치변경 드래그 + alt + shift + i = 커서 대량생산 alt + shift + drag = 커서 대량생산 ctrl + 위/Home키/End키 = 끝으로 이동 alt + = 이전에 위치했던 대로

CODING/etc. 2022. 12. 31. 17:37

styled.button : 에 대한 스타일 정의 &.hover == .button.hover & + & == .button + .button : button끼리 붙어 있을 때 &:hover { color: red; } & ~ & { color: tomato; // 건너서 있을때 - } & + & { color: lime; // 바로 옆에 있을때 } **미디어쿼리(화면 크기나 환경에 따라 웹사이트 변경하는 기술)** (1) 미디어쿼리 기본문법: @media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문} - 미디어 유형: all, print, screen, tv, projection 등 - @media A and B {실행문} , @media A, B{실행문} - @m..

CODING/HTML,CSS 2022. 12. 29. 17:31

앱개발을 위해 리액트 네이티브를 학습하려고 한다. 플러터와 고민했지만 리액트에 익숙한 사람은 react native를 학습하는 게 나은 것 같아서ㄲㄲ 여러 온라인 학습사이트에서 찾아다니며 괜찮은 강의들을 엄선해봤다. 앱개발을 위한 학습이 목적이라면 일단 네이티브 앱으로 개발을 시작할지, 크로스 플랫폼으로 개발할지부터 고민해보자. 아래의 글 정도만 봐도 느낌이 오지 않을까 싶다. 네이티브 앱 vs 크로스 플랫폼 앱: 개념 및 장단점 비교 📌 들어가며 본 포스팅에서는 네이티브 앱과 크로스 플랫폼 앱의 개념과 각각의 장단점을 비교하고, 각 프레임워크마다 사용하기 적절한 상황에 대해 소개합니다. 📚 목차 1. 네이티브 앱 1.1. heytech.tistory.com 1. 배달앱 클론코딩 개인적으로 아예 코딩지식..

CODING/etc. 2022. 12. 28. 18:47

storageref를 활용하여 이미지를 firestore에 넣고 How to upload image to firebase storage for Editor.js? I am trying to add image upload functionality in Editor.js by using backend file uploader endpoint. In the backend, I am uploading this file to firebase storage. But actually I am able to extract the stackoverflow.com 발생된 URL을 DB에 넣어준다. 그리고 이미지를 불러올 땐 해당 URL을 불러와서 보여줄 수 있도록 한다. config: { uploader: { async ..

CODING/React.js 2022. 12. 26. 20:22

**에러 검토** (1) react-dom.development.js:88 Warning: Received `false` for a non-boolean attribute `transform`. If you want to write it to the DOM, pass a string instead: transform="false" or transform={value.toString()}. If you used to conditionally omit it with transform={condition && value}, pass transform={condition ? value : undefined} instead. --> 예를들어 div태그의 표준속성은 (class 등) boolean값으로 들어가면 안..

CODING/React.js 2022. 12. 26. 16:22

여러 방법이 있지만 가장 편하고 많이 쓰는 방식이다. 해당요소에 width: 100%; display: flex; align-items: center; justify-content: center; 이렇게 작성하면 가운데로 정렬된다. width 또는 height를 설정해주어야 그 공간 내에서 가운데로 정렬됨을 기억하자. tailwind에서는 로 사용하면 된다. 아니면 width값을 설정한 후, 좌우 공백을 auto로 설정하면 가운데로 정렬된다. width: 760px margin-left: auto margin-right: auto

CODING/React.js 2022. 12. 26. 16:17

next에서 이미지를 불러오는 방법을 모아봤다. import CampusImage from "public/landing/first_bg_round_real.svg"; return( ) return() ==> public 경로명 제외해야 함!! import Image from "next/image"; 각 방법 중에 맞는 방법을 선택해서 사용해보자. 3번째는 next에서만 사용할 수 있는 next/image의 Image 태그이다. 다루기 조금 까다롭기 때문에 공식문서를 잘 읽어보고 사용해야 한다. https://nextjs.org/docs/api-reference/next/image next/image | Next.js Enable Image Optimization with the built-in Image..

CODING/React.js 2022. 12. 26. 09:28

자바스크립트 문법 중, 많이 사용하는 배열, 객체배열 관계식을 정리해보았다. **두 배열의 교집합 찾기** const a2 = [1, 2, 3]; const a3 = [1, 2, 3, 4]; console.log(a2.filter(x=> a3.includes(x))); **객체 배열에서 속성 값을 배열로 추출** objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]; (예 : field `foo`는 array) `[ 1, 3, 5 ]`. function getFields(input, field) { var output = []; for (var i=0; i a.foo); 배열1개에서 중복값 제거 const uniqueArr = du..

CODING/Javascript 2022. 12. 25. 09:10

완전 배끼기보다는 흐름만 훑어보는 게 좋을 듯 하다. ## 1.빌드 npm run build(빌드시 백앤드 서버는 켜있어야 한다!!) 보통 github에서 push하면 cicd에서 관리해서 에러 찾아줌(빌드 테스트) 파일 1메가 넘어가면 react.lazy? 등이용해서 코드스플리팅 어떤게 실질적으로 용량이 큰지 알기 위해서는 npm i @next/bundle-analyzer gzip압축을 하면 용량 줄어듬 위에건 next.config.js에서 수정하고 package.json수정하기 위해서 (배포모드로 변경) --> 윈도우에선 cross-env까지 설치한 다음에 build명령어에 gogo tree shaking 검색하여 줄이는 방법 찾는다. immer는 익스플로어에서 실행안됨 따라서 util/produce..

CODING/etc. 2022. 12. 24. 19:18

크롬 또는 여러 브라우저에서 제공되는 기본 스크롤바 모양을 변경할 수 있다. CSS를 아래와 같이 변경해주면 된다. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.16); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; box-shadow: inset 0px 0px 5px white; } border-radius를 주어서 원형 느낌을 주고,..

CODING/React.js 2022. 12. 24. 17:48

랜딩페이지에서 요소들이 움직이면서 뜨거나, 모달창이 부드럽게 뜨는 등의 애니메이션을 구현할 때 사용한 좋은 라이브러리를 소개한다. 1. Framer-motion 태그를 작성하여서 많은 애니메이션을 구현할 수 있다. Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-ready React animation and gesture library. www.framer.com 공식 홈페이지에서 소개하는 삽입코드 예시 중 하나이다. import { addPropertyControls, ControlType } from "framer" import { motion } from "framer-motion" i..

CODING/React.js 2022. 12. 24. 17:41

개발중에 일정 공간내에서 글자수가 넘치는 경우, 아래칸까지 공간을 차지하게 되거나 혹은, 해당 공간을 넘어서 overflow가 될 수 있다. 이를 방지하기 위해서 글자가 넘치면 넘치는 글자는 생략하고 (...)으로 생략기호를 자동으로 넣어주면 좀 더 깔끔하게 CSS를 꾸밀 수 있다. tailwind에서는 이렇게 입력하면 되는데 width는 반드시 지정해주어야 그 범위 이상 넘어가면 생략할 수 있도록 만든다. overflow-hidden text-ellipsis whitespace-nowrap 위 속성은 일반 css에서는 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 요거다.

CODING/React.js 2022. 12. 22. 16:10