목록2022/05 (129)
치춘짱베리굿나이스
개인과제 #1 시작 공식적인 내생각 이라고 제목은 적었지만 사실 타입스크립트 이것저것 만져보느라 진도는 많이 못 나갔고... 강의 내용 정리나 정리하면서 궁금했던 것들 위주로 블로그에 정리하느라 바빴다 글로 하나씩 정리하는 것보다 실제로 코드짜는게 더 재밌다는 생각이 들었다... 하지만 정리 안 하면 지는 느낌임 내일은 본격적으로 영화앱 만들기 시작하고 가능하면 날씨앱도 만들어보고 싶다 과제 분량이 많다 보니 강의내용 정리도 계속 밀려서 1일차 강의내용을 오늘 정리를 끝냈다 ㅡ,,ㅡ;; 큰일났다 집중력 어떡하지 오늘 정리한 내용 yarn 사용해보기 npm 대신 yarn 써보기 npm 대신 yarn 써보기 yarn 지금까지 프로젝트에선 npm 만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn 으..
서론 항상 일은 더 생기기 때문에 이것을 염두하고 미리미리 작업해야 한다 일주일이면 걸릴 과제라면 한달은 잡아놓고 해야 넉넉함 수정사항은 계속 생기기 때문 코드리뷰 1팀 handleChange 이벤트 받아오기 const handleChange = ({currentTarget}) => {} e에서 currentTarget 받아올 때 구조분해 할당으로 받아오면 알아보기 힘들다 return값 내보낼 때 객체로 묶어 내보내기 return [date, {handlePrevClick, handleNextClick, handleCalChange}]; return { date, handlePrevClick, handleNextClick, handleCalChange }; 위의 반환문을 아래의 반환문으로 작성할 수 있다..
투두리스트 작성 예시 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..