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..

Array를 순회하는 방법엔 여러가지 방법이 있다. 고전적이라면 const arr = [1,2,3,4,5] for(let i = 0; i { console.log(v); }) forEach를 사용할 것이다. 또는, 이터러블, 이터레이터의 개념을 알거나, 뭔가 이렇게 쓰는 게 좋다고 들으셨다면 const arr = [1,2,3,4,5] for(const a of arr) { console.log(a); } for of..

고차함수는 함수를 값으로 다루는 함수이다. 함수를 인자로 받아서 실행하는 함수들을 살펴보자. const funcAdd = f => f(1); const add10 = a => a + 10; console.log(funcAdd(add10)); 위 funcAdd 함수는 console.log에서 인자로 add10함수를 받는다. 당연하게 결과는 11로 예상할 수 있다. 함수를 만들어 리턴하는 경우도 있다. 이런 경우를 클로저를 만들어 리턴하는 함수라고 말한다. 함수가 함수를 만들어서 리턴할때는 결국은 클로저를 만들어서 리턴하기 위해 사용한다. 아래 예시를 확인해보자, 우리가 써보지 못한 느낌의 arrow Func 로 적혀있다. const add = a => b => a + b; const add10 = add(..

react, javascript에서는 보통 sort를 이용해 정렬을 많이한다. 그러나 sort를 사용하면 모두가 알다시피 코드 가독성이 많이 떨어질 수 밖에 없다. 또한 sort는 이상한 문제점이 있다. const arr = [1,3,20,5]; const sortedArr = arr.sort(); console.log(sortedArr) // [1,20,3,5] sort를 그냥 사용하면 위처럼 우리가 예상한대로 동작하지 않는다...(자바스크립트... ㅠ.ㅠ🥲) 그로인해 자바스크립트를 사용하는 개발자라면 보통 기본 sort를 바로 사용하지 않고 (a,b) 두 인자를 비교하는 함수를 만들어 sort를 사용한다. const arr = [1,3,20,5]; const sortedArr = arr.sort((a..

다들 리액트 프로젝트에서 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..