innn

uuid의 경우 typescript를 사용해서 @types/uuid 타입 정의도 설치해야한다. type 파일의 경우 빌드시엔 필요 없어서 devDependecy에 추가한다. bun add -d @types/uuid bun add 설치할 패키지 이름 -d 또는 bun add 설치할 패키지 이름 --dev 로 설치하면 됨 그냥 간단한 전자로 설치한다.

state 구조화 5원칙 관련된 state를 그룹화하기 state 안에서 모순 피하기 불필요한 state 피하기 중복된 state 피하기 깊게 중첩된 state는 피하기 연관된 state 그룹화 const [position, setPosition] = useState({x:0, y:0} x값과 y값을 분리해서 state로 처리하지 않고 그룹화한다. 커서를 움직일때 동시에 x, y값이 움직여야하는 상황에서 필요하다. ⇒ 동시에 업데이트 해야하는 state에선 그룹화 하기! ⇒ 단, x값 따로 y 값따로 업데이트하려면 …로 복사를 해주지 않으면 불가능하다. state 안에서 모순을 피하자 isSending, isSent와 같은 단계적으로 변하는 연관된 state의 경우 하나라도 업데이트를 하는 것을 까먹는다..

리액트의 특징인 SPA 페이지를 하나로 묶어서 렌더링을 해준다. 그래서 HTML 파일 로 하나로 묶어서 여러가지 페이지를 보여줄거다. APP.JS에 컴포넌트를 만든다, 내가 보여주고 싶은 화면을 만든다. 이 app컴포넌트가 index.js에 의해서 렌더링된다 그 결과가 index.html에 의해 화면에 표시된다. 내가 만들고 싶은 화면을 app.js에서 만들고 변수들은 return 밖에 작성하면 됨. 자바스크립트 표현을 할 때는 중괄호로 감싸주어야 한다. if문 대신에 조건문 연산자를 사용한다. 변수를 설정할 땐 state와 props 컴포넌트 안에서 이루어지는 변수를 설정할땐 state state를 사용할땐 우리는 useState라는 훅을 사용할 것이므로 useState를 위에 임포트 해줘야한다. co..

JSX 문법 몇 가지 규칙을 준수해야한다. 1. 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다. 예를 들어 아래와 같은 코드는 오류가 나타난다. function App() { return ( 리액트 안녕! 잘 작동하니? ) } export default App; 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것이다. 이 오류는 와 같이 부모 요소 하나로 감싼다면 해결 가능하다. function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸줘야할까? 그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 ..

JSX 란? JSX는 JavaScript를 확장한 문법이다. React 요소(element)를 만들 수 있게 해주는데, HTML에서 사용한 문법과 흡사한 문법을 사용한다. 생긴 게 HTML이랑 비슷해서, JSX로 React 요소를 편하게 만들 수 있다. const element = Hello, world 브라우저가 JSX를 이해할 수 있으려면 바벨을 설치해야한다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다. const element = ( Hello, world! ); 위와 같이 쉽게 쓴..

이론 1주차 : HTML, CSS - Babel 1. 문제를 해결하는데 그치지 말고 어떻게 동작하는 지 파악하라 2. 브라우저의 변화를 예측할 수 있게 학습하라 3. 명세Spec을 읽어라 프로그래밍의 유지 보수가 가능하도록 프로그램의 구조와 기능을 상세하게 기술한 문서 명세서 - 내가 어떤 버전으로 하는지, 보안 강화 히스토리 읽기 4. 다른 사람의 코드를 읽어라 - 서로 코드 리뷰 30분 (강조) 5. 나보다 똑똑한 사람과 일하라 6. 있는 걸 다시 만들어라 - 리팩토링 7. 배운 것을 기록하라 - 열심히 하는 걸 보여주는 태도 - 정리해서 남들에게 나타낼 수 있는가 (블로그로 개발일지 데일리 스크럼 옮겨 적기) 웹 1.0 : 단방향 소통 WEB 1.0 READ ONLY Keyword : HTML, F..