본문 바로가기

main

[GIT] remote 오류 [Error Message] You asked to pull from the remote 'origin', but did not specify a branch. Because this is not the default configured remote for your current branch, you must specify a branch on the command line. git remote 깃 리모트를 확인해보면 origin으로 잘 나오는데, 계속 이런 에러가 발생하면서 브랜치 체크아웃, 머지 등등의 명령어가 전부 안 됐다. Confusing error message from git I got this message from Git: You asked to pull from the remote 'o.. 더보기
[bug] event not working in React, Webpack Webpack으로 설정을 바꾸고, webpack dev에서 돌려보는데 잘 되던 코드의 클릭 이벤트가 동작이 되지 않았다. 다른 이벤트들도 마찬가지로. 에러가 아니어서 에러 코드도 없고, 아무리 찾아도 유사 사례가 없어서 한참을 삽질함.. React - onClick not working in any components I'm pretty new to React and I'm having some issues with my project. I feel like I'm going insane, the simplest things are not working as I'd expect them to. Having re-read my code what feels like stackoverflow.com 그러던 중.. 더보기
[GITHUB] Project/Issue 생성, Commit으로 Issue 닫기 Github Repo에서 Projects 탭에 들어간 뒤 new Project를 생성한다. + Add column으로 To Do, In Progress, Done 컬럼들을 생성한다. Jira의 칸반 보드 같은 ㅎㅎ 이슈를 생성할 때는 각 컬럼에서 +를 눌러 입력해준다. Convert to issue를 눌러 주면 이슈로 바뀐다. 근데 항상 이 과정을 진행해야 하는 건가..? 어쨌든 이슈로 변경이 되면 클릭했을 때 오른쪽에 작은 탭으로 상세 이슈 정보가 나온다. Assignees를 지정해줄 수 있고, Label도 달아줄 수 있다. 그럼 이제 Commit을 통해 Issue를 닫아 보자. Commit 시에 - close / closed / closes - fix / resolve 등의 명령어와 함께 이슈 티켓 .. 더보기
Delete `␍` prettier/prettier 에러 해결 방법 (VS Code) Delete `␍` prettier/prettier CR을 지워라. CR이 뭐야? CR : Carriage Return (\r) LF : Line Feed (\n) 개행 문자와 관련된 에러이다. 윈도우에서는 CRLF, 유닉스/맥에서는 LF를 사용한다. 문제가 생긴 파일의 CRLF에서 CR을 삭제한 -> LF 로 바꿔주면 된다. 하지만 이 방법은 파일마다 적용해줘야해서 번거롭다. .eslintrc.js 에서 설정을 추가해준다. rules: { "prettier/prettier": [ "error", { endOfLine: 'auto', } ], }, 그럼 이제 프로젝트가 잘 실행됨 ㅎ_ㅎ 더보기
[React] Emotion 태그, 브라우저에서 보기 쉽게 Label Format 설정해주기 emotion 으로 css와 styled를 적용하면 크롬 웹에서 다음과 같이 알수없는 이름들이 뜬다 ! 이를 보기 편하게 labelFormat 해줄 수 있는 babel 설정이 있다. GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition 👩‍🎤 CSS-in-JS library designed for high performance style composition - GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition github.com .babelrc { "pre.. 더보기
[React] Emotion 적용하기 2 - @emotion/react (css-in-js) 👉🏻 설치 // 프레임워크에 구애받지 않는 가장 베이직한 패키지 (VanillaJS 등에서 사용) npm i @emotion/css // react 사용자에게 권장되는 패키지 npm i @emotion/react yarn add @emotion/react 👉🏻 CSS Prop Emotion 사용해서 css-in-js 스타일링을 하려면 CRA의 경우 코드에 /** @jsx jsx*/를, 아닐 경우 .babelrc에 아래와 같이 설정을 추가해준다. - CRA Project /** @jsx jsx */ import { css , jsx } from '@emotion/react'; const color = 'darkgreen'; render ( ) - Set .babelrc { "presets": ["@emot.. 더보기
[React] Emotion 적용하기 1 - @emotion/styled (Styled Components) 🤷🏻‍♀️ 일반 CSS를 사용하지 않고 Emotion을 사용하는 이유는? JavaScript로 CSS 스타일을 작성하기에 편하게 설계되었기 때문이다.! (css-in-js) 🤷🏻‍♀️ 그렇다면 Emotion 뿐인가? No! [styled components] 라는 라이브러리도 있음. npm trends에서 지난 6개월간 다운로드횟수를 살펴보니 사용률은 emotion이 좀 더 높았다. @emotion/styled을 먼저 알아보자. 👉🏻 설치 // react에서 스타일 API로 직접 태그를 만들기 위해 사용하는 패키지 npm i @emotion/styled yarn add @emotion/styled 👉🏻 설정 emotion을 적용하기 위해서는 babel의 설정을 바꿔주어야하는데, 만약 react를 CRA .. 더보기
Webpack, Babel..... CRA가 있는데 꼭 내가 셋팅해야 할까?! 지난번까지 Webpack, Babel의 기본적인 코드들을 직접 세팅해보며 React 앱의 초기설정을 마쳤다. 일단 나는 기존에 진행중이던 프로젝트를 CRA(Create React App)으로 생성했었다. 처음 시작할 때는 늘 그렇듯 아무 문제가 없었다. 하지만, 실전 리액트 프로그래밍의 책 내용을 인용하면 리액트로 개발을 하다 보면, 개발자 대부분이 바벨 설정 때문에 애를 먹는다. 보통 인터넷에 떠도는 바벨 설정을 무분별하게 가져오기 쉽다. 그 코드는 한동안은 잘 돌아가는 듯 보이지만 예상치 못한 상황에서 문제가 발생하기 마련이다. 그리고 이 상황은 나에게도 일어났다. (하지만... 어쩌면 일어나지 않았을지도 모른다..!) 이유를 알 수 없는 에러가 발생했고, 내가 이것저것 온갖 설정을 막 건드렸기 때문.. 더보기

티스토리툴바