내가 보려고 쓰는 기록

전환 애니메이션은 1. 애니메이션 동작 전 className을 css에 만들기 2. 애니메이션 동작 후 className을 css에 만들기 3. className에 transition 속성 추가 4. 원할 때 애니메이션 동작 후 className 부착시키기 이 순서대로 코드를 짜면 된다. 1. 애니메이션 동작 전 className을 css에 만들기 2. 애니메이션 동작 후 className을 css에 만들기 3. className에 transition 속성 추가 transition은 해당 속성이 변할 때 서서히 변경시켜 주세요 라는 뜻이다. 원하는 div 요소에 start 을 넣어두고 end를 탈부착시키면 전환 시 transition 효과를 줄 수 있다. 4. 원할 때 end 부착시키기 tap state..

1. html, css 탭 디자인 미리 완성하기 리액트 부트스트랩에서 그대로 가져오면 된다. 2. UI의 현재 상태를 저장할 state 하나 만들기 버튼0 / 버튼1 / 버튼2 누르면 각각 내용이 보여야 하므로 state 상태를 0, 1, 2 숫자로 설정한 후 해당 버튼 누를시 state 값 변경되게 설정한다. 3. state에 따라서 UI가 어떻게 보일지 작성 ex) state가 0이면 버튼0 내용 보여주세요 state가 1이면 버튼1 내용 보여주세요 state가 2이면 버튼2 내용 보여주세요 삼항연산자로 만들어보기 **삼항연산자는 안타깝게도 연달아서 여러개 쓸수 없어서 중괄호 또 열어서 만들어야된다. 뭔가 복잡 일반 if 조건문 삼항연산자로 조건 여러개 만들면 복잡하므로 if조건문 쓰는게 더 효율적이..

서버에서 데이터를 받아오기도 하지만 데이터를 보낼 때도 있음 서버로 데이터 전송하는 POST 요청 axios.post('/url', { key : "value" }) 원래 서버와 데이터 주고받을 때 문자만 주고받을 수 있음 array/object 형태는 못 주고받는다는 뜻 근데 위에서 계속 주고받지 않았음? array/object 주고받을때 따옴표 쳐놓으면 문자로 인식해서 가능 "{"name":"kim"}" → JSON이라고 함 JSON은 문자 취급받기 가능해서 데이터 맘대로 주고받을 수 있음 ajax가 JSON 형태로 받아온 데이터를 알아서 array 형태로 변환해줌 굳 만약 ajax 요청을 여러곳에서 하고싶으면 ?

React Hooks중 가장 중요한 useEffect - 코드가 딱 한번만 실행될 수 있도록 해줌 mount - 화면에 첫 렌더링 update - 다시 렌더링 unmount - 화면에서 사라질때 특정작업을 하는 코드를 실행하고 싶다면 useEffect 사용하는 것 useEffect 2가지 형태 있음 인자로 콜백함수만 받는 형태 useEffect (( ) => { // 작업 }) 컴포넌트 매번 랜더링 될때 마다 실행 인자로 콜백함수, 배열 받는 형태 useEffect (( ) => { // 작업 }, [value] ) - 컴포넌트가 화면에 첫 렌더링 될때 - value 값이 바뀔때 실행 인자로 받은 배열이 빈배열일때 useEffect (( ) => { // 작업 }, [ ] ) 컴포넌트가 화면에 첫 렌더링..

서버란 유저가 데이터 달라고 요청을 하면 데이터 주는 프로그램 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상달라고 하면 영상 보내주는 프로그램 → 서버개발 : "누가 A를 요청하면 A를 보내주세요"라고 코드 짜는 것 유저가 그냥 데이터 달라고 하면 서버가 보내주는 것은 아님 서버에 데이터를 요청할때는 정확한 규격에 맞게 요청해야됨 1. 어떤 데이터 인지(URL 형식으로 요청) 2. 어떤 방법으로 요청할지(GET, POST) 데이터를 서버에서 가져올때는 보통 GET 데이터를 서버에 보낼때는 보통 POST 어떤 데이터를 보내고 싶은지 URL만 잘 기재하면 됨 GET / POST 요청하는 법 서버에 GET 요청 하는 가장 쉬운 방법은 브라우저 주소창 주소창에 ..

useEffect 실행조건 공부하기 전에 2초후에 사라지는 박스 만들보기 display:none; 가진 클래스 하나 만들고 2초 후에 클래스 붙여서 사라지게 코드 짜려고 했는데 노노.. 리액트는 state 만들어야함 setTimeout(()=>{ 1초 후 실행할 코드 },1000); 1. UI 상태 저장할 state 만들고 2. 삼항연산자로 true 일때 창 보이게, false 일때 안보이게 3.setTimeout 에 코드 넣기 useEffect 실행조건 넣을 수 있는 곳은 [ ] (*[ ] 안에 변수, state 넣을 수 잇음) [ ] 없을땐 mount(생성) 되거나 update(재렌더링) 될때 마다 코드 실행되는데 [ ] 추가하면 첫 mount 이후 [ ] 안에 있는 state가 update 되어야 ..

컴포넌트의 Lifecycle : 생명주기(컴포넌트도 인생이 있음, 사람처럼 태어나고 죽는다) 1.컴포넌트는 생성될 수 있고(mount) 2.재렌더링 될 수도 있고(update) 3.삭제 될 수도 있음(unmount) 우리는 컴포넌트 인생에 간섭할 수 있음 땡땡 컴포넌트 등장 전에 이것 좀 부탁함 땡땡 컴포넌트 사라지기 전에 이것 좀 부탁함 땡땡 컴포넌트 업뎃되고나서 이것 좀 부탁함 컴포넌트 인생 바뀔때마다 코드 넣어주면되는데 그걸 Lifecycle hook이라고 함 Lifecycle hook 쓰는법 useEffect() 기본적으로 useEffect는 매 렌더링될때마다 실행됨 컴포넌트가 mount, update, unmount 될때마다 useEffect 안의 함수가 실행됨 근데 왜 두번 출력됨? 원래 us..

생활코딩보고 따라했는데 Mui로 쉽게 만들 수 있다 https://mui.com/material-ui/getting-started/templates/ 9+ Free React Templates - Material UI A selection of free react templates to help you get started building your app. The collection contains react dashboard, react admin, and more. mui.com 원하는 템플릿 들어가면 깃허브 소스 코드도 다 있어서 복붙만 하면 완성된다! https://github.com/mui/material-ui/blob/v5.11.8/docs/data/material/getting-started..