profile
#정리 #기록

useReducer 로 상태 업데이트 로직 분리하기

벨로퍼트와 함께하는 모던 리액트 내용을 정리한 내용입니다.useState 가 아닌 useReducer 를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있고, 다른 파일에서 불러와서 사용할 수

2023년 1월 10일
·
0개의 댓글
·

react, undefined 렌더링하지 않기

'리액트를 다루는 기술' 책 일부 내용을 정리했습니다.리액트 컴포넌트에서 함수가 undefined 만 반환하는 경우 오류가 그래서 어떤 값이 undefined 일 수 있다면, OR(||) 연산자를 사용해 해당 값이 undefined 일 때 사용할 값을 지정할 수 있습니

2022년 12월 7일
·
0개의 댓글
·

Next.js 스크린 사이즈에 맞게 배경 사진 변경하기

Next.js 로 제작된 홈페이지 템플릿을 수정하고 있다. 디자인 품을 줄이기 위해 템플릿을 구매해서 사용하는 것인데, 내용에 맞게 컴포넌트를 커스텀 하다보니 그냥 새로 만드는 게 좋은가 의문이 들기도 하지만, 다시 다 만든다고 생각하면 또 아니지 싶고. 일단은 하나씩

2022년 12월 1일
·
0개의 댓글
·

왜 리액트 인가?

리액트를 다루는 기술 책 내용 일부를 발췌 & 정리한 내용입니다.현대의 자바스크립트는 단순한 스크립트 언어를 넘어 규모가 큰 애플리케이션을 만드는 역할도 수행한다. 규모가 커진 애플리케이션을 더 잘 관리하기 위해 다양한 프레임워크들이 생겨났는데 (Angular Back

2022년 11월 17일
·
0개의 댓글
·

콜백으로 입력한 데이터 전달하기

위코드 기업협업에 참여하며 정리한 내용입니다.아래 도식처럼 하위 컴포넌트에서 입력한 데이터가 위로 올라가 최종 view 에 반영해야 한다면 여러번 콜백함수를 거치게 된다. 아래 구조는 Editpanel 에 이벤트가 발생하는 버튼이 있어서, 그 하위에 EditpanelM

2022년 11월 15일
·
0개의 댓글
·

리액트의 불변성

리액트를 공부하면서 계속 나오는 단어가 불변성이다. (프로그래밍에서 불변성이란 데이터의 원본 훼손을 막는 것을 의미) input 태그의 값을 관리할 때 value 에 state 를 연결해서 해당 setState 함수로만 인풋값을 바꿀 수 있게 했었고, state 로 만

2022년 11월 13일
·
0개의 댓글
·

리액트 훅, 이벤트핸들러에 타입스크립트 적용하기, react, hooks, event handler, typescript

위코드에서 제공하는 프론트엔드 학습 자료 일부를 정리한 내용입니다.리액트에서 사용하는 Hooks 인 useState 에는 아래와 같이 타입을 정의할 수 있지만 초기값을 boolean 값으로 넣어주면 타입 추론을 하므로 해당 타입을 적지 않아도 됩니다.boolean 값만

2022년 11월 9일
·
0개의 댓글
·

리액트 React 배열 항목 추가, 제거, 수정하기 (불변성 지키며)

벨로퍼트 모던 리액트 내용을 일부 정리했습니다. (아래는 생략된 코드가 많으니 자세한 것은 원문 링크를 참고하세요)리액트에서 배열을 컴포넌트의 상태로서 관리할 수 있습니다. 초기 세팅은 아래처럼 useState 로 선언을 하고 초기값에 배열을 담아 둡니다.위 배열에 변

2022년 11월 4일
·
0개의 댓글
·

useRef 로 Dom 선택하기

벨로퍼트 모던 리액트 내용을 일부 정리했습니다. (리액트 입문자라면 이 사이트 튜토리얼로 학습해보세요. 매우 좋습니다.)JavaScript 에서 특정 DOM 을 선택해 (getElementById, querySelector) 조작하는 것처럼 리액트에서도 DOM 을 선택

2022년 11월 3일
·
0개의 댓글
·

Next.js 기초

위코드 기업협업을 진행하며 정리 & 회고 한 내용입니다.Next.js 를 써야 해서 관련 개념을 조금 찾아보았다. 새로운 언어는 아니고 리액트를 더 편리하게 쓸 수 있는 도구의 느낌. 약간만 살펴보아도 Next.js 를 꼭 써야 겠다는 생각이 든다. 서버사이드 렌더링

2022년 11월 1일
·
0개의 댓글
·

input 값을 state 로 관리하는 이유

인프런 파이어베이스 강의를 듣고 기억하고 싶은 내용만 일부 정리했습니다. 파이어베이스 강의지만 리액트 기반으로 진행해 리액트 관련 개념도 배울 수 있습니다. 더 자세하고 친절한 설명은 해당 강의를 참고하세요.신뢰 가능한 단일 출처라는 리액트 설계 철학에 맞춰 form

2022년 10월 24일
·
0개의 댓글
·

리액트 기본 페이지 라우팅

인프런 파이어베이스 강의를 듣고 기억하고 싶은 내용만 일부 정리했습니다. 파이어베이스 강의지만 리액트 기반으로 진행해 리액트 관련 개념도 배울 수 있습니다.리액트 페이지 라우팅에 관한 BrowserRouter, Route, Routes 개념 설명입니다. UI 와 UR

2022년 10월 19일
·
0개의 댓글
·

Cosegu - 위코드 2차 프로젝트 회고

위코드 2차 팀프로젝트로 개발자 채용사이트를 만들었습니다.(우아한 청년들 사이트 참고)개발기간 : 2022/10/04 ~ 2022/10/14개발 인원 : 프론트엔드 3명, 백엔드 2명Front-End : React.js, Styled-Components, Naver-A

2022년 10월 15일
·
0개의 댓글
·

리액트, 스크롤 값에 따라 플로팅 버튼 띄우기

위코드에서 공부하며 정리한 내용입니다. 스크롤을 내리면서 특정 위치에서 플로팅 버튼을 띄우거나 사라지게 하는 방법입니다. 우선 스크롤 이벤트에 따라 실행하는 함수가 다른 전체 렌더링을 방해하지 않도록 useEffect 에 담고, 해당 페이지가 언마운트 되었을 때 클린업

2022년 10월 15일
·
0개의 댓글
·

스타일드 컴포넌트, S 객체로 묶어서 관리하기

위코드에서 공부하며 정리한 내용입니다. 스타일드 컴포넌트를 사용할 때 S 객체로 묶어서 사용하면 const 로 각 스타일드를 매번 선언하고 할당하지 않아도 됩니다. 우선 S 객체를 사용하지 않고 선언해서 사용하는 방법을 보면,이때 컴포넌트 앞에 S. 을 붙이고(스타일드

2022년 10월 15일
·
0개의 댓글
·

리액트 config.js 파일로 API 관리하기

위코드에서 공부하며 정리한 내용입니다. 백엔드 서버 IP 주소가 변경되면 모든 API 의 IP 주소를 수정해야 합니다. 이때 config.js 파일을 만들어 관리하면 전체 IP를 한번에 수정할 수 있습니다. (이렇게 하지 않으면 모든 fetch 함수를 찾아가서 직접 주

2022년 10월 15일
·
0개의 댓글
·

네이버 소셜로그인, 프론트엔드, 리액트

위코드 2차 프로젝트를 진행하며 정리한 내용입니다. (프론트에서 인가코드를 받아서 백엔드에 넘긴 후 백엔드에서 생성한 토큰받기, 프론트에서 토큰을 받는 것은 보안상 위험) 생각나는 대로 순서만 간략하게 남깁니다.

2022년 10월 12일
·
0개의 댓글
·

리액트 리덕스, React-Redux

위코드에서 공부하며 정리한 내용입니다.Redux 는 예측 가능한 상태 컨테이너로 자바스크립트 기반의 프레임 워크에서 모두 쓸 수 있지만, (Angular, Vue, React 등) 리액트에서는 React-Redux 라이브러리를 사용해야 state 와 props 가 연동

2022년 10월 9일
·
0개의 댓글
·

Redux 기초, 상태를 전역으로 관리해야 할 때

위코드에서 공부하며 정리한 내용입니다.Redux(리덕스)는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 입니다. 리덕트는 데이터가 단방향으로 흐르게 설계한 Flux 에서 영감을 받아 만들었습니다. Flux 는 개념적인 디자인 패턴이고, Redux 는 Flux 개념

2022년 10월 9일
·
0개의 댓글
·

리액트 슬릭 캐러셀, 슬라이더, react-slick

리액트에서 슬라이드 기능(캐러셀) 을 만들기 위해 react-slick 라이브러리를 사용했습니다. 라이브러리는 기본 세팅된 모양만 가져다 쓰기에는 간편하지만, 요소 하나하나를 커스텀한다면 경우에 따라 더 복잡할 수 있습니다. (개인적인 의견) 간단한 사용법과 커스텀 방

2022년 10월 8일
·
0개의 댓글
·