전체 글84 빅오 표기법(Big O Notation) 자바스크립트로 프로그래머스 입문 문제만 풀다가 다음단계 문제로 넘어가면서 어려움을 많이 느꼈다. 유데미에 Javascript 알고리즘 & 자료구조 마스터 클래스를 진즉 결제했지만 이제는 봐야할 때인것 같아서 취업준비하며 알고리즘을 같이 공부하려고 한다 이 클래스의 1장은 빅오 표기법이고 알고리즘에 대해 설명하려면 필수적으로 훑고 가야하는 파트 인것 같아 정리를 해보려고 한다 # 빅오(Big O) 입력된 내용이 늘어날 수록 알고리즘에 실행 시간이 어떻게 변하는지 설명하는 공식적인 방식 함수 실행 시간이 변하는 관계를 의미, 입력의 크기와 실행시간의 관계 쉽게 말하면 알고리즘의 효율성을 표기해주는 표기법! 알고리즘의 효율성은 데이터 개수 n개가 주어졌을 때 덧셈, 뺄셈, 곲셈, 나눗셈 같은 기본 연산의 횟수.. 2023. 3. 15. 정규표현식(Regular Expression) 정규표현식은 문자열의 일정한 패턴을 표현하는 규칙이다.(정규식이라고도 부름) 자바스크립트에서는 RegExp 객체(RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용)와 RegExp 메서드, 문자열 메서드를 이용해 정규표현식을 사용할 수 있다. 1. 정규식 리터럴 사용 const reg = /ab+c/; 2. RegExp 객체의 생성자 함수 호출 const reg = new RegExp("ab+c"); 정규식 패턴 작성 시, 정해진 규칙에 따라 작성 # 정규표현식이 필요할 때 - 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 - 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 - 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수.. 2023. 2. 12. [문제 해결] 리액트 console이 2번씩 찍히는... 리액트를 처음 다룰 때 이 값이 잘 넘어왔는지 연결이 잘되는지를 확인하기 위해 주로 console에 아무거나 값을 찍어본다던지 event.target을 찍어본다던지 console을 자주 사용하는데 그때마다 콘솔이 2번씩 찍히곤 하는 경험을 한다. 워낙 많은 사람들이 궁금해 하는 문제라서 그런지 구글링에 답이 수두룩하게 나와서 나도 정리를 해놓고자했다 리액트 console이 2번씩 찍히는 이유를 알기전에 먼저 StrictMode가 무엇인지를 알아야 한다 # StrictMode 란? : 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구 -Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 -애플리케이션 내 어디서든 strict모드 활성화 가능 StrictMod.. 2022. 11. 18. [Hook] useContext useContext란? context 객체에서 반환된 값을 받아 그 context의 현재 값을 반환한다 - context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value의 값에 의해 결정된다 -컴포넌트에서 가장 가까운 가 갱신되면 useContext는 그 provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다 -상위컴포넌트에서 React.memo 또는 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트 자체에서 부터 다시 렌더링 된다 useContext로 전달되는 인자는 context 객체 그 자체여야 한다 맞는사용 : useContext(MyContext) / 틀린사용 : .. 2022. 10. 23. [React] Context API Context Context API는 리액트 프로젝트에서 단계마다 일일이 props를 넘겨주지 않고 전역적으로 사용할 데이터가 있을 때 유용한 기능이다 -예시 : 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 - 로그인 데이터, 웹 내 사용자가 쓰는 설정 파일, 테마, 언어 등 다양하게 컴포넌트간 공유되어야할 데이터로 사용 - redux, react-router, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다 # Context API 사용법 createContext import {createContext} from 'react'; const MyContext = createContext({color:'black'}); export default .. 2022. 10. 23. [React] Immer란? Immer 란? React에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리 Immer 라이브러리를 사용하면 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 해줄 수 있다. React 컴포넌트에서 상태를 업데이트 할 때불변성을 지키는 것은 매우 중요하다고 명시하고있고 Immer를 검색하면 제일먼저 보이는 것이 불변성이다 # 불변성이란? 불변성을 지킨다는 말은 '기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다' 내가 이해한 '불변성을 지킨다' 는 배열 array가 있을 때 이 array의 요소를 직접 수정하지 않고 추가 : concat(인자로 주어진 배열이나 값을 기존 배열과 합쳐서 새로운 배열은 만든다) 삭제 : filter(주어진 조.. 2022. 10. 20. CSR(Client Side Rendering)과 SSR(Server Side Rendering) CSR(Client Side Rendering) : 렌더링이 클라이언트쪽에서 일어난다 . 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식 SPA(Single Page Application)은 CSR방식을 채택 # CSR의 과정 -클라이언트에서 초기화면을 로드하기 위해 User가 서버에 요청 보냄 -서버는 렌더링 가능한 HTML 파일을 만든다(리소스 체크, 컴파일 후 왼성된 HTML 파일) -클라이언트에 전달되는 순간 HTML은 즉시 렌더링 되나 사이트 자체 조작은 불가(js파일 받기 전) -화면에 표시하는데 필요한 완전한 리소스의 응답을 함(모든 js파일 다운받는 과정, 초기 로딩 시간 오래걸림) -JS파일 컴파일 후 웹페이지 상호작용 가능 # CSR의 장점 - 변경된 부분과 관련된 데이터.. 2022. 10. 20. SPA(Single Page Application) vs MPA(Multi Page Application) SPA(Single Page Application) 인터렉션이 발생할때마다 서버로부터 새로운 파일을 받아 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 웹페이지 구성방식 - 한개의 페이지로 구성된 웹 Application - SPA는 CSR(Client Side Rendering) 방식으로 렌더링 - 단 한번만 리소스(HTML, CSS, Javascript)를 로딩하고 데이터를 받아올때만 서버와 통신 - 첫 요청시 딱 한페이지만 불러오고 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는방식 - 최초 페이지를 로딩한 시점부터 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 렌더링해줌 - 필요한 부분만 렌더링 해주기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 UX 제공Angular,.. 2022. 10. 18. [Hook] useCallback, useMemo useCallback 과 useMemo를 정리한 블로그들을 몇번 보다보면 항상 필수적으로 메모이제이션이라는 개념을 먼저 알려준다 메모이제이션(memoization)이란? 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 memoization을 적절히 적용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다. -React에서 컴포넌트가 렌더링하는 규칙에는 크게 3가지가 있다 1. state나 props가 변경되었을 때 2. forceUpdate() 실행했을때 3. 부모 컴포넌트가 렌더링 되었을 때 애플리케이션의 규모가 커지면서 리렌더가 점점 더 잦아진다면 이는 서비스 사용에 불편을 초래한다. 따라서 리렌더.. 2022. 10. 13. 이전 1 2 3 4 ··· 10 다음
