공부 | Tailwindcss 더 잘 사용하기(class-variance-authority, tailwind-merge)
2024. 4. 24. 21:16
공부/프론트엔드
Tailwindcss를 더 효과적으로 활용하기 ❓상황tailwindcss를 사용하여 신규 프로젝트를 개발을 하던 도중 동료분께서 내가 작성한 코드를 보고 패키지들을 추천해줬다.그래서 해당 패키지들을 알게되었고, 이를 프로젝트에 적용시키려고 한다. 기(起) 나는 가독성을 높이기 위해 코드를 줄이는 것을 좋아한다. 그래서 단축평가를 모든 코드에 녹아내려고 노력을 한다. tailwindcss에서 제공해주는 스타일을 적용해주기 위해 클래스를 적어야한다.조건부로 클래스를 적을 때는 단축평가를 사용할 수 없는데 그 이유는, Boolean 값이 클래스에 적혀져 나오기 때문이다. 예를들어 isOpen 이라는 변수의 Boolean 값이 true라면 'opened-modal' 이라는 클래스..
[잡담] 노션글을 티스토리로 옮기기
2024. 4. 9. 15:05
수근수근
노션글을 티스토리로 옮기기 ❓ 상황 노션이나 블로그에 따로 글을 작성하다 보니, 통일성이 없어 어디 작성되었는지 한번에 확인하기 어려웠다. 그래서 노션글을 티스토리에 옮기는 방법을 찾게되었다. 🎈 노션 글 웹 게시 노션의 특정 페이지 웹 게시 🎆 app.super.so 접속 게시된 노션 웹 링크를 아래 링크에 접속하여 회원가입 app.super.so app.super.so 계속 단계를 넘기고 마지막에 사이트 이름, 노션 웹 링크를 입력하고 사이트를 생성 웹에 게시가 된 페이지 글 내용을 드래그해서 복사 🧨 티스토리 블로그 들어가서 복사/붙여넣기 복사한 글/그림을 티스토리에 붙여넣기하면 사진 안짤리고 붙여넣기 잘 된다.
오류 | jest에서 e.target.name.value가 추출되지 않는 이유(feat. React)
2023. 7. 26. 00:46
공부/오류
TypeError: Cannot read properties of undefined (reading 'value') ❓ 상황 Todo를 이용하여 Jest 학습 도중 form 태그 내부의 input 요소의 value를 추출하기 위해 e.target.name.value 사용했으나 오류가 발생했다. TypeError: Cannot read properties of undefined (reading 'value') const handleCreateTodo = async (e) => { e.preventDefault(); try { const todo = await createTodo(e.target.newTodo.trim()); setTodos([...todos, todo]); } catch (err) { co..
오류 | git clone시 빈 폴더 생성되는 현상
2023. 7. 7. 10:30
공부/오류
error: invalid path '6:30/README.md' fatal: unable to checkout working tree warning: Clone succeeded, but checkout failed. You can inspect what was checked out with 'git status' and retry with 'git restore --source=HEAD :/' ❓상황 깃 명령어로 clone시 빈폴더만 클론되는 현상이 발생했다. $ git clone 깃허브URL Cloning into '깃허브URL의 레파지토리 이름'... remote: Enumerating objects: 137, done. remote: Counting objects: 100% (137/137), ..
공부 | CSR, SSR 그리고 Next.js
2023. 7. 5. 03:26
공부/프론트엔드
CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. ❓상황 원티드 프리온보딩 챌린지 7월 참가하여 주어진 사전과제가 있었다. 사전과제를 못했는데, 강의 이후에 다시한번 과제를 내주셨다. 두번째 과제인 history API를 이용한 react-router-dom의 간단한 기능을 구현했고, 첫..