![[TIL] 성불하게 해주세요](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FeyiJ2a%2FbtrR8WFX0LQ%2FDW54UKVZhrlRDZYTUsOLk1%2Fimg.png)
투 두 리스트 프로젝트 레퍼런스 정리
to do list designs
Figma
Created with Figma
www.figma.com
ToDo List Inspiration
via Muzli
medium.muz.li
vitest
vite 전용 테스팅 툴 vitest 영어 글, 번역 글
Common mistakes with React Testing Library
Some mistakes I frequently see people making with React Testing Library.
kentcdodds.com
Common mistakes with React Testing Library
React Testing Library를 유용하게 잘 쓰고 있는 사람으로서, 공감도 가고 새로운 꿀팁도 많이 배웠던 좋은 글이라 번역해봤습니다. 원문: Common mistakes with React Testing Library 저는 사람들이 React Testing Libr
seongry.github.io
react router dom
react router dom 공식문서. (벌써 버전이 이렇게나 업데이트 됐구나)
Home v6.4.3
I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away.
reactrouter.com
React with Typescript
타입스크립트로 리액트 시작하기
TypeScript + 리액트 기초 · GitBook
TypeScript 로 React 앱 만들기 서론 JavaScript 는 weakly typed 언어이기에, 숫자가 문자열로 될 수도 있고 그랬다가 또 숫자가 될 수도 있다가 null 인지 아닌지 확인하지 못합니다. 추가적으로 자동완성도
react-etc.vlpt.us
Styled-components
styled-components 시작하기
Styled Components로 React 컴포넌트 스타일하기
Engineering Blog by Dale Seo
www.daleseo.com
3. styled-components · GitBook
03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하
react.vlpt.us
yarn add -D @types/styled-components
vscode 익스텐션 설치
📝 Name: vscode-styled-components
Id: styled-components.vscode-styled-components
Description: Syntax highlighting for styled-components
Version: 1.7.5 Publisher: Styled Components
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
vscode-styled-components - Visual Studio Marketplace
Extension for Visual Studio Code - Syntax highlighting for styled-components
marketplace.visualstudio.com
전역으로 reset.css와 global css 적용하기 (+구글폰트)
전역으로 reset.css와 global.css 적용하고 구조화하는 방법 + global.css에 구글폰트 적용 포함
styled-components에 구글 폰트적용하기
초기세팅 시 찾고 찾던, styled-components에 폰트 두 개 이상 적용 방법
velog.io
React - 스타일드 컴포넌트(styled-components)
: 순수 CSS로 스타일링 하는 문제점을 개선하기 위한 방법 중 하나로 JS 안에 CSS를 작성하는 여러 라이브러리 중 인기가 가장 많다(자세한 설명 : https://blog.nerdfactory.ai/2019/10/25/react-styled-compo
velog.io
styled-component 설정 및GlobalStyle과 ThemeProvider 적용하기 with typescript
Next.js로 프로젝트진행중 styled-component 설정 및GlobalStyle과 ThemeProvider을 적용해 보려고 한다. GlobalStyle 적용 방법 styles 폴더안에 global-styles.js 파일 생성 _app.tsx에 적용 impo
velog.io
리액트 프로젝트 폴더 구성하기
일반적인 폴더 구성, 폴더 이름 및 용도 정리
[react] 리액트 프로젝트의 폴더구조
javascript에 대한 기본적인 사용법을 익히고 '아 이제는 리액트를 찍먹해볼까?' 하고서 도전한 리액트. 다른 무엇보다 리액트라는 라이브러리(혹은 프레임워크)가 어떤, 뭐하는 것인지 정확히 이
velog.io
d.ts declare module
타입 라이브러리를 지원하지 않는 라이브러리의 경우나 타입을 선언해주는 경우 사용
[Typescript/타입스크립트] declare 모듈 타입 & 전역 타입 typeRoots 와 paths
0. 목차 1. 개요 2. 모듈 타입 3. 전역 타입 1. 개요 typescript를 쓰면서 가장 불편한 부분은 외부 라이브러리를 설치해서 사용 할 때이다. 사용하려는 라이브러리의 사용도가 높다면 사실 크게 문제
kong-dev.tistory.com
Documentation - Modules .d.ts
www.typescriptlang.org
styled-components with typescript
styled-components 타입스크립트에서 사용하기
Styled-components Typescript 적용하기 (+Media query)
시작하기기존에 styled-components 반응형 및 스타일 리셋 설정하기 포스트을 통해서 스타일 최초 설정해보았습니다. theme를 입력했을때 typescript로 자동으로 연결해주는 부분이 미흡했습니다. 타입
flamingotiger.github.io
styled-components 반응형 및 스타일 리셋 설정하기
시작하기저번 포스트에서 styled-components 간단한 사용방법을 알아보았습니다.이번 포스트에서는 브라우저 스타일을 리셋하는 방법과 함께 반응형 설정하는 방법을 알아 보겠습니다. npm install styl
flamingotiger.github.io
typescript react에서 styled-component 사용하기 (Theme Provider)
styled-components 의존성 설치 styled-component를 사용하기 위해 styled-components와 @type/styled-components 를 의존서에 추가해야 한다. # with npm npm install --save styled-components # with yarn yarn add styled-components javacript
memostack.tistory.com
동기들의 질문 답변사항
🧑🏻 : array list 중에서 하나의 요소만 업데이트하는 방법을 모르겠어요.
각각의 요소로 전달해준 id 값으로 해당 데이터를 식별한 다음 필요한 데이터를 바꿔주고
id와 같지 않는 데이터들은 그대로 return해서 새로운 list를 만들어준뒤
전달해준 setState함수로 업데이트해주면 돼요!
const [list, setList] = useState(initialList);
function handleToggleComplete(id) {
const newList = list.map((item) => {
if (item.id === id) {
const updatedItem = {
...item,
isComplete: !item.isComplete,
};
return updatedItem;
}
return item;
});
setList(newList);
}🔑키워드 : Update an Item in a List in React
▶reference
👩🏻 : 깃 브랜치들을 아예 서로 관련 없는 내용으로 각각 관리하는 방법이 뭘까요?
오잉? 그런 방법도 있다구요? 처음보는데... 같이 한번 찾아보죠!! (구글링...)
Orphan Branch : 고아 브랜치는 하나의 git repository에서 다른 브랜치나 커밋으로부터 단절된 새로운 history를 가지는 브랜치를 말한다. 다른 브랜치와 독립적으로 운영할 수 있기 때문에 설정 파일이나, 다른 프로젝트를 생성하기보다는 하나의 프로젝트에서 진행하고 싶을 때 사용하면 유용하다.
//orphan branch 생성
git checkout --orphan [branch name]
// git 내역 및 디렉토리 파일 삭제
git rm --cached -r .
rm -rf ./*
// remote repository로 push
git push origin [branch name]※ 다만 주의할 점이 아무 파일도 커밋되지 않은 상태에서 push를 했을 때 refs 오류가 발생했다. 오류가 난다면 아무 파일이나 커밋하고 push해보자.
🔑키워드 : orphan branch
▶reference
😎오늘 한 일
🤼♀️언어 스터디 발표
👨🏻💻 폭풍딩코딩코
🔩 운동
👻아무 말
질문에 답변해주는 게 시간 낭비라고 여겨질 수 있지만,
질문에서 또 다시 배울 수 있어서 질문을 받을 수 있는 입장에서는 너무 감사하다.
동기분들이 나를 의지해주고 믿어줘서 또 감사하다.
오늘도 동기들의 질문에서 또 다시 배워간다.
타입스크립트를 적용하고 styled-component를 적용하는 과정에서 오류가 많이 생겨났다.
타입스크립트에서 변수나 함수에 타입을 적용하는 부분은 어려움이 없지만,
라이브러리에 대한 타입을 적용하는 부분이 너무 많이 어렵다.
타입스크립트 때문에 개발속도가 전혀 나고 있지 않지만,
잠깐씩 괜히 타입스크립트 적용했나 싶지만 언젠가는 해야된다는 생각으로 포기하지 않고 있다.
하루종일 구글에서 떠도는 망령이 되어
구글 검색 로그가 늘어만 간다.
구글만이 답을 알고 있겠지.
그저 구글 갓...
'개발일기' 카테고리의 다른 글
| [TIL] 한번만 쓰고 버린다구요? (4) | 2022.11.29 |
|---|---|
| [TIL] 졌잘싸 (0) | 2022.11.28 |
| [TIL] 비트 주세요 (1) | 2022.11.25 |
| [TIL] 인생은 시험의 연속이다. (2) | 2022.11.24 |
| [TIL] 고통이 무뎌질 만큼 (1) | 2022.11.23 |