ETC
패스트캠퍼스 챌린지 7일차 - 리액트 JSX 알아보기
JSX 없이 사용하는 React React는 자바스크립트 라이브러리로 JSX 를 사용하지 않아도 모든 것을 자바스크립트로 구현할수 있다. 그러나 리액트를 사용하면서 자바스크립트보다 JSX를 선호하는 이유는, 기존에 자바스크립트로 구현할수 있음에도 JQuery를 많이 사용했던 이유 중 하나, 자바스크립트로 작성된 코드가 JSX로 작성한 코드보다 길고 복잡하기 때문이다. /* JSX */ class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , document.getElementById('root') ); /* JAVASCRIPT */ class Hello extends Rea..
패스트캠퍼스 챌린지 6일차 - 리액트 상태 끌어올리기, 데이터 fetch하기
See the Pen state lifting by BEGINNERWW (@beginnerww) on CodePen. State 끌어올리기 형제컴포넌트가 존재하고 어떠한 액션을 취할때 형제컴포넌트의 state(값, 데이터 등)이 필요할 때, 해당 상태값을 각각의 컴포넌트 내에서 관리하는 것이 아닌 부모컴포넌트로 lifting up 하여 관리하는 것을 말한다. 단순한 구조(연관된 컴포넌트가 몇 되지 않을때)일 경우 lifting up(상태를 부모가 관리), Props drilling(props를 자식 컴포넌트로 하달)을 함에 있어 큰 문제가 되지 않으나, 과도할 경우 어디서 전달되어온 값인지 추적하기가 어려워져 유지보수에 문제가 생긴다. 이를 보완하기 위해 Context Api나 상태관리 라이브러리(red..
패스트캠퍼스 챌린지 5일차 - 리액트 Key와 리렌더링
key와 리렌더링 효율적으로 변화를 감지하고 리렌더링 하기 위해 리액트에서는 key라는 엘리먼트 리스트를 만들때 포함해야되는 특수한 속성을 지원한다. key는 기존 트리와 이후 트리의 자식들이 일치하는지 확인해주는 역할을 하기 때문에, 전역에서 유일할 필요없이 형제요소에서만 유일성을 유지하면 된다. See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen. key는 고유하게 식별할 수 있어야 하기 때문에 대부분의 경우 데이터의 ID 값을 사용한다. 유일하게 사용할 수 있는 값이 없을 경우 인덱스를 key로 사용할 수 있으나, 인덱스를 key로 사용하게 되면 재배열이 일어날 경우 컴포넌트에 예기치않은 문제가 발생할 수 있기때문에 주의해야한다. (여기서 인덱..
패스트캠퍼스 챌린지 4일차 - 리액트 element 다루기
Element에 style 입히기 - 이미 html 태그로 정의되어있는 element는 class 를 인식하지만, 커스텀 element는 class를 인식하지 못하기 때문에 className으로 사용한다. - style 적용은 className을 사용하여 css를 작성하는 것과 인라인으로 주입하는 방법이 있다. - 인라인으로 주입할 때는 객체형식으로 작성해야하며, 속성명은 카멜케이스로 작성해야한다. - 커스텀 컴포넌트 형식으로 작성하여 적용할때는 태그 내에 모든 것들이 props로 전달되기 때문에, 전체를 사용할때는 파라미터 객체로 받고, 부분 사용시에는 비구조할당으로 받는다. { className } 등 Ref로 DOM 다루기 강의에서 useRef에 대한 설명이 너무 간단해서 공식문서를 참고했다. DO..
패스트캠퍼스 챌린지 3일차 - 리액트 Hooks
리액트는 컴포넌트 단위로 사용되는데 여기서 컴포넌트란 element의 집합을 의미한다. ex) input 여러개~, form 등등을 요소로 칭한다. 지난 강의에서 바닐라js로 구현한 검색입력창을 리액트 훅(useState)을 이용하여 구현해보았다. See the Pen 검색입력창 vjs by BEGINNERWW (@beginnerww) on CodePen. 컴포넌트 상태관리 : useState (함수형 컴포넌트에서 변수 관리) const [keyword, setKeyword] = useState("") useState의 return값이 배열형태이기 때문에 변수 선언시 배열의 비구조화 할당(destructuring) 기법을 이용해 두 개의 변수를 선언한다. (물론 const keywordState = Re..
패스트캠퍼스 챌린지 2일차 - 리액트의 리렌더링
오늘은 리액트의 리렌더링에 대한 내용과 이벤트 핸들링에 대해 공부하였다. 리액트의 장점 으로 많이 화자되는 것 중 리렌더링에 대한 부분이 있다. 리액트는 가상돔을 통한 컴포넌트 비교로 변경된 내용을 파악하고, document 전체를 리렌더링하는 것이 아니라 변경된 내용이 사용되는 컴포넌트만 리렌더링한다. 이는 웹개발에 있어서 성능 최적화와 직결되는 장점이다. 성능 최적화하면 리플로우(reflow), 리페인트(repaint)의 개념을 알아야된다. 브라우저가 동작할때 리플로우는 배치, 리페인트는 그리기에 해당하는데, 리플로우는 플로우작업(DOM트리 + css/javascript 를 합쳐주면서 해당 돔요소의 크기와 위치에 배치하는 것)을 다시 하는 것을 의미한다 렌더트리를 기반으로 화면을 그리는 작업을 다시 ..
패스트캠퍼스 챌린지 1일차
최근 회사에서 리액트, node.js(koa.js) spec으로 프로젝트를 진행했었는데(외주??였나 그랬음) 리액트 기본 강의(벨로퍼트님, John Ahn님 등)만 듣고 실제 리액트에서 자주 사용하는 상태관리 라이브러리, ui라이브러리 등 실전에 필요한 내용은 거의 전무하다시피 했다보니 한달내내 생고생하고 프로젝트는 빠그러지게 되었던 경험이 있었다. 리액트 처럼 생태계가 활성화 되어있고 광범위할 때에는 활용능력에 따라 완성도의 차이가 결정되는데 경험이 전무하다시피하니 프로젝트 진행속도도 더뎠고 구현한 기능 자체의 state 관리가 어려웠었다. (상태관리 라이브러리가 redux만 있는 줄 알았었고 mobx는 처음 들어봤는데 심지어 중간에 스택이 바뀌는 참사도 있었다.) 그렇다보니 회사에서 리액트 실무 코드..
네이버 메일 발송예약 및 수정 취소 꿀팁
안녕하세요 럭키입니다 업무시 자주 사용하는 메일, 특정한 시간에 단체발송 또는 예약발송할 일이 종종 생기기 마련입니다. 그래서 준비했습니다. 네이버 메일 발송예약 및 수정 취소 꿀팁 네이버 메일 예약발송하기 - 네이버 홈화면 > 메일 > 메일쓰기 - 발송을 위한 받는사람, 제목, 보낼 메일 내용을 적습니다. - 네이버 홈화면 > 메일 > 메일쓰기 - 발송을 위한 받는사람, 제목, 보낼 메일 내용을 적습니다. - 메일쓰기 하단 "발송예약" 클릭 후 "예약시간 직접입력" 또는 "D-Day로 예약" 에서 발송일시를 설정합니다. - 발송일자는 발송예약하는 당일부터 5년 이내의 날짜로 설정 가능하며, 최대 30통까지 예약가능합니다. ( 30통은 받는이 기준이 아닌(30명) 각기 다른 메일내용을 기준으로 합니다.)..
블로그 네이버에 노출시키기_네이버 웹마스터도구 등록
안녕하세요 럭키입니다 티스토리 블로그 및 기타블로그(브런치, 미디엄 등) 운영시 네이버에 블로그를 노출시키는데 필수적으로 진행해야되는 네이버 웹마스터도구 등록에 대해 정리해보겠습니다. (네이버 노출의 경우 애드센스를 진행하는데 있어 필요한 부분은 아니나, 애드센스 발급 후 수익을 창출해내기 위한 필수 과정입니다.) - 네이버 웹마스터도구에 티스토리RSS를 등록하기 위해 '네이버 웹마스터도구'를 검색합니다. - 기존 네이버웹마스터도구가 네이버 서치어드바이저라는 서비스에 편입되었나봅니다. '네이버 서치어드바이저' 를 클릭하여 접속 후 우측 상단의 로그인 버튼을 눌러줍니다 - 네이버 서치어드바이저 내 웹마스터도구를 클릭하면 바로 사이트 등록 화면으로 전환됩니다 URL 입력란에 꼭 HTTP:// 또는 HTTPS..