치춘짱베리굿나이스

투두리스트 작성 예시 dribble.com 디자이너들끼리의 커뮤니티(?) 로, 사람들이 만든 웹 디자인들이 올라온다 Figma 없이 하나의 테마만 갖고 작업할 때 참고하기 좋다 다만 디자이너들이 온갖 기교를 넣어서 만들어놓은 동작이나 애니메이션이 많기 때문에 쳐낼 기능은 쳐내면서 작업하자.. ColorSlurp 화면상의 색상을 찍어 색상코드를 받아올 수 있는 프로그램 (mac용) 프로젝트 초기화 하기 .eslintrc.json { "extends": ["airbnb", "airbnb/hooks", "react-app", "prettier"], "env": { "browser": true, "jasmine": true, "jest": true }, "settings": { "import/extensions..

::before, ::after 가상 선택자는 실제 html에선 존재하지 않는 속성으로, CSS에서 임의로 생성시켜준다 그 중에서도 ::before과 ::after은 현재 요소의 내용 앞, 뒤에 CSS에 의해 생성되는 자식 요소이며, content 속성과 함께 사용한다 ::before h1::before { content: "10살에 곰을 잡은 "; color: blue; } 토끼공듀 분명 h1의 내용은 "토끼공듀" 밖에 없었는데 앞에 내용이 추가되었다 이처럼 ::before 선택자는 특정 요소의 내용 앞에 추가적인 내용을 더해준다 ::after h1::after { content: "Lv.9999"; // 텍스트에 linear gradient 적용 코드 } 토끼공듀 지금보니까 원본은 2000레벨이고 닉..

CSS 선택자 asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa 아무런 선택자도 사용하지 않았을 때의 모습 예시이다 자식 선택자 > body > div { background-color: colors.$BLACK; } asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa > 기호로 이어진 두 선택자가 서로 부모자식 관계여야 함 첫 번째로 명시된 선택자의 자식 요소 중 두 번..

yarn 지금까지 프로젝트에선 npm만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn으로 세팅하게 되었고 마침 참여중이었던 다른 프로젝트에서도 프론트엔드 개편과 함께 yarn을 써보자는 이야기가 나와서 이참에 정리해보려고 한다 약간 이름이 얀이 머냐 얀이 이러면서 좀 비호감이었는데 방금 아이콘 찾아보니 너무 귀여워서 급호감됨 고양이 못참지 yarn이란? 기본적으로 npm과 같은 자바스크립트 패키지 매니저로, 패키지 설치와 삭제를 돕는다 다만 yarn은 npm의 느린 속도와 불안정함을 보완하기 위해 태어난 녀석이라 상대적으로 빠르고, yarn.lock과 package.json에 등록된 패키지만을 설치하기 때문에 안정적이다 npm과의 차이점 속도 npm은 작업을 순차적으로 수행하기 때문에 이전 패..

그룹과제 공식적인 내생각 기능구현보다 더 중요한게 더 따로 있었으니 그것은 바로 팀원들과 각자의 작업물을 합치고 충돌을 해결하는 것이었다 사실상 이게 전부였던것같다 ㅋㅋㅋㅋㅋㅋㅋㅋ 충돌은 피할래야 피할수없는 이슈 아닐까... 이게 제일 오래걸렸고 난감했다 스스로 나름 규칙 지켜가면서 잘 짰다고 생각했는데 가끔 카페에서 커피 쫍쫍 하면서 정신 빼놓고 짰다가 변수명을 컨벤션과 맞지 않게 이상하게 적었다던가.. 필요없는 변수를 안 지웠다던가... 스타일 작업을 잘못 해서 전혀 관련없는 다른 컴포넌트에까지 영향을 미친다던가 하는 소소한 문제들이 좀 있었다 (정신차리자) 문서화한 것을 참고해가면서 안티패턴을 피해 코딩하는 것도 좋지만 손에 익을 때까지 노력해야겠다 다른 프로젝트 처음에 온보딩 스케줄표만 봤을 땐 ..

Type vs Interface 드디어 대망의 타입스크립트에 발을 들이게 되었다 예에에ㅔㅔㅇ에에에에전 프로젝트에서 잠깐 깔짝해본 (에러범벅만 기억에 남은) 타입스크립트를 다시금 손대면서 기본적으로 알아야 할 것 같은 사항들을 정리해본다 type과 interface는 둘 다 새로운 자료형 (타입) 을 정의하고 이름붙일 수 있지만, 보편적으로 interface를 사용하기를 권장하고 있다 왜때문일까? 공통점 type TGame = { name: string; genre: string; cost: number; } const rainWorld: TGame = { name: 'rainWorld', genre: 'adventure', cost: 12000, }; interface IGame { name: strin..

Custom Hook 코딩을 하다 보면 (당연히도) 반복적인 로직이 굉장히 많이 나오게 된다 예를 들면, 버튼을 눌렀을 때 특정 상태값이 바뀌게 하는 로직, input에 값을 입력하면 상태값이 같이 변하는 로직 등... 매 컴포넌트마다 useState, useEffect를 손수 달아주기보단 훅을 직접 만들어서 필요할 때마다 불러와 사용하면 몇십줄 재선언해야할 게 한두줄이면 끝난다 예시 Axios 코드 axios.get('링크') .then(res => { console.log(res); setState(res.data); }) .catch(e => { console.log(e); }); 어떠한 API에 GET 요청을 보내는 axios 코드가 있다 보통 API에 요청을 보내는 건 컴포넌트가 Mount될 때..