개발새발개발

tailwind css의 특성 상  코드가 끝없이 길어지는 건 자주 일어나는 일이다또한 display : flex를 사용하다보면 div가 많이 사용되어 전체 코드를 봤을 때,각 영역을 한눈에 구분하기가 어렵다이로인해 전체 코드의 가독성이 떨어지게 된다!   그래서 오늘은  React + TypeScript + Tailwind를 사용할 때재사용 가능한, 가독성 높이는 UI 컴포넌트 만드는 방법에 대해 이야기해보려한다!    저도 배우고 공부하고 있는 학생입니다무조건 제 코드가 정답은 아닙니다 :)   전후 코드 비교해보기  개선하기 전 코드인 왼쪽을 봤을 때, 일단 가로로 무척 길어서 코드를 한 화면에 보기 어렵다또한 div와 section이 얽혀있어 각각의 div와 section 이 어떤 영역인지 한 눈..

강의에서 말한것 그대로 Prettier를 설치해서 사용하고 있었는데,어느 순간부터 Prettier를 쓰려고 하면 저렇게 빨간 표시가 뜨면서 적용이 안됐다  그래서 오늘은 나와 같은 문제를 겪고 계신 분들을 위해인터넷에 있는 여러가지 방법을 이것저것 다 해보면서 찾아낸해결방법을 공유하려고 한다  방법1 간단하다. 재설치 후 재부팅Prettier를 삭제 후 재설치하고Ctrl + Shift + P -> Reload   하지만 이렇게 간단히 해결될 문제였으면 구글링을 할 필요가 없지....!  방법2모두가 다 해보라고 하는 설정 확인하는 것 [파일] - [기본 설정] - [설정] or Ctrl + , 으로 설정에 들어가서1. Format On Save가 체크되어있어야 하며(저장할 때 Prettier 적용하는 역..

Todos 앱 만들기index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);root.render( );   App.tsximport { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoI..

React와 Typescript로 Todos 앱만들기를 공부하던 중 오류 발생!  오류 코드import { useRef, useState, useEffect } from 'react';import { Todo } from './Type';import './App.css';import Editor from './components/Editor';import TodoItem from './components/TodoItem';function App() { const [todos, setTodos] = useState([]) const idRef = useRef(1) const onClickAdd = (text:string) => { setTodos([ ...todos, { ..

타입스크립트 - 정적 타입 시스템과 동적 타입 시스템의 단점을 보완한 점진적 타입 시스템    타입스크립트 시작하기(폴더 바꿀때마다 해줌) 1. npm init - node.js 패키지 초기화  2. npm i @types/node- 타입스크립트 설치   3.  npm install typescript -g- 타입스크립트 컴파일러 설치- `-g` 로 전역 설치- `tsc -v`으로 5. 버전인지 확인     타입스크립트 실행1. src/index.ts- 타입스크립트의 확장자 ts  2. 코드 입력console.log("hello")const a : number = 1  3. $`tsc src/index.ts`- 실행 명령어 입력- index.js가 생김   4. 코드 실행`$ node src/index...

테이블 만들기 실습 테이블 만들기1. 텍스트 작성(제목칸)2. 오토 레이아웃 적용(Shift+A)3. 컬러 조정(배경색, 글씨색, 테두리색)4. 제목칸 복제해서 날짜칸 생성5. 제목칸과 날짜칸을 함께 선택해서 오토레이아웃6. 테이블 사이 간격을 -1로 하면 테두리 선이 1개로 겹쳐짐7. 한 줄의 오토레이아웃을 Row 라는 이름으로 수정8. Row를 3개 복제9. 각각 내용 채우기(내용칸, description, 주석칸)10. 주석칸의 description 칸은 필요없으니 삭제11. 세 줄을 모두 선택해서 오토 레이아웃 적용=> 테이블 생성!  테이블 조정하기1. 주석 row을 Fill로 바꿔서 한 줄에 가득 차게 하기2. 주석칸을 눌러 안에 있는 오브젝트들이 왼쪽 상단에 있도록 하기3. 딥셀렉트(Ctrl..

아이콘아이콘 만들기원하는 모양을 만든다세부조절모드로 들어가 밴딩을 줄 수 있다밴딩은 쉬프트를 누르고 만지면 직각방향으로 밴딩이 가능하다알트를 누르면 한 점만 밴딩이 가능하다선 아이콘 만들기Ctrl+X 버튼을 눌러 선과 면을 swap한다원하는 두께에 맞게 stroke 을 조절한다알람 버튼처럼 종안쪽 선을 지워야한다면종 머리부분 복사 -> Ctrl+X로 다시 면 채우기방울이 위로가게 둔 상태에서 면 종머리와 함께 subtrack다시 Ctrl+X설정의 톱니바퀴처럼 세부 설정이 필요하다면요소를 더블클릭해서 요소에 사선이 그어진 상태에서 원하는 부분에 점 찍고 조정아이콘 마무리유니온 해주기선은 블랙으로 해주기나중에 svg모드로 내보낼 때, 다른 색상으로 할 경우 색 덮어쓰기 할 때 색이 섞여 원하는 컬러가 안나올..

공통되는 state를 하나로 합치기 1. useState를 input 값의 항목을 담은 객체로 수정2. 이벤트 핸들러를 setInput으로 수정  - 스프레드 연산자 활용하여 수정하려는 값 외의 나머지 값은 그대로 유지하도록 하기3. return 값의 value 값을 input.name / input.country 등으로 수정  import { useState } from "react"const Register = () => { const [input,setInput] = useState({ name : "", birth: "", country : "", bio : "", }) console.log(input) const onChangeName = (e) => { set..

State와 Props  - 부모로부터 받는 props 값이 바뀌면 리렌더링이 발생함    - + 버튼을 눌렀는데 OFF 가 함께 출력됨 - 부모 컴포넌트가 리렌더링됐기 때문에 자식도 함께 리렌더링이 발생함  리렌더링이 되는 순간1. 자신이 관리하는 state의 값이  변동2. props 의 값이 변경3. 부모 컴포넌트가 리렌더링    이런 불필요한 리렌더링은 성능을 악화시킴-> 관련 없는 컴포넌트를 한번에 몰아두지 않고 분리함   전체 코드 한번 보기...  Bulb.jsxCounter.jsx 로 파일 나누기 파일 위에 useStateexport default App.jsx 에서는 import   State로 사용자 입력 관리하기회원가입 만들기 input 값에 접근하기1. input값 만들기2. use..

State - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음   - 두 가지 요소가 전달되는 것을 확인할 수 있음   - 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)    - 그렇기 때문에 대부분의 경우 구조분해할당으로 받음   state 변경   - setState를 활용함   Count로 수 늘려보기 - +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌   전구 키고 끄기  - 삼항 연산자를 사용하여 보기 좋게 만들 수 있음  import './App.css'i..

이벤트 핸들링 - 이벤트가 발생했을 때 그것을 처리하는 것ex) 버튼 클릭 시 경고창 노출 등  버튼 클릭 이벤트 만들기 방법 1const Button = ({text,color,children}) => { return ( { console.log(text) }} style={{color :color}}>{text} )}Button.defaultProps = { color : "blue"}export default Button  방법2const Button = ({text,color,children}) => { const onClickButton = () => { console.log(text) } return ( {..

Props  - 자식 컴포넌트에게 props를 전달해주면 객체로 묶여서 자식 컴포넌트에 매개변수로 전달됨     - 프롭스로 color 값을 넘겨서 스타일 설정도 가능함- 하지만 모든 코드에 color가 들어가지 않을 수 있으므로 코드 개선이 필요함   const Button = (props) => { return ( {props.text} )}Button.defaultProps = { color : "blue"}export default Button - 그럴 땐 위와 같이 default 값을 넘겨주면 됨   - 객체로 전달받기 때문에 점 표기법으로 값을 꺼내오는데 이게 불편하면 매개변수를 아예 나눠서 받는 방법도 있음   - 여러개를 props 해야 할 때에는  스프레드 연산자를 ..