개발을항해

어느 평화로운 날, 새로운 요구사항이 생겼습니다.관리자 코멘트 입력란에 '링크 삽입' 기능 추가해 주세요. 코멘트 입력란은 textarea를 사용 중이었는데, 말 그대로 텍스트만 입력됩니다. 어떻게 구현해야 될지 몰랐지만 일단 안된다고 대답하고 좀 더 고민해 봤습니다. 링크를 삽입하는 방법이 여러 가지 떠올랐는데,링크를 a 태그로 감싸서 텍스트로 저장한 후, HTML로 파싱하여 보여준다.코멘트 입력란을 현재 블로그 기능에 사용 중인 웹 에디터로 교체한다.마크다운으로 입력 후 JSX로 변환한다.위의 방법 모두 검색해 보면 관련 라이브러리가 있습니다. 하지만 짧은 코멘트를 위해 라이브러리를 설치한다고? 링크 많이 넣어봤자 2, 3개일 텐데, 마크다운이나 HTML 파싱 기능을 통째로 넣는 걸 납득할 수 있습니..

클래스형 컴포넌트에서 생명 주기(life-cycle) componentDidMount, componentDidUpdate, componentWillUnmount를 사용하듯이, 함수형 컴포넌트에서 useEffect를 사용해봅시다. 1️⃣ 컴포넌트가 생성/소멸하는 모든 상황에 함수 실행하기 // 클래스형 컴포넌트 componentDidMount() { console.log("컴포넌트 생성 될 때 실행"); } componentWillUnmount() { console.log("컴포넌트 사라질 때 실행"); } // 함수형 컴포넌트 useEffect(() => { // componentDidMount console.log("컴포넌트 생성 될 때 실행"); // componentWillUnmount (clean..

Next.js는 React의 서버 사이드 렌더링(SSR)을 쉽게 하도록 도와주는 프레임워크입니다. React는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. CSR은 한 페이지만 화면에 띄웁니다. 그 후 사용자의 요청에 따라 필요한 부분만 다시 렌더링 합니다. 하지만 모든 정보를 처음에 다 불러오기 때문에 초기 로딩 시간이 길어집니다. SSR은 서버에서 필요한 페이지를 완성한 후 이를 브라우저에 보냅니다. 처음 렌더링 된 html만 브라우저에 보내기 때문에 초기 로딩 시간이 짧습니다. 하지만 페이지를 요청할 때마다 정보를 다시 불러 와서, 사용자가 페이지를 이동하는 시간은 더 오래 걸립니다. # 설치, 실행 npm install next npx create-next-app 1️⃣ Router 비교 ..

⚛️React란? React는 facebook에서 만든 JS 라이브러리로, component를 사용해 웹페이지를 효과적으로 렌더링(rendering)합니다. 무슨 소리냐 하면, 예를 하나 들어보겠습니다. 어느 사이트에 회원가입을 한다고 해봅시다. 이름이랑 아이디, 비밀번호, 비밀번호 확인, 닉네임, 이메일, 전화번호 등을 입력하고 가입하기를 눌렀습니다. '비밀번호가 일치하지 않습니다'라는 알림 창이 뜨네요. 아니 근데 알림 창의 확인을 누르는 순간, 화면이 새로고침 되면서 제가 채운 정보가 다 사라지는 겁니다. 이러면 사용자가 실수했을 때 모든 정보를 계속 다시 입력해야 합니다. 이런 불편함을 해결하기 위해 생각해낸 것이, 필요한 부분만 바꾸자입니다. 사용자와 정보가 오가면서 변화를 줘야 할 부분이 생기..