당연한 개발자가 되자

localStorage 란? DB, 서버 없이 브라우저에 데이터를 반영구적으로 저장할 수 있는 기능입니다. localStorage 의 특징 key: value 형태로 저장할 수 있습니다. ( 이미 존재하는 key 값과 중복되는 key 값으로 데이터를 저장하면 덮어쓰기 됩니다. ) 문자 데이터만 저장할 수 있습니다.( 최대 5MB 까지 저장이 가능합니다. ) 사이트 재접속을해도 남아있습니다. ( 유저가 브라우저를 청소하기 전까지 남아있습니다. ) 지원하는 데이터 타입은 문자열, 숫자, 불린, null, undefined 이고, 모두 문자열 형식으로 저장됩니다. ( JSON 데이터도 저장이 가능합니다. ) 만약에 array, object 자료를 저장하고 싶다면 편법을 사용하면 됩니다. array 나 obje..

리액트의 단점은 component 끼리 state 전송이 어렵다는 점입니다. 만약에 손자 component 에 최상위 부모가 가진 state 를 props 로 전송하려면 다이렉트로 전송은 안되고 그 사이에 자식들을 전부 거쳐야 전송할 수 있습니다. 그래서 만약에 component 가 10중첩 같이 뎁스가 많이 깊어지면 props 전송을 9번이나 해야하는 문제점이 있습니다.(props drilling 이슈) props 의 단점 해결방법 Context API ( 리액트 기본문법 ) Context API 를 사용하면 props 전송없이 state 를 공유할 수 있습니다. 그러나 두가지 단점 때문에 실무에서는 많이 사용하지는 않습니다. 첫번째 단점은 성능이슈가 있습니다. state 변경시에 쓸데없는 것까지 재랜..

전환애니메이션 만드는 법 애니메이션 동작 전 css 를 만들어서 className 을 붙여줍니다. 애니메이션 동작 후 css 를 만들어서 className 을 붙여줍니다. 둘 중 하나의 className 에 transition 속성을 추가해줍니다. 원할 때 두번째( 동작 후 css ) className 을 붙여주면 됩니다. 애니메이션 사용하는법 위에서 만든 애니메이션을 사용하려면 className end 를 태그에 붙였다가 땠다가 해야합니다. 그러기 위해서는 아래처럼 코드를 작성하면 변경이 되는 것이 맞지만 리액트 18 버전부터 추가된 automatic batching 기능 때문에 근처에 있는 state 변경 함수들이 실행될 때마다 재랜더링 해주는 것이 아니라 state 들이 전부 다 변경되고나서 마지막..

tab UI 란 tab UI 쇼핑몰에 보면 상품 사진 아래쪽에 상세정보, 리뷰, q&a, 반품/교환 정보 등 화면의 일부만 바꾸어서 여러가지 정보를 보여줄 때 사용합니다. 구현 먼저 부트스트랩을 이용해서 버튼의 html, css 를 먼저 완성합니다. 그 다음에 tab 의 상태를 저장할 state 를 만들어줍니다. 그리고나서 JSX 부분에는 if 문 같은걸 사용할 수 없으므로 component 를 하나 만들어서 아래와 같이 구현해 줍니다. 여기서 또 다른 방법으로 배열안에 html 을 전부 넣어두고 배열에서 자료를 꺼내는 문법을 사용해서 처리하는 것도 가능합니다.( 배열에서 자료꺼내는 문법: 배열[] ) 마지막으로 버튼을 눌렀을 때 state 를 바꿔줘서 누를 때마다 해당하는 화면을 보여주도록 구현합니다.

ajax 란 비동기 방식으로 서버에 데이터를 요청할 때 사용합니다. 서버에 어떤 방법으로 어떤 데이터를 요청할지를 적어서 요청하는 방식입니다. 요청하는 방식에는 GET 방식과 POST 방식이 있고, 어떤 데이터를 요청할지는 url 을 이용해서 작성해줍니다. ajax 사용법 XMLHttpRequest ( 옛날 방식 ) fetch() ( 요즘 방식 ) fetch 를 사용하면 아래와 같이 가져온 json 데이터를 변환해주는 과정이 필요합니다. fetch 는 기본 설정이 get 방식이기 때문에 post 방식으로 사용하고 싶으면 아래와 같이 설정이 필요합니다. axios ( 외부라이브러리 ) ( 많이 사용 ) 먼저 터미널에 아래의 명령어를 입력해서 axios 를 설치해줍니다. npm install axios 상단..

스크립트에서 console.log 를 찍으면 가끔 두번씩 찍히는 경우가 있는데 이것은 디버깅을 위해서 이렇게 설정되어 있는 것입니다. 실제 사이트로 배포할 때는 한번만 동작하도록 될 것입니다. 그래도 한번만 동작하게 만들고 싶다면 index.js 파일로 가서 ‘’ 태그를 없애면 됩니다.

React 의 Lifecycle mount ( 페이지가 눈에 보이도록 장착 ) update ( 페이지가 업데이트 될 때 ) unmount ( 페이지가 제거될 때 ) 컴포넌트의 Lifecycle 에 간섭하는 방법 class 컴포넌트에서 사용하는 방법( 옛날 방식 ) 함수형 컴포넌트에서 사용하는 방법 useEffect 라는 훅을 사용합니다. useEffect 훅을 사용하는 이유 useEffect 는 실행시점이 약간 다릅니다. 컴포넌트 안에 코드들은 그냥 바로 실행이 되는데, useEffect 안에있는 코드들은 html 랜더링이 다 끝나고나서 실행이 됩니다. 이것이 왜 장점인가 복잡하고 시간이 오래걸리는 코드가 있다고 할 때 useEffect 없이 그냥 코드를 작성하게되면 이 연산이 끝나는 1 ~ 2 초 정도..

styled-components 란 css 설정을 전부 다 js 파일에서 할 수 있도록 해주는 라이브러리 입니다. 설치하기 터미널을 열어서 아래의 명령어로 설치합니다. npm install styled-components 사용법 styled-components 를 사용하려면 먼저 import 를 해줘야합니다. 그 다음에 아래와 같이 빽틱(키보드 ~ 키)을 사용해서 css 코드를 작성해줍니다. 이렇게 하면 하나의 컴포넌트가 생기게 됩니다. 컴포넌트니까 변수에 담아서 사용하시면 됩니다. 컴포넌트이므로 맨앞글자 대문자로 작성해주셔야합니다. 그리고 만약에 여러가지 버튼색이 필요하다라고 한다면, props 문법을 사용하면 됩니다. ‘${ }’ 를 사용해서 props 를 설정해두면 component 를 사용할 때 ..

React Router란? 설치하기 & 기본설정 터미널에 아래의 명령어를 입력해서 라이브러리를 설치합니다. # @6 은 버전을 의미합니다 npm install react-router-dom@6 # 또는 yarn add react-router-dom@6 그 다음에 인터넷에 react-router-dom 6 버전 이라고 검색해서 설명서에 적힌 설치과정을 그대로 따라해주시면 됩니다. index.js 로 가서 아래의 코드들을 추가합니다. 이러면 일단 설치와 기본설정은 완료입니다. 사용법 외부 라이브러리의 사용법은 필요할 때 마다 검색해서 찾아서 사용하면 됩니다. 라우터는 먼저 몇가지 import 가 필요합니다. 그 다음에 아래와 같이 path 별로 페이지를 나누어줍니다. ( path 에는 해당 경로를, elem..

export 란 js 파일을 나누고 싶을 때 사용합니다. 나눠진 js 파일에 필요한 데이터를 export 해서 다른 js 파일에서 사용할 수 있도록 합니다. (함수, component 등 도 export 가능합니다.) import 란 어딘가에서 export 된 파일이나 이미지파일 같은 것들을 가져와서 사용할 수 있게 해줍니다. 응용하기 map 을 사용해서 data 의 갯수만큼 컴포넌트를 만듭니다. Items 컴포넌트