도록

지난 11월에 프리랜서 계약을 해 3개월동안 일한 후기를 적고자 한다. 선택 배경나는 프리랜서 계약이 처음이다.프리들은 금액이 높은 대신 세금 너무 많이 내서 힘들어! 라는 후기들이 진짜인지 궁금했다. + 근로소득자와 사업소득자의 세금 계산이 궁금했다. + 어떤 것을 고려하면서 프리랜서 계약을 해야하는지도 알고 싶었다. 요약중개 서비스를 이용할 거라면, 계약서와 서비스 이용약관을 잘 보자! (내가 이용한 서비스의 이용약관) 후기보수 지급일을 조정할 수 있다. (특정 달 보수를 15일 정도 이후에 받고 싶다는 의사를 표했고, 계약서에 이 내용을 반영해 원하던 시점에 보수를 받았다.)중개 서비스와 발주사 간의 금액은 내가 알 수 없다.내가 원하는 최저 보수를 중개서비스에 전달하면, 발주사와 조정해 최종 금액..

연결 방법1. 키보드 유선 연결2. https://usevia.app/ 사이트 접속 후, 4번째 setting 탭에 들어간다3. 첫번째 탭인 키보드 모양의 configure 메뉴에서 authorize device 클릭해, via 설정할 키보드를 선택합니다.    키 맵핑 하는 방법은 키크론이 잘 설명해주기에, https://keychron.kr/via/?vid=12 요 페이지 보면서 하면 된다.      ⚠️ 아무리 권한을 줘도 configure 탭에 아무 반응이 없다면?1. via json 파일을 다운받기usevia.app에서 지원하지 않는 키보드를 설정하기 위해, 여기(https://epomaker.com/blogs/via-json/cidoo-abm066-usb-via-json-file?_pos=3&..

1. 크롬 개발자 도구Network 패널 : 네트워크 트래픽을 통해, 리소스의 크기와 로드 시점 등을 확인Performance 패널  : 웹페이지 로드 시 실행되는 모든 작업을 차트로 제공Lighthouse 패널  : 성능 측정 및 개선 방향 제시Coverage 패널  : 렌더링 과정에서 어떤 코드가 실행되었는지 보여준다. (특정 파일에서 극히 일부만 코드가 실행되었다면, 불필요한 코드가 많이 포함되었다고 판단한다)2. webpack-bundle-analyzer : webpack을 통해 번들링된 파일이 어떤 lib를 담고 있는지 보여주며, 불필요한 코드 위치와 전체에서 어느 정도의 비중을 차지하는지 알려준다. 3. React Developer Tool 의 Profiler 패널: 렌더링 발생 횟수, 렌더링..

머리 속 정리하기. 전문 용어 번역기를 주제로 사이드 프로젝트를 하려고 한다. 개발 전 미리 머리 속을 정리하고자 한다.  Why : 주제 선택의 계기는?: 지인이 건강검진에서 의심되는 병이 있어, 여러 검사를 받게 되었다. 그 검사 결과지에 적혀있는 글을 이해하기가 어려웠고, 내용을 이해하기 위해서는 다음 병원 방문일까지 기다려야 했다.  Pain point : 전문 용어는 어렵다.'어렵다'라는 단어가 공부할 때 많이 들어서 그런지, 생각할 겨를도 없이 '쉽게, 혹은 즐겁게!' 가 튀어나왔다.그치만 전문용어를 달달 외울 것도 아닐 뿐더러, 공부하는 것이 목표가 아니다. 공부보다는 커뮤니티 정도로 가벼웠으면 좋겠다 였다.내가 모르는 것을 잠깐 검색, 질문을 통해 해결하고 이러한 행위는 커뮤니티와 유사한 ..

정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 section으로 나누고, 나누어진 섹션에 아래 css을 적용시킨다.content-visibility: auto;            // 브라우저에게 해당 요소가 현재 뷰포트에 보이지 않을 때 렌더링을 건너 뛰기contain-intrinsic-size: 1000px;    // 스크롤바가 올바르게 뜨기 위해, 요소의 예상 크기를 설정 conetent-visibility가 가질 수 있는 값의 종류는?- visible : 아무런 효과 없음- hidden : 요소 생략 (dispaly:none처럼, 페이지 내 찾기/user-agent 접..

WebSocket만 써보고 SockJs는 처음 써보기에, 하나씩 기록해보려 한다.  1. install sockjs-clientyarn add sockjs-client @types/sockjs-client  2. socket 연결부의 예제 코드 추가import React, { useEffect, useRef, useState } from 'react';import SockJS from 'sockjs-client';const SocketTest = () => {  const [messages, setMessages] = useState([]);  const socketRef = useRef(null);  useEffect(() => {    socketRef.current = new SockJS('서버주소..