본문 바로가기
728x90

분류 전체보기153

Composition Open클릭하면 추가로 아래 스타일을 더 적으면 배경이 깔리면서 Open버튼이 보이지 않게 했다 다시 Open버튼이 뜨도록 하려면? Hello아래 버튼을 만든다 OK를 클릭하면 창이 닫힌다 Hello부분을 props.title로 바꾸고 버튼까지 props를 준다 버튼에 스타일을 주고 클릭하면 하고 Open클릭하면 얘를확장해 보면 글자라면 title을 보여주고 글자가 아니면 props자체를 리턴해주는 구조 description도 똑같이 description이 글자라면 안에 있는 것을 쓰고 아니라면 걔를 리턴해라~ 버튼도 똑같이 버튼이 string이라면 안에 있는 것을 리턴하고 아니라면 전달받은 props를 리턴해라~ 동작이 똑같지만 가져다 쓰는것은 다르게 할 수 있는 것 여기서 h1으로 해도 되고 버튼으로.. 2021. 10. 29.
Hooks hook 기본 3가지 = State, Effect, Context 추가 hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue 위 hook들 외 내가 어떤 동작을 하게 하고 싶다면 위 Hook들을 기반으로 새로운 hook을 만들어서 사용하면 '커스텀 hook' 클래스 컴포넌트에는 Hook 사용할 수 없다 state로 만들면 Reducer로 하면 이렇게 만들어도 하는 역할은 똑같다 그럼 왜 Reducer를 만들까? 0이면 짱구, + 하면 철수, - 하면 맹구의 이름으로 바뀐다 State에서는 Reducer보다 더 많은것들을 적어야 작동한다 그래서 Reducer를 사용하는 것 useState: 이.. 2021. 10. 28.
Props, State Props 여기서 이미지를 추출하겠다~ 라는 컴포넌트를 만들고 위로 올라가서 펑션으로 아바타를 만든다 img는 아까 복사한것! (user로 바꿈) 아까 만든 아바타에 유저=프롭스.유저를 넣는다 UserInfo도 똑같이 하려면? 잘라서 위로 올린다 user로 바꾼다 Props = 컴포넌트에 전달되는 단일 객체 순수 함수처럼 동작 = Props 자체를 수정해서는 안됨 컴포넌트 합성 = 여러 컴포넌트를 모아서 컴포넌트 추출 = 여러곳에서 사용되거나, 복잡한 경우 State 클래스와 함수 컴포넌트 2021. 10. 28.
Callback, Promise, Async Await, 프로미스체이밍, 비동기 콜백 8/16 프로그래머스 예산 반복문 안에서 budget 0이냐 아니냐를 했다 더 쉽게 하면? for문 async await = 최신 그럼 그 전은? Callback, Promise, Async/Await callback = qqq를 함수로 받을것 엔터하면? 1번째로 찍히고 2번째로 찍힌다 이런 함수를 callback함수라고 한다 (나중에 요청해도 실행되는 함수) 화살표 함수로 바꾸면? 실행결과 똑같다 이것도 콜백함수 똑같다 이것도 위아래 같은 것 Callback함수를 만드는 이유 = 원하는 위치에서 실행하기 위해 만드는 것 비동기 콜백 백엔드에 요청을 해놓고 요청이 끝나면 이 함수를 실행해줘! 자바스크립트에서 제공하는 기능 오래전에 많이 쓰던 것 axios get이랑 같다 요청 끝나면 실행해줘~ Callb.. 2021. 10. 23.
지도API, appKey, 카카오지도 8/12 오늘은 지도API 관해서 배웠다. 지도API는 크게 구글지도, 네이버지도, 카카오지도 등이 있다. 이들은 크게 비용적인 차이, 세부적인 기능간 차이 등이 있다. 나는 1일 30만회 무료 요청인 카카오지도를 적용해봤다. 기억해야할 중요한 포인트는 2가지가 있다. 1. appKey 요청을 받아줄 도메인을 적어줘야 합니다. 프론트엔드에서 사용되는 appkey는 숨길 수 없다. 이러한 key를 제공하는 제공업체에서는 어떠한 도메인에 응답해줄지 도메인을 적도록 되어있다. 이후에 배포를 진행하고 도메인이 만들어지면, 카카오맵에도 적용해 주어야 합니다. 2. 브라우저에서 router.push로 이동할 때, 카카오 기능이 로딩되기도 전에 실행되어 문제가 발생했다. 따라서, kakao 기능이 로딩이 완료될 때까.. 2021. 10. 23.
웹에디터, 다이나믹 임포트, 웹 공격, react-quill 8/10 작성한 내용의 앞 뒤로 등의 태그를 붙여서 데이터베이스에 저장했을 뿐이었다. 이 내용들이 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해 dangerouslySetInnerHTML 이라는 속성을 사용해서 해결했다. 여기서 한가지 호기심이 생길 수 있다. 태그처럼 자바스크립트로 해킹 기능을 작성하면...? 이 때, 누군가 글 상세보기를 클릭하면, 작성된 자바스크립트 코드가 실행될 것이고, 해킹(예, 토큰 탈취, 탈취된 토큰으로 유해 게시물 생성 및 중요 게시물 삭제 등)을 당할 수 있다. react-quill 라이브러리에서는 이를 사전에 차단해 준다. (태그를 의미하는 단어인 '' 등을 &lt, &gt와 같이 변경하여 차단) 하지만, react-quill만 믿고 방심 했다가는, 다른 .. 2021. 10. 23.
728x90

티스토리툴바