크롱의 Dev Log

리액트 컴포넌트와 숫자를 인자로 받아 숫자만큼 리액트 컴포넌트를 복제해서 반환하는 duplicate 함수를 만들었다. function duplicate(Component: JSX.Element, number: number) { return ( {Array.from({ length: number }).map((value, index) => ( ))} ); }그러자 JSX element type 'Component' does not have any construct or call signatures.ts(2604)라고 에러가 떴다. duplicate 함수의 인자로 리액트 컴포넌트를 만드는 consturctor를 넘긴 것이 아니라 만들어진 instance를 넘겨서 문제가 되었던 것이다. 아래와 ..

문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )}React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열은..

선수 과목 체계 등 선행 관계가 있는 자료구조를 정렬할 때 필요한 알고리즘이 바로 위상정렬(topological sort)이다. 방향이 있는 그래프(단, 사이클이 없어야 함) 정점들의 선행 순서를 위배하지 않으면서 모든 정점을 순서대로 나열하는 알고리즘이다. 유향 그래프(방향이 있는 그래프)에서 에지 가 있다면 정점u가 정점v를 선행한다.  위상 정렬 방법 ① 진입 차수(내차수)가 0인 임의의 정점 (선행자가 없는 정점) 출력 ② 출력한 정점에 부착된 모든 에지들을 제거하여 진입 차수 재계산 ③ 모든 정점이 제거될 때까지 ①~② 반복 ④ 진입 차수가 0인 것이 없으면, 그래프가 사이클을 포함한 것으로서 해가 존재하지 않음.  위상 정렬 알고리즘 (C언어) 아래와 같은 입력 형식의 사이클이 없는 방향그..

일단 관리 탭> 플러그인에서 코드 문법 강조 플러그인을 사용했다. (지금도 사용 중이긴 함) 하지만 폰트도 그렇고 마음에 안들어서 자체 css를 적용하기로 했다. 블로그 관리 > 스킨 편집 > html 편집 > css탭을 들어간다. 위에 원하는 폰트를 import 해준다. 이후 code태그의 스타일링 부분을 찾아간다. font-family를 원하는 폰트로 바꿔준다. 폰트 변경 이외에도 배경색, 마진, 패딩, 모서리 둥글게 등을 추가 설정해줬다. +) 원하는 웹폰트 찾는 법 구글 폰트에서 검색 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 개발자 도구로 스타일링이 잘 적용된..

JSX 전개 속성 컴포넌트에 배치하려는 모든 속성(props)을 알고 있다면 JSX를 사용하기 쉽습니다: var component = ; 가변 Props는 좋지 않습니다 어떤 속성(props)를 설정할지 모르는 경우, props를 나중에 추가하고 싶을 지도 모릅니다: var component = ; component.props.foo = x; // bad component.props.bar = y; 이는 나중에까지 올바른 propTypes를 확인할 수 없으므로 안티 패턴입니다. 이는 propTypes 오류가 암호화 스택 추적(cryptic stack trace)으로 끝남을 의미합니다. 이 시점에서 props는 불변으로 간주되어야 합니다. props 객체를 다른 곳에서 변경하면 예기치 않은 결과가 발생할 ..

상대 길이 단위(글꼴 기준) em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰인다. em: 부모요소의 폰트 사이즈에 대한 상대값. 부모요소의 폰트 크기가 정해져 있지 않다면 1em = 16px rem(root em): 최상위 root(요소)의 글꼴 크기에 대한 상대값. em과 달리 문서 전체에서 일관적인 크기를 가진다. 폰트 사이즈 이외에도 크기를 나타낼 때 쓰인다. %: 부모 요소를 기준으로 한 비율 표현. ex. 부모 요소의 폰트 사이즈가 10px이라면 font-size: 200%;(==20px)이다 ch: "0"의 너비를 기준으로 하는 상대값. ex: 소문자 "x"를 기준으로 한 상대값. 많은 글꼴에서 1ex는 0.5em의 값과..

#include 으로 불러와 사용하는 string 타입(자료구조)은 printf가 지원을 하지 않는다고 한다. 그렇기에 출력해보면 ???나 이상한 특수문자가 나온다. ex> string str = "Hello, World!"; printf("%s", str); //???로 출력 해결 방법은 간단하다. string 자료구조를 c_str()함수를 활용해 c-style의 string으로 변환해서 출력해주면 된다. ex> string str = "Hello, World!"; printf("%s", str.c_str()); // Hello, World!

git 폴더명 변경하기 $ git mv oldName newName위 명령어를 통해 바꿀 수 있다. 기존 폴더명 파일명을 앞에 입력하고 뒤에 새롭게 바꾸고 싶은 이름을 입력하면 된다. 로컬에서 변경한 파일명이 깃허브에서 적용 안되는 이유 로컬에서 변경한 파일명이 git에는 반영되지 않아 당황스러웠던 적이 있었다. 알아보니 git은 대소문자를 구분하지 않기 때문에 대소문자만 변경하였을 경우에는 에러가 발생할 수 있다고 한다. ex) foo라는 이름의 폴더를 Foo로 변경하는 경우 이 때는 조금 번거롭지만 두단계를 거쳐서 이름을 변경해주면 된다. $ git mv foo temp $ git mv temp Foo