코딩기록

const [orgTreeHeight, setOrgTreeHeight] = useState(ROW_HEIGHT); const [openStateTrigger, setOpenStateTrigger] = useState(0); // 트리 높이 계산 const getVisibleCount = (nodes: OrgNode[], tree: TreeApi): number => { let count = 0; const walk = (list: OrgNode[]) => { list.forEach((n) => { count++; if (tree.isOpen(n.id) && n.children?.length) { walk(n.children); ..

왼: 내가 원하는 내부 스크롤/ 오: 문제 현상 프로젝트 내 특정 레이아웃에서 의도된 것은 핑크색 박스 내부 스크롤이었다.그러나 실제 실행 환경에서는 의도와 다르게 전체 페이지 에 세로 스크롤이 발생하는 문제가 발견되었다. 처음에는 다음 문제들을 의심했다.레이아웃 구조의 height 계산 오류overflow-y 설정 충돌상위 컨테이너의 min-height특정 컴포넌트 padding/line-height로 인한 미세 overflow커스텀 유틸리티 클래스(u-*)의 영향그러나 동일한 레이아웃/컨텐츠 길이를 가진 다른 페이지에서는 정상적으로 내부 스크롤만 동작하는 것을 확인했다. 그래서 내부 요소들을 하나하나 제거해가며 문제되는 곳을 찾았다. 문제 페이지에서 스크롤을 발생시키는 요소를 브라우저 DevTool..

const { MongoClient } = require("mongodb");const uri = `mongodb://localhost:27017`;const client = new MongoClient(uri);async function run() { const database = client.db("firstDB"); const users = database.collection("users"); // 입력 create const userData = await users.insertOne({ name: "hongshii", age: 100, }); const userList = [ { name: "user1", age: 100, }, { ..

테이블 📕: 어떤 주제에 관련된 데이터들의 집합!(ex. 유저테이블, 게시물 테이블, 댓글테이블 등) 테이블의 속성인 열과 각각 데이터인 행으로 이루어져있음.레코드 🎬: 행, 레코드, 다큐먼트, 등 다양한 이름으로 불리지만 말그대로 데이터를 말함열 ⚙: 필드, 속성, 열 다양한 이름으로 불림, 데이터의 속성의 단위임.스키마 🧾: 데이터베이스 설계도 같은 느낌임. 어떤테이블이 있고 각 테이블에 어떤 필드들이 있고 그 필드에서 받아야하는 값은 뭔지 이런 데이터베이스를 설명해둔 것. 대충 이런느낌주키🦾: 사실 pk로 더 많이 불림, 각 데이터의 주민등록 id라고 생각하면됨. 반드시 유니크해야하고 모든 데이터들이 pk를 가지고 있어야함.외래키👩🏼‍🤝‍🧑🏽: foreign key라고 함 테이블간에..

9. 변수와 가독성변수를 엉터리로 사용하면- 변수의 수가 많을수록 기억하고 다루기 더 어려워진다.- 변수의 범위가 넓어질수록 기억하고 다루는 시간이 더 길어진다.- 변수값이 자주 바뀔수록 현재값을 기억하고 다루기가 더 어려워진다. 📌변수 제거하기now = datetime.datetime.now()root_message.last_view_time = now/// =>root_message.last_view_time = datetime.datetime.now()now 변수가 꼭 필요한가? 그렇지 않다.datetime.datetime.now()는 그 자체로 명확하다. 📌변수의 범위를 좁혀라- 변수가 적용되는 범위를 최대한 좁게 만들어라. - 많은 메소드를 정적 static으로 만들어서 클래스 멤버 접근을..

8. 거대한 표현을 잘게 쪼개기📌 설명변수- 커다란 표현을 쪽개는 가장 쉬운 방법은 하위표현을 담을 '추가 변수 = 설명 변수" 를 만드는 것1. if line.split(':')[0].strip() == "root": ...2. username = line.split(':')[0].strip() if username == "root"1, 2 동일한 코드이지만 2번은 설명 변수를 사용한 예 📌 요약변수- 커다란 코드의 덩어리를 짧은 이름으로 대체하여 더 쉽게 관리하고 파악하는 목적을 가진 변수if (request.user.id == document.owner_id) { // 사용자가 이 문서를 수정할 수 있다.}if (request.user.id != document.owner_id) { // 문서..

7. 읽기 쉽게 흐름제어 만들기 📌 조건문에서 인수의 순서1. if (length >= 10)2. if (10 bytes_received)같은 코드인데 왜 1번이 읽기가 더 편할까?왼쪽오른쪽값이 더 유동적인 '질문을 받는' 표현더 고정적인 값으로 , 비교대상으로 사용되는 표현 📌 if/else 블록의 순서- 부정이 아닌 긍정을 다루어라.즉 if(!debug) 가 아니라 if(debug)- 간단한 것을 먼저 처리하라. - 더 흥미롭고, 확실한 것을 먼저 다루어라 if (url.HasQueryParameter("expand_all")) { for (int i = 0; i- 코드를 보자마자 expand_all이 무엇인지 궁금해 할 것이다. 더 흥미롭고 긍정하는 부분이므로 이를 먼저 다르는 것이 좋다. ..

6. 명확하고 간결한 주석 달기 📌 주석을 간결하게 하라// int는 CategoryType이다// 내부 페어의 첫 번째 float는 'score'다.// 두 번째는 'weight'다.typeof hash_map> ScoreMap;- 주석을 왜 세줄이나 쓰나?// CategoryType -> (score, weight)typedef has_map> ScoreMap- 주석이 세줄 필요할 때도 있지만 이 경우는 아니다. 📌 모호한 대명사는 피하라- it (x) > the data (o) 📌 엉터리 문장을 다듬어라❌ # 이 URL을 전에 이미 방문했는지에 따라서 다른 우선순위를 부여한다.⭕ # 전에 방문하지 않은 URL에 높은 우선순위를 부여하라. 📌 함수의 동작을 명확하게 설명하라.// 이 파일에 담..

5.주석에 담아야 하는 대상 - 주석의 목적은 코드를 읽는 사람이 코드를 작성한 사람만큼 코드를 잘 이해하게 돕는 데 있다. 📌 설명하지 말아야하는 것- 코드에서 빠르게 유추할 수 있는 내용은 주석으로 달지 말라.- 나쁜 이름에 주석을 달지 말고 이름을 고쳐라- 나쁘게 작성된 코드를 보정하려고 애쓰는 주석을 달지 말고 코드를 수정해라// 반환되는 항목의 수나 전체 바이트 수와 같이// Request가 정하는 대로 Reply에 일정한 한계를 적용한다.void ClieanReply(Request request, Reply reply);== > 'clean'이 의미하는 바를 설명하지 말고 '한계를 적용한다'는 부분을 애초에 함수명에 포함하기void EnforceLimitsFromRequest(...) 📌 ..

3. 오해할 수 없는 이름들📌 clip(text, length)-> '문단을 처음부터 length만큼 잘라낸다'를 원하면 Truncate(text, max_length)가 더 나음. 📌 경계를 포함하는 범위는 first/ last📌 경계 포함/ 배제하는 범위는 begin/ end 📌 경계를 포함하는 한계값을 다룰 때는 min, max* 고객이 한 번에 10개 이상의 품목을 구매하지 못하게 한다.CART_TOO_BIG_LIMIT = 10if(num_items() >= CART_TOO_BIG_LIMIT) {...}❗오류: 11개까지 포함됨.>= 을 >로 고치면 되지만 이름을 MAX_ITEMS_IN_CART로 고쳐야 의미 전달이 확실해짐. ** 항상 최악의 경우를 가정하고 이름의 의미가 잘못 이해되는 ..