My Boundary As Much As I Experienced

직관적으로 오브젝트의 타입 지정은 아래처럼 하면 될거같다. const person: object = { name: "bumang", age: 30, }; 하지만 이건 틀렸습니다~ object라고 타입지정을 해버리면 타입스크립트는 이게 빈 객체{} 인줄 안다. 빈 객체가 아니라 안에 속성들이 있다면 그 속성들의 타입을 모두 지정해줘야 한다. const person: object = { name: "bumang", age: 30, }; // 라고 쓰면 const person: {} = { name: "bumang", age: 30, } // 처럼 쓴 것과 같다. // 둘 다 안 된다. 타입스크립트에서 객체의 타입을 명확히 기입하려면 아래처럼 하면 된다. const person: { name: string; ..

자바스크립트에서 없는 값을 호출하면 런타임 시 undefined가 나온다. 즉 아래처럼 person이란 객체가 있을 때 nickname이란 속성이 없는데 참조를 해오면 undefined가 나오고, 그곳에 메소드라도 체이닝 되어 있었으면 reference error 뜨는거다. 하지만 타입스크립트는 그런 가능성을 일절 차단하기 위해서 컴파일을 해주지 않는다. 컴파일 에러에서 타입이 없거나 참조할 수 없는 값들을 다 솎아내서 고치라고 프로그래머에게 말해준다. 실사용 서비스에서 에러 터지는 것보다 좀 귀찮아도 고치라는 잔소리해주는게 더 낫기 때문에 타입스크립트를 쓴다. const person = { name: "bumang", age: 30, }; // 타입 추론으로 name: string; age: numbe..

타입스크립트 내에서 이 상수의 타입은 5이다. constant(상수)이기 때문이다. const num1 = 5 반면 이 변수의 타입은 number이다. 재할당이 일어날 가능성이 있기 때문이다. let num2 = 5 사실 아주 명확하게 쓰려면 : number를 붙이면 된다. 하지만 충분히 TS가 추론 가능한 변수는 굳이 타입을 안 적어도 된다. (오히려 일일이 다 안 적는게 깔끔하다.) let num2: number = 5 하지만 아래처럼 초기화만 할 경우엔 타입을 같이 적어주는게 좋다. 아니면 계속 any타입으로 남는다. // let num3 이 아니라, let num3: number;

메모이제이션 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법 그렇다면 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까? React.memo()는 props의 값으로 변경을 확인을하고 useCallback()과 useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인한다. React.memo() - 컴포넌트 자체를 메모이제이션 - 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않는다. useCallback() - 함수 자체를 메모이제이션 - 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성 - 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCall..

리액트에서 동적으로 컴포넌트를 추가해주고 싶을 때 map 메소드를 주로 사용한다. 그런데 map 메소드가 순회할 때 JSX코드를 뱉어낼 때 key인자가 없다면 리액트가 개발자 도구에 경고 메시지를 출력한다. 그런데 왜 key props가 필요한지를 알아보자 이유: 렌더링 최적화 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 만약 Key가 없다면 배열에서 무언가 수정하거나 삭제하면 전체 배열을 다시 렌더링하게 된다. 그러나 Key를 넣어준다면 해당 instance만 수정하거나 삭제하여 불필요한 재렌더를 방지할 수 있다. 주의할 점: map((value, idx) => { return }) 처럼 2번째 인자를 key에 넣는 것도 좋지 않다. 에러를 없애기 위해 임시 방편..

시큐어 코딩 안전한 소프트웨어를 개발하기 위해, 소스코드 등에 존재할 수 있는 잠재적인 보안약점을 제거하는 것 보안 약점을 노려 발생하는 사고사례들 SQL 인젝션 취약점으로 개인유출 사고 발생 인증함수(입력값) 입력값으로 "truthy) //주석" 같은걸 주면 인증함수(truthy) //주석) ... 로 되어 나머지 코드는 주석처리되어 뚫린다고 합니다. URL 파라미터 조작 개인정보 노출 URL파라미터에 중요한 개인정보 등이 있을 때 이를 유추하여 빼오는 기술 무작위 대입공격 기프트카드 정보 유출 Brute Force로 특정 값 유추해오기 안전하지 않은 코드 String query "SELECT * FROM users WHERE userid = '" + userid + "'" + "AND password..

클린코드 클린코드란, 가독성이 높은 코드를 말한다. 리팩토링 프로그램의 외부 동작은 그대로 둔 채, 내부의 코드를 정리하면서 개선하는 것을 말함 보통 코드를 유지보수하면서 동시에 클린 코드로 전환하는 것 모두 리팩토링에 해당된다. 리팩토링이 필요한 코드는? 중복 코드 긴 메소드 거대한 클래스 Switch 문 절차지향으로 구현한 코드 리팩토링 예제 1. 범용적인 이름을 쓰지않고 구체적인 이름을 쓴다. // 수정 전 public int getFoodPrice(int arg1, int arg2) { return arg1 * arg2; } // 수정 후 public int getTotalFoodPrice(int price, int quantity) { return price * quantity; } 2. 중복 ..

Props를 자손으로 쭉쭉 내려다보내다보면 props가 어디까지 보내지는지 그 깊이를 알기 어려워지는 현상. 3~4개면 어떻게든 파악을 할텐데, depth가 15개 이상이면? props가 어떻게 보내지고 있는지 파악하는 것 자체가 시간이 든다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function SecondComponent({ content }) { return ( I am the second component; ); } fun..

파일 시스템 - 컴퓨터에서 파일이나 자료를 쉽게 발견 할 수 있도록, 유지, 관리하는 방법이다. 즉, 저장매체에는 많은 파일이 있으므로, 이러한 파일을 관리하는 방법을 말한다. - 사용자 영역이 아닌 커널 영역에서 동작 - 파일을 빠르게 읽기, 쓰기, 삭제 등 기본적인 기능을 원활히 수행하기 위한 목적 파일 시스템 특징 - 계층적 디렉터리 구조를 가진다. - 디스크 파티션 별로 하나씩 둘 수 있다. 파일 시스템의 역할 - 파일관리 : 파일 저장, 참조, 공유 - 보조 저장소 관리 : 저장 공간 할당 - 파일 무결성 메커니즘 : 파일이 의도한 정보만 포함하고 있음을 의미 - 접근 방법 : 저장된 데이터에 접근할 수 있는 방법 제공 파일 시스템 개발 목적 - HDD와 메인 메모리 속도차 줄이기 - 파일 관리..

CPU Register 레지스터는 컴퓨터에서 가장 빠른 메모리로 CPU 내부에 존재한다. 레지스터에 데이터를 읽고 쓰는 것은 0~1 CPU 사이클이 필요하므로 약 0ns ~ 0.25ns의 지연 시간(latency)이 생긴다. 레지스터의 크기는 CPU가 32비트냐 64비트냐에 따라 다른데 요즘엔 거의 64비트 CPU를 사용하므로 레지스터 하나는 8바이트이다. 캐시 메모리 주기억장치에 저장된 내용의 일부를 임시로 저장해두는 기억장치 CPU와 주기억장치의 속도 차이로 성능 저하를 방지하기 위한 방법 CPU가 이미 봤던걸 다시 재접근할 때, 메모리 참조 및 인출 과정에 대한 비용을 줄이기 위해 캐시에 저장해둔 데이터를 활용한다 캐시는 플리플롭 소자로 구성되어 SRAM으로 되어있어서 DRAM보다 빠른 장점을 지님..