전체 글106 [React, TypeScript] 브라우저 화면에서 특정 단어 검색 기능 구현 카톡방에서 '대화 내용 검색'기능과 유사한 기능을 React로 브라우저에서 구현했습니다. 보통은 브라우저에 표시된 화면에서 Ctrl(Command) + F 를 사용하면 됩니다. 그러나 특정 컴포넌트 내에서만 이 기능이 동작하도록 코드로 직접 구현했습니다. 1. 검색하고 싶은 단어가 포함된 Node를 HTML DOM으로 불러와 텍스트만 추출하기 검색하고 싶은 단어들이 포함된 Node를 HTML DOM으로 불러옵니다. DOM문법을 사용해도 되고 React를 사용하고 있다면 useRef를 통해 불러옵니다. 저의 경우 useRef를 통해 HTML DOM을 불러왔지만, 그 안에서 특정 클래스에 있는 텍스트만 추출했습니다. 그리고 검색된 키워드를 포함하는 엘리먼트만 배열에 담아 state에 저장해줍니다. const.. 2023. 4. 20. [React] 파일 다운로드(download) 및 헤더(header) 정보 서버 코드 살펴보기 1. 헤더의 Content-Type을 application/octet-stream으로 설정하기 application/octet-stream은 8비트로 된 데이터라는 뜻으로 response 데이터가 binary 파일이라는 것을 암시합니다. 2. Content-Disposition 헤더의 속성값을 attached로 입력하고, filename도 전달하기 Content-Disposition는 Response Body의 콘텐츠를 브라우저에 인라인으로 표시할지 여부를 결정하는 헤더입니다. 속성값에 따른 차이는 아래와 같습니다. Content-Disposition: inline // 콘텐츠를 브라우저 화면에 표시합니다. Content-Disposition: attachment // 콘텐츠를 다운.. 2023. 4. 18. [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. 이전 1 2 3 4 5 ··· 18 다음 반응형