NH BANK NH BANK

최적화, 왜 해야 할까?프론트엔드 개발자가 웹 성능을 최적화하는 것은 여러 이유로 중요하다 기업은 웹 페이지의 렌더링 속도를 최적화함으로써 서버 및 대역폭 리소스 사용을 줄일 수 있어서 서버 유지 보수 비용을 절감할 수 있다 사용자 측면에서 렌더링 속도가 느리면 사용자 경험이 저하되어 이는 웹사이트 이탈로 이어질 수 있다 프론트엔드 개발자는 코드 최적화, 이미지 최적화 등을 통해 렌더링 속도를 향상시키는 작업을 함으로써 사용자 경험을 향상시키기 위해 노력해야 한다 최적화, 무엇을 해야 할까? 성능 확인하기 크롬에서 확장자로 제공하는 Lighthouse를 통해 웹페이지의 성능을 확인할 수 있다 https://chromewebstore.google.com/detail/lighthouse/blipmdconlk..

현재 My SQL과 Next.js를 활용한 웹사이트를 제작하고 있다 회원가입, 로그인, 게시판 기능에 그치기 아쉬워서 컨셉을 만들고 글쓰기 기능에 영상 검색하고 추가할 수 있는 기능을 구현하기로 결심했다 음악 관련 웹사이트라 spotify API를 사용하려 하다가 google 로그인 구현하기 위해 프로젝트를 생성해둔 겸 youtube API를 사용하기로 했다 (추후 음악 재생 앱을 만들게 된다면 spotify API를 사용하는 걸로..!) 새로운 것을 사용하려면 공식문서와 친해져야 하기에 열심히 읽고 postman 날려보며 적용했다 1. 프로젝트 생성하기 https://developers.google.com/youtube/v3/getting-started?hl=ko YouTube Data API 개요 |..

현재 SSR(서버 사이드 랜더링)이 유행하고 있다 서버 사이드 랜더링의 장점은 검색 엔진 최적화와 빠른 랜더링 속도에 있다 왜 이것이 중요한가? 이 두 가지의 장점은 기업의 수익성에 있어 중대한 영향을 미치기 때문에 매우 중요한 요소이다 문제는 리액트는 CSR 방식으로 초기 랜더링 이후에는 속도가 굉장히 빠르지만 CSR 방식의 경우 초기 로딩 시점에 필요한 모든 콘텐츠를 동적으로 생성하기 때문에 검색 엔진이 콘텐츠를 인식하기 어려워진다 그래서 SSR이 가능한 Next.js로도 작업하고 있지만 리액트로 작업한 프로젝트가 많기 때문에 CSR에서 검색엔진 최적화를 위해 노력한 경험에 대해 적어볼까 한다! 1. 리액트에 헬멧 씌워주기 (React-helmet-async 라이브러리를 사용한 meta 태그활용) R..

요즘 피그마로 작업을 병행하면서 재밌는 플러그인을 찾고 적용시켜나가는 중이다 개발할 때도 신기한 라이브러리 찾는 것도 취미라 잘 만들어놓은 것들을 활용하는 재미가 쏠쏠하다 피그마로 입체적인 느낌의 도형을 구현하고 싶어져서 찾아보니 발견하게 된 플러그인 Blend이다 플러그인 Blend 사용 방법 1. 파일에서 플러그인 클릭 후 blend 검색하면 찾을 수 있다 이제 원과 선만 있으면 무엇이든 만들 수 있다 2. 펜으로 선과 도형으로 원을 대충 그린다(사실 이거 그리는 게 가장 어렵다) 도형은 linear gradient로 그럴듯하게 그라데이션을 준다 3. 만든 후 원과 선을 동시 선택한 뒤 플러그인을 실행한다 실행하면 아래 사진 처럼 자동으로 원이 5개 복제된다 하지만 자동으로 선택되지 않는 경우 sel..

리액트로 개발을 시작하면서 리액트에 대한 정보를 찾아보게 되었다 그러면서 가장 많이 봤던 주제는 리액트의 정체성에 관한 글이었다 과연 리액트는 프레임워크일까 라이브러리일까? 우선 궁금증을 해결하기 위해 구글에 리액트를 검색하면 '라이브러리'라고 나온다 그렇다, 리액트는 라이브러리다. 본격적으로 리액트라 왜 라이브러리인지 정리하기 전, 프레임워크와 라이브러리에 대해 정리해보자 프레임워크 (Framework) 프레임워크라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어로 '뼈대'를 뜻한다 어떠한 일을 처리하기 위한 구조를 제공하는 것이 바로 프레임워크다 라이브러리 (Library) 라이브러리는 개발에 필요한 것들을 미리 구현해놓은 도구이다 차이점 둘은 "제어 흐름" 에 따라 그 의미가 달라진다..

코멘토 직무부트 캠프 신청계기 전공과 관련없던 직무로 취업을 준비하던 와중 대학 제휴로 부트캠프를 진행하는 공지를 보고 신청하게 되었습니다. 수강했던 부트캠프 https://comento.kr/edu/learn/ITSW/%EC%9B%B9%EA%B0%9C%EB%B0%9C-G2446 현재 프론트엔드로 취업을 준비하고 있어 프론트엔드 개발 직무를 체험해볼 수 있는 부트캠프를 찾게 되었습니다. 당시 프론트엔드 직무부트캠프는 두 세개 정도 있었습니다. 그 중 멘토 제이님의 프론트엔드 현직자와 함께하는 개발 직무 A to Z 부트캠프를 신청한 이유는 현재 제가 갖고 있는 실력에 한해서 크게 무리가 없을 것 같으면서 현업도 체험해볼 수 있을 것 같아서 선택하게 되었습니다 진행 과정 1주차 업무를 하기 위해 개발 환경..

공공데이터 포털 API 사용 방법 1.공공데이터 포털 회원가입/ 로그인 한다 https://www.data.go.kr/ 2. 원하는 Open API 선택한다 3. 활용신청 후 일정 시간이 지나면 승인된다 4. 마이페이지 > Open API > 활용신청 현황으로 들어가 인증키를 복사한다 5. API 제목 옆 상세 설명에서 Open API 호출을 누르고 양식에 맞게 정보를 입력한다 인증키는 4번에서 복사한 인증키를 붙여넣기 string에는 json 데이터 호출하기 위해 json 입력했다 6. 요청값 입력 후 나오는 두번째 창의 주소를 복사하면 된다 JS로 호출하기 1. 생성한 js 파일에 호출하는 방법 1) axios.get /axios.post 2) fetch axios.get으로 주소를 입력해준 후 co..

처음에는 public 가져가고 백업시 src 파일 가져가면 됨 src, git, json tarn lock read.md 꼭 가져가야 함 이름 변경하면 안 됨 폴더 따로 만들어야 함 다시 다운 받는 법 node mudule - 기본적으로 사용할 모듈 public -index.html src- 실제 코딩할 폴더 package.json - 전체 프로그램 내용 node module 폴더 제거 터미널 창에 yarn install App.js > index.js에서 화면 출력 div를 만들지 않고 가상 DOM 을 활용 > 속도가 빠름 Ctrl C 서버 꺼짐(조심) 실행 방법 : yarn start 계정 바꾸기 windows 자격 증명 관리로 기존 등록 계정 삭제 최종 build 하는 법 package.json 에..