본문 바로가기
반응형

분류 전체보기

 (501)
[react] useEffect에서 Clean-up 함수 사용하기 Debouncing : 연이어 발생한 이벤트를 하나로 묶어 처리하는 방식 onChange 이벤트를 통해 입력값에 대한 유효성 검사를 하다 보면 값을 입력할 때마다 상태를 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 리렌더링 되거나, 처리 로직을 재수행 하는 경우 과부하가 생길 수 있으므로 디바운싱을 통해 그룹 단위로 이벤트를 처리해보자. 아래는 로그인 시 id/pw입력 값 유효성 검사 로직이다. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장 const [emailIsValid, setEmailIsValid] = useState(); //패스워드 입력값 저장 const [formIsValid, set..
[react] 제어 컴포넌트 vs 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트의 개념 및 차이, 어떤 상황에서 사용해야 하는지에 대해 간략하게 정리해 보자. 제어 컴포넌트 아래의 코드는 input 태그의 value가 바뀔 때마다 onChange 함수를 통해 state가 업데이트되는 로직이다. export default function App() { const [name, setName] = useState(""); const onChange = (e) => { setName(e.target.value); }; return ( ); } 제어 컴포넌트 방식은 사용자의 입력을 기반으로 state를 관리하는 방식을 말한다. setState 함수를 사용하여 값을 관리하는 방식(React에 의해 값이 제어되는 방식)을 제어 컴포넌트 방식이라고 생각하면 편하다...
[회고] 코드스테이츠 프론트엔드 41기 수료 회고 저번주 금요일, 약 6개월간의 대장정을 마치고 무사히 코드스테이츠 프론트엔드 과정 41기를 수료했다. 코스테 부트캠프는 나의 24살의 여름, 가을, 겨울이자 25살의 시작이였다. 매일 새로운 개념을 습득하고, 난도 높은 과제들을 수행하며 버거운 순간들도 많았었다. 나의 경우에는 특히 섹션 4 기간 동안 몸살이 크게 오면서 많이 힘들었던 것 같다. 매일 9시부터 밤 10시~11시까지 노트북 앞에만 앉아있으니, 면역력이 낮아지고 체력이 부족했을 수밖에. 수료 후 지금까지 작성했던 포스팅들을 쭉 읽었다. 그때 당시 나의 마음이 너무 잘 녹아들어 있어 귀엽기도 했고 한편으로는 측은하기도 했다. 리액트에 익숙해지지 않을까 전전긍긍했던, 내가 정말 개발자로 취직할 수 있을까 걱정하며 지새웠던 밤들.. 하루하루 최선..
[js] slice vs splice / substr vs substring 항상 헷갈렸던 배열, 문자열 관련 메소드들을 싹 정리해보자. 배열 메소드(slice는 문자열에서도 사용 가능) 1. slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. => 원본 배열은 수정되지 않는다. slice(start[, end]) start: 추출 시작점에 대한 인덱스 undefined인 경우: 0부터 음수를 지정한 경우: 배열의 끝에서부터의 길이. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열 반환 start와 end가 같은 경우: 빈 배열 반환 end: 추출을 종료할 기준 인덱스(end를 제외하고 그 전의 요소까지만 추출) 지정하지 않을 경우: 배열의 끝까지 음수를 지정한..
[js] for문에서 var, let 사용하기(feat. 스코프, setTimeout) 기술 면접 관련 구글링을 하다가 우연히 for문에서 var을 사용할 때와 let 을 사용할 때 결과가 다르다는 것을 알게 되었다. 이 참에 var와 let의 차이와 스코프의 개념을 한번 짚고 넘어가야겠다는 생각이 들었다. 1. var와 let의 차이 var와 let으로 선언된 변수는 각각 영향을 미칠 수 있는 유효범위를 가지는데, var는 function scope, let은 block scope를 가진다. function scope는 우리가 아는 흔한 함수를 생각하면 되고, function scope를 유효범위로 가지는 변수는 함수 안에서 선언되면 함수 밖에서 접근하지 못한다. 아래의 코드를 보면 i가 var로 선언되었으므로 전역 변수가 되어 익명 함수 실행 시 i값은 무조건 5가 출력되는 것이다. c..
[react & typescript] 무한스크롤 구현하기(feat. 팀원 분) 도메인 페이지에 나오는 '오늘의 맛포스트' 컨테이너를 무한 스크롤로 구현한 부분을 정리해보자. 도메인의 ui나 데이터 실시간 렌더링 등은 내가 맡아서 하였지만 무한 스크롤 기능은 다른 팀원분이 하셔서 프로젝트 종료 이후 코드를 보고 구글링을 해가며 따로 공부했다. 왠지 무한 스크롤은 나중에 분명 다시 찾을 일이 있을 것 같기 때문에! 이번 기회에 정리를 해보자! :) 먼저 무한 스크롤을 구현하기 위해 알아야 할 개념에 대해 간단히 짚고 넘어가자. clientHeight 현재 화면에서 보이는 높이라고 생각하면 편하다. scrollHeight 스크롤을 포함한 전체 요소의 높이를 말한다. 스크롤이 생겨서 뷰포트에 보이지 않는 아래의 요소들의 높이까지 전부 포함한다. scrollTop top 속성이므로 세로의 ..
[react]Custom axios 만들기(회원/비회원 열람, 사용가능 기능 구분) 우리 애플리케이션은 회원/비회원 모두 사용할 수 있기 때문에 회원이 이용가능한 기능과 비회원이 이용가능한 기능을 구분하여야 했다. 이 때 axios를 Custom하여 header에 토큰이 있는 요청과 그렇지 않은 요청을 구분하여 사용할 수 있다. 다른 팀원분이 작성해주신 로직이였는데, 나중에 참고하면 좋을 것 같아 남겨본다. 간단하게 사용 방식을 살펴보자. 회원만 이용 가능한 기능에는 요청헤더에 토큰을 넣는 custom axios를 사용한다. import axios from "axios"; const instance = axios.create({ baseURL: "https://matp.o-r.kr/", headers: { Authorization: `Bearer ${localStorage.getItem..
[react] 반응형 모달 만들기 내가 만든 모달이 내 모니터에서는 내가 원하는 위치에 뜨지만 다른 팀원분들의 모니터에서는 그렇지 않다는 것을 발견했다. 프로젝트에서 사용되었던 반응형 모달을 만드는 코드를 간단하게 살펴보자. 나중에 또 볼 수도 있으니까! 핵심은 viewport 이다! 먼저 모달 컨테이너의 사이즈와 위치가 viewport에 따라 달라질 수 있도록 수정한다. width: 80vw; height: 90vh; position: fixed; top: 5vh; left: 10vw; 모달을 닫는 x 버튼도 수정한다. > span.close-btn { position: absolute; top: 1vh; right: 1vw; cursor: pointer; font-size: 30px; } 모달 컨테이너 내부 컨텐트의 사이즈도 수정한다..
반응형

티스토리툴바