본문 바로가기

전체 글

aws-sdk 라이브러리를 이용해 Amazon S3에 이미지 업로드 구현 계기 이미지를 태그를 이용해서 type=’file’ 으로 받은 후, File 정보를 가지고 누가 url 정보로 바꿀것인가가 핵심이었다. 이건 프론트에서도 가능했고, 백엔드에서도 가능했다. 그 당시, backEnd분이 방법을 모르겠다고 해서 Front 에서 진행한 것으로 기억된다. S3 버켓만들고 이미지 업로드 s3 버켓 만들기 버켓 만들기를 통해서 버켓이름(하고싶은걸로) AWS 리전 (아시아 태평양(서울) ap-northeast-2) 다음과 같이 생성하면 된다. 테스트 용이므로 퍼블릭 엑세스 차단 설정을 해제 합니다. 만들어진 버켓 클릭하기 버켓을 클릭하면 후에 권한 클릭 권한 CORS에 다음을 입력합니다. 코드에서 보내는 내용 확인하기 import AWS from 'aws-sdk'; export .. 더보기
Clone-coding "오늘의집" 회원가입 유효성 검사 구현하려는 기능 회원가입 시, 누락된 부분에 대한 유효성 검사를 진행하고 해당 부분에 테두리 색이 변경되도록 구현하려고 한다. 그리고, 해당 부분에 focus가 잡히도록 할 예정이다. 유효성 검사하기 유효성 검사를 하기 위해 validation.js 라는 파일을 생성하고 그곳에서 유효성검사를 한 후, 결과값을 리턴하도록 만들었다. export const onChangeEmail = ( value, setHandler, isHandler, messageHandler, setCheckHandler ) => { const emailRegex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*$/i; const emailCurrent = value; setHandler(emailCurrent); i.. 더보기
전역관리 어떻게 할것인지 고민해보기(Context, Recoil) 기능 확인 구현하고 싶었던 기능은, 일정 / 휴가 대한 테마를 변경하고 싶었습니다. 일정을 누르면 파란색 테마, 휴가를 누르면 빨간색 테마로 변경하고 싶었습니다. 그렇게 구현하기 위해서 Main Page Header에 Tab Button을 만들었고, Tab 버튼을 클릭할 때마다, props로 각 컴포넌트에 전달했습니다. 문제점 처음 만들 때는 컴포넌트의 수가 적어 간단하게 props로 상태에 대한 boolean 값을 전달해 배경색을 변경할 수 있었습니다. 하지만, 프로젝트의 구조가 복잡해지고 컴포넌트의 수가 많아지면서 props 깊이가 깊어지는 문제가 발생했습니다. 물론 리액트 공식 홈페이지에서 말하는 적정 깊이(최대 3~4개) 정도였지만, 프로젝트가 커질 수 록 더 많은 컴포넌트가 생길거라 생각했고, .. 더보기
lightHouse를 이용한 성능 최적화 1. React-icons bundle 문제 lightHose를 통해서 현재 웹페이지의 성능점수를 확인 트리맵을 통해 어디서 성능 issue가 발생했는지 확인 측정 결과 react-icons 라이브러리가 chunk 사이즈의 대부분을 차지하고있는 것을 확인 2. 페이지 진입 시 발생하는 버들파일 issue 맨처음 페이지에 진입하면 웹팩에서 압축한 번들파일을 다운받게됨. 맨처음 로딩할 때, 페이지의 전체 리소스를 다운. 이렇게 되면 초기에 굳이 로딩할 필요 없는 리소스 까지 다운받게 되면서 bundle issue 발생 해결방안 1. React-icons/all-files 로 대체하기 react-icons는 icon 종류별로 구분되어 있으며, 종류별로 하나의 js 파일에 아이콘 전체를 포함 build 시 해당.. 더보기
onWeekCalendar 캘린더 제작하면서 애먹었던 문제 1. console.log는 렌더링이 될때의 결과를 나타낸다. 나는 31일치의 배열을 만들어 놓고, 각각의 배열안에는 3가지 의 배열을 추가적으로 입력해뒀다. 3가지의 배열은 각날짜의 스케줄이 있는지 없는지를 나타내는 boolean값으로 설정했다. 배열을 생성하고 log 값을 찍어봤더니, log 값안에는 이미 조건을 걸친 값들이 반영되어있었다. 그래서 나는 log가 정확히 어떻게 값을 반영하는지에 대해 알아봤다. log consolo.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 실시간으로 내용이 바뀐다. const returnEvent = useCallback(() => { const calendarDays = Array.from({ len.. 더보기
Event bubbling Trouble Shooting 💡 문제 인식 모달을 띄운 뒤, 모달 내부의 닫기 버튼이나 모달의 백그라운드를 누르면 모달이 닫히게 closeModal 함수를 등록해주었는데, 모달이 닫히지 않음. 아래는 문제의 코드. closeModal 함수가 modal을 닫게하는 기능을 하고, 백그라운드와 닫기 버튼에 함수를 등록하였지만 동작안함. code(문제가 발생한 곳) return ( // modal 내에서 click 이벤트 발생시, 해당위치의 click 이벤트도 발생 {modalOpen && ( )} 😵‍💫 | {file.userName} {file.enrollDay} 📎 | {file.fileName} ); Modal Open/Close 관련 코드 closeModal, Modal 나오는 조건 const closeModal = () => {.. 더보기
DropDown Component Trouble Shooting DropDown hooks 만들기 💡 문제 인식 DropDown hooks 사용시 발생하는 문제 DropDown 사용 중, 화면을 움직이면 DropDown 위치가 변경된다. DropDown 사용 중, 화면을 확대 축소하게 되면 DropDown 위치가 변경된다. scroll에 따른 DropDown 위치 변경 Modal 창에서 DropDown, 사용 시, DropDown이 보이지 않는다. DropDown이 브라우저 범위를 벗어나게 된다면 list가 보이지 않는다. DropDown position값은 어떻게 설정할것인가? 🚫 문제 분석 브라우저의 변경에 따라 DropDown이 왜 변경되는지 확인 DropDown은 position을 absolute 로 사용중이기 때문에 브라우저가 변경될 때 마다 position.. 더보기
참조형 데이터 const 시 사용시 알아보기 const 란? const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당 할 수 없으며 다시 선언할 수도 없다. 즉, const로 선언된 배열이나 객체의 경우, 해당 변수를 다른 값으로 재할당하는 것이 불가능하다. 또 다른 말로는, const로 선언된 변수에 다른 값을 할달하려고 하면 에러가 발생한다는 것이다. 하지만 배열이나 객체의 요소나 속성에 대한 수정은 가능하다. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 const는 변수 자체를 불변으로 만드는 것이 아니라 변수가 참조하는 값의 변경을 막는 것이기 때문이다. 배열이나 객체는 참조 타입이고, const로 선언된 변수나 참조하는 메모리 공간 자체는 변경되지 않는다. 따라서 변수나 참조하는 배열이나 객체의 요소.. 더보기

티스토리툴바