'리액트' 태그의 글 목록

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. 애플코딩)

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

react를 공부하고 있는 중급자(?)를 위한 tip

2023.08.24

# snippets 1. 컴포넌트 단축키 = rcc 2. 함수형 컴포넌트 - rfc : 컴포넌트 작성과 동시에 export - rfce : export 코드 분리 - rsf : props를 가진 컴포넌트 생성 3. 화살표 함수형 - rsc : 빈 div를 가진 화살표 함수 컴포넌트 생성 - rafc : 화살표 함수 컴포넌트를 생성과 함께 export하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 - rafce : export코드가 분리된 화살표 함수 컴포넌트를 생성하고, 컴포넌트가 있는 js파일명이 div안에 작성됨 🙄초보때는 자동완성보다는 익히기 위해서 일일히 따라치는 것을 선호합니다. (모든 언어 공통) # 코드 깔끔하게 짜기 -함수형 컴포넌트 사용하기 (arrow-function 같은) -인라..

React

리액트 아코디언 메뉴(feat.Gnb)

2023.05.15

# 기능소개 1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능) 2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기 3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경 4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경 5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기 😉최종코드는 하단에 첨부 1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 setOpen(!open); 간단하게 온클릭시 보통 이렇게 많이 한다. 하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다. 이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다. 1> inde..

React

react + typescript

2023.05.10

1. 설치하기 npx create-react-app . npm i @types/react 통합적으로 npx create-react-app . --template typescript 설치가능 2. .ts 와 .tsx .ts파일은 pure typescript 파일 .tsx 파일은 typescript의 react문법을 담아내기 위한 확장자(jsx+ typescript) 3. src 디렉토리 1) index.tsx 1: 메인 엔트리 파일 2: React.Dom.render 수행 3: pwa(프로그레시브 웹 앱 = HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱)를 위한 서비스 워커 등록 작업 2) index.css 글로벌 스타일 작성(프로그래밍적으로 제한되지 않음) 3) App.tsx App..

JS & jQuery

조건문안에서 return

2023.04.27

1. retrun문 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환하는 것 1) 조건문을 줄때 중첩된 if문을 쓴다면 function 함수명() { if (조건문) { if (조건문) { ... } } } 이렇게 쓰는경우가 있는대 가독성이 떨어지고 복잡해 보인다. 2) 이럴때 처음부터 조건에 맞지 않을 경우 리턴 시켜버리면 중첩은 줄어들고 가독성은 올라간다. function 함수명() { if(조건문1) return; if (조건문2) { ... } } 조건문1에 맞지않으므로 2를 타지 않고 종료해 버린다. 중복된 조건이 있다면 조건식과 반대되는 경우 return을 선언하고 그다음 필요한 조건을 작성하면 된다. 자바스크립트 function 안에선 return 이라는 키워드를 만나면 retur..

React

영화 리스트

2022.10.01

혼자 강의 들으면서 만들어본 영화 리스트! fetch , Routes, Route, BrowserRouter, useParams 을 이용하여 페이지 만들기! 배울수록 어려우면서도 이해가 가면서도 재밌는 리액트!! # 가끔 리액트 안열리고 아래와 같이 뜰때 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm install react-scripts 설치 후 실행하면 잘됨