Lennon FE

Next13의 app router 방식에서 현재 Emotion을 공식적으로 지원해주지 않는다.🥲 그렇지만 Project에서 Emotion lib를 사용하고, css속성을 사용하고, app router의 RSC를 사용하고 싶은 사람들이 있을까 봐(본인 포함!) 방법을 알려주려한다. 다들 알다시피 Emotion에 css 속성을 사용하려면 tsconfig.json에 "jsxImportSource": "@emotion/react", 위와 같은 속성을 넣어야 한다. 그러면 모든 태그에 css를 넣을 수 있어 아래처럼 작성할 수 있게 된다. import { css } from '@emotion/react'; 그렇지만 tsconfig에 "jsxImportSource": "@emotion/react", 위 속성을 가진..

Next.js를 포함한 React 프로젝트에서 Cypress로 e2e를 구현해 봅시다. 프로젝트에 Cypress를 설치해 줍니다. $ yarn add cypress --dev or $ npm install cypress --save-dev Package.json에 가서 스크립트를 추가해 줍니다. "scripts": { ..., "test": "cypress open", "cy:run": "cypress run" }, 터미널에서 명령어를 작성해 봅시다 $ yarn test or $ npm run test 그럼 아래와 같은 프로그램이 켜질 겁니다! 우리는 e2e를 구현할 것이니까 첫 번째를 선택하고 파일을 생성해 준다는 거에 동의하고 넘어갑니다. 제 기준 Electron이 편해서 선택하여 Start를 누릅니..

리액트를 사용해 코드를 작성하다보면 서버통신 및 컴포넌트 라이프 사이클 차이에 따라 null, undefined를 반환해 가끔 오류가 발생하곤 한다. 이는 그래도 친절하게 오류 코드로 알려주기에 해결하긴 쉬울 수 있지만, 존재 또는 존재하지 않는 요소와 메서드들에 대해 안전하게 접근할 수 있도록 도와주는 옵셔널 체이닝 연산자를 통해 더 쉽게 해결할 수 있다. 아래 코드에서 span안의 text값이 몇이 나올지 예상해보자. import React from 'react' const getNonEmptyCategories = (catrgories) => ( categories.filter((category) => category.items > 0); ) // categories = [ {items: 5, id..

다들 리액트 프로젝트에서 useState를 쓰며 당황했던 적이 있을거라 생각한다. 리액트의 useState를 쓰다보면 우리가 원하는 대로 동작하지 않는 걸 확인할 수 있다. 아래 코드는 체크박스가 하나 존재하고 체크할때마다 상태 toggle 값이 true or false를 가지는 로직이다. 체크박스를 체크하는 걸로 상태값을 바꾸는 예시를 보고 결과를 예상해보자 import React, { useState } from "react"; function App() { const [toggle, setToggle] = useState(false); const onChange = () => { setToggle((toggle) => !toggle); if(toggle) { console.log('toggle은 T..

겹치는 것이나 많이 쓰이는 부분은 key: value로 정의하고, React에서 해당 요소를 module로 가져와 사용할 수 있다. /* colors.css */ @value key: value; @value makerBlack: black; @value makerWhite: white; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; @value makerGrey: #626262; @value makerGreen: #385461; @value makerPink: pink; @value makerShadow: rgba(217, 217, 217, 1); @value makerColorful: linear-gradient(166deg, rgb..

라우팅이란? = 네트워크 상에서 url을 이용했을 때 어떤 경로를 이용해서 데이터를 받아올 건지 결정해주는 길을 결정해주는 것 = 사용자가 url을 요청했을 때 어떤 특정한 페이지로 연결할 건지 결정하는 매커니즘 = 사용자가 url을 줬을 때 어떤 페이지로 연결한건지! SPA의 문제점 사용자가 북마크할 수 없다. 브라우저상에서 뒤로가기, 앞으로가기와 같은 네비게이션이 추가가 되지 않음 ⇒ 해당 문제점을 해결하기 위해 React Router 등장 React Router? 사용자가 입력한 주소를 감지하는 역할을 한다. import { BrowerRouter, Link, Router, Routes } from 'react-router-dom' 태그로 감싸준다. 태그로 path마다 무슨 컴포넌트를 보여줄건지 작..

JSX 문법이란? 리액트에서 생김새를 정의할 때, 사용하는 문법이다. HTML과 유사하게 생겼지만 실제로는 JavaScript이다! const App = () => { return Hello React! } 실제 JavaScript가 아닌데 브라우저가 어떻게 코드를 해석하는 걸까? 여기서 Babel에 대해 알아보자. Babel은 JSX를 브라우저가 이해할 수 있도록 JavaScript로 변환해준다. 그러나 JSX가 JavaScript로 오류 없이 제대로 변환되려면 규칙을 지켜야 한다. 1. 태그는 꼭 닫혀 있어야 한다. const App = () => { return ( Hello ) } , 등 본래 HTML에서 닫혀있는 태그는 JSX에서 닫는 태그가 아니다! 당연히 태그 짝이 맞지 않아도 오류가 발생한..