Web frontend_써니

1. 컴포넌트 만들기 import clsx from 'clsx'; import React from 'react'; interface Props extends React.InputHTMLAttributes { theme?: 'primary' | 'secondary' | 'tertiary'; } /* 타입 확장 interface DefaultInputTextProps extends React.InputHTMLAttributes - 기본 html에 있는 타입을 쓰고 있고 내가 그 html태그의 타입을 상속받을 경우 위와 같이 extends 하여 써주어야한다 */ export default forwardRef(function 컴포넌트명( {theme, className, ...restProps }: Props,..

React

next13 (feat. 애플코딩,MongoDB)

2024.01.04

# 관계형 db 항목이 정해져 있음 데이터를 엑셀처럼 표에 저장 데이터 입출력시 SQL이라는 언어를 사용하고 미리 스키마 정의(표만들기)도 해야하고 데이터 중복저장을 피하기 위해 정규화해야함 안정적인 데이터저장과 운영이 필요한 곳에서 사용 # 비관계형 db 오브젝트 형태로 저장함(array처럼) 분산처리를 잘해줌(대용량 트래픽 분산처리 : SNS 서비스처럼 많은 데이터 입출력이 필요할때 강점) 몽고디비에서 무료 호스팅 사용하기 SQL 언어, 스키마 정의(표 만들기), 정규화 이런게 대부분 필요없음 MongoDB (비관계형 db) 데이터를 자바스크립트 object자료형과 똑같은 모양으로 저장 # 몽고디비 free 500mb 정도 용량의 무료 호스팅 , free로 선택후 aws로 선택, 국가는 서울로 선택한..

React

vercel로 next13 배포

2024.01.03

1. .github/workflows root 폴더에 .github/workflows 폴더 생성 후 preview.yaml 파일을 생성한다. //preview.yaml name: GitHub Actions Vercel Preview Deployment env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} on: push: branches-ignore: - main jobs: Deploy-Preview: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Install Vercel CLI run: npm instal..

error & basic

js) Window.postMessage() #202401

2024.01.02

# Window.postMessage() postMessage() 메서드는 Window 객체 사이에서 안전하게 cross-orgin 통신을 할 수 있게 한다. 대표적인 사용 예로 새창으로 띄워진 팝업창, 페이지 안에 포함된 iframe 간에 통신에 사용 할 수 있다. 또 데이터를 보내는 HTTP 요청을 생성하지 않으며, DOM 기반 통신에 사용된다. * 문법 targetWindow.postMessage(message, targetOrigin, [transfer]); /* Window.opener (새 창을 만든 window를 참조할 때), HTMLIFrameElement.contentWindow (en-US) (부모 window에서 임베디드된 (en-US)을 참조할 때), Window.parent (en..

error & basic

js) 정규식 & js #2312

2023.12.20

# 정규식 // 정규 표현식 리터럴 const myRegExp = /^[0-9]+$/; // RegExp 생성자 함수 const regExpVal = new RegExp (`^\\d*(\\.\\d{0,${변수}})?$`); - 변수를 넣어야 할때는 생성자 함수를 이용해서 해야한다. https://poiemaweb.com/js-regexp # 브라우저 스택 - 유료이지만 개발자 도구를 볼수 없는 앱에서 어떤 오류가 있는지 해당 버전을 적용하여 확인할 수 있다. https://www.browserstack.com/ 참고 👀: https://techblog.gccompany.co.kr/broswer-stack-%EC%95%8C%EC%95%84%EA%B0%80%EA%B8%B0-ec97e09b510d #현재 in..

error & basic

js) Callback & js #2311

2023.11.15

1. 콜백(Callback) 함수 - 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. - 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다. - 보통 일회성으로 사용하기 때문에 익명함수 형태로 넣어준다. 👀 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98 2. sass for문 @for $i from 1 to 26{ .클래스명#{$i}{ background-imag..

error & basic

js) focus & Vue #2311

2023.11.10

# 새창에 포커스 const 변수명 = window.open(`url`, "새창이름"); if (변수명) { 변수명.focus(); } // 새창이 있다면 해당창에 포커스되게 하기 # @font-face @font-face 사용시 src 부분에 local("폰트명") 을 쓰게 되면 사용자가 설치한 폰트와 싸우게 된다. 따라서 이부분은 삭제하는 것이 좋다. 👀: https://developer.mozilla.org/ko/docs/Web/CSS/@font-face # npm 모듈 설치 후 사용하기(in Vue) import Vue from 'vue'; import PerfectScrollbar from "vue2-perfect-scrollbar"; import 'vue2-perfect-scrollbar/di..

error & basic

js) jquery event & php & js #2311

2023.11.09

# trigger 페이지 로드 등과 같이 사용자가 값을 직접 선택 또는 입력하지 않고, 지정된 이벤트 유형에 대해 일치하는 요소에 연결된 모든 핸들러 및 동작을 실행한다. $('input').val("test").trigger("change"); 👀 https://api.jquery.com/category/events/ # 조건문 undefined 체크할 때 if (typeof 변수 != 'undefined') { //소스들 } # 로드시 정보를 불러와야하는 상황에서 정보가 변하는 것이 보일 때 - 기본값 이후 변하는 값으로 바뀔 때 - 처음 선택자의 style을 display:none으로 지정 후 로드 후 빼버린다. //아이프레임에서 이전 데이터가 보여서 딜레이 설정 setTimeout(() => { ..

error & basic

js) code short & infomation #2311

2023.11.08

# 코드 줄이기 if (변수 > 0 && 변수 5 && 변수 10 && 변수 = 2000) { perSize = 6; } else if (window.innerWidth >= 1802) { perSize = 5; } this.변수명2 = Math.floor(size / perS..

React

next13 (feat. 애플코딩)

2023.09.15

# nextjs 13버전 - 폴더기반 자동라우팅 - 새로디자인한 서버API 기능 - 쉬운 DB연결 - 직관적인 rendering 전략 선택기능 - hydration없는 server-side rendering - 파워풀한 캐싱 - 이미지와 폰트 최적화 # 개발 환경 셋팅 - nodejs 설치(lts버전 - node 18버전이상) - vscode 에디터 설치 - nextjs 설치 (npx create-next-app@latest) # 폴더 설명 - app 폴더 : 코드짤 폴더 - page.js : 메인페이지 (typescript를 쓰고 싶다면 tsx로 확장자를 바꾸면 된다.) - layout.js : 메인페이지 감싸는 용도의 페이지 - public 폴더 : 이미지나 static 파일 보관용 - api 폴더 ..

전체 글

react) 컴포넌트(feat.typescript) #202402

next13 (feat. 애플코딩,MongoDB)

vercel로 next13 배포

js) Window.postMessage() #202401

js) 정규식 & js #2312

js) Callback & js #2311

js) focus & Vue #2311

js) jquery event & php & js #2311

js) code short & infomation #2311

next13 (feat. 애플코딩)

티스토리툴바