⭐️ Library & Framework
form 태그에서 preventDefault() 사용하는 이유
form 태그에서 preventDefault() 사용하는 이유
2023.05.01form 태그 간단하게 살펴보기 은 사용자로부터 값을 입력받는 양식을 만들기 위해 사용한다. 아래 태그 중 필요한 것들을 선택하여 조합이 가능하다. submit 이벤트 기초동작 제거 사용자의 입력을 가져오기 위해서 간단하게 로그인, 회원가입에 사용될 수 있는 컴포넌트를 만들었다. const signForm = () => { const [userInfo, setUserInfo] = useState({ email: '', password: '', }); const handleChange = ({ target }) => { setUserInfo((prev) => ({ ...prev, [target.name]: target.value })); }; const handleSubmit = async (event) ..
React input 태그에 글자가 입력되지 않는 현상
React input 태그에 글자가 입력되지 않는 현상
2023.04.29value 속성만 지정하지는 않았는가? input의 상태를 관리할 때에는 input 태그의 value 값을 설정해주는 것이 중요하다. 그러면 상태가 바뀌었을 때 input의 내용도 업데이트된다. 하지만 React에서는 value 속성만 지정하면 값이 입력되지 않는 현상이 있다. value 값에 의해서만 값이 변경되며, 사용자가 입력해도 input 값은 변경되지 않는다. 해당 문제는 onChange 이벤트를 등록하여 input을 수정할 수 있는 상태를 만들어서 해결이 가능하다. const [email, setEmail] = useState(''); const onChangeEmail = useCallback((e) => { setEmail(e.target.value); }, []); return ( )..
[React] 카카오 소셜 로그인 구현하기
[React] 카카오 소셜 로그인 구현하기
2022.06.11웹 클론 코딩을 하면서 카카오 소셜 로그인 부분을 맡게 되었는데, 카카오 공식문서와 수많은 구글링을 통해서 구현하는데 2~3일 시간이 걸렸던 것 같다. 웹 카카오 로그인을 구현하는 방식은 크게 2가지가 있다. 하나는 JavaScript SDK를 이용하는 방식, 다른 하나는 REST API를 이용하는 방식인데 나는 REST API 방식을 이용하기로 했다. 카카오 로그인을 구현하면서 삽질을 굉장히 많이 했는데, 다음번에는 쉽게 구현해낼 수 있도록 글로 정리하고자 한다. kakao developers 소셜 로그인을 처음 구현하려면 카카오 로그인 전체적인 흐름을 우선 이해해야 한다. 이 모든 내용은 kakao developers 공식문서에 담겨 있으며 꼼꼼히 읽어 보아야 한다. 서비스를 등록하는 법부터 시작해서..
React Mockdata
React Mockdata
2022.05.19📝 개요 프론트 개발을 하다보면 UI 구성에 필요한 데이터가 생길 수 있다. 데이터가 정적인 경우 UI에 필요한 데이터를 서버에서 가져오지 않고 프론트에서 직접 구성한다. 서버에서 받아야 하는 값이라도 백엔드 API가 완성되지 않았을 수 있다. 이때 서버에서 받을 값을 예상해서 UI 개발을 진행할 수 있다. UI를 표시하기 위해 필요한 상수데이터, 그리고 API를 모방하기 위한 mock data를 어떻게 만들고 활용하는지 알아본다. 상수 데이터 이름 그대로 변하지 않는 데이터로 정적인 데이터를 의미한다. UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터들을 상수 데이터로 만들어 UI를 효율적으로 구성할 수 있다. 상수 데이터를 사용하는 이유로는 반..
React useEffect 사용하기
React useEffect 사용하기
2022.05.19📝 개요 웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행 시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. 이 때 useEffect훅이 필요하며, 빈번히 사용되는 중요한 개념이므로 useEffect에 대해서 정리하는 시간을 갖는다. React에서 함수 컴포넌트의 rendering이란 state, props 기반으로 UI요소를 그려내는 행위이다. (state, props) => UI와 같이 표현이 가능하다. 즉, rendering 결과물은 UI요소로 JSX 문법으로 무엇이 나타날지 적어둔 component이다. Side Effect 컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 '부작용'이..
React Router 사용하기
React Router 사용하기
2022.05.12📝 개요 기존 자바스크립트는 MPA 방식으로 .html 파일이 페이지 수 만큼 존재했고 새로운 페이지를 로드하는 방식이 아니었다. 하지만 리액트로 넘어가면서 SPA 방식으로 .html 파일 갯수가 1개가 되었고 하나의 페이지 안에서 필요한 데이터를 가져오는 방식을 취하게 되었다. SPA를 다루기 위한 라우터에 대해서 정리하는 시간을 갖도록 한다. 🚀 목표 SPA가 무엇인지 설명할 수 있다. react-router-dom을 이용해 Routes Component를 구현할 수 있다. react-router-dom에서 Routing 하는 방법 2가지와 차이점을 설명할 수 있다. Component와 Tag의 차이점에 대해서 설명할 수 있다. SPA SPA(Single Page Application) : 페이지가 ..
React 공식문서 주요개념 읽기 - 2
React 공식문서 주요개념 읽기 - 2
2022.05.10개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁♂️ 로 표시한 내용은 글을 읽고 난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. State and Lifecycle 💁♂️ React 공식문서 주요개념 5번을 읽는데 state라는 개념이 나왔다. 공식문서 내용을 일일이 생각하고 고민하며 옮겼음에도 불구하고 state가 무엇인지 감이 잡히지를 않았다. 공식문서에는 시계 예시가 나오는데 왜 state를 쓰는지 이해하지 못했다. 왜냐하면 바닐라 자바스크립트에서는 new Date()를 생성하고 시, 분, 초를 뽑아내서 해당 위치에 넣어주면 전자시계가 완성됐기 때문이다. 단순히 변수를 선언..
React에 Font Awesome 적용하기
React에 Font Awesome 적용하기
2022.05.09개요 기존 HTML, CSS 파일을 React로 변환하는데 Font Awesome에서 가져온 태그가 적용되지 않는 문제가 발생하여 이를 해결하는 방법을 정리하고자 함. Font Awesome 설치 // Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 설치 $ npm i @fortawesome/fontawesome-svg-core // Font Awesome을 리액트 컴포넌트 형태로 사용하기 위한 패키지 설치 $ npm i @fortawesome/react-fontawesome // 필요한 아이콘 파일 설치(코드의 자세한 내용은 아래에서 설명) $ npm i -S @fortawesome/free-solid-svg-icons 위 코드를 입력하고 나면 node_modules 하위..
React 공식문서 주요개념 읽기 - 1
React 공식문서 주요개념 읽기 - 1
2022.05.08개요 리액트를 다루기에 앞서 리액트 공식문서를 읽어보고 정리하며 공식문서를 읽는 습관, 리액트의 기본적인 개념과 문법을 익히는 시간을 가지고자 한다. 💁♂️ 로 표시한 내용은 글을 읽고난 후 저의 생각정리이며, 나머지는 공식문서의 내용과 일치합니다. JSX 소개 JSX란? const element = Hello, world!; 위 태그 문법은 string, HTML 둘 다 아니다. JSX라 하며 자바스크립트를 확장한 문법이다. JSX는 React element를 생성한다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 "Component"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 즉 기존에는 .html 파일과, .js 파일을 분리하여 연결해서 사용..