본문 바로가기

React & TypeScript/React31

리액트 SEO - 검색엔진(네이버, 구글)에서 검색되도록 고치는 방법 / robots.txt 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com robots.txt 고치기 public 폴더에 robots.txt 파일을 만든다. 아래와 같이 코드를 만든다. Sitemap: https://share.beautifulstore.org/sitemap.xml // 제작된 sitemap 경로 User-agent: * // 모든 검색엔진 (AdsBot 크롤러는 직접 입력해주어야 함) Allow: / // 모든 페이지 접근 허용 네이버, 구글 웹마스터 도구에 사이트 주소를 .. 2021. 7. 20.
여러개의 state 값을 1개의 객체로 관리하는 방법 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 코딩하다가 check 에 관한 컴포넌트 여러개의 check 여부를 1개의 state로 관리할 수 있을 것 같았다. 방법은 간단했다. 아래와 같이 useState 안에 배열, 그 안에 객체를 넣으면 된다. 순서는 컴포넌트 순서겠지? 미리 세팅해두면 된다ㅎㅅㅎ 이렇게 하면, 어떤 check 컴포넌트가 선택되었을 때, Re-Rendering 이 될 필요가 있으면, Re-Rendering 할 수 있게 된다. const [ch.. 2021. 6. 17.
[React] useState 활용해서 사전에 객체의 Template 설정해야 하는 이유 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 에러 메시지 antd table Each child in a list should have a unique "key" prop. Check the render method of `Body`. 작업 도중에 위와 같은 메세지가 떴다. ㅎㅎ 상큼하다. 초급 개발자인 나는 한동안 해메이다 답을 찾았는데, useState로 객체를 설정해두어야 한다는 것이다. const [data, setData] = useState({ res.. 2021. 4. 28.
[React] useCallback / useMemo 일단 괜찮게 보이는 링크만 남겨둔다. useCallback / useMemo 참조 React Hooks: useCallback 사용법 Engineering Blog by Dale Seo www.daleseo.com React Hooks: useMemo 사용법 Engineering Blog by Dale Seo www.daleseo.com 2021. 4. 13.
[React] 자식 컴포넌트에서 부모로 데이터 보내기 (child -> parent) by React Hook 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com #2021.06.25 내용 추가 : 이 것의 본질은 props 로 내려주는 것이 data가 아니라 function 이라는 것이다. 그 게 본질이다. 너무 어렵게 설명을 이리저리 했던 것 같다. 내가 이해한 본질은 이러했다. 리액트를 쓰다보면 parent의 props에 속성 값을 보내서, child에서 처리하는 것 뿐만아니라, child에서 처리한 것을 부모로 보내주어야 할 때가 있다. 아래와 같이 부모로 부터 전달받은.. 2021. 3. 30.
[React] super(props); 보통 아래와 같은 구조로 리액트 Component 구조를 갖는다. class App extends React.Component { constructor() { super(); ... } render() { return (); } } super 는 상위 객체의 Method를 가져오는 것이다. 위에서 super();는 React Component에 object 와 Method를 전달하기 위한 것이다. super(props), constructor(props)를 선언할 경우도 상위 컴포넌트에 object를 전달해주는 성격이 된다. 참조: min9nim.github.io/2018/12/super-props/ velog.io/@hytenic/Javascript-javascript-OOP-Class-Super ve.. 2021. 2. 16.