프로그래밍 공부내용/자바스크립트(JS) (7) 썸네일형 리스트형 D3 공부를 시작하며..[작성중] 인트로 농구를 굉장히 좋아한다. 정보를 좀 찾고 싶은데... 네이버 이 친구들이 아주 알려주는게 없다. 특히 nba보다 kbl이 메인에 있어서 아주 보기가 힘들다.. 나같은 nba 마니아들을 위해서 통계를 제공하고 실시간 경기를 제공하면 어떨까 생각이 들었다. Why D3 자료를 찾아보던 중에 D3를 찾았다. rechart나 chart.js처럼 쉬운 라이브러리도 있지만 남자라면 근본이 아니겠는가? 농담이고, 사실 npm trends를 보면 압도적으로 d3가 많다. 또 D3가 커스터마이징 성능이 월등하다고 한다. 문제라고 하면 리액트와 생명주기가 맞지 않을 수 있다는 점인데.. 학교 도서관에서 Integrating D3 with React - Elad Elrom 이라는 책을 찾았다. D3를 리액트랑 쓰려면.. JS와 import에 대하여... ESM과 CommonJS 요즘 토스 면접을 준비하느라 전에 봤던 토스 영상들을 부쩍 다시 찾아보게 된다. 박서진님의 '내 import 문이 그렇게 이상했나요?' 를 보고, 전에 발표했던 yarn berry를 바탕으로 import와 모듈에 관하여 정리하고자 한다. 모듈이 뭔데요 모듈은 쉽게 말해서 코드 뭉치라고 보면 된다. function add(a,b){ return a + b; } 와 같은 코드가 필요하다고 하자. 매번 필요할때마다 이 코드를 복사붙여넣기 해서 쓰는 것은 너무 비효율 적이기 때문에 우리는 모듈로 쓴다. 어떻게 쓰는건데 쓰는건 어렵지 않다. ESM과 CommonJS의 등장 이전의 상황부터 보자 // 박서진님 발표 예제입니다. 우리는 jquery를 불러쓰려면 저런 방식으로 써야 했다. html 문서 안에 scrip.. 기깔나게 웹 성능 최적화하기 웹 성능 최적화? '웹 성능 최적화...' 들으면 가슴이 벅차오르지만 동시에 쉽지 않은 주제이기도 합니다. 구글 연구 자료입니다. 시간에 따라서 이탈률이 어마어마하게 차이가 나게 됩니다. 구글같이 큰 서비스는 로딩시간이 0.1초만 차이나도 엄청난 돈 차이가 날 것 같습니다. 웹 성능을 개선하려면 우선 사용자가 웹에 접근하게 됐을 때 무슨 일이 일어났는지 알아야합니다. 간단한 그림을 준비했습니다! 그림의 각 단계별로 최적화 하는 방법이 있습니다. 저는 프론트엔드 개발 담당이기 때문에 Client / Client Front Server 에서 최적화를 진행하였습니다. (글을 정리하다가 궁금해서 백엔드 크루에게 물어보니 Backend 단에서는 요청을 압축하기나 DB 접근시간을 줄이는 등의 최적화도 가능하다고 합.. 기깔나게 webpack build 속도 최적화하기 안녕하세요! 오늘은 webpack 빌드속도를 개선했던 이야기를 해보려고 합니다. 저희 '땡쿠' 프로젝트는 CRA를 사용하지 않고 webpack을 이용해서 react project를 빌드해서 사용했었습니다. '왜 CRA를 쓰지 않았나요' 에 관한 이야기는 다음에 하기로 하고, 오늘은 '어떻게 webpack을 사용했나요' 에 초점을 맞춰볼까 합니다. 우리는 잘 하고 있었나? 예전에 '부탄' 이라는 나라가 행복지수가 가장 높은 곳으로 소개된 적이 있습니다. 지금은 그렇지 않은데요.. 기술이 발달하면서 부탄사람들이 다른 사람들은 어떻게 사나 알게 되면서 행복지수가 많이 감소했다고 해요. 왜 이런 이야기로 시작하냐고 하면... 저희 프로젝트가 그랬습니다... 웹펙으로 빌드하면서 빌드시간이 32초정도 걸렸습니다. .. 배포할 때 환경변수 숨기기(with dotenv) 지금까지는 개인 dev에서만 확인 할 수 있는 개발을 해왔었습니다. 백엔드와 협업을 할 때에도 연결되는지와 결과물이 잘 나오는지만 봤지 실제 프로덕트로 이어지지는 않았었습니다. 우테코 lv3를 진행하면서 실 사용이 가능한 서비스를 만들기 위해서 배포를 하고, 오픈소스로 git 레포를 관리하다보니 ip와 같은 환경변수들을 숨겨야 할 일이 생겼습니다. 수동으로 같이 작업하는 사람들끼리만 알고 있다가 배포할 수 도 있지만, 현재 프로세스에서 젠킨스 등 다양한 도구를 사용하고 있기 때문에 자동화가 가능할 것이라고 생각했습니다. 작업은 아래와 같이 진행하였습니다. 1. .env 분리하기 //.env API_URL = http://localhost:3000 와 같은 식으로 .env파일을 src 디렉토리 아래에 분리.. css에서 소수점 px에 관해서 우테코를 하면서 소수점 픽셀을 무심결에 사용했었던 적이 있다. (나는 css와 js가 우테코 준비하면서 시작해서 경력이 짧다.. 이런거 첨이야..) 브라우저에서 적용이 안되는것 같았고, 코드리뷰를 받았을 때 수정해달라는 요청이 있었다. 근데 궁금했다. 분명 1px은 크기인데, 소숫점을 나타낼 수는 없는걸까? 글들을 많이 찾아봤다. '반올림 시켜준다' 라는 말이 정말 많았다. 답변이 시원찮아서...(왜냐면 브라우저는 대기업에서 만드는건데, 소수점 픽셀정도는 지원해줘도 괜찮잖아?) 재밌는 글을 찾아서 직접 실험해 봤다. 실험코드는 다음과 같았다. (리액트로 작업중에 받아서 하던 플젝에서 시험해서 리액트 코드다) const arr = Array.from({ length: 100 }, (v, i) => i); .. SPA과 CSR, SSR 에 관하여 SPA SPA(Single Page Application) 입니다. 이름에서 쉽게 알 수 있듯, 한장의 페이지로 이루어진 사이트를 spa라고 합니다. SPA 와 MPA 한 장 이라는 의미가 조금 모호할 수 있는데, 사이트를 쓰다보면 화면이 전환될 때 깜빡이는 경우가 있습니다. 이것은 html을 여러장 준비해두고, 페이지 변화(사용자 요청)가 일어나면 정적인으로 이미 구성된 요소(HTML, CSS, JavaScript)를 불러오는 방식으로 구성됐기 때문에 일어나는 일입니다. 이런 식으로 구성하는 것을 MPA(Multiple Page Application)이라고 합니다. SPA 를 써야하는 이유 쓰잘데기 없이 왜 spa를 써야하는 궁금증이 들 수 있습니다. spa를 쓰는 이유는 사용성 때문입니다. 가장 큰 .. 이전 1 다음
