파송송의 코딩테스트 공부

[React] ref와 useRef는 어떻게 사용하나

useRef란? useRef는 React에서 제공하는 훅(Hook) 컴포넌트에서 "참조"할 수 있는 변수를 생성하고 유지 { current : value } useRef를 사용하면 컴포넌트의 렌더링과 관련된 사이드 이펙트와 관계 없이 값이 유지한다. useRef를 사용하여 생성된 변수는 current 속성을 통해 접근할 수 있음 이 변수는 컴포넌트의 생명주기 동안 유지되며, 값을 변경해도 컴포넌트의 리렌더링을 트리거하지 않음 컴포넌트가 계속해서 렌더링해도, 컴포넌트가 unmound 되기 전까지는 값을 그대로 유지 useRef의 주요 사용 용도 저장용도 state는 변화가 생기면 렌더링이 되고, 컴포넌트 내부 변수들 초기화가 일어남 Ref의 변화는 렌더링이 일어나지 않음, 변수들의 값이 유지가 된다 Sta..

navigator.userAgent Edge(엣지) 브라우저 버전 확인

navigator navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니다. 종류 설명 navigator.appCodeName 브라우저의 코드명을 반환합니다. navigator.appName 브라우저의 이름을 반환합니다. navigator.appVersion 브라우저의 버전을 반환합니다. navigator.cookieEnabled 브라우저의 쿠키 사용 가능 여부를 반환합니다. navigator.language 브라우저에서 사용되는 언어를 반환합니다. navigator.onLine 브라우저가 온라인인지 여부를 반환합니다. navigator.platform 브라우저가 실행되는 플랫폼 정보를 반환합니다. navigator.product 브라우저에서 ..

[JS] arguments 객체

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments arguments 객체 - JavaScript | MDN arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다. developer.mozilla.org arguments 자바스크립트에서는 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달합니다. arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미합니다. 실제 배열이 아닌 유사 배열 객체입니다. function getValue(arr, values) { console.log(arr, values); conso..

[React] ApexCharts 커스텀(Donut, 도넛 그래프)

💡 문제 → ApexCharts는 차트라이브러리이다. → 원하는 디자인대로 커스텀하기 생각보다 어렵다. 🗡 해결 → 하지만 못할 것은 없다, 나에겐 무적 CSS가 있다. → 원하는 위치, 원하는 내용을 넣엔 CSS position: relative; position: absolute;가 있다. → 차트의 기본 기능만 사용하고 나머지는 CSS를 이용해서 열심히 커스텀해보자! ApexCharts 공식 홈페이지 ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source mode..

[React] ApexCharts 커스텀(Bar)

💡 원인 → ApexCharts는 차트라이브러리이다. → 원하는 디자인대로 커스텀하기 생각보다 어렵다. 🗡 해결 → 하지만 못할 것은 없다, 나에겐 무적 CSS가 있다. → 원하는 위치, 원하는 내용을 넣엔 CSS position: relative; position: absolute;가 있다. → 차트의 기본 기능만 사용하고 나머지는 CSS를 이용해서 열심히 커스텀해보자! ApexCharts 공식 홈페이지 ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source mode..

[React] useCallback을 사용해서 한번만 api 요청하게 하자

💡 문제 → 계속 api 요청을 계속 보내는 문제가 있다. → 자바스크립트에서 함수도 객체로 취급이 되기 때문에 메모리 주소에 의한 참조 비교가 일어나기 때문에 컴포넌트가 랜더링될 때 마다 새로운 참조값으로 변경이 된다. → 그러면 useEffect() 함수가 호출되어 state 상태값이 바뀌고 그러면 다시 랜더링이 되고 그럼 또 다시 useEffect() 함수가 호출되는 악순환이 반복되는 것이 문제이다. 🗡 해결 → useCallback을 사용해서 useCallback() hook 함수를 이용하면 컴포넌트가 다시 랜더링되더라도 fetchUser함수의 참조값을 동일하게 유지시켜서 한번만 호출하게 하자. useCallback이 없으면 계속 api 요청을 보내게 된다. 한번만 api 요청을 보내면 되는데, ..

[React] 로그인, 로그아웃 에러핸들링 고민

로그인, 로그아웃을 구현했다. 이제는 에러핸들링이 필요한 차례이다. 로그인, 로그아웃할 때 실제 서비스에서는 어떤 방식으로 에러처리를 할까? 카카오 이모티콘 스토어의 로그인 에러 로직을 찾아보자 잘못된 로그인을 할 경우에는 상태코드는 200을 내려준다. 서버로 잘못된 비밀번호이지만 보내기는 잘 보내서 POST로 보내고 상태 코드는 200 OK 내려주는 데이터는 메시지와 상태코드는 아래와 같음 상태코드는 200으로 내려주고, 200인 상태에서 staus 값을 다르게 내려주고, 메시지를 보낸다. 로그인 성공하면 상태는 200 로그인 성공하면 회원정보 me를 보내준다. 헬쓰리에서는 status에서 200을 내려주고 data.staus에서 0003과 메시지를 내려준다. then에서 성공일때 200으로 처리하고,..

[React] 비동기 데이터 axios Post 전송(Query String, Request body)

회원가입을 시도해보자. 아이디와 비밀번호, 비밀번호 체크, 닉네임을 입력한다. 서버에서 join data를 받는 형식은 아래와 같다(스웨거에서 확인했다.) string query로 되어있다. 성공했을때는 아래와 같이 상태코드 200이 뜬다. 데이터 비동기 처리 방법 axios 공부하기 [리액트] Axios & Ajax [리액트] Axios & Ajax 💡 서버랑 통신하기클라이언트는 서버에게 요청을 보내고, 응답을 받아온다.미리 약속한 주소로 (url)어떤 요청을 보낸다. (type)필요하다면 서버가 일하기 위해 필요한 자료와 (data)누가 요청했 velog.io 아무리 axios를 사용해서 Post로 보내도 서버 500으로 post 데이터를 받지 못했다. submit해서 데이터는 가는데, 서버로 데이터..

[React] Warning Received true for non-boolean attribute 오류 해결

[React] Warning Received true for non-boolean attribute 오류 해결 ⛑ 작업자 → 박송희 → 작업 기간 : 2022년 7월 24일 💡 원인 → styled-components에서 값을 받을 때, boolean을 정확하게 인지하지 못하는 것 같음 🗡 해결 → direction={direction}로 있던 props 값을 direction={direction ? 1 : 0}로 변경 메인 슬라이더에서 오류 발생하였다! styled-components에서 발생하는 오류인것 같다. Warning: Received `true` for a non-boolean attribute `{속성}`. If you want to write it to the DOM, pass a str..

[React] Styled-Components로 만든 요소의 선언 위치에서 발생하는 경고

⛑ 작업자 → 작업 기간 : 2022년 7월 💡 원인 → 렌더링 하는 함수에 styled 컴포넌트를 선언 🗡 해결 → styled 컴포넌트를 함수 밖으로 꺼냄! 진행하는 프로젝트의 모달창의 textarea 부분에서 경고 발생하였다! “You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.” 원인은 컴포넌트 렌더링 함수에서 const 변수명 = styled.textarea`스타일` 선언해둬서 그런 것! 경고 코드는 아래와 같다 ㅠㅠ reac..

[React] Ref와 DOM

Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법 Ref를 사용해야 하는 경우 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 포커스 유지 /*SimpleForm.js*/ import React, { useRef } from "react" //ref를 활용 -> 비제어 컴포넌트 방식으로 form을 다뤄보자 export default function UnControlledForm() { const inputRef = useRef() const handleSubmit = (e) => { e.preventDefault() alert(inputRef.cur..

[React] 폼(form), 제어 컴포넌트, 비제어 컴포넌트

🌟 폼(form) 태그 🔖 폼(form) 태그 HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가짐 React의 다른 DOM 엘리먼트와 다르게 동작 → form 은 제어 컴포넌트(controlled components) 중 하나 → 리액트 form에서는 컴포넌트 안 state 데이터가 사용자가 화면에 보고 있는 데이터와 동일하도록 만드는 것을 권장 → submit 같은 특정 이벤트가 발생했을 때 입력받은 데이터에 접근하는 방식 → 리액트의 form 은 입력할 때 마다 특정 부분이 리렌더링 되어도 리액트 자체적으로 효율적이게 DOM을 없데이트 해주기 때문에 성능은 크게 걱정하지 않아도 됨 form 안에 여러가지 요소가 들어있을 땐 name 속성을 부여해 각각을 구분할 수 있도록 함 → event.t..

[React] 이벤트 처리하기

🌟 이벤트 처리 🔖 이벤트 처리 문법 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. Activate Lasers React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. preventDefault를 명시적으로 호출해야 합니다. React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener 를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다. function Form() { function handleSubmit(e) { **e.preventDefault();** console.log('You clicked su..

[React] 컴포넌트 반복하기

🌟 컴포넌트 반복 https://ko.reactjs.org/docs/lists-and-keys.html 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org 🔖 map() 배열 요소를 일괄 변경 Array의 객체를 map 메소드로 활용 → callback 함수를 인자로 받아, callback 함수의 return으로 반환되는 값들을 재조합하여 새로운 배열을 생성 예시1 const arr = [ {id: 0, name: '혜림', age:6}, {id: 1, name: '현아', age:3}, {id: 2, name: '지우', age:2}, {id: 3, name: '우림', age:5}, ] const arr2 ..

[React] 컴포넌트 활용연습 : random-recommend

🌟 1. 명함 리스트를 알맞은 위치에서 초기화 하기 🔖 1. 데이터 초기화 useEffect를 사용하여 처음 렌더 되었을 때 한번만 실행 useState를 이용해서 setCards()를 cards에 값 추가 import React, { useEffect, useState } from "react"; import datas from "./data/cards" export default function App() { const [cards, setCards] = useState([]) useEffect(() => { //처음 렌더 되었을 때, 데이터 한번 호출 setCards(datas) }, []) console.log(cards) return ( 안녕 ); } 🌟 2. 추첨하기 버튼과 명함 컴포넌트 구현..

[React] useEffect란 무엇인가?

https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 📖 Hook 이란? Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 클래스 없이 리엑트의 상태 관리를 위해 사용하기 위한 기능입니다. 📖 Effect Hook 이란? React 컴포넌트 안에서 데이터를 가져오거나 DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 “side effects”(또는 짧게 “effects”)라고 합니다. 왜냐하면 이..