본문 바로가기

공부81

javascript - 알고리즘 연습 정리보다는 그때그때 풀이를 올리는 식으로 올려보겠다. 문제1 : 제곱근 구하는 문제 - 자바스크립트 제곱 표현 방법은 Math.pow()메서드를 사용한다. - 음수의 소수 지수는 허수로 NaN을 반환한다. - 계산 가능 범위를 넘어서면 Infinity를 반환한다. ex) 2^3 = 8 ========== var num1 = Math.pow(2,3) - 앞 자리 숫자는 밑, 뒷자리 숫자는 지수를 의미한다 (2의 3제곱) 문제2 : 유주는 놀이공원 아르바이트 중입니다. 그런데 놀이기구마다 키 제한이 있습니다. 유주가 담당하는 놀이기구는 키가 150cm 이상만 탈 수 있습니다. 입력으로 키가 주어지면 키가 150이 넘으면 YES를 틀리면 NO를 출력하는 프로그램을 작성하세요. const msg = prompt.. 2024. 1. 21.
2023.01.21 - React 데이터 흐름 1. 리액트는 단방향 데이터 흐름을 가지고 있다. 2. 컴포넌트 단위로 생각하자(컴포넌트 설계방식) - 리액트의 개발방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작한다. - 프로토 타입에서 컴포넌트를 찾아 컴포넌트를 만들고 페이지를 조립한다. -> 샹향식(bottom-up) 으로 만든다.( 테스트가 쉽고 확장성이 좋음) 3. 데이터는 위에서 아래로 흐른다. - 단방향 데이터 흐름 - 컴포넌트는 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. - 데이터를 전달하는 주체는 컴포넌트가 된다. (데이터 흐름이 하향식임을 의미/ top-down) 2023. 2. 6.
2023.01.20 - React Hook / useRef - useRef : .current 프로퍼티로 전달된 인자(initilaValue)로 초기화된 변경가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. - useRef 는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. - useRef는 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있다. 사용 예) focus 1) useRef 를 사용하기 위해 authorInput, contentInput 객체 생성 더보기 const authorInput = useRef(); const contentInput = useRef(); import { useRef, useState } from "react"; // us.. 2023. 1. 30.
개발자로서 생각해봐야 할 것들 https://hoorooroob.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A1%9C%EC%84%9C-%EB%82%B4%EA%B0%80-%EC%8B%A0%EA%B2%BD-%EC%93%B0%EB%8A%94-%EC%8D%A8%EC%95%BC%EB%A7%8C-%ED%95%98%EB%8A%94-%EA%B2%83%EB%93%A4 개발자로서, 내가 신경 쓰는/ 써야만 하는 것들 다른 개발자와 차별화 둘 수 있는 것 stackoverflow reputation Code Wars(coding Kata Score) 오픈 소스 컨트리뷰션 개인 프로젝트(포트폴리오) Deep Dive 한 블로그 글 작성 발표 당연하게 알아야 만 하는 것 내.. hoorooroob.tistory... 2022. 8. 29.
2022.08.21 - optimizing performance성능 최적화 ** 리액트는 필요할때만 랜더한다. - reconciliation 재조정 리액트는 컴포넌트에서 prop이나 state가 변경될 때, 직전에 렌더링된 요소(element)와 새로 반환된 요소를 비교하여 실제 DOM을 업데이트 할지 말지 결정해야 한다. 이때 두 element가 일치하지 않으면 리액트는 새로운 요소로 DOM을 업데이트 하는데, 이러한 프로세스를 reconciliation이라고 한다. - dom 엘리먼트의 타입이 다른 경우: 이전 트리를 버리고 완전히 새로운 트리를 구축 - dom 엘리먼트의 타입이 같은 경우: 두 엘리먼트의 속성(attribute)을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 업데이트 한다. 1. 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, .. 2022. 8. 21.
2022.08.15 - Unit Test, JEST, TEST 코드작성 - JavaScript Unit Test : 통합테스트에 비해 빠르고 쉽다. 통합테스트를 진행하기 전에 문제를 찾아 낼 수 있다. (단, 통합테스트 성공 보장은 없음) 테스트 코드가 살아있는(동작을 설명하는) 명세가 됨테스트를 읽고 어떻게 동작하는지도 예측 가능함 선 코딩 후, 몰아서 단위테스트가 아니라 TDD를 해야함단위테스트를 작성하고, 그것에 맞는 코딩을 작성하는 버릇이 필요 - Jest Javascript testing FrameWork로 CRA에서 기본적으로 제공하는 test 로서 입지를 다져 대중적으로 쓰이고 있음 facebook의 openSource로 가장 핫한 테스트 도구 Easy Setup, Instant Feedback(고친 파일만 빠르게 테스트 다시 해주는 기능 등) Snapshot .. 2022. 8. 15.