Bin's Blog

* JSON이란? Javscript Object Notation의 약자로, 데이터를 표현하기 위한 간단하고 일관된 형식이다. 텍스트 기반 형식으로, 사람과 컴퓨터가 모두가 이해하기 쉽고 다른 프로그래밍 언어와 호환되는 데이터 교환 형식 일종의 구조화된 리스트라고 생각할 수 있다. 리스트 안에는 중괄호('{}')로 둘러싸인 키-값 쌍으로 이루어진 항목들이 들어간다. 이 항목들은 쉼표로 구분된다. 예를 들어, "이름"과 "나이"라는 두 가지 정보를 담은 JSON을 보자. { "이름": "예시", "나이": 10 } 이름은 key이고, 예시는 그에 대응하는 값(value)이다. JSON에서 문자열은 큰따옴표로 둘러싸여 있으며, 숫자, 불리언, 배열, 다른 JSON 객체 등 다양한 데이터 유형을 표현할 수 있다..

Narrowing Type이 아직 하나로 확정되지 않았을 경우 Type Narrowing 써야한다. 타입을 정한다. typeof 연산자 활용 어떤 변수가 타입이 아직 불확실하면 if 문 등으로 Narrowing 해줘야 조작가능 (주의) if문 썼으면 끝까지 써야 안전 else, else if 안쓰면 에러로 잡아줄 수도 있다. Narrowing으로 판정해주는 문법들(현재 변수의 타입이 뭔지 특정지을 수 있기만 하면 다 인정해준다.) typeof 변수 속성명 In 오브젝트자료 인스턴스 instanceof 부모 function 함수(a : string | number) { if (typeof a === 'string'){ return a + "1" } else { return + 1 } 함수(123); Ass..

1. input input를 쓸 땐 반드시 끝내던지 아니면 이렇게 해야한다. - text, range, checkbox, date 등등 select는 옵션 선택 textarea는 작성할 수 있는 크기가 더 커짐 만약에 뭔가 입력시 코드 실행하고 싶으면 아래 두 개 작성 {}}> {}}> {}}> 하면 마우스를 올려 놨을때 코드가 작동한다. 이벤트핸들러 매우 많다. input에 입력한 값 가져오는 법 e = 이벤트 객체(지금 발생하는 이벤트에 관련한 여러 기능이 담겨 있다.) {console.log(e.target.value)}}> target은 이벤트 발생한 html 태그 value는 이벤트 발생한 html태그에 입력한 값 현재 span 태그를 눌러도 모달창이 나오는것은 그것을 감싸고 있는 h4 그리고 ..

1. 프록시 서버란? 프록시 서버는 중간자와 같은 역할을 하는 서버이다. 사용자의 컴퓨터와 원격 서버(웹 사이트 등) 사이에 위치하며, 사용자의 요청을 대신 처리해주는 역할을 한다. 장점 보안 강화: 프록시 서버를 통해 사용자의 실제 IP 주소를 숨기고, 원격 서버에 대한 접근을 제어할 수 있다. 이를 통해 사용자의 개인 정보 보호하고 인터넷 사용을 안전하게 할 수 있다. 캐싱 : 프록시 서버는 웹 페이지나 파일과 같은 인터넷 자원을 저장해두고(캐싱), 동일한 요청이 들어올 경우 저장된 자원을 제공함으로써 속도를 빠르게 한다. 네트워크 효율성 향상: 여러 사용자가 동일한 인터넷 자원을 접근할 때, 프록시 서버가 한 번만 원격 서버에 요청하여 자원을 가져온 후 여러 사용자에게 공유할 수있다. 이를 통해 네..

1.1.5 프록시 패턴 프록시 패턴은 컴퓨터 세상에서 "대리인"과 같은 역할을 하는 디자인 패턴이다. 프록시 패턴을 사용하면, 어떤 객체를 직접 사용하는 대신에 그 객체를 대신해주는 다른 객체(프록시)를 사용할 수 있다. 이렇게 하면 원래 객체의 기능을 보호하거나, 추가적인 작업을 수행할 수 있다. 예를 들어, 수업 시간에 친구가 질문을 하고 싶어하는데, 물어보기가 부끄러워 다른 친구가 대신해서 선생님한테 질문한다. 이때 친구가 프록시 역할을 하는 것이다. 다른 친구가 선생님한테 질문을 하고, 답변을 원래 한 친구한테 전달해준다. 그래서 간접적인 상호작용이 가능하다. 대상 객체를 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴 이를 통해 객체의 속성, 변환..

1. let let은 블록 레벨 스코프를 갖는다. 즉 let으로 선언된 변수는 블록 "{}" 내에서만 접근 할 수 있다. let으로 선언된 변수는 호이스팅이 발생하지만 변수가 선언되기 전에 접근하려고 하면 ReferenceError가 뜨게 된다. 이를 임시적 사각 지대(Temporal Dead Zone, TDZ)라고 부른다. (변수 선언과 초기화가 분리되어 있다.) let으로 선언된 변수는 재할당이 가능하지만, 재선언은 불가능하다. 예시 코드 console.log(name); // ReferenceError: name is not defined { console.log(name); // ReferenceError: Cannot access 'name' before initialization let nam..

1. 실행 컨텍스트란? 실행 컨텍스트는 컴퓨터 프로그램이 실행되는 동안 필요한 정보를 저장하고 관리하는 공간(실행할 코드에 제공할 환경 정보를 모아놓은 객체) 컨텍스트는 프로그램이나 시스템이 작동하는 특정 조건이나 상황. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜 스택에 쌓아올렸다가 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 우리가 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐이다. 실행 컨텍스트와 콜 스택 var a = 1; function outer() { function inner() { // undefined console.log(a); var a = 3; } inner(); // ..

1. Props modal 안에 다른 함수에 작성했던 state를 쓰고 싶은데? 모든 변수는 함수탈출 불가다. App 함수는 부모 Modal은 자식 이러면 자식이 부모가 가지고 있던 state 사용 가능하다. 부모 -> 자식 state 전송하는 법 작명이 귀찮으면 똑같은 이름을 쓰거라 props 파라미터를 자식 함수에 등록 후 props.작명 사용 props 전송은 오로지 부모 -> 자식만 가능(자식-> 부모 (x) , 같은 자식끼리(x) 전송 안 됨) 파라미터 문법은 다양한 기능을 하는 함수를 만들 때 사용 let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]); // 배경색 바꾸고 싶을때 { modal == true ? : null } function Modal(props..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 택배상자는 1번 상자부터 n번 상자까지 번호가 증가하는 순서대로 일렬로 놓아진다. 2. 컨베이어 벨트는 한 방향으로만 진행이 가능해서 1번 상자부터 내릴 수 있다. 3. 기사님이 원하는 순서가 아니면 잠시 보조 컨베이어 벨트에 놓는다. 보조 컨베이어 벨트는 마지막에 보관한 상자부터 꺼낼 수 있다. 4. 기사님이 원하는 순서대로 싣지 못하면 더 이상 싣지 않는다. 5. 기사님이 원하는 순서가 주어졌을 때 몇 개의 상자를 실을 수 있을까? ▶ 정답 코드 function solution(orde..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ▶ 문제 요약 1. 124 나라에서는 10진법이 아닌 자신들만의 규칙으로 수를 표현한다. 2. 124 나라에서는 자연수만 존재 3. 124 나라에는 모든 수를 표현할 때, 1, 2, 4만 사용한다. 4. 자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 리턴해라 ▶ 정답 코드 function solution(n) { let answer = ""; // 124 나라의 숫자를 인덱스에 매칭 let number = [4, 1, 2]; // n이 1일때까지 돈다 while (n) {..