인생 1회차 (First-Life) Ing

오늘 TIL 3줄 요약 코드는 중요한 의사소통의 일환이다. 올바른 형식을 지키서 코드를 짜자(가로, 세로) 팀 규칙은 개인의 선호보다 우선! 책에서 기억하고 싶은 내용 코드 형식은 중요한 의사소통의 일환이다. 오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다. 신문 기사처럼 작성하라 (이름은 간단하면서도 설명이 가능하게, 이름만 보고도 올바른 모듈을 살펴보고 있는지 아닌지를 판단할 정도로 신경써서 짓기. 아래로 내려갈수록 의도를 세세하게 묘사) 개념은 빈 행으로 분리하라 세로 밀집도 (서로 밀접한 코드 행은 세로로 가까이 놓여야 함) 수직 거리 (같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 연관성을 표현한다. 여기서 연관성이란 한 개념을 이해하는 데 다른 개염이 중요..

오늘 TIL 3줄 요약 주석은 필요악이다 주석 대신 코드로 의도를 표현하라 주석은 반드시 필요할 때만, 최소한으로 사용하라 책에서 기억하고 싶은 내용 주석은 '필요악' 이다. 우리에게 프로그래밍 언어를 치밀하게 사용해 의도를 표현할 능력이 있다면, 주석은 전혀 필요하지 않으리라. 하지만 그렇지 못해서 쓰는 것이 주석 (그만큼 주석은 안쓰는 것이 좋다.) 주석은 나쁜 코드를 보완하지 못한다. 나쁜 코드를 주석으로 설명하려 애쓰는 대신 코드를 수정하라. 코드로 의도를 표현하라 - 법적인 주석 -정보를 제공하는 주석 -의도를 설명하는 주석 -의미를 명료하게 밝히는 주석 -결과를 경고하는 주석 -TODO주석 -중요성을 강조하는 주석 -주절거리는 주석 -같은 이야기를 하는 주석 -오해할 여지가 있는 주석 -의무적..

오늘 TIL 3줄 요약 '한 가지'만 하는 함수를 만들어라 중복을 줄여라 잘 읽히는 이야기처럼 코드를 풀어가라 책에서 기억하고 싶은 내용 작게 만들어라 - 가로 100자, 100줄 이상 금지. 20줄도 김 블록과 들여쓰기 - if/else문, while문 등에 들어가는 블록은 한 줄이어야 한다는 의미 = 중첩구조가 생길만큼 함수가 커져서는 안됨 한 가지만 해라 - 한 가지 기능만 하되, 그 기능이 잘 동작해야 함 함수가 '한 가지' 기능만 수행하는지 확인하는 방법? 지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한 가지 작업만 한다. 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면 그 함수는 여러 작업을 하는 셈. 함수 당 추상화 수준은 하나로!..

오늘 TIL 요약 문장이나 문단처럼 읽히는 코드 아니면 적어도 표나 자료 구조처럼 읽히는 코드를 짜는 데 집중하자 책에서 기억하고 싶은 내용 의도를 분명히 밝혀라 -변수(혹은 함수나 클래스)의 존재 이유, 수행 기능, 사용 방법 그외 주석이 필요하다면 의도를 분명히 드러내지 못한 것 => 문제는 코드의 단축성이 아니라 함축성 그릇된 정보를 피하라 - 일관성이 떨어지는 정보는 그릇된 정보 의미 있게 구분하라 발음하기 쉬운 이름을 사용하라 검색하기 쉬운 이름을 사용하라 (ex. 7, e 조심) 인코딩을 피하라 자신의 기억력을 자랑하지 마라 (루프에서 반복 횟수를 세는 변수를 쓸 때 'l'은 절대 안됨!) 기발한 이름은 피하라 한 개념에 한 단어를 사용하라 말장난을 하지 마라 해법 영역, 문제 영역에서 가져온..

오늘 TIL 3줄 요약 중복을 피하라 한 기능만 수행하라 제대로 표현하고, 작게 추상화 하라 책에서 기억하고 싶은 내용 "사소한 곳에서 발휘하는 정직은 사소하지 않다" "책임 있는 전문가라면 프로젝트를 시작할 때 생각하고 계획할 시간을 확보해야 한다" 기계가 실행할 정도로 상세하게 요구사항을 명시하는 직업, 바로 이것이 프로그래밍. 이렇게 명시한 결과가 바로 코드다. 궁극적으로 코드는 요구사항을 표현하는 언어라는 사실을 명심한다. 나쁜 코드는? 개발 속도를 떨어뜨린다. 팀 생산성이 떨어진다. 좋은 코드를 사수하는 일은 우리 프로그래머들의 책임이다. 깨끗한 코드는? '보기에 즐거운' 코드, 한가지에 집중한 코드 - 비야네 스트롭 스트룹 잘 쓴 문장처럼 읽히는 코드 - 그래디 부치 '다른' 사람이 고치기 쉬..

하나씩 변경하기 const element = document.querySelector("h1") element.style.color = 'blue' // 변수 값을 사용 하고 싶다면 백틱 기존에 정의된 style에 새로운 속성 추가 여러개 변경하기 const element = document.querySelector("div") element.style.cssText = 'color:blue; background-color:red' // 변수 값을 사용 하고 싶다면 백틱 기존에 정의된 style을 지우고, cssText로 덮어씀 참고링크 : https://hianna.tistory.com/671

특정 날짜와 오늘 날짜 사이의 시간 구하기 (feat. D-day 계산기) getTime() 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자 결과값이 밀리 초 단위로 나오기 때문에 변환해주어야함 const date = new Date(); const HappyNewYear = new Date("2023-01-01T00:00:00"); const Dday = HappyNewYear.getTime()-date.getTime(); // 22026379074

canvas html5 의 한 요소로 context를 가짐 (요소안에서 픽셀에 접근할 수 있음) 2개의 사이즈를 가져야 함(CSS사이즈, pixel modifier(실제픽셀사이즈)) strokeStyle( ) : 기본색 lineWidth( ) : 선의 너비 beginPath( ) : 클릭하지 않을 때 선을 만듦 => 경로생성 moveTo(x,y) : x,y 좌표로 path를 옮김 => 선 시작 좌표 lineTo(x,y) : 이전 위치에서 지금 위치까지 선을 만듦 => 선 끝 좌표 stroke( ) : 선을 그음 - 마우스를 움직이는 내내 발생 => 선 그리기 * Canvas MDN https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); 에러코드 Attempted import error: 'useHistory' is not exported from 'react-router-dom'. 해결방법 react-router-dom v6로 업데이트 되면서 useHistory가 useNavigate로 바뀜

에러코드 1. Error: [App] is not a component. 2. export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'. 해결방법 react-router-dom v6로 업데이트 되면서 Switch를 쓸 수 없게 됨 Switch -> Routes 로 바꿔서 쓰기 element 로 컴포넌트 추가 // 업데이트 전 function App({ authService }) { return ( ); } // 업데이트 후 function App({ authService }) { return ( ); }