JavaScript80 알고리즘 - 이진 탐색 탐색은 배열 형태로 주어진 데이터에서 원하는 값을 가진 데이터를 찾는 알고리즘이다.이진 탐색은 입력된 데이터가 정렬된 상태로 주어진 경우에 효과적으로 수행할 수 있다. 여기서는 데이터가 오름차순으로 정렬되어 있다고 가정한다. 먼저 큰 틀에서 심플하게 4단계로 생각해보았다.배열은 오름차순 기준이고, 탐색키 key 와 가운데 원소 값이 같다면 즉시 종료한다.가운데 원소를 기준으로 좌우로 배열을 쪼갠다.key 와 가운데 원소를 비교해서 작으면 좌배열 크면 우배열에서 검사를 다시 시작한다.key 를 찾을 때까지 1번부터 다시 반복한다. 재귀적 용법을 사용한 이진트리 알고리즘BinarySearch 라는 함수의 입력값은 arr과 right,left, key 라는 값이다.arr 은 오름차순 정렬된 배열이다.key 는.. 2024. 5. 19. 알고리즘 - 알고리즘이란 알고리즘이란 주어진 문제를 해결하기 위한 일련의 처리과정을 단계적으로 나열한 것입출력 / 명확성 / 유한성 / 유효성설계 → 기술 → 정확성 분석 → 효율성 분석 알고리즘의 기본 자료구조선형 자료구조 : 배열 / 연결 리스트 / 스택 / 큐비선형 자료구조 : 트리 / 그래프 알고리즘의 대표적인 설계기법- 분할 정복 방법- 동적 프로그래밍 방법 - 욕심쟁이 방법 알고리즘의 분석정확성 / 효율성 분석 (공간 복잡도 & 시간복잡도) - 시간 복잡도알고리즘을 실행시켜 완료까지 걸리는 시간으로알고리즘에서 수행되는 단위 연산의 총 횟수로 계산된다입력 크기의 함수로 표현하며 최악의 수행 시간을 사용한다 점근 성능입력 크기가 충분히 커질 때의 알고리즘 성능다항식의 수행 시간에 대해서 계수 없이 최고 차항 만을 표시- .. 2024. 5. 11. JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 디버거 (잘) 사용하고 싶다 디버거 사용이 손에 익지 않아 우리들의 콘솔로그로 디버깅을 주로 하였는데 손이 아파서 이제 타이핑을 못치겠다.. ("console": ..🤨?) 라는 핑계를 대면서 크롬에서 제공하는 디버깅 툴을 사용해 보려고 한다 이번에 포스팅을 정리해보며 한번이라도 더 손에 익기를 바라며 🙃 JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 그렇다면 우리의 디버거는 어디 숨어있을까 개발자 도구를 키면 [Sources] 라는 탭이 있다 [Sources] 탭을 클릭해보면 조금 복잡해보이지만 섹션이 크게 3개로 나뉘어 있다 소스파일들 디렉터리 소스파일들의 코드들 디버거 툴 우리가 사용할 디버거 툴은 빨간 박스로 표기해놓았다 좀더 자세히 살펴보면 Watch, Break.. 2024. 3. 27. JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 마우스 오버시 커서를 따라다니는 툴팁을 구현하며 리팩토링하는 과정을 간결하게 기록해보았다 이제는 어떻게 라는 질문이 머리속에 제일 먼저 맴돌기 시작한다 오늘 아침에 출근하면서 본 토스 컨퍼런스의 인트로 영상 문구가 생각났다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 최적화라는 단어에 대해 고심하게 되는 시기가 온 것이다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 첫번째 이슈 - useState mousemove 이벤트를 통해 실시간으로 좌표값을 받아와 useState 에 저장하여 → 툴팁에 style 값으로 넣어주는 방식을 사용하였다. 그렇게 되니 이슈가 생겼다. mousemove 시에 계속 .. 2024. 2. 1. JavaScript - 애니메이션 최적화하기 (requestAnimationFrame) 자연스러운 애니메이션을 구현하기 위해 사투를 벌인 스토리를 포스팅해보려고 한다 애니메이션은 여러 사진을 연속적으로 연결한 것이다. 그리고 그 사진을 프레임(Frame) 이라고 한다 1초 동안 보여줄 수 있는 최소한의 자연스러운 프레임의 갯수는 60 프레임 정도가 된다 그래서 Frame Per Seconds 라고 해서 60fps 라고도 한다 시계침 애니메이션을 구현하는 중이었다. 초침의 경우 초단위로 360도씩 돈다 처음에는 타이머 함수인 setInterval()를 사용하였더니 이슈가 생겼다 다른 이벤트와 겹치니 1초마다 움직여야할 애니메이션이 누락되어 뚝뚝 끊겨버렸다 JavaScript 로 애니메이션을 실행하면 Reflow 가 일어난다. (애니메이션으로 인해 Dom이 변경되기 때문에) "Reflow" .. 2024. 2. 1. JavaScript - Argument 란 (Feat. caller, callee) 함수를 공부하다보면 Argument 이야기가 나온다 Argument 이친구도 알아야겠다 싶어 포스팅를 쓰게 됬는데 caller와 callee 의 개념도 같이 알아야겠다 싶어 소금치듯 같이 뿌려보았다 JavaScript - Argument 란 (Feat. caller, callee) arguments, caller, 그리고 callee는 자바스크립트에서 함수와 관련된 속성이나 개념을 이다. 하지만 caller와 callee는 현재 사용되지 않거나 사용이 권장되지 않는다고 한다. (ES5부터는 caller와 callee의 사용이 제한, strict 모드에서는 arguments.callee가 금지) Argument arguments 는 유사 배열 객체이다 함수를 사용할 떄 매개변수로 여러개를 받는 상황이라면 .. 2023. 11. 19. JavaScript - 표현식 자바스크립트 뿐 아니라 프로그래밍 언어 기초공부를 하며 표현식이라는 단어를 참 많이 들은 것 같다. 표현식이 뭘까? 자세히 알아보자 표현식 표현식은 쉽게말해 값이 나오는 코드이다. (숫자 같은) 값들, 연산자, 변수 및 함수의 조합으로 이루어져 있다 const x = ___ 처럼 변수에 할당된 일반적인 표현식이 있고, const x = 이부분을 쏙 빼고 5 + 10 같은 알맹이만 사용하는 문장 표현식이 있다 // 변수에 할당된 표현식 (숫자 값들의 덧셈) const sum = 5 + 10; // 15로 평가 // 변수에 할당된 표현식 (변수와 연산자를 사용) const x = 20; const y = 30; const result = x * y; // 600으로 평가 // 문장 표현식 (변수에 할당x) .. 2023. 11. 17. JavaScript - throw / try / catch / finally throw / try / catch / finally 이친구들은 참 많이도 접하고 많이도 공부했다. 근데 따로따로 공부했다 🥲 그래서 따로 놀았다 이제는 개념을 한번더 뭉쳐줄 타이밍이다 throw, try, catch, finally 이 친구들은 전부다 예외 처리 라는 목표을 향해 뭉친 친구들이다 throw 는 예외를 던져(throw)버리고 try 는 예외 없이 잘 실행될 경우(happy case) catch 는 throw가 던진 에러를 캐치해서 뒷처리를 해주고 finally 는 예외가 있던 없던 그냥 실행된다 Throw 자바스크립트에서 예외는 - 런타임에러가 일어날 때 발생하거나 - throw 문으로 발생시킬 수도 있다 예외가 발생하면 인터프리터는 실행을 중단하고 가까운 예외처리기로 넘긴다 (이때 ca.. 2023. 11. 14. JavaScript - Call By Value, Call By Reference 함수형 컴포넌트를 다루다 보니 정작 함수에 대해 모르는 부분이 많다는 생각이 들었다 그래서 이번 포스팅은 Call By Value, Call By Reference 를 정리해 보았다 함수를 호출하는 방법은 Call By Value, Call By Reference 요 두 가지 방법이 있다 → 값을 호출할거냐 참조를 호출할거냐 두가지 방식으로 본다 → 내가 이해한 개념은 함수 안에서 값을 어떻게 다루느냐 였다 이 부분을 이해하려면 c 언어의 포인터와 스택의 개념을 알아야 할 필요가 있다 그리고 인자와 매개변수의 차이도 잘 알아야 한다 (백문이 불여일견 ) function getUser(name, age) { // name 이랑 age 가 매개변수 return { name, age }; } getUser('.. 2023. 11. 9. 이전 1 2 3 4 ··· 9 다음 반응형
