본문 바로가기

프로그래밍98

[React] Button 통한 파일 업로드 및 진행상황(progress) 표시 input 태그만 사용 시 문제점 위 코드처럼 input 태그를 사용하면, 파일 업로드를 위한 UI가 화면에 생성됩니다. 그러나 위 UI를 화면에 표시하고 싶지 않은 경우가 있습니다. input 엘리먼트를 화면에서 숨기되, Button 엘리먼트를 통해서 파일을 업로드하는 코드를 구현해보겠습니다. 파일 업로드 코드 구현 1. display:none 스타일 속성으로 input 엘리먼트를 화면에서 숨깁니다. 2. useRef를 사용하여 을 참조하고, 버튼 클릭 시 에 대한 클릭이벤트가 발생하도록 합니다. useRef를 사용하면 버튼 엘리먼트에서 onClick 이벤트가 발생했을 때 input 태그가 동작하도록 만들 수 있습니다. input 태그에 클릭 이벤트를 발생시키는 함수를 제작하고, 이를 버튼 엘리먼트.. 2023. 4. 12.
[react-color, TypeScript] 컬러 선택 기능 구현하기 (color picker) react-color 라이브러리를 사용하여 컬러 선택 기능을 제작해보려 한다. 주로 어드인 페이지에서 활용가능한 기능일 것이다. 1. react-color 라이브러리에서 ChromePicker를 불러온다. 다양한 형태의 컬러피커를 불러올 수 있다. ChromePicker가 가장 깔끔하다고 생각하여 이것을 선택했다. 불러올 수 있는 컬러피커의 종류는 아래와 같다. https://casesandberg.github.io/react-color/ AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker Swatch.. 2023. 4. 8.
[SCSS, JS] JavaScript를 통해 SCSS 속성값 동적으로 연결하기 JS의 코드를 통해 SCSS의 속성값을 동적으로 변경하여 스타일을 동적으로 변경하고자 한다. SCSS 파일 내부 코드 1. SCSS에서 :root 셀렉터를 사용하여 그 안에 동적으로 변경할 속성값을 기재하기 :root 셀렉터는 JavaScript와 CSS를 연결하는 문법이다. 커스텀 속성값의 변수명을 정의할 때에는 --(double hyphen)을 사용해야 한다. 그래야 브라우저가 CSS에서 사용할 수 있는 변수로 인식힌다. --(double hyphen)이 없으면 브라우저는 이를 일반 CSS 속성으로 이해하여 의도한 커스텀 기능대로 작동하지 않는다. 2. var() 함수로 :root 내부의 속성값을 변수처럼 불러오기 :root { --elementColorCode: "#ff0000"; --backgr.. 2023. 4. 8.
개발자는 고객을 위한 상품을 만드는 사람 스타트업의 주니어 개발자로서의 고민 개발자로 커리어를 시작하며 기술적 전문성에 대해서 많이 고민하게 되었다. 부트캠프에서 교육을 받으며 개발자들끼리는 프로그래밍 기술에 초점을 맞추며 성장하고자 했다. 그런데 입사 후 실무에서는 그것과 괴리가 있었다. 코딩이나 기술 외에 도메인 지식 및 문서 작업에도 시간을 할애해야 했다. 경우에 따라 기술적으로 최선의 방법을 찾는 것보다 빠르게 개발하여 일정을 맞추는 것이 더 중요시 되기도 했다. 회사를 다니며 들었던 고민들 회사에서는 백엔드와 프론트엔드를 모두 하길 원하는데, 한 분야에만 집중하는 것이 전문성을 키우기에는 좋지 않을까? 기술 공부를 하기에도 바쁜데 왜 대표님은 나에게 논문을 읽고 다양한 지식을 습득하라고 하는걸까? 문서 작업에 너무 많은 시간을 쓰는 것.. 2023. 1. 23.
[MeetUp] 우아한형제들 밋업 후기 (2022.11) 우아한현제들 MeetUp에 zoom으로 참여했다. 요약한 답변들과 느낀 점을 기록해보았다. B2B 회사에서 기능 구현 중심의 업무를 하나보니 FE 개발자로서 전문성이 쌓이지 않는데, B2C 회사로 이직을 해야 하는가? (김정환님 답변) 기능구현 수준에만 머문다는 질문이 공감된다. UI 버튼 만들면 POP UP이 보이거나 이런 정도의 업무를 할 때가 많다. 김정환님도 그런 일을 한 적이 있다. 거기에만 머물게 되면 정말 전문성이 얕아지는 것 같다. 어플리케이션 만들 때 좋은 설계를 고민해야 한다. 유지보수 환경 고민 등 이런 환경은 어디서든 할 수 있다. 이런 것에 초점 맞추는 것은 어떤가? 기능구현 수준으로만 개발하면 나중에 유지보수 힘들다. 어떻게 유지보수 하기 좋은지 설계를 고민해야 전문성이 키워진다.. 2022. 12. 18.
스타트업의 Bottom-up 적응기 첫 직장은 제조 대기업이었기에 Top-down 시스템 안에서 효율적으로 운영되었다. 구성원들의 역할, 권한, 책임에 대한 규정이 꽤 명확했다. 역할과 선을 넘는 행동이 월권이 될 때가 많았고, 주어진 역할을 넘어 책임지지 못할 행동은 하지 않는 것이 미덕이었다. 그러나 내가 재직 중인 스타트업은 시스템이 부재하다. 역할, 권한, 책임에 대한 정의가 되어있지 않았다. 의도적인 Bottom-up 시스템이 구축되어 운영되기보다는, 컨트롤 타워가 없다 보니 각 구성원들이 능동적으로 움직여야 하는 구조이며, 어쩔 수 없이 Bottom-up을 하는 느낌이다. 이전 직장에서 월권이라고 여겨지는 행동이 여기서는 종종 마땅히 요구된다. 이곳 스타트업에서 적응하기 위해서는 다음과 같은 자세들이 필요하다고 느꼈다. 1. 역.. 2022. 11. 23.
도메인 지식의 중요성과 분야별 소프트웨어 개발의 차이 개발자로 취업하기 전에는 웹 개발자가 단순히 프론트엔드와 백엔드로 나뉜다고 생각했다. 그러나 현업에서 일해보니 산업과 도메인에 따라 상품의 특성이 달라져, 개발자에게 요구되는 업무도 상이하다고 느꼈다. 현재 내가 재직 중인 회사는 제조용 B2B 소프트웨어 솔루션을 개발하다 보니, UI/UX나 SEO 등의 프론트엔드 기술보다는 백엔드를 통한 데이터 핸들링이 더 중요시된다. 소비자에 대한 이해와 문화적 도메인을 바탕으로 프론트엔드 개발을 하고 싶은 나로서는 생각이 많아지는 부분이다. 도메인 지식의 중요성 최근 수석 개발자님이 퇴사하셔서 내가 해당 프로젝트에 대해 인수인계를 받았다. 회사의 핵심 솔루션들을 기능과 코드를 살펴보면서 회사의 정체성과 제조 도메인에 대해서 알 수 있었다. 코드를 뜯어보기 전에 먼저.. 2022. 11. 22.
입사 후 첫 프로젝트를 하며 느낀 점 (개발 방법론, 생산성, 협업) 어느덧 개발자로 입사하여 회사의 프로젝트에 참여하게 되었다. 몇 달 간 실무를 하며 느낀 점들을 정리해보았다. 소프트웨어 개발방법론의 필요성 입사 1달 만에 팀장이 교체되었고, 새로운 팀장님마저 퇴사하셨다. 이후 팀장 없이 부서가 운영되었다. 처음에는 어떻게 업무를 진행해야 할지 몰랐지만, 대표님과 연구소의 도움으로 개발 진행 방식을 배웠다. 덕분에 '소프트웨어 개발방법론'의 개념을 알게 되었다. 먼저 제품에 대한 영업/컨설팅 문서를 바탕으로 고객 요구사항과 개발 Scope을 정리해야 했다. 이후 화면 디자인, 아키텍처, DB 설계를 진행하게 되었다. 폭포수 방식으로 진행하기에는 설계에 사용할 시간이 부족할 때, 프로토타입 개발방법론을 자주 사용한다고 한다. 프로토타입을 먼저 개발해보며 추후 미비된 설계.. 2022. 11. 21.
반응형

티스토리툴바