해시태그의 경우, 정규표현식을 이용해서 만드는데, {postData.split(/abac/)} 처럼 작성하면 됩니다. // 이런식으로 쓰면 주석처리로 되지만, /abcdef/처럼 안에 내용이 있으면 정규표현식이 됩니다. 위 그림에서 /g는 global의 뜻이고, 붙이면 여러개가 선택이 되고, 붙이지 않으면 한개만 선택됩니다. 뒤에 .은 한글자를 의미하지만, 사용자들이 일일히 2글자, 3글자를 해시태그만 쓸 수 없으니 뒤에 +를 붙어주면 모든 글자가 선택이 됩니다. 하지만, #단위로 끊어야 되기 때문에 다른 방법을 찾아야됩니다. []를 쓰고, 안에 키워드를 입력하면 해당글자를 찾습니다. [^]를 쓰고, 안에 키워드를 이용하면 해당글자를 제외한 글자를 찾는데 이걸 이용해서 해시태그를 완성하면 됩니다. \s를..
댓글 구현하기 댓글 버튼을 누르면 Comment 창이 나오게끔 Toggle을 이용해서 작성해주고, CommentForm은 따로 컴포넌트로 만들어줍니다. antd의 List, Comment 컴포넌트들을 가지고 아래 항목들을 작성해줍니다. PostCard에서 CommentForm에 사용할 값으로 post를 prop으로 넘겨줍니다. CommentForm 또한, antd의 Form과 Input, Button 컴포넌트를 이용해서 작성해줍니다. PropTypes는 검사도구이기 때문에 귀찮더라도 항상 작성해주시는 게 좋습니다. 서비스가 안정적으로 될 수 있도록 도와줍니다. const id = useSelector((state) => state.user.me?.id); 댓글을 로그인을 하지 않고 볼 수도 있기때문에 옵..
PostCard 역시 큼직큼직하게 컴포넌트를 생각하고 기획하고, 기획을 하면 됩니다. 그리고 살을 붙이듯 구현을 해나가면 됩니다. post를 props로 데이터를 index.js에서 받아오기때문에 propTypes를 설정해주어야합니다. proptypes설정시 object 항목을 더 자세하게 적어주고 싶다면, shape({ }) 안에 넣어주면 됩니다. 또한, 옵셔널체이닝 연산자로 const id = me && me.id; 에서 const id = me?.id;로 변경할 수 있으며, 이또한 const id = useSelector((state) => state.user.me?.id) 처럼 사용할 수도 있습니다. state 값이 false일 때, 값을 true로 변경하거나 true값을 false로 변경하려면 ..
Reducer들도 컴포넌트들처럼 쪼갤 수 있습니다. reducers 디렉토리 안에 분리시킬 post, user.js를 만들어주고, index.js에서 있던 initialState와 action들을 각 파일에 옮겨줍니다. 리듀서들도 옮겨서 적어주고, index.js에 분리시킨 리듀서들을 import 시켜줍니다. 리덕스에서는 분리시킨 리듀서들을 가져오려면 combineReducers을 사용하여 묶을 수 있고, const rootReducer = combineReducers({ user, post, }); 로 할 수 있지만, 추후 SSR(Server Side Rendering) 때문에 HYDRATE를 위해 index 항목을 추가해줍니다. 리듀서들을 combineReducers로 묶어주는 이유는 리듀서들은 함수..
리덕스(Redux)란? 여러 컴포넌들에서 쓰이는 공통적인 데이터들을 따로따로 흩어져있습니다. 컴포넌트가 분리되어있으면 데이터들이 흩어져 있어야하고, 그런 데이터들이 흩어지지않게 하고 싶으면 부모 컴포넌트를 이용하여 자식 컴포넌트들에게 전달해줘야했습니다. 하지만, 매번 수동으로 부모컴포넌트를 만들고, 자식 컴포넌트에 데이터를 보내는 과정이 너무 번잡스럽기 때문에 데이터를 중앙에서 하나로 관리할 수 있게 도와주는 게 리덕스입니다. 리액트에 리덕스 붙이기 const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); 로 2번째 항목에 옵션 객체를 넣어줍니다. _app.js 파일에 고차 컴포넌트를 ..
웹사이트에 회원가입을 할 수 있는 폼을 만듭니다. 기존에 만든 Form처럼 만들면 됩니다. 값이 바뀌는 코드(onChange)를 작성하다보면 id, nickname, password가 중복되는것을 볼 수 있습니다. 중복된 항목들은 따로 컴포넌트로 빼서 중복 코드를 하나의 함수로 만들어주는 커스텀 훅으로 변경할 수 있습니다. 커스텀 훅 만들기 hooks 디렉토리 안에 useInput이라는 파일을 만들어주고, 코드를 작성합니다. 함수 안에 중복되는 부분들을 적어준 뒤 return 값을 value와 handler로 받아줍니다. 위 코드대로 커스텀 훅을 작성하면 오류 메시지를 볼 수 있는데 위 캡쳐처럼 바꿔주시면 됩니다. 이유는 핫리로딩 해주는 라이브러리가 바껴서 그렇습니다. 마지막으로 onFinish에서 비밀..
return 안에 같은 태그 안에 {}(객체)안 CSS를 넣으면 안되는 이유는 리렌더링 되기 때문입니다. 렌더링은 처음엔 전체를 한번 렌더링되고, 리렌더링할 때 이전과 변경된 부분을 비교하여 변경된 객체가 있다면 변경된 항목만 다시 그려줍니다. 또한, 콘솔에서 {} === {}을 확인해보면 false로 나오는 것을 알 수 있습니다. 그래서 styled-components를 통해 이 부분을 막을 수 있습니다. 하지만, 성능에 문제가 되지 않는다면 쓰지 않아도 무방합니다. 사용방법은 간단합니다. const 변수명 = styled.선택자` color: red `; 코드를 작성하면 됩니다. 쓰고자하는 선택자를 styled. 뒤에 선택자를 써주면 되고, component 경우에는 styled(이안에) 괄호안에 써..
NodeBird 왼쪽에 로그인 폼을 만들겁니다. 백엔드 없이 임시로 가상의 데이터(State)를 통해 작동이 잘되는지 확인할 수 있습니다. Component 디렉토리의 AppLayout.js의 가상의 데이터인 const [isLoggedIn, setIsLoggedIn] = useState(false); 를 만들고, { isLoggedIn ? : } 을통해 로그인 상태가되면 유저프로필이 나올 수 있게 코드를 작성합니다. 또한, 로그인폼에서 setIsLoggedIn을 사용할 수 있게 작성해줍니다. AppLayout의 setIsLoggedIn을 props로 받아오기 위해 const LoginForm = ({ setIsLoggedIn }) => {... 으로 안에 작성해줍니다. LoginForm에서 버튼을 su..
