본문 바로가기

전체 글119

[JavaScript] 이벤트 (1) - 이벤트(event)의 개념과 사용법 요약 1. 이벤트는 우리가 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)이다. 2. 이벤트가 발생되면 실행되는 코드 블럭을 이벤트 핸들러 또는 이벤트 리스너라고 하며, 이 코드블럭이 이벤트에 응답해서 실행하도록 정의하는 것을 이벤트 핸들러를 등록 했다고 표현한다. 3. 웹 이벤트를 사용하는 방법은 3 가지가 있다. 1) 이벤트 핸들러 프로퍼티 2) 인라인 이벤트 핸들러 (사용 권장x) - html 태그에 이벤트 핸들러(자바스크립트 코드) 가 직접 기술된다는 점이 단점이다. - html 은 정보를 표현하기 위한 수단. 제어와 관련된 것은 javascript 로 분리시키는 것이 좋다. 3) addEventListener() removeEventListener() .. 2022. 6. 14.
[프로그래머스] 소수 만들기 일단, 못풀었다. 너무 어려워! 배열에서 3개의 요소를 골라서 합하고, 그 값이 자기 자신과 1로 나눴을 때를 제외하곤 모두 나머지가 있어야 한다. 찾아보니 재귀함수, 순열, 조합의 개념이 나온다. 아래에 재귀함수의 개념을 정리해보고, 일단은 답 코드를 본다. 문제설명 주어진 숫자 중 3개의 수를 더했을 때 소수가 되는 경우의 개수를 구하려고 합니다. 숫자들이 들어있는 배열 nums가 매개변수로 주어질 때, nums에 있는 숫자들 중 서로 다른 3개를 골라 더했을 때 소수가 되는 경우의 개수를 return 하도록 solution 함수를 완성해주세요. 제한사항 nums에 들어있는 숫자의 개수는 3개 이상 50개 이하입니다. nums의 각 원소는 1 이상 1,000 이하의 자연수이며, 중복된 숫자가 들어있지.. 2022. 6. 14.
[JavaScript] 변수 (선언, 초기화, 할당, let, var, const, 스코프) 변수(Variable) 요약 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름인 식별자를 말합니다. 상수는 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없습니다. 변수 선언 단계 자바스크립트 엔진은 변수 선언을 선언과 초기화 2단계로 수행합니다. 1. 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다. 2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. var, let, const 의 공통점 & 차이점 1. var와 let 키워드는 변수를 선언할 때 사용되며, const 키워드는 상수를 선언할 때 사용됩니다. 2. let, const는 블록 레벨.. 2022. 6. 13.
[트러블슈팅] VS Code live server 무한 새로고침 현상 - 첫 live server 오픈 시에는 잘 열린다. - 프로젝트 파일을 수정, 저장했을 때 새로고침이 시작되는데, 새로고침이 끝나지 않고 계속 반복된다. 시도 1. 설정- auto save를 검색해 사진과 같이 afterdelay로 변경! delay를 1000 으로 변경 이러면 ctrl+s를 하지 않아도 1초마다 자동 저장된다. 그러나 문제해결에는 도움이 되지 않았다. 2. live server Host 를 localhost 로 변경 - 아래와 같이 Host 를 localhost 로 변경했다. 그러나 문제는 지속되었다. - 그랬다가 다시 Default 설정인 127.0.0.1 로 변경했는데.. 잘 된다! 해결 Host 설정 이슈인 것으로 추정된다. 정확한 원인은 파악하지 못했지만, Default .. 2022. 6. 13.
[브라우저] 렌더링, SSR, CSR 렌더링, SSR, CSR 렌더링 (Rendering) 개념 서버로부터 HTML 문서를 받고, 렌더링 엔진이 HTML파일을 파싱해서 style 속성을 계산하여 DOM tree를 만드는 과정을 의미합니다. * 브라우저는 렌더링을 수행하는 렌더링 엔진(Rendering Engine)을 가지고 있습니다. * 크롬의 경우 웹킷(Webkit)을 사용하다가 웹킷을 Fork하여 블링크(Blink) 엔진을 자체적으로 구현하여 사용하고 있습니다. 렌더링 과정 1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성 가장 첫 번째 단계는 서버로부터 받은 HTML, CSS를 다운로드 받는다. 그리고 HTML, CSS 파일은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object.. 2022. 6. 10.
[프론트엔드] 상태관리 (2) - Redux (상태관리 라이브러리) Redux React에서 전역 상태관리의 필요성 React에서 State는 component 안에서 관리됩니다. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 합니다. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받습니다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해집니다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야합니다. => Props drilling 이슈 발생 Redux 를 언제 사용해야 할까? (공식문서 내용 번역) https://redux.js.org/faq/general#when-should-i-use-redux 어플리케이션의 많은 공간에서 필요한 상당한 양의 데이터가 있을 때 상태값이 매우 빈번하게 업데이트될 때 상태를 업데이.. 2022. 6. 10.
[프론트엔드] 상태관리 (1) - 상태/상태관리 개념, 상태관리 역사와 방법론 요약 1. 상태 - 사용자에게 노출시키고 상호작용하기 위한 데이터와 눈에 보이지 않지만 서버와 주고받는 데이터까지 모두 포함하여 상태라고 부릅니다. 2. 상태 관리 - 상태를 정의, 유지하고 변화를 주고, 외부에 상태를 반영하는 것을 의미합니다. 3. 상태관리가 필요한 이유 - 상태들이 복잡하게 얽혀있다면, 상호간에 의존성이 많아지게 되어 UI가 어떻게 변하는지 알기 어려울 수 있기에 효율적으로 관리해야 함. 4. 평소 상태관리는 어떻게 하는지? - 특정 컴포넌트에서만 사용하는 상태는 useState 를 사용하여 로컬 상태로 관리하고, 여러 컴포넌트에서 사용하는 상태는 Redux-toolkit 등 전역 상태관리 툴을 이용하여 전역 상태로 관리합니다. 상태(State) 사용자에게 노출시키고 상호작용하기 위.. 2022. 6. 9.
[Network] RESTful API REST 개념 REpresentational State Transfer의 약자로 전반적인 웹 어플리케이션에서 상호작용하는데 사용되는 웹 아키텍쳐 모델이다. 즉, 자원을 주고받는 웹 상에서의 통신 체계에 있어서 범용적인 스타일을 규정한 아키텍쳐 라고 할 수 있다. REST 구성 REST API는 다음의 구성으로 이루어져있습니다. 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) API 개념 Application Programming Interface의 약자로 구글 맵 API, 카카오 비전 API 등 기존에 있는 응용 프로그램을 통해서 데이터를 제공받거나 기능을 사용하고자 할 때 사용하는 인터페이스 및 규격 을 말한다. API는 프로그래밍 언어, .. 2022. 6. 9.
[JavaScript] Event Loop Event Loop 들어가며 JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다. 이벤트? 이벤트(event) 는 어떤 사건을 의미합니다. 브라우저에서의 이벤트란 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있습니다. 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로, 일반적인 제어 흐름과는 다른 접근 방식이 필요합니다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 합니다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지 해.. 2022. 6. 9.

티스토리툴바