회사에서 개인의 기술 성장을 위하여 3주에 1번씩 사내 기술 세션 발표가 열리는데, 비록 2주차였지만 더욱 몰두하고자 자원하여 발표한 사내 기술 세션 발표 내용입니다.최근에 회사에서 새로운 기능을 개발하면서, 자연스럽게 react-hook-form을 처음 접하게 되었습니다. 처음엔 단순히 폼 상태를 다루기 위한 도구 정도로 생각했지만, 실제로 기능을 만들다 보니 생각보다 많은 개념들이 녹아 있었고, 특히 "렌더링 최적화" 관점에서 매우 중요한 포인트들이 존재한다는 걸 알게 되었습니다. 이 최적화를 진행한 배경이 기능은 고객에게 직접적으로 맞닿는 인터페이스가 아니었기 때문에 백오피스 성능이 상대적으로 중요하지는 않았습니다. 하지만 react-hook-form 라이브러리를 사용하면서 고객의 데이터를 입력한 ..

개발 인턴 3개월 차, 4년 전부터 이어오던 프로젝트를 담당하면서 처음 하는 것들이 많았다.이번에 보안 검사를 진행하던 중, axios에서 취약점 점수가 7.5로 나타났고, 그 결과 취약점 개선을 담당하게 되었다. 해당 라이브러리의 버전 업그레이드를 진행하면서 발생한 여러 문제를 해결해야 했고, 이번 기회에 보안 관련 개념을 새롭게 학습할 수 있었다.CVSS (Common Vulnerability Scoring System) 란?- 보안 취약점의 심각도를 정량적으로 측정하고, 0.0~10.0 사이의 점수를 부여하는 시스템 점수 범위 심각도 예시 0.0 없음 (None) 취약점 영향 없음 0.1~3.9 낮음 (Low) 미미한 영향 4.0~6.9 보통 (Medium) 조치 필요하지만 긴..

개발인턴 1주차 React, TypeScript로 프로젝트를 진행하고 있다.S3는 이전에 토이 프로젝트에 적용한 경험이 있는데, 정리를 안해놔서 그런지 구글링을 해야 했다.다음에는 더 잘 적용할 수 있게, [AWS S3로 프론트엔드 배포] 한 과정을 정리하고자 작성한다.AWS 접속 후 로그인을 하고, S3 메뉴로 접속한다.  1. S3 버킷 생성 [버킷 만들기] 버튼을 누르고 나서 버킷 이름을 입력한다. 나는 엑세스 차단 설정을 제외하고 나머지 항목 다 default 값으로 설정하였다.나중에 필요한 부분은 편집하여 수정하면 되기에.. 2. permission 설정 권한 칸에 접속한다. 추후 별도로 필요한 것들만 설정해두면 된다. 버킷 정책 칸에서 [편집] 버튼을 누른다. [정책 생성기] 버튼을 누른다. ..

리액트에서 useState, useEffect를 주로 다루다보니, 다른 Hook도 잘 활용하고 싶은 마음에 여러 가지를 시도하고 있는 요즘은 useContext로 '다크모드'를 다루는 와중에.. ThemeContext 파일을 따로 생성하여 전역 객체로 다룰 수 있도록 설정해주고,useContext 훅을 사용하여, styled-component에 다크모드를 적용하고 있었다.뒷배경에도 다크모드를 적용해야 했기에, 초기에 설정해둔 GlobalStyle 수정 중에 에러가 발생했다. Cannot read properties of undefined (reading 'body')The above error occurred in the component  다크모드로 설정해둔 객체를 읽지 못하여, 컴포넌트 렌더링이 안..