TIL/2023

TIL/2023

0704-TIL-axios 환경변수 설정

axios를 사용해서 데이터를 가져올 경우에 데이터를 가져오는 서버나 주소 값은 노출되어선 안된다! 그래서 .env 파일을 생성해서 git에 올라가지 않도록 해야한다. .env를 작성할 때는 리액트이기 때문에 제일 앞에 REACT_APP_을 꼭 붙여주어야 한다! 그래야지 리액트에서 .env 파일을 읽어올 수 있다고 한다. 그리고 환경변수를 사용할 때는 process.env.환경변수이름 이런 식으로 작성하면 된다! 이렇게 다 작성을 하고, 리액트를 실행시켰는데 계속해서 404 에러가 나타났다. Get을 해오는 주소가 잘못되었다는 내용인 것 같았다. Get을 하는 주소가 http://localhost:4000/todos 로 확인되어야 하는데, 계속해서 앞에 localhost:3000이 붙어서 나온 것이다....

TIL/2023

0627-TIL-리액트 랜더링

firebase를 컴포넌트로 바로 불러와서 map으로 화면에 뿌려줄 때는 페이지가 뜨자마자 바로 작동했는데, redux에 firebase 데이터를 저장하고 redux store에서 데이터를 불러와서 사용하는 방식으로 바꾸고 난 뒤 리렌더링이 일어나지 않으면 화면에 firebase에서 불러온 데이터가 나타나지 않는 현상이 발생했다. 리렌더링을 일으키면 데이터가 화면에 뿌려진다는 것을 확인하기 위해서 state를 하나 생성해서 setState를 일으키는 버튼을 만들어보았다. const PostList = () => { const posts = useSelector((state) => state.posts); const [num, setNum] = useState(0); console.log(posts); r..

TIL/2023

0623-TIL-js 숫자에 콤마 붙이기

숫자 세자리 마다 콤마 붙이기 toLocaleString() 정규식 toLocaleString() 메서드를 이용했을 때 오류가 있었다. input에서 입력받은 value를 onChange를 이용해서 state에 저장하는 방식에 toLocaleString()을 추가해서 사용해보고자 했지만 잘 동작하지 않았다. { setPrice(event.target.value); }} /> 처음 시도했던 코드가 위의 코드이다. toLocaleString() 메서드를 사용하려면 숫자형식에만 사용이 가능하기 때문에 먼저 parseInt() 를 이용해서 입력받은 값을 string에서 number로 형변환을 했다. 그리고 그 값에 toLocaleString()을 하면 1,234이렇게 네자리까지는 문제 없이 콤마를 찍어준다! 하..

TIL/2023

0622-TIL-React styled components

React styled components const StButton = styled.button` cursor: pointer; padding: 10px 49px; margin: 0px 10px 0px 10px; background-color: white; border-radius: 10px; `; styled components를 사용하기 위해서는 먼저 yarn add 로 설치를 해주어야 한다. 그리고 import한 후에 사용할 수 있다. 위의 코드처럼 변수에 원하는 요소이름 앞에 styled를 붙이고 사용하면 된다. 백틱 안에 css요소를 작성하면, 은 이제 해당 스타일이 적용된 버튼으로 보인다. { const deletedtodos = todosStore.filter((item) => item.i..

TIL/2023

0621-TIL-React Todo List 만들기

uuid 먼저 yarn add react-uuid를 통해 패키지 설치를 한 후 사용할 수 있다. 요소마다 구분할 수 있는 특별한 값이 필요한 경우에 사용하면 된다! { id: uuid(), title: "제목1", contents: "내용1", isDone: false, } 위의 사진처럼 todo list 하나마다 삭제하거나 완료를 해야하는 상황에서 uuid()메서드를 사용하면 고유한 id값을 사용할 수 있다. uuid()를 알지 못했을 때는 id : todo.length +1 이 방식으로 id값을 부여했다. 하지만 이렇게 하게 될 경우 리스트를 삭제하고 새로 추가하는 과정에서 id값이 같은 리스트가 만들어질 수 있는 오류가 있었다. Spread Operator let str = 'hello world'..

TIL/2023

0620-TIL-배열 회전시키기

프로그래머스 입문 : 배열 회전시키기 function solution(numbers, direction) { var answer = []; //answer에 push //right일때 if (direction == "right") { answer.push(numbers[numbers.length - 1]); for (let i = 0; i < numbers.length - 1; i++) { answer.push(numbers[i]); } } //left일때 else if (direction == "left") { for (let i = 1; i < numbers.length; i++) { answer.push(numbers[i]); } answer.push(numbers[0]); } return answ..

TIL/2023

0619-TIL-React Hook, split메서드

React Hook useState 배치 업데이트 : 변경된 내용을 한꺼번에 모아서 한번에 실행 함수형 업데이트 setState((현재state)=>{return ~~~}) uesEffect 렌더링 될 때, 특정한 작업을 수행해야 할 경우에 설정하는 hook 의존성 배열 Dependency Array clean up : return에 함수로 작성 useRef ref 값에는 current 값이 존재한다. 설정된 ref 값은 unmoount 전까지 유지된다. let 키워드를 사용해서 내부변수를 선언하면, 렌더링 시 변수가 초기화된다!! (함수라서) input의 ref라는 속성을 통해서 해당 DOM요소로 접근할 수 있다. split() 메서드 let alphabet = ['a', 'b', 'c', 'd', '..

TIL/2023

WIL-내일배움캠프 5주차

이번주에 알게된 것 React에서 화면을 렌더링 되기 위해서는 State가 변경되어야 한다. useState hook을사용해서 변수를 관리해줘야 한다. 만약 State가 객체일 경우에는 불변성을 유지하는 방법을 사용해야 한다. (spread operator 등) map() 메서드 인자로 콜백함수를 받을 수 있다. 만약 콜백함수의 return값이 한줄이라면 생략해서 작성 가능하다. (a)=>a*2 만약 콜백함수의 return값이 한줄이 아니라면 괄호 안에 멀티라인으로 작성 가능하다. return을 쓰지않으면 undefined가 반환된다. onClick과 onChange 해당 메서드로 event를 제어할 수 있다. evnet 제어 시 인자로 event를 받아야 한다. onChange = {(event)=>e..

숨숨123
'TIL/2023' 카테고리의 글 목록 (5 Page)