분류 전체보기 (61) 썸네일형 리스트형 #4 [REACT.JS] 사진 불러오기, 엑셀 읽어오기 #3 기본 레이아웃 구성 및 팝업 생성 #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 potential-coding.tistory.com 깃허브 일일커밋 4일차 개발 사항은 - 이미지 첨부 - 이미지 앞면, 뒷면 보여주기 - 엑셀파일 첨부 - 엑셀 파싱 작업 진행 완료 --- 현재 css는 아직 완전히 구현되지 않은 상태이다. 이렇게 앞면과 뒷면 이미지를 불러오고, 엑셀에서 매일 첫번째 로우인 header 컬럼을 받아와 변수 지정에 설정했다. 그리하여 앞으로는 header에 있는 이름, 직급, 부서명 등을 드래그앤 드랍할 수 있는 객체로 만들어 명함 .. #3 기본 레이아웃 구성 및 팝업 생성 #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입 potential-coding.tistory.com 오늘은 깃허브 일일커밋 3일차다 오늘은 기본 레이아웃 구성과 팝업창 컴포넌트를 만들고 열기, 닫기 기능까지 구현해보았다. 현재까지의 진행상황을 공유하자면, 3일차 구현 - 50% 유연한 레이아웃 - Sticky한 Footer, Header 구현 - 팝업창 컴포넌트 구현 및 사용 - 파일 업로드 버튼 컴포넌트 커스텀 이번 1인 프로젝트를 진행하면서 제일 뿌듯한 점은 맨날 display : inline-block만 쓰는 나에게 .. #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입들이 올 때마다 이름표 potential-coding.tistory.com ----- 기존엔 UI를 구성하기 위해 Material-UI, ant design의 컴포넌트들을 사용했다. 하지만 이번 프로젝트에서는 직접 만들어보고싶어 styled-component를 이용해 만들었다. 버튼 컴포넌트 생성 먼저, 내가 개발하면서 자율적으로 버튼을 커스텀하고 싶은 속성은 - 텍스트 - border 여부 및 색상 - outlined 여부 - backgroundColor : 버튼 색상 - fontColor : 폰트 색상 -.. #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 시작하게 되었다이번 토이 프로젝트의 큰 주제는 바로 ‘이름표 자동 생성기’다. 이름표라니, 사실 듣기엔 좀 사소해 보일 수 있지만, 의외로 업무에선 엄청난 시간과 노력이 들어가는 작업이다. 내가 다니는 회사에서는 신입사원이 입사할 때마다 이름표를 한 명씩 수동으로 만든다. 각자 이름을 입력하고, 직급도 넣고, 출력 버튼을 눌러 프린트하는 과정이 꽤 번거롭다. 특히 신입이 많거나 직급 변동이 잦은 시기엔 이 작업이 정말 귀찮고 비효율적이다.“이걸 자동화할 수는 없을까?” 하는 생각이 들어서, 이번 프로젝트를 시작하게 됐다.프로젝트의 핵심 목표시간 절약: 수십 명씩 수동으로 작업하는 대신, 엑셀 파일 한 번 업로드로 이름표를 자동 생성편의성 향상: 이름, 사진, 직급 등 필요한 .. Java Stream으로 그룹핑하기 – groupingBy() 정리 Java 8의 Stream API를 사용할 때, 데이터를 그룹핑하려면 Collectors.groupingBy()를 자주 사용하게 된다. 예제를 통해 한 번 정리해보자.1. 단일 Key로 그룹핑Map> groupedByTmId = list.stream().collect(Collectors.groupingBy(SalesCollectViewVo::getTmId));System.out.println(groupedByTmId);→ getTmId() 값을 기준으로 list를 그룹핑해서 Map으로 만든다.즉, 동일한 tmId 값을 가진 객체들끼리 묶이게 된다.2. 복합 Key로 그룹핑 (Tuple 사용)Map> postsPerTypeAndAuthor = posts.stream() .colle.. [CSS] Display Flex에 대해서 display 속성 display 요소는 레이아웃을 결정해주는 핵심 속성으로 어떤 형태의 view를 나타내게 해줄지 지시해준다. 💰flex Flex는 유연하고, 부모의 말을 잘듣는 자식들로 구성되어있다. 먼저 부모의 뜻부터.... 부모 컨테이너에 display : flex 속성을 지정해보면 준비 끝! 이제부터 왔다갔다 해볼 예정이다 (1) ↔ 가로 정렬 - ↕ 세로 정렬? flex-direction : item의 (X축 | Y축) 정렬을 도와주는 친구 - column ( 열을 뜻함 ): Y축 정렬을 원해!! - row ( 행을 뜻함) : X축 정렬 [row|column]-reverse : 거꾸로 정렬 (2) 자식을 부모에 맞도록 조정(nowrap) - 부모가 자식에 맞도록 조정 (wrap) flex-wr.. [DB] Query Generator [insert, update] - xlsx Excel을 이용한 insert, update 쿼리문생성기 해당 조건만 설정하면 insert와 update문 자동 생성되도록 만들었다. Object – map()을 이용한 JSON 데이터 수정 자바스크립트에서 배열 안의 특정 객체만 값을 바꾸고 싶을 때는 어떻게 할까? 흔히 사용하는 패턴은 Array.prototype.map()과 조건문(===)을 조합해서 특정 조건을 만족하는 객체만 수정하는 것이다.예제 코드// 특정 고유 키 값(compareVal)을 기준으로 배열의 특정 객체만 업데이트setSampleData( sampleData.map(item => item.key === compareVal // 고유 키로 비교 ? { ...item, key: e.target.value } // 값만 변경 : item // 나머지는 그대로 ));위 예제는 React의 상태 업데이트 예시로, 기존 sampleData 배열을 순회하며 특정 조건을 만족하는 객체만 찾아 해당 값을 .. 이전 1 2 3 4 5 6 7 8 다음
