언어(JS,TS) (64) 썸네일형 리스트형 JavaScript [공부: 위치바꾸기(swap)] 위치를 바꾸는 3가지 방법 1. 임시 변수 활용 // 1) 임시 변수를 활용한 방법 function swap(idx1, idx2, arr) { let temp = arr[idx1]; arr[idx1] = arr[idx2]; arr[idx2] = temp; } 2. Destructuring assignment 활용 (구조분해 할당) // 2) Destructuring assignment를 활용한 방법 function swap(idx1, idx2, arr) { // arr이 reference type이라 가능 [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]]; } 3. XOR 연산을 활용 // 3) XOR 연산을 활용한 방법 function swap(idx1, idx2, .. 네트워크 [공부: graphQL이란?] 회사를 구직하다보면 grapthQL을 요구하는 회사가 종종 있었는데 오늘은 유튜브를 보다가 알고리즘에 graphQL에 관한 내용이 떠서 해당 내용을 공부해 보았다. GraphQL(GQL)이란? Facebook에서 만든 Graph Query Language로 어플리케이션 레이어 쿼리 언어이다. GQL은 Structed Qurery Language(이하 SQL)와 마찬가지로 쿼리 언어이다. GQL vs SQL SQL : 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적 GQL : 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적 SQL의 문장(statement)은 주로 백엔드 시스템에서 작성하고 호출하는 반면, GQL의 문장은 주로 클라이언트 시스템에서 작성하고 호출한다... JavaScript[공부 : Class 사용방법] 최근 공부를 하다가 Class의 개념을 알고 어느정도 사용을 해봤다고 생각을 했는데 막상 응용을 해보려니 잘 알고 있지 않다는 것을 알게 되었다. 그래서 이참에 사용하는 방법을 정확하게 공부를 해보았습니다. 클래스, 객체, 인스턴스의 개념 클래스(Class) 객체를 만들어 내기 위한 설계도 혹은 틀 연관되어 있는 변수와 메서드의 집합 객체(Object) 소프트웨어 세계에 구현할 대상 클래스에 선언된 모양 그대로 생성된 실체 특징 ‘클래스의 인스턴스(instance)’ 라고도 부른다. 객체는 모든 인스턴스를 대표하는 포괄적인 의미를 갖는다. OOP의 관점에서 클래스의 타입으로 선언되었을 때 ‘객체’라고 부른다. 인스턴스(Instance) 객체를 소프트웨어에 실체화 한것 설계도(Class)를 바탕으로 소프트.. JavaScript [정보 : Passport.js, JWT ] 오늘은 멘티 멘토를 진행하였는데 JWT를 사용 한것으로 말이 나와서 요즘에는 Passport.js라는 것도 사용한다는 말을 들어서 문득 궁금해져서 찾아보았다. 먼저 passport와 jwt이 두가지가 무엇인지부터 알아보겠습니다. JWT란? JWT(JSON Web Token)은 클라이언트와 서버 혹은 서비스간의 통신시 정보를 JSON객체를 통해 안전하게 전송하고 권한(Authorization)을 위해 사용하는 토큰이다. 그렇다면 JWT를 언제 사용해야 할까? 권한(Authorization): 사용자가 로그인 하게되면 서버는 사용자에게 JWT를 발급해주고 사용자는 이 JWT를 사용해 해당 토큰으로 허용되는 서버의 서비스에 접근할 수 있다. 정보 교환: JWT는 정보를 주고 받는데도 유용하게 사용할 수 있다... 그룹스터디 [React : Props Drilling이란? 상태관리 라이브러리란?] 정리 프로퍼티 내리꽂기(Props Drilling)는 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미합니다. 이 때 해당 데이터가 필요하지 않은 컴포넌트에서도 다른 컴포넌트로의 전달을 위해 거쳐야 하는 복잡성이 발생할 수 있습니다. Prop Drilling? Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 예시 import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ conte.. 그룹스터디 [React : class형에서 setState를 사용하는 이유] 정리 state는 immutable(불변성)을 유지해야하기 때문입니다. 컴포넌트는 현재의 this.state와 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데 state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. (예상치 못한 버그가 발생할 수 있음.) useState를 사용하는 이유와 비슷함 state란? - 렌더링 결과물에 영향을 주는 정보를 갖고 있는 일반 JavaScript 객체입니다. - (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. setState란? - 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. - s.. 그룹스터디 [React : React에서의 라이프사이클과 각 라이프사이클의 역할] 정리 componentDidMount() : 최초로 컴포넌트 객체가 생성될 때 한 번 수행 componentDidUpdate() : 컴포넌트의 속성 값 또는 상태값이 변경되면 호출 componentWillUnmount() : 이 컴포넌트가 소멸될 때 호출 render() : 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출 React 컴포넌트 생명주기 React 생명주기란 ? React 컴포넌트의 아래의 세가지 단계 초기화 단계 업데이트 단계 소멸단계 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하며 각 단계 속에서 호출되는 메서드들을 생명주기 메서드 라고 합니다 리액트는 웹에서 UI데이터가 변경되면 자동으로 컴포넌트가 업데이트되며 동적으로 화면을 그려줍니다. 제대로 된 기능을 수행하려면 이.. 그룹스터디 [React : virtual DOM란?] Virtual DOM? 정리 Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다. virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 대부분의 경우 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요. (정말 최적화를 잘하는 것이 아니라면) 또한 자동으로 정보를 관리해주기 때문에 생산성이 현저히 좋아집니다 먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 .. 이전 1 2 3 4 5 6 ··· 8 다음
