목록2022/05 (129)
치춘짱베리굿나이스
엄청난 부자2 문제 갑부 최백준 조교는 동전을 최소로 바꾸는데 성공했으나 김재홍 조교가 그 돈을 발견해서 최백준 조교에게 그 돈을 나누자고 따진다. 그 사실이 전 우주로 알려지자 우주에 있던 많은 생명체들이 자신들에게 돈을 분배해 달라고 당장 달려오기 시작했다. 프로토스 중앙 우주 정부의 정책인, ‘모든 지적 생명체는 동등하다’라는 규칙에 입각해서 돈을 똑같이 분배하고자 한다. 한 생명체에게 얼마씩 돈을 줄 수 있는가? 또, 생명체들에게 동일하게 분배한 후 남는 돈은 얼마인가? 입력 첫째 줄에는 최백준 조교가 가진 돈 n과 돈을 받으러 온 생명체의 수 m이 주어진다. (1 ≤ m ≤ n ≤ 101000, m과 n은 10진수 정수) 출력 첫째 줄에 생명체 하나에게 돌아가는 돈의 양을 출력한다. 그리고 두 ..
팀빌딩 공식적인 내생각 총 9명 지금까지 작업해본 프로젝트 팀 중 프론트엔드 인원이 가장 많았던 게 최대 6명이었는데 (그마저도 얼마 안되어 3명으로 줄었다) 9명... 처음겪어보는 팀원수였다 인원이 많은 만큼 역할분담이나 팀원간 작업흐름이 원활히 공유되어야 할 것 같다 프리온보딩 전까지 별도의 프로젝트를 진행하면서 작업내용을 공유하지 않는 팀원, 소통이 안되는 팀원, 중구난방으로 정리되는 스케줄, 아무도 모르게 흐지부지되는 프로젝트... 등을 겪고 나니까 각성한 기분이다 마치 레드불로 샤워를 한듯한 기분 ... 이런저런 팀에 몸담아 보니 결론은 어떤 팀에서든 Github 기능을 최대한 이용하여 (Issue, Pull Request, Kanban Board, Wiki 등...) 보기좋은 Organizat..
Github Wiki 위키를 왜 만들까요 나 같은 경우엔 노션을 따로 정리하더라도 깃허브에 더 자주 들르게 되고, 따라서 깃허브에 최대한 할 일이나 각종 문서들을 저장하는 것이 좋겠다는 생각이 들었다 팀 노션 들어가있는 곳도 워낙 많고... 코딩 컨벤션과 같이 자주 체크해야 하는 항목들은 깃허브에 붙여놓는 것이 훨씬 좋겠다는 생각이 들어 위키를 작성해두게 되었다 위키 생성하기 프라이빗 레포의 위키 생성은 아쉽게도 유료이다 (단발성 프로젝트에서 돈을 내기엔 애매하다..) 어차피 나중에 채점을 진행해야 하니 퍼블릭으로 돌려놓으면 Wikis 항목을 활성화할 수 있다 Wikis 항목의 체크박스를 체크해 활성화시키면 레포지토리의 상단에 Wiki 탭이 생긴다 와~ 위키가 생겼다 첫 페이지가 자동으로 생성된다 페이지..
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 컴포넌트 내에 인라인으로 함수를 정의해버리면, 해당 컴..
코드리뷰 코드리뷰 #1 핸들러 함수 핸들러 함수를 따로 선언해두자 {console.log("asd")}}> 이런 식으로 인라인에 함수를 만들어두면 리렌더링 될 때 마다 함수가 재선언되므로 별로 썩 좋지 않다 또한 가독성을 해쳐 리팩토링에 도움이 되지 않는다 Typescript useState 타입설정 useState(false); state 초기화 시 들어간 값에 따라 타입스크립트가 자동으로 초기화해 주므로 굳이 이렇게 할 필요 없다 핸들러 이름 붙이기 handleEmailChange() handleButtonClick() handle + [대상] + [언제 핸들러가 실행되는지] 예를 들어 onChange에 달아주는 핸들러라면 끝 단어는 Change가 된다 onBlur에 달아주는 핸들러라면 끝 단어는 B..
CSS Module CSS 클래스명을 겹치지 않게 해주는 웹팩 자체 기능이다 간단하고 작은 토이 프로젝트면 몰라도 프로젝트가 거대해질 수록 클래스명이 겹칠 위험이 매우 커진다 이때 CSS Module을 사용하면, CSS Module가 자체적으로 클래스명을 [파일명]_[클래스명]_[해쉬값] 으로 지정해주기 때문에 클래스명 중복 지정이 되지 않도록 방지해줄 수 있고, 더욱 깔끔한 파일간 연관성을 구성할 수 있다 CSS 파일 생성 .profileDiv { background-color: white; } .buttonDiv { color: white; background-color: teal; } 이러한 CSS 파일 (사실 SCSS도 node-sass 모듈을 설치했다면 가능하다) 이 있다고 가정하자 파일명의 형..
prevState 사용 이유 const [testValue, setTestValue] = useState(false); ... setTestValue(!testValue); 우선 아무 생각 없이 현재 상태값을 그대로 가져와서 이렇게 작성하던 과거의 나를 반성하자 쓰는 법 const [testValue, setTestValue] = useState(false); ... setTestValue((prevState) => !prevState); 간단하다 setState() 함수 내에 인라인 함수를 작성하면 된다 인자로 prevState가 자동으로 들어간다 근데 왜 굳이 써요? const [testValue, setTestValue] = useState(0); const handleOnClick = () => ..
e.currrentTarget vs e.target input 태그에서 값을 받아올 때 맨날 e.target만 사용했었는데 e.currentTarget의 존재를 프리온보딩 피드백을 받으며 처음 알게 되었다 input 태그는 자식 태그가 없고 보통 onChange를 통해 값의 변화만을 추적하기에 망정이지 다른 태그에서 무지성으로 e.target만을 사용했으면 큰일날 뻔 했다... 라고 반성을 좀 했다 ㅡ,,ㅡ;; 값 비교 const handleClick = (e) => { console.log(e.target); console.log(e.currentTarget); } bbb aaa ccc 위와 같은 컴포넌트가 있다고 가정하자 컴포넌트는 bbb 영역과 aaa 영역, ccc 영역으로 나눠진다 aaa 영역과 ..