치춘짱베리굿나이스

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

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

내 과제 리팩토링 공식적인 내생각 컴포넌트 완전 재구축의 현장 (점 점 점 점 점) div로 떡칠을 하질 않나, 클래스명 없이 nth-child() 선택자로 어떤걸 선택했는지 알아보기도 힘들게 하질 않나, onClick 이벤트를 굳이 div에 걸질 않나, ... 반성을 좀 많이 (...) 하면서 작업 중이다 심지어 어제 작업하면서 린터도 예전에 쓰던 버전 그대로 놔둬서... 새로 교체했더니 아주 시뻘겋게 죽죽 작업 내용 Toggle 토글은 컴포넌트 자체가 단순해서 리팩토링이 그렇게 어렵지 않았다 const handleOnClick = (e) => { e.preventDefault(); setIsSelected(isSelected ? false : true); } const handleToggleClick..

내 과제 리팩토링 공식적인 내생각 작업 내용 Styled 제거하기 나의 영원한 친구 스타일컴포넌트... 하지만 시맨틱 태그 사용이나 classnames나 css modules에 익숙해지기 위해 잠시 바이바이 하기로 했다 스타일드 컴포넌트에 작성한 css 코드를 그대로 scss에 복붙했더니 컴포넌트들이.. 다 엉망이 되었다 (푸하하) 하나하나 CSS 모듈로 손수 바꿔주었다 div보단 다른 태그도 섞어써버릇 {selectedStr} {selectedStr} 드롭다운의 윗부분을 구현한 코드이다 그냥 전부 div로 때려놨었다 ㅋㅋㅋㅋ 일단 헷갈리면 무조건 div div를 최대한 지울 수 있는 대로 지우고 다른 태그로 교체했다 특히 onClick 이벤트는 div보단 button 태그에 더 어울리는 것 같다.. 클..

작업 시작 공식적인 내생각 아침에 일어나는 게 살짝 힘들긴 한데 아침 회의도 나름 할만하다 다만 중간에 집중력이 흐트러져서 시간을 알차게 사용하지 못한 것 같다 오늘 작업하고자 했던 작업량은 끝냈지만 뭔가 더 만들고 싶어서 근질근질하기도 했다 내 작업 내용 원본과 비슷하게 프로필 사진 주변에 원형 Progressbar을 띄워주고, 화면에 이쁘게 배치되도록 스타일 작업을 수행하였다 CSS Module 열심히 사용하기 {name} 자식 태그의 클래스에 스타일을 적용하려면 className=’imageDiv’ 방식이 아닌 className={styles.imageDiv} 방식으로 작업해야 했다 살짝 익숙하지 않아서 당황했는데 이렇게 보니 통일감 있고 괜찮아보인다 아직 시맨틱 태그에 익숙하지 않아 div 범벅인..

코드 작성 VSCode 확장 확장 - Auto Import 컴포넌트 자동 import 확장 - Auto Rename Tag 여는 태그 이름을 바꿔주면 닫는 태그 이름도 같이 바뀐다 확장 - Beautify JSON 파일 이쁘게 보는 용도 확장 - ESLint (필수) 린터 확장 확장 - Prettier (필수) Prettier 확장 (코드 포매터) 확장 - Stylelint (필수) CSS 린터 확장 확장 - Todo Highlight //TODO: [할 일] TODO 주석을 하이라이트해준다 확장 - Timestamp Converter epoch time (보통 ms 단위로, 1900년 1월 1일부터 지금까지 흐른 ms) 을 연월일시간 형식으로 보기 좋게 바꿔준다 확장 - SVG SVG 태그 내용물의 실..

팀빌딩 공식적인 내생각 총 9명 지금까지 작업해본 프로젝트 팀 중 프론트엔드 인원이 가장 많았던 게 최대 6명이었는데 (그마저도 얼마 안되어 3명으로 줄었다) 9명... 처음겪어보는 팀원수였다 인원이 많은 만큼 역할분담이나 팀원간 작업흐름이 원활히 공유되어야 할 것 같다 프리온보딩 전까지 별도의 프로젝트를 진행하면서 작업내용을 공유하지 않는 팀원, 소통이 안되는 팀원, 중구난방으로 정리되는 스케줄, 아무도 모르게 흐지부지되는 프로젝트... 등을 겪고 나니까 각성한 기분이다 마치 레드불로 샤워를 한듯한 기분 ... 이런저런 팀에 몸담아 보니 결론은 어떤 팀에서든 Github 기능을 최대한 이용하여 (Issue, Pull Request, Kanban Board, Wiki 등...) 보기좋은 Organizat..

Off-Topic 팁 모음 리액트 하위 라이브러리 import import React, { useState } from 'react'; ... const [text, setText] = React.useState(""); //X const [text, setText] = useState(""); //O 리액트 하위 라이브러리들은 구조분해 할당을 통해 따로 import 해주자 사용할 때도 굳이 React.를 붙일 필요가 없다 컴포넌트 내의 함수 선언 { setState(e.target.value); }}> //X ... const handleDivClick = (e) => { setState(e.target.value) } ... //O 컴포넌트 내에 인라인으로 함수를 정의해버리면, 해당 컴..