SEO란 Search Engine Optimization의 약자로 "검색엔진 최적화"라는 의미를 담고 있습니다. SEO 처리를 하게 되면 네이버, 구글과 같은 검색 엔진에서 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업입니다. 블로그 홍보글, 온라인 판매몰 등 같은 단어를 검색하더라도 SEO를 처리한 웹 사이트는 SEO 처리를 하지 않은 웹사이트에 비해서 유저 방문 트래픽 차이가 있을겁니다. 사내 시스템 담당자로 근무를 할 당시에는 사실 SEO에 대해서 크게 관심이 없었습니다. 왜냐하면 사용자 유입에 대한 작업보다는 동적으로 데이터를 받아서 처리하는 과정이 중요했었습니다. 그러나, 지금의 조직은 SEO 최적화가 필요하기 때문에 생각난김에 블로그에 정리하고자 합니다. 🎈 React에서 SEO 최..

리액트 라이프사이클이란 리액트 앱이 실행되고 종료되는 과정을 마운트, 업데이트, 언마운트로 나눈 것 Q. 마운트, 업데이트, 언마운트란? 마운트 : 컴포넌트가 실제 DOM에 삽입되는 것 업데이트 : 컴포넌트가 변하는 것 언마운트 : 컴포넌트가 DOM 상에서 제거되는 것 Q. 렌더링이란? 컴포넌트 내에 Element 요소들(HTML, React 사용자 정의 태그)을 화면에 그리는 동작 React의 라이프사이클 (16.3 >= ) [1] 컴포넌트 생성 constructor → render → componentDidMount 1. constructor 컴포넌트가 만들어지면 가장 먼저 실행되는 생성자 메서드 초기값을 설정할때 주로 사용 2. render constructor()에서 정의한 state 값의 접근 ..

Nexus Repository Nexus Repository란, 소프트웨어 개발 및 배포를 위한 오픈 소스 원격 저장소 관리 시스템입니다. 개발자들이 소스 코드, 라이브러리, 컴포넌트, 패키지 등의 아티팩트를 중앙 집중식 저장소에서 관리하고 공유할 수 있게 해줍니다. Nexus Repository Manager nexus3.onap.org 첫회사에서 프로젝트 했을 당시에는 저장소 구축이란건 해본경험이 없다. (사실 기회는 있었겠으나 내가 관심이 없었던걸로..) publish만 할줄 알았지 어떻게 해서 Nexus에 npm이 올라가는지 잘 몰랐다.😢 공통컴포넌트 서비스 배포를 하게되면서 회사에서도 nexus에 프론트 npm을 올릴수 있는 환경이 있었다. (잊기전에 정리하기) 구축이란걸 해봤어야알지 엉엉.....

안전하게 객체에 deep하게 접근하기 위해 현업에서 &&연산자를 활용하여 접근했었다. 편하긴한데, 자주 사용하다보면 이게 꽤 지저분하게 보이는것을 확인할 수 있었다. 그래서 Optional Chaining 연산자를 활용해보며 조금 깔끔하게 사용하는 방법에 대해 공유를 합니다. 임직원 객체에 대한 정보가 아래와 같습니다. 예를들어 emp안에 info라는 객체 안에 job이라는 객체 안에 "pay"라는 값에 대해서 가져오고싶다고 가정합니다. const emp = { name: 'kim', info: { empNo: 1001, job: { position: 'FE-Dev', pay: 1234 }, }, }; 1. && 연산자 아래는 &&연산자를 활용하여 접근했습니다. 이렇게 접근하다보면 .으로 접근하여 같은 ..