지선생 코딩딩 지선생 코딩딩

문제 원래 이렇게 평범하게 import 해서 Routing 하던 컴포넌트가 있다. import React from 'react' import { Switch, Route } from 'react-router-dom' import './App.css' import ListPage from './pages/ListPage/index' import ViewPage from './pages/ViewPage/index' function App() { return ( ) } export default App 어떤 번들을 사용하고 있는지 확인할 수 있는 도구인 cra bundle analyzer을 가동해보면 청크를 한 뭉탱이 가져와 적절하지 않게 사용하고 있다는 것을 알 수 있다. (refractor은 특정 페이지에..

자바스크립트 실행시간을 어떻게 줄이지? 개발자 도구 -> 성능 탭으로 가면 프로파일링 시작 버튼을 누름으로써 성능을 볼 수 있다, 탭에 나와있는 결과를 보며 비정상적으로 긴 실행 시간을 가지고 있는 컴포넌트가 있다면, 해당 컴포넌트로 가서 로직을 변경하므로써 해결할 수 있다. 실습 성능 탭에서 프로파일링을 하면 나오는 창이다. 보면 Article 이라는 컴포넌트의 자식 요소들이 유독 눈에 띄는데 끊어지고, 실행되고를 반복하고 있는걸 확인 했다. function removeSpecialCharacter(str) { const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-'] let _str = ..

이미지 최적화란? 뷰어에게 보여지는 이미지의 품질은 훼손시키지 않으면서 동시에 가능한 작은 크기의 이미지를 제공하는것 가능한 작은 이미지를 제공하여 사용자가 이미지 로드를 기다리는 시간을 줄일 수 있다. 또한 적절한 alt 요소를 사용하는것도 이미지 최적화로 볼 수 있다. 1. img 태그 사용하기 .thumb{ background-image: url("thumb.png") } img 태그를 적절하게 사용하면 스크린 리더기와 같은 보조기구에 더 인식이 잘되며 SEO 최적화에 도움이 된다. 2. 이미지의 크기를 적절하게 조절하기 html에서 img 태그는 본인의 width, height 픽셀의 2.4배정도 표현 할 수 있다. 예를 들어 100x100 img 태그에 1200x1200 이미지를 사용하나, 24..

YAPP이 끝났다 3월부터 8월까지 약 5개월 정도 진행이 되었는데 내가 처음 YAPP에 들어온 목적인 서비스 런칭에 성공하여 뿌듯했다. https://intro.lonessum.com/ 외딴썸 - 국내 최초 유학생 만남 서비스 외딴썸 서울특별시 은평구 증산로 387-1 6층 | 대표자: 이민석 사업자등록번호: 248-40-00874 | 통신판매업신고번호: 제 2022-서울은평-0980호 문의전화: 010-2276-2776 | 문의메일: korea@lonessum.com © 2022. 외딴 intro.lonessum.com 우리 팀이 개발한 서비스는 '외딴썸' 이고 유학생을 위한 미팅 서비스이다. 과정 YAPP에서는 4번의 중요 행사가 있었다. 1. 기획 devCamp, 2. 디자인 devCamp + 2..

1. 신청하게 된 계기 지금껏 나름 프로젝트와 협업 경험은 쌓았다고 생각했지만 특별한 교육 코스나 부트캠프를 경험해보지 못한 나로서는 자바스크립트 기초, 심화, 상태 관리, 아키텍처, ssr csr 등 체계적인 교육이 포함된 프리온 보딩이 나의 지식 구멍을 잘 메꿔줄 수 있는 기회라고 생각했다. 사실 4기에도 지원을 하려고 사전과제를 다 풀어놓았었다... ㅋㅋㅋ 그런데 시간표를 보니 도저히 학교와 병행 할 수 없는 시간표여서 포기를 했었으나 5기 모집과 학교 방학이 겹치며 반드시 해야겠다고 생각하며 사전과제를 풀었다. 2. 진행과정 세션할 때 위에서 언급한 이론 강의를 하나씩 한다, 과제는 과제의 규모에 따라 3일 or 7일의 시간을 주며, 5명으로 구성된 팀이 함께 과제를 해결한 후 세션 2부에서 프로..

프로젝트를 진행하면 가끔 이런 경우가 있다. 1. 데이터 여러 개를 받아야 해서 배열로 받긴 했는데, api에는 하나씩 post 해야 하는 경우 2. 여러개의 데이터를 한 군데 모으긴 했는데 , api에는 하나씩 post 해야 하는 경우 이럴 때 maps를 돌려 처리하면 편리하지만 api를 여러 번 호출하기 때문에 서버에 부담도 된다. 데이터를 모아서 배열 형태로 한방에 보내는 방법은 없을까 고민을 하다가 promise all() 메서드를 찾았다. Promise.all() 메서드를 간단히 설명하면 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다고 하는데 어떻게 사용해야 할까? Promise.all()을 사용하지 않을때: cons..

전부터 안쓰는 기능이 많은 CRA를 안쓰고 직접 빌드를 해봐야겠다고 생각만 해보다가 프로젝트에 vite를 사용한다고 해서 냅다 시작해 보았다. 장점 서버 구동시간 공식 문서에서 가장 먼저 어필하던게 서버 구동이 빠르다는 점이다. dependencies 그리고 source code 두 가지 카테고리로 나누어 따로 번들링 한다고 한다. dependencies는 개발하는 와중에 바뀌지 않을 내용이다. Esbuild를 사용한 사전 번들링으로 기존 번들러 (Webpack, Parcel 포함) 보다 10~100배 빠르다고 한다. 실행해 보니까 첫 구동때 체감이 될정도로 빠르다. 보통 5~6초 걸리던 프로젝트 시작시간이 한 2~3초 걸리는 느낌? 코드 갱신 시간 source code 부분 코드 갱신도 빠르다고 하는데..

개발을 하다보면 구글에 검색을 할때가 많다. 웹사이트에 들어가면 브라우저 안에서 무슨일이 벌어지는걸까? 한번 알아보았다. 1. 데이터를 받아오는 과정 사용자가 브라우저로 웹사이트에 접속하면 브라우저는 DNS서버(도메인 이름과 IP 주소를 서로 변환하는 서버) 에게 ip주소를 받아온다. 브라우저는 이 ip주소를 가지고 해당하는 서버를 찾아가서 웹사이트의 데이터를 요청한다 (이때 요청하는 데이터는 html, css, 스크립트 파일등 웹사이트를 구성하는 데이터들이다. HTTP Request 라고도 함) 서버는 데이터를 그냥 주지 않는다. 양쪽 모두 데이터를 주고 받을 준비가 되었는지 확인하는 3way handshaking를 진행하고 성공을 한다면 데이터를 보내게 된다. (HTTP Response) 2. 트리 ..