도쿄사는 외노자

대략 2년만에 리액트를 만지게 되었다. 이래저래 변한 것도 있긴 한데, 그래도 별 문제 없이 적응 중. 노트북 크기의 화면에 꽤 많은 데이터를 집어넣어야 했는데, 다른 팀원이 만든 화면 중에서 클라이언트의 모니터 크기에 맞지 않는 부분이 있었다. 원래대로라면 1줄로 표기해야 하는데, 아무리 줄여도 맞지 않더라. 그래서 동의를 얻어, 화면이 일정 수준 이상 작아졌을 때엔 2줄로 표기하는 식으로 해결을 보았다. 소스코드는 아래와 같다. // 브라우저 화면의 Width, Height를 보존할 State만들기 const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined, }); // 브라우저 화면의 Width, Height ..

아래와 같은 데이터를 가지고, 그 내용을 그대로 출력하는 테이블 컴포넌트가 있다. 12345678910111213141516171819202122const sampleData = { ... , rows: [ { id: '1', name: 'Frozen yogurt', jname: 'フローズンヨーグルト', }, { id: '2', name: 'Ice cream sandwich', jname: 'アイスクリームサンドイッチ', }, { id: '3', name: 'Eclair', jname: 'エクレア', }, ... ]};export default sampleData;cs jname 칼럼 안에 버튼을 달고 싶은데, 테이블 컴포넌트나 원본 데이터의 소스는 건드릴 수 없다.테이블은 독립된 부품이라 view에서 뭘..

예전 기가드롭다운을 만들 때, 딱히 링크 비활성 같은건 넣지 않았는데...지금 이쪽 업무 담당하는 선배가 필요하다길래 대충 건드려 봤다. 벌써 반년도 더 전에 손 뗀 프로젝트라...화면 띄우는 데 30분, 비활성화 구현하는데 5분 걸렸다.맨날 설계한다고 엑셀만 붙잡고 있다가 간만에 아톰 열어보니 재미있었다. Menu.js 1234567891011121314...{ name: '各種コンポーネント', link: '/sample2', icon: 'delete', activate: false,},{ name: 'Approach(Tab ver)', link: '/approachTab', icon: 'search', activate: true,},...cs GigaDropdown.js 12345678if (!isA..

@markdown # Key-Break DB에서 습득하는 데이터를 그 내용에 따라 분류하여 출력하기 - 데이터는 다음의 세 테이블 (Users, Authorities, User-Authority)에서 습득- User는 복수의 Authority를 가질 수 있음. - Authority가 복수인 유저의 경우, main key인 user.id가 중복됨 - 데이터를 출력할 테이블은 user.id를 key로 가지므로, id가 중복되는 경우 에러가 발생. - 두 데이터를 하나로 합치고, 테이블에 표시되는 Auth에는 Authority.name을 ,로 연결하여 출력할 것. ex) "Admin, User"- 각 User의 Authority 데이터는 다른 화면에서 사용되므로, 따로 Json Object로 만들어 Users..

그동안 react.js와 jQuery를 같이 쓰지 않는다는 룰이 있어서You don't need jQuery를 참고해 가며 꾸역꾸역 javascript로 코딩을 해 왔는데...드디어 conponentDidMount() 이후에 한해 jQuery를 사용해도 된다는 허가가 떨어졌다. 하여, 몇몇 코드에 대대적인 공사가 들어갔고...나 또한 이전의 leftNavigation를 jQuery로 갈아치우게 되었다.디자인 수정도 겸해서, 거의 새로 만들다시피 하는 꼴이 되었는데...하는 김에 MaterialUI의 drawer를 빼버리고, 그냥 div로 다 해결해 버렸다.코드는 다음과 같다. 일단 componentDidMount() 이후, Navigation의 item을 만들기로 한다. 123456789construct..

여전히 프레임워크 제작중...지금 하는 일은 화면 내 panel의 정보를 주워서 표시하는 사이드바를 만들고,그 사이드바 버튼 클릭 시 해당 panel로 이동 + panel이 accordion이라면 열어주는 작업이다.이 사이드바는 따로 props를 받지 않고 독립적으로 움직이며,그냥 패널이 있는 화면에 갖다 붙이기만 하면 알아서 지가 화면 읽어서 패널 정보를 표시한다. 뭐... 패널도 따로 정해진 부품이 이미 있기에... 123456789101112131415161718192021componentDidMount() { this.makeMenuItem();}makeMenuItem = () => { const drawer = document.getElementsByClassName('naviDrawer')[0..

자작 데이터테이블에서 column에 mouse hover를 할 경우 background의 색깔을 변경하도록 했는데,꼭 한번씩 이런 warning이 뜨더라. 받아온 style props가 mutated당했다는 내용.뭐 여기서 이미 눈치챈 사람도 있겠지만서도...문제는 render를 하는 과정에서 적었던 이 코드였다. 12345678910return ( {content} );Colored by Color Scriptercs props값이 파괴된다면 어째야 한다고?「props의 데이터가 파괴되는 문제」 참조 12345678910return ( {content} );Colored by Color Scriptercs assign에서 맨 앞에 {}를 붙이는 것으로 해결되었다.

예전에 자작 데이터테이블에 Add Row버튼을 달아 두고,클릭시 테이블 최하단에 줄을 추가하는 작업을 해 두었다.추가할 줄의 내용은 다음과 같이 data에 미리 설정해두고 props로 받아서 사용하고 있었다. 12345678910111213141516... additionalRow: { name: 'AdditionalRow', jname: '追加行', kname: '추가행', calories: '', fat: '', carbs: '', protein: '', sodium: '', calcium: '', iron: '',}, ...cs 근데 이 데이터테이블에 TextField를 만들어, 추가할 줄의 내용을 수정하려 하는 것에서 문제가 발생했다.한 항목의 내용을 바꾸면, 행 추가를 통해 만들어진 다른 행도 ..

여전히 사내 프레임워크 작성을 담당하고 있는데...예전에 만들어 두었던 GigaDropdown의 수정 요구가 들어왔다.드롭다운 내에서 현재 페이지와 동일한 링크에 하이라이트 표시를 해달라는 것. 해야 하는 일은 명확하다. 1. 드롭다운을 기동시 현재 페이지를 읽을 것 (페이지 전체가 아니라 해당 페이지의 path만을 추출할 것)2. 드롭다운이 render되며 링크 작성 시, 해당 링크에 부여된 path와 1을 비교할 것3. path가 동일하다면, 해당 링크에 하이라이트 효과를 부여할 것 일단 path추출은 이걸로 가능하다.document.location.pathname;이걸 초기 로드 시와 드롭다운 기동 시 state로 지정해 두도록 한다. 초기 로드 시12345678910... constructor(p..

material-ui를 이용해 데이터테이블을 만드는 중이었다.이게 기본적으로 테이블 width를 100%로 잘라 버리는데,그러다 보니 브라우저가 작아지면 그만큼 각 요소의 길이도 찌그러지더라. 처음엔 그냥 이렇게 ellipsis로 땜빵하려고 했는데,123456tableHeaderColumn: { fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',},cs 슬프게도 textOverFlow가 header column에 안먹히더라...내가 개조하는 과정에서 뭔가 삽질을 한 모양이다. 여하튼 이걸 그대로 낼 수는 없으니,적어도 column label만큼은 제대로 표시하고 싶었다.데이터에는 ellipsis가 먹히기도..