React Navigation 이란? React Native에서 만든 컴포넌트를 페이지화 시키고, 해당 페이지끼리 이동이 가능하게 해주는 라이브러리 참고링크 React Navigation 공식 리액트개념 React-navigation StatusBar 참고링크

인라인과 블록요소 이미지 블럭요소(Block element)와 인라인요소(Inline element)란? 블럭요소(Block element) 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 공간을 가지는 요소 기본적으로 가로폭 전체의 넓이를 가지는 이며, , , , 등을 사용하여 형태를 변경하여 레이아웃을 수정할 수 있다. 블록 요소 다음에는 줄바꿈이 이루어 진다. 인라인요소(Inline element) 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 되어, 임의로 , 로 크기를 변형할 수 없다. 로 줄의 높낮이를 조정할 수 있고, 으로 텍스트의 위치를 정렬할 수 있다. 인라인요소 특성상 줄 바꿈이 없고 우측으로 바로 이어저서 화면에 표시된다. 블럭요소와 인라인요소의 종류 블럭요소 : , , ~ , , , , , , , , , , 등 인라인요소 : , …

⏰ 시간이 생길 때, 긴글로 작성 예정 는 동사로 작성하는 것보다 명사로 작성하는 것이 좋다. 로 딥러닝을 통하여 시각화를 구현해야 되는 분야에서 도움이될 것 같다. 페이지 검색엔진이 좀 더 구성된 소스코드의 언어를 잘 읽게 해주기 위함이다. 는 어떠한 웹페이지나 파일이 가지고 있는 고유한 경로, 는 현재 위치한 곳을 기준으로 작성된 경로이다. 은 file 명을 포함한 절대경로, 은 file명을 제외한 절대 경로이다. 는 DB작업을 쉽게 할 수 있도록 도와주는 ORM 라이브러리이며, 자바스크립트 객체와 관계형 데이터베이스를 서로 연결해주는 도구이다. document와 window 사용법 $(document).scroll() 스크롤이 변경될때마다 이벤트를 발생시킴 $(document).height() 현재 페이지(문서)의 높이(전체 높이) $(window).height() 윈도우의 크기(화면의 높이) $(window).scrollTop() 브라우저의 스크롤 위치값(스크롤의 to…

ORM (Object Relational Mapping) 이미지 은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 관계 매핑을 가능하게 하는 상용 또는 무료 소프트웨어 패키지들이 있고, 경우에 따라서는 독자적으로 개발하기도 한다. 그래서 ORM(Object Relational Mapping) 이란? ORM은 Object Relational Mapping(객체∙관계∙매핑)의 약자이다. ORM은 객체 지향 언어에서 사용할 수 있는 ****이다. ORM은 객체와 데이터베이스의 해주는 도구이다. ORM은 프로그래밍 언어의 객체와 관계형 데이터베이스의 데이터를 매핑해주는 도구이다. ORM은 프로그래밍 언어의 객체와 관계형 데이터베이스 사이의 역할을 한다. ORM은 하는 도구이다. ORM은 객체와 모델 사이의 관계를 기술하는 도구이다. Persistant API라고도 할 수 있다. ORM 사용 이유 (OOP vs Relational…

1월 24일 음.. 글을 오랫만에 적는 것 같다. 현재는 라는 회사에 입사해서 프론트엔드 개발자로 취업에 성공하였다. 2주가 흘렀고, 온보딩 기간중이다. 우선 회사 사람들이 다 좋은 것 같다. 그래서 몇가지 고민거리가 있었지만 사라지게 되었다. 하루하루 무의미하게 보내지말고 할 수 있을떄 최대한 하고 놀떄 놀아야겠다!🤨 1월 24일

트랜잭션(Transaction)이란? 은행 ATM이나 데이터베이스 등의 시스템에서 사용되는 이다. 트랜잭션 처리가 정상적으로 완료된 경우 커밋(commit)을 하고, 오류가 발생할 경우 원래 상태대로 롤백(rollback)을 한다. 영어로 1초당 처리할 수 있는 트랜잭션의 개수를 TPS라고 한다. 사용목적 시스템에서 병행 제어 및 회복 작업 시 처리되는 작업의 논리적 단위로 데이터베이스 서버에 여러 개의 클라이언트가 동시에 액세스 하거나 응용프로그램이 갱신을 처리하는 과정에서 중단될 수 있는 경우 등 한다. 데이터베이스 기능 중, 트랜잭션을 조작하는 기능은 데이터베이스 하게 한다. 은 데이터베이스 내에 읽거나 쓰는 여러 개 쿼리를 요구한다. 트랜잭션의 성질 (ACID?) 는 데이터베이스에 대한 쓰기 하기 위해 트랜잭션 데이터베이스가 을 설명하는 속성 집합 Atomicity(원자성) 은 데이터베이스에 모두 반영되든지 아니면 전혀 반영되지 않아야 한다.() 트랜잭션 내의 모든 명령…

SEO란? 웹사이트가 검색 엔진에서 검색 시에 상위에 노출을 시키고 싶다면 를 고려해야한다. 사용자의 검색의도를 명확히 이해하여, 고객니즈 기반으로 웹사이트의 기능을 개선∙콘텐츠를 제작하는 방법이다. 단순히 검색엔진의 로직에만 맞추는 것이 아니라 웹사이트의 품질, 콘텐츠의 질이 함께 개선되어야 페이지 퀄리티가 높아져서 실질적인 효과를 거둘 수 있다. 검색엔진의 일련의 과정 은 수집 → 정제 → 색인 → 랭킹의 과정을 거치게 되며, 상세하게는 수집(크롤링, Crawling): 검색 엔진의 크롤러를 통하여 각 사이트를 크롤링하여 홈페이지의 콘텐츠 정보를 가져온다. 정제(정제, Refinedness) : 크롤링하여 가져온 콘텐츠 정보를 유사∙중복문서, 가비지 데이터, 화이트 폰트 등 여러가지의 판단요소를 구별하여 판별을 한다. 색인(인덱싱, Indexing) : 판별 후 주제별로 색인하여 보관한다. 랭킹(순위,Ranking) : 검색의도에 맞춰 색인된 콘텐츠에 미리 검색 랭킹 순위를 …

React Hydration Hydration는 , HTML 코드와 JS 코드를 서로 매칭시켜 동적인 웹사이트를 브라우저에 렌더링하는 기술이다. Next.js는 React에서 v16부터 제공하는 hydrate 기능을 사용해서 이러한 솔루션을 성공적으로 제공했다. 다른 말로는 서버 측에서 제공된 HTML을 재사용하고 해당 DOM 요소에 이벤트 리스너를 연결하는 작업이라고 할 수 있다. 는 ReactDOM의 함수인데 리액트 프로젝트 구축 시, 초반에 꼭 작성해주는 render 함수와 잠깐 비교해보면 는 을 수행하지 않지만 를 사용하여 을 수행할 수 있다. 는 와 동일하게 동작하지만 서버 측에서 전달받은 HTML을 사용한다. React Helmet React는 싱글 페이지 애플리케이션(Single Page Application, SPA)이라, React로 구축된 웹 사이트의 경우 크롤러들이 단 하나의 파일 만을 읽게 된다. 이처럼 싱글 페이지 애플리케이션의 경우 는 단점이 있다. 이러…

자바스크립트와 타입스크립트 이미지 우선 이것부터 는 JavaScript 기반의 언어 는 클라이언트 측 스크립팅 언어이고, 는 객체 지향 컴파일 언어 JavaScript 이며, 는 는다. 웹 개발에 주로 사용됨 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행 사용자가 웹 브라우저를 열고 웹 페이지를 요청하면 해당 요청이 웹 서버로 이동함 멀티 스레딩, 멀티 프로세싱 기능이 없음 TypeScript 이며, 지만, 다. JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음 TypeScript 컴파일러를 사용하여 ts(TypeScript)파일을 js(JavaScript) 파일로 변환과 통합이 쉽다. 클래스 기반 객체를 만들 수 있다. 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있다. 우선 이것부터 JavaScript TypeScript

우선 Memoization이란? 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 이다. 을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 그리고 React에서 컴포넌트를 다시 실행하는 경우는 아래와 같다. 부모 컴포넌트가 재실행될 때 props가 변경될 때 state가 변경되었을 때 React.memo란? React.memo는 High Order Components(HOC) 이다. 일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면, HOC는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다. HOC는 리액트의 API가 아니라, 리액트가 컴포넌트를 구성하는 데 있어서 일종의 패턴이다. 만약 React.memo를 사용하여 을 하여, 불필요한 렌더링을 방지할 수 있다. React.memo는 한다. 하지만, 함수형 컴포넌트가 함수 내부에서 us…

React에서 렌더링이란? 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. 아래는 URL은 리엑트 렌더링을 이해하는데 도움이 되는 내글 React란? 그리고 사용하는 이유와 단점 Props와 State에 대해서 React는 왜 불변성을 유지해야되나? 렌더링을 만드는 방법 최초 렌더링이 끝난 이후에, 리액트가 리렌더링을 queueing 하는 방법에는 여러가지가 있다. 클래스 컴포넌트 this.setState() this.forceUpdate() 함수형 컴포넌트 useState()의 setter useReducer()의 dispatches 일반적인 렌더링 동작 리액트의 기본적인 동작은 부모 컴포넌트가 렌더링되면, 리액트는 모든 자식 컴포넌트를 순차적으로 리렌더링 한다는 것이다. 풀어서 말하면 컴포넌트를 렌더링 하는 작업은, 기본적으로, 하위에 있는 모든 컴포넌트 또한 렌더링 하게 된다. 일반적인 렌더링의 경우, 리…

Suspense란? 컴포넌트의 랜더링을 어떤 작업이 끝날 때까지 할 수 있다. (아직 개발적인 경험은 작지만, 페이지를 렌더링할때, 외부로 부터 데이터를 받아올때 보여주게 처리하여 빈 화면이 출력되지 않게 사용한 경험이 있음) 쉽게 말해 어떤 컴포넌트를 읽어야 하는데, 데이터가 아직 준비되지 않았다고 리엑트에게 알려주는 새로운 매커니즘이다. 사용방법은 아래와 같다. React.lazy()란? React.lazy 함수를 사용하면 동적으로 컴포넌트를 import하여 렌더링 할 수 있다. 이를 사용하면 초기 렌더링 지연시간을 어느정도 줄일 수 있다. 또 이 방법을 사용한다면 렌더링 관련 최적화를 진행할 수 있다. 만약 서비스를 구성하는 컴포넌트에서 import를 그냥 하게되면 코드가 실행되는 시점에서 모든 import 요소를 읽기 때문인데 불필요하게 읽지 않아도 되는 import 요소를 읽게 된다. 하지만 인 **React.lazy()**를 이용한다면 필요한 시점에 import 요소를…

Fluid Grid 란? 우선 그리드 시스템 (grid system)이란? 화면을 요소를 배치하도록 하는 시스템으로 화면을 단순하게 만들면서 동시에 으로 할 수 있다는 장점이 있다. 그리고 고정 그리드 레이아웃 (fixed grid layout) 고정 그리드 레이아웃 이미지 말 그대로 를 로 고정하는 것을 의미한다. 예를 들어 그리드의 너비를 360px로 입력하였다면 화면의 크기와 상관없이 해당 그리드는 너비 360px을 유지한다. 위의 그림처럼 , 다양한 기기를 사용하는 현대 사회에서 을 떨어틀일 수 있다. 그래서 가변 그리드 레이아웃 (fluid grid layout)이란? 가변 그리드 레이아웃 이미지 을 이용하여 화면 너비에 대해 각 그리드의 너비 비율을 정하고, 화면의 크기 변화에 따라 그리드의 크기를 같이 변하게 할 수 있다. 때문에 고정 그리드 레이아웃에서 사용자의 사용감을 떨어트리는 요소를 가변 그리드 레이아웃을 사용한다면 해결할 수 있다. 그리드의 구성요소 열(C…

Media Query 란? 구체적인 조건을 필요한 스타일 적용할 수 있도록 확장하였다. 간단한 이야기로 말하면 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념을 가고 있다. 다양한 기기들이 많아 웹 페이지를 접속할 때, 각기 다른 페이지를 보여줘야 되는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 한다. 이 때 그런 번거로움을 없애기 위하여 한 파일에서 pc, 모바일, 태블릿 등을 고려한 웹 사이트를 만들 수 있게 반응형 웹 페이지를 만드는 것이다. Fluid Grid Fluid Grid 이미지 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것을 뜻함 가로 폭의 길이의 변화에 따라 컬럼의 크기가 상대적으로 변하게 하는 방법 레이아웃에는 변화가 없을 수 있으므로 폭이 많이 좁은 모바일에서 큰 효과를 볼 수 없을 수 있음 Liquid Layouts Liquid Layouts 이미지 유동형 그리드와 같이 반응형…

Viewport란? 현재 보고 있는 컴퓨터 그래픽의 영역을 나타내는 말로, 웹 브라우저 용어에서는 일반적으로 UI, 메뉴 표시줄 등을 제외하고는 브라우저 창과 동일하다. 보고 있는 문서의 일부이며, 웹 페이지에서 사용자가 볼 수 있는 영역이라고 할 수 있다. 태블릿이나 스마트폰이 있기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계가 되었었는데, 현재 다양한 기기들을 사용자들이 사용하고 있기 때문에 기존에 컴퓨터 화면에만 맞추어서 설계되었던 가 설계를 에서 → 가 가능한 설계 방식으로 바뀌게 되었다. Viewport 설정 뷰포트 요소를 모든 반응형 웹 페이지에 포함해야 한다.  뷰포트 요소는 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 브라우저에 제공한다. 은 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 한다.(기기에 따라 다름) 은 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정한다. 콘텐츠 크기 조정 사용자들은 보통 데스크톱과 모바일 기…

반응형 웹 이미지 반응형 웹이란? Google Developers 반응형 웹 레이아웃은 기기의 크기와 기능에 따라 변합니다. 예를 들어, 휴대폰에서는 콘텐츠가 하나의 column으로 표시될 수 있지만 태블릿에서는 두 개의 column으로 표시될 수 있습니다. 은 를 가진 들에서 웹 페이지의 하기 위한 기술로 HTML과 CSS만을 사용해서 반응형 웹 설계가 가능하며, 다양한 기기를 사용하는 모든 사용자에게 UX를 선사하기 위한 설계 방식이다. 다양한 기기에서 웹 UI를 의도한 대로 보여주고, 의도한 대로 동작하는 웹 페이지를 설계하기 위함이다. 반응형 웹을 설계하기 위한 핵심기술 1. 가변 그리드(Fluid Grid) 라고 부르기도 한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다. 전체 에 하고 할 수 있다. 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다. 과 같이 상황에 맞게 변할 수 있는 단위인 …

가비지 컬렉터란? 자바스크립트는 우리가 사용하지 않는 값들에 대한 메모리 영역을 주기적으로 정리하고 불필요한 메모리 사용이 없도록 이라는 자동 메모리 관리방법을 통하여 관리한다. 성능에 예민한 상황에서 작업하는 경우를 제외하고, 일상반적인 상황에서는 에 대해 크게 신경 쓰는 경우는 없다. 하지만 이런 자동 메모리 관리는 잠재적 혼란의 원인을 일으키는 경우도 있다. 특징 이다. 생성된 함수가 주변 환경에 대한 값을 지속적으로 사용하고 있을 수 있으므로, 참고링크 트리 쉐이킹(Tree Shaking) MDN - 자바스크립트의 메모리 관리 가비지 컬렉션 - 모던 JavaScript 튜토리얼 특징 참고링크

V8 JavaScript engine이란? C++로 작성된 Google의 오픈 소스 고성능 JavaScript 및 WebAssembly 엔진이다. Chrome 및 Node.js 등에서 사용된다. V8과 다른 엔진의 가장 큰 차이점은 V8 엔진의 컴파일러다. JIT-C(Just In Time Compiler) JIT 이미지 일반적인 Compiler 방식에는 과 이 있다. 이 두개의 컴파일 방식을 합친 것으로 실행시점에서 인터프리터 방식으로 바이트 코드를 생성한다. 그 후 바이트 코드를 기계어 코드로 만들고, 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다. V8의 컴파일 과정 V8의 컴파일 과정 이미지 Blink에서 를 만나면, Javascript 스트리밍을 시작한다. 스트리밍으로 전달 받은 UTF-16 문자열은 Scanner를 이용해 Token(let, for)을 생성한다. 생성된 Token을 가지고, Parser가 추상 구문 트…

면접을 준비하면서 최근 면접때는 자료구조에 대해서 잘 나오지 않아 생각을 못하고 있었는데, 어제 면접에서 자료구조에 대해서와 장단점 비교에 대한 질문들이 나오게 되었고 나는 당황했다. 그래서 준비가 미비했던걸 인정하고 한번 정리해 보아야겠다. 블로그로 적으면 그래도 한번은 면접때 쭉 볼수 있으니까 말이다. 시간 복잡도에서 대해서 잠깐 알고 아래글을 읽자 아래 글을 읽으면서 시간 복잡도라는 것을 작성했는데, 알고리즘의 로직을 코드로 구현할 때 보통 많이 볼 수 있는데, 시간 복잡도를 고려한다는 말은 ‘입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가?’라는 말이다. 효율적인 알고리즘을 구현한다는 것은 시간복잡도를 고려한다는 말이고 다시 말하면 는 이야기이다. 시간 복잡도는 보통 으로 나타낸다. Big-O 표기법은 를 표기하는 방법이다. 자료구조란? 우선 자료구조에 대허서 설명해보려고 한다. 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 …

오늘 면접을 보았는데, 에 관한 기술질문이 있었고, 이에 대해서 잘 알고있지 않아 글을 정리해보고자 한다. 일반적인 Array (밀집 배열) 일반적으로 배열이라는 자료 구조의 개념은 으로 를 말한다. 배열의 요소는 으므로 인덱스를 통해 단 한번의 연산으로 임의의 요소에 접근(임의 접근(random access), 시간 복잡도 O(1))할 수 있다. 이는 매우 효율적이며 고속으로 동작한다. (하지만 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색(linear search)을하기 때문에 시간 복잡도는 O(n))이다.) 또한 배열에 요소를 , 배열 요소를 도 있다. 즉, 일반적인 Array는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있기 때문에 이러한 배열을 이라 한다. 일반적인 Array 이미지 JavaScript의 Array (희소 배열) JavaScript의 Array은 일반적인 Array와는…

프로세스(Process) 단순히 실행 중인 프로그램이라고 할 수 있다. 즉, 사용자가 작성한 프로그램이 운영체제에 의해 메모리 공간을 할당받아 실행 중인 것을 말함 이러한 프로세스는 프로그램에서 사용되는 데이터와 메모리 등의 자원 그리고 스레드로 구성됨 스레드(Thread) 를 의미 또는 모든 프로세스에는 한 개 이상의 스레드가 존재하여 작업을 수행 또한, 두 개 이상의 스레드를 가지는 프로세스를 멀티스레드 프로세스라고 한다. 참고링크 스레드 (컴퓨팅) - 위키백과, 우리 모두의 백과사전 코딩교육 티씨피스쿨 프로세스(Process) 스레드(Thread) 참고링크

EventLoop 이미지 은 Memory Heap / Call Stack로 구성되어 있으며, JS로 작성된 코드를 해석하고 실행하는 인터프리터(프로그래밍 언어의 소스 코드를 바로 샐행하는 컴퓨터 프로그램 또는 환경)다. JS는 단일 스레드(single thread)인데 즉, Call Stack이 한 개(single)라는 뜻이다. (가장 유명한 으로는 구글의 V8 Engine이 있다) Memory Heap 메모리 할당이 일어나는 곳 (변수, 함수 등) Call Stack 코드가 실행될 때 쌓이는 곳. (stack : 자료구조 중 하나, 선입후출) Web API 브라우저에서 제공하는 API (DOM, Ajax, Timeout 등) Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue 안에 넣는다. Callback Queue 비동기적으로 실행된 콜백함수가 보관되는 곳 (setTimeout, addEventListen…

먼저 알아두면 좋은 멱등이란 단어 멱등의 사전적 정의는 을 의미한다. 을 과 이 를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 을 가졌다고 말합니다. 각 메소드의 특징 메소드 명 메소드 용도 정의 메소드 특징 GET 데이터 조회 서버에 전달하고 싶은 데이터를 query(parameter, query string)을 통해 전달 Query를 BODY에 담아서 조회가능하나 지원하지 않는 곳도 있기 때문에 권장하지 않는다. POST 다양한 요청 처리 BODY에 리소스 데이터를 전달 GET 방식 사용시 전달해야할 데이터가 많다면 POST를 사용하여 BODY에 조회할 데이터를 전달할 수 있지만 POST로 조회시 캐싱하기에 어려운 문제가 있기 때문에 권장하지 않는다.(기술적으로 캐싱은 가능하다.) PUT 데이터 추가 or 덮어쓰기 요청한 데이터가 없다면 추가하고 있으면 덮어쓰기 POST와 PUT은 다르다. POST를 계속 요청하면 데이터가 계속 생성되지만 PUT은 여러번…

restful 이미지 RESTful이란? 두 컴퓨터 시스템이 인터넷을 통해 하기 위해 사용하는 인터페이스이다. 대부분의 비즈니스 애플리케이션은 다양한 태스크를 수행하기 위해 다른 내부 애플리케이션 및 서드 파티 애플리케이션과 통신해야 하는데, 는 할 수 있으며 을 따르므로 이러한 합니다. RESTful을 알아가기 전 알아두어야 할 REST란? 를 통해 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD OPERATION을 적용하는 것을 의미한다. 즉, 는 에 Resource가 있고 를 통해 Resource를 처리하도록 설계된 를 의미한다. 웹의 모든 자원에 고유한 ID인 를 부여한다. REST의 구성 1. 자원(Resource) - URI 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원을 구별하는 ID는 와 같은 이다. 2. 행위 (Verb) - Http Method HTTP 프로토콜의 …

이벤트 위임이란? 상위 요소에서 하위 요소의 이벤트를 제어하는 방식 을 하면 강력한 이벤트 핸들링 패턴인 을 이벤트 위임을 이용해 요소마다 핸들러를 할당하지 않고, 에 이벤트 핸들러를 공통 조상에 할당한 핸들러에서 하면 사용자의 인터랙션을 통해 추가되는, 아직 만들어지지 않은 요소에 이벤트 핸들러를 할당해야 하는 경우 사용한다. 장점과 단점 장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아진다. 이나 유사한 기능을 하는 스크립트로 요소 덩어리를 더하거나 뺄 수 있기 때문에 DOM 수정이 쉬워진다. 단점 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다. 하지만 몇몇 이벤트는 버블링 되지 않습니다. 그리고 낮은 레벨에 할당한 핸들러엔 를 쓸 수 없다. 컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트이든 아니든 …

리액트란? Facebook에서 주도하여 개발한 으로 구축하기 위해 사용하는 라이브러리이다. 자체는 framework라 부를 수 있는 기준인 라우팅, 상태관리 기본 제공을 충족하지 못하기 때문에 다. React가 등장하게 된 이유는 이전에는 어플리케이션의 UI를 제어하기 위해서는 DOM을 선택하고 어떤 이벤트가 발생하면 변화를 주도록 설정을 해야했다. 유저와 상호작용이 많이 없는 웹 서비스에서는 상관이 크게 없었지만, 인터렉션이 자주 발생하고 변화가 많은 어플리케이션의 경우 힘들었고 코드 또한 난잡해지는 경우가 많이 생기게 되었다. React의 특징은 1. 선언적(Declarative) 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 2. 컴포넌트 기반(Component-based) 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다. 3. 한 번 배워서 어디에서나 사용 가능(Learn Onc…

시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말함 시멘틱 마크업이란? 의미를 잘 전달하도록 문서를 작성하는 것을 말함 시멘틱 마크업 예시 - 1 시멘틱 마크업 예시 - 2 잘 구성하기 위해서는? 각 태그가 그 용도에 맞게 사용되어야 한다. 헤더/푸터에 와  사용 메인 컨텐츠에 과  사용 독립적인 컨텐츠에  사용 최상위 제목으로  사용 순서가 없는 목록으로 과  사용 내비게이션에 사용 예를 들어, 동일한 효과를 부여하는 과  태그가 있다. 둘은 동일하게 글자색을 진하게 하지만  태그의 경우는 그 자체가 “bold”의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 의 경우에는 “그 안의 내용이 다른 내용보다 더 강조되어야 한다”라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다. 시맨틱 마크업이 잘 이루어 진다면? 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화…

PWA 이미지 PWA란? 네이티브 앱을 개발하고 유지보수하는 것은 상당히 길고 복잡한 과정을 거치며, 상당한 비용이 발생한다. 그래서 접근성이 높은 웹에서 사용하는 기술과 플랫폼 API를 사용할 수 있는 네이티브 앱의 장점을 결합한 것이 이다. PWA는 HTML, CSS, Javascript와 같은 웹 기술로 만들어지며, 대표적인 예시 케이스로는 트위터, 스타벅스, 우버 등이 있다. 웹 앱을 PWA로 식별되기 위한 주요 구성요소 Responsive Web Design(반응형) : web page 속도 및 기능, 사용자 편의성 증대를 위해 다양한 Devices에서 반응형 Layout을 제공하도록 반응형 디자인을 제공할 수 있어야 한다. Manifest File(설치파일) : 기기의 홈화면에서 icon을 생성하는 기능을 제공함으로써 App store를 통하지 않고도 Web App을 install 가능하게 해야한다. 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며,…

Hooks가 등장한 이유 기존의 클래스 문법에서 사용하였던 라이프사이클 메서드 기반은 때문에 나눌 수 있고 컴포넌트를 함수 단위로 잘게 쪼갤 수 있는 가 나와 함수 컴포넌트로 작성하게 되었다. Hooks을 이용하기 위해서는 에서만 호출해야하며, 내에서 Hook을 실행하면 안 된다. 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 동일한 순서로 호출되는 것을 보장할 수 있다. Hooks의 종류 useState 상태를 변수로 선언하여 관리하며, 상태의 불변성을 유지한 채 상태를 변경할 수 있도록 도와준다. [state, setState]의 인자로는 state: 상태의 되고 초기에는 사용자가 제공한 초기 상태로 설정되어 표현 setState: 상호 작용에 따라 다른 값으로 변경 useEffect 컴포넌트 내에 에 실행되는 메서드 화면에 렌더링이 완료된 후에 수행된다. useEffect(function, …dependencies?); function : useEffect가 수행될 때 실…

🤯 보완예정 Life Cycle이란? 은 페이지에 렌더링 되기 전인 준비과정에서 시작하여, 브라우저에 렌더링 및 업데이트 후 페이지에서 사라질 때 끝난다. 컴포넌트는 를 같는다. 클래스 컴포넌트는 라이플 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. (라이프사이클 메소드는 클래스 컴포넌트에서만 사용. 함수형 컴포넌트 → Hooks 사용) 컴포넌트가 처음 렌더링 될 때, 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수 도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 이러한 경우에 컴포넌트 라이프사이클 메소드를 사용한다. Life Cycle의 구성 라이프 사이클은 총 3가지 카테고리로 구성 - Mount, Update, Unmount 접두사 메소드 → 어떤 작업을 작동하기 전에 실행 접두사 메소드 → 어떤 작업을 작동한 후에 실행 클래스 컴포넌트의 Life Cycle 클래스 컴포넌트 Life Cycle Mount c…

함수와 함수가 선언된 어휘적 환경의 조합이다. 어휘적 범위 지정(Lexical scoping) 위 코드를 실행하면  함수 내의 문이 부모 함수에서 정의한 변수 의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(Lexical Scoping)의 한 예이다. 여기서 이란, 어휘적 범위 지정(Lexical Scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 은 이런 사실을 나타낸다. 는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다. 클로저(Closure) 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 는 내부함수가 외부함수의 맥락(context)에 …

리액트의 상태 업데이트는 항상 으로 수행되어야 한다. mutate(돌연변이한)한 값의 대상과 위치에 따라 컴포넌트가 렌더링 되지 않을 수 있다. 데이터가 실제로 업데이트 된 시기와 이유에 대해 혼란을 겪을 수 있다. 불변성이란? Immutability(불변성)는 상태나 값을 변경하지 않는 것이다. JavaScript에서 예를 들자면, JavaScript의 원시 타입의 값들은 을 갖고 있다. 데이터 타입 원시 타입(string, number, bigint, boolean, undefined, ES6 부터 추가된 symbol) 변경이 불가능한 값(읽기전용) 원시 값을 변수에 할당하면 확보된 메모리 공간(주소)에는 실제 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다. 참조 타입(Object, Array, Function) 변경이 가능한 값 객체를 변수에 할당하면 확보된 메모리 공간에 참조값이 저장됨 객체를 가르키는 변수를 다른 변수에 할당하면…

Flux Architecture 이미지 에서 보다 일관된 데이터 관리를 위해 고안된 아키텍처 방식 기존에 보편적으로 사용된 MVC 패턴의 사용 시, 데이터 흐름의 복잡도가 올라가는 문제가 발생하였고, 를 고안하였고, 이것이 Flux 아키텍처이다. Flux 흐름 Action은 버튼을 누르는 것과 사용자 액션에 대한 이벤트 이름이다. Dispatcher는 Action에서 발생한 이벤트 이름에 따라 처리할 값들을 Store에 보낼 수 있다. Store는 데이터가 저장되어 있는 저장소로 Disspatcher에서 받은 행동에 따라 데이터를 핸들링한다. View에서는 Store에서 핸들링한 데이터를 받는다. 그리고 Action을 통해 이벤트를 발생시키는데, 데이터는 전달하지 않는다. 참고링크 Flux: An Application Architecture for React - React Blog In-Depth Overview | Flux 참고링크

둘다 외부의 파일이나 라이브러리의 코드를 불러온다는 목적을 가지고 있다. require / exports 에서 사용되고 있는 키워드이고 Ruby 언어 스타일과 비슷하다고 볼수 있다. 모듈을 내보낼때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 해 줘야 한다. 특히, 유사해 보이는 export 변수와 module.exports 변수를 상황에 맞게 잘 사용해야 한다. 기본적으로 2가지 규칙만 기억하면 된다. 여러개의 객체를 내보낼 경우 → 의 개별 속성으로 할당 딱 하나의 객체를 내보낼 경우 → 자체에 할당 노드 프로젝트에서 import를 사용하기 위해서는  을 추가해주면 된다. import / export 에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다. ES6 와 CommonJS 의 export(내보내기) 차이점 CommonJS와 ES6라는 모듈 시스템에서는 객체라는 개념이 존재한다. 는 모듈로부터 내보내지는 데이…

각각의 브라우저 이미지 브라우저란 무엇인가? 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. → 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 기본 구조 브라우저의 기본 구조 브라우저에 URL 입력 후 일어나는 전체적인 과정(네트워크 상에서의 전체적인 흐름) url 입력 후 일어나는 네트워크 상에서의 전체적인 흐름 이미지 브라우저에서 URL을 해석 후, DNS 서버를 통하여 URL(www.google.com)을 호스팅하는 서버의 IP 주소를 찾는다. 찾은 ip 주소와 url 내부의 port 정보를 바탕으로 HTTP 요청 메세지를 생성한다. + + + (HTTP 요청 메시지 구성) HTTP GET 요청 메시지 이미지 생성된 HTTP 요청 메시지는 소켓 라이브러리를 통해 TCP / IP로…

SSR (Server Side Rendring) 서버로 부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다. 1.1 과정 유저가 웹사이트에 요청을 보낸다. 서버는 필요하다면 데이터베이스에서 데이터를 가지고 오고, 페이지를 렌더링하는데 필요한 작업을 수행한 HTML 파일을 만든다. 유저는 이제 서버가 렌더링 해준 HTML을 이용하여 콘텐츠를 볼 수 있다. (Time to view) 하지만 아직 페이지에서 상호작용을 할 수 있는 JS파일이 존재하지 않기 때문에 페이지에서 클릭했을 때 반응이 일어나지 않는 부분이 존재한다. 브라우저에서 필요한 상호작용에 필요한 JS 파일을 서버로 부터 받는다. JS 파일을 브라우저에서 컴파일 후 인터랙티브한 페이지가 완성된다. (Time To Interact) ssr 1.2 장점 HTML 컨텐츠가 이미 담겨져 있기에 **SEO(Search Engine Optimizaion)**에 좋다. 사용자에게 첫 콘텐츠를 빨리 보여줄 수…

Callback 지옥을 유발하는 처리방식보다 비동기 프로그래밍을 동기방식처럼 직관적으로 표현할 수 있다. Async & await란? 를 함수(Function) 앞에 붙이면 항상 promise를 반환한다. (프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 함) 는 평범한 함수를 프라미스를 리턴하는 비동기적인 함수로 만들어주는 키워드고 안에서 는 코드의 순서를 기다리며 자신의 차례가 올때까지 기다렸다가 자신의 차례가 오면 결과를 반환한다. Async & await 이전에 Promise를 사용할 경우 promise는 접근할때 .then()을 사용하고 error처리는 .catch()로 한다. 단어의 의미 약속 ‘미래’ 시점의 데이터를 위한 것이긴 하지만 ‘promise’를 갖고 있기만 하면, 그 데이터가 미래시점에 있는지?, 이미 받았는지? 에 대해서는 상관없다. 프로미스는 일관된 비동기를 강제한다. Pr…

Promise란? “란 비동기 처리를 조금 더 수월하게 처리하게끔 도와주는 추상화된 소프트웨어 개념” 콜백지옥을 해결하기 위해 에서 Promise로 지원하게 되었다. Promise의 핵심은 비동기에서 성공과 실패를 분리해서 메소드를 수행하며, 하다는 점이 있다. Promise는 , 비동기식이 정상적으로 실행된다면 를 비정상적으로 실행된다면 두번째 인수인 를 호출한다. Promise를 호출한 이유 사용할 수 있는 메소드는 then: reslove()를 통한 리턴 값 catch: reject()를 통한 리턴 값 finally: 실행 여부와 상관없이 이후 이벤트 실행 가장 큰 으로는 코드의 가독성이 증가 반복해서 재사용하는 예외처리 작업이 줄어듬 를 사용하면 상황을 쉽게 찾아내 한번에 비동기 처리를 해야되는 경우 Promise.all 프로미스가 담겨 있는 배열 등의 이터러블을 인자로 전달 받는다. 그리고 하고 그 처리 결과를 resolve하는 새로운 프로미스를 반환한다. 전달받은 …

콜백이란? 비동기처리방식에 속하며, 함수가 끝나고 난 뒤에 실행되는 함수 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자로 대입되는 함수를 라고 부름 아래의 예시처럼 다른 코드가 특정 코드가 마무리되기 전에 실행되지 않도록, 즉 비동기 처리를 위한 방법 출력 순서는 2 → 1 콜백의 불편사항 비동기 처리에 콜백 함수를 이용하게 되면 코드를 중첩시켜 작성하게 되기 때문에 에러, 예외처리가 어렵고 복잡도가 증가하게 되어 콜백지옥을 맛볼 수 있다. 콜백함수의 중첩은 에러처리가 힘듬다. callback 지옥 이미지 콜백이란? 콜백의 불편사항

깊은복사와 얕은 복사 Shaloow Copy - 얕은 복사란? 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참고 하고 있다면 이를 얕은 복사라고 한다. 객체를 가르키는 변수(원본)을 다른 변수(사본)에 할당하면 원본 의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라하며, 얕은 복사이다. 또 얕은 복사는 한다. 결국 얕은 복사란? , 원본 또는 사본 중 어느 한쪽에서 객체를 변경(변수에 새로운 객체를 재할당하는 것이 아니라 객체의 프로퍼티 값을 변경하거나 프로퍼티를 추가, 삭제)하면 얕은 복사를 하는 방법에는 Object.assign() Array.Slice() Spread 연산자 (전개연산자) Deep Copy - 깊은 복사란? 깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끈헝진 객체를 말한다. 깊은 복사는 하는 경우를 말한다. 깊은 복사를 하는 방법에는 J…

Destructuring(구조 분해 할당)이란? 와 은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체 컬렉션에 데이터를 순서대로 저장할 땐 배열 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 하는데, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생긴다. 이때 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법인 을 사용할 수 있다. 그 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 는 그 진가를 발휘한다. 이와 같이 구조 분해를 하게 되면 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게된다. ‘‘로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져…

개요 자바스크립트에는 여덟 가지 자료형이 있다. 이 중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 ‘원시형(primitive type)’라고 부른다. 그런데 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 객체를 만들기 위해서는 중괄호 {}를 이용해 만들 수 있는데, 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데, 아래와 같이 허용할 수 있으며, 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부른다. 그리고 프로퍼티 값엔 모든 자료형이 올 수 있다. 키에는 문자형 값에는 자료형 그래서 객체란? 객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)이다. 객체는 프로퍼티(키-값 쌍)를 저장한다. 프로퍼티 키는 문자열이나 심볼이여야 한다. (보통은 문자열) 값은 어떤 자료형도 가능하다. 프로…

WebRTC(Web Real-Time Communications)란? WebRTC는 서버를 최대한 거치지 않고 P2P로 브라우저나 단말 간에 데이터를 주고받는 기술의 웹 표준이다. 웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고 또 유일한 P2P 표준이기도 하다. 쉽게 말하자면 웹 어플리케이션(최근에는 Android 및 IOS도 지원) 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어 혹은 텍스트, 파일 같은 데이터를 브라우져끼리 주고 받을 수 있게 만든 기술이다. WebRTC 통신 원리 위의 그림을 통한 설명 보통 두 기기가 실시간으로 소통하기 위해서는 WebRTC에서 제공하는 등의 API와 API들을 적절하게 데이터를 교환할 수 있도록 처리해 주는 과정인 이라는 프로세스를 통해 통신을 조정해야하며, 네트워크 주소 변환기(NAT) 및 방화벽에 대처하기 위해 메타데이터를 교환할 수 있는 역시 필요하다. 또 P2P 연결이 불가능한 상황을 대비한 릴레이 서버…

Props VS State 에 영향을 주는 정보를 가지고 있다. 는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 는 (함수 내에 선언된 변수처럼)컴포넌트 안에서 관리한다. props state 상위 구성 요소에서 초기 값을 가져올 수 있습니까? 예 예 상위 컴포넌트로 변경할 수 있습니까? 예 아니 Component 내에서 기본값을 설정할 수 있습니까? 예 예 Component 내부에서 변경할 수 있습니까? 아니 예 자식 컴포넌트의 초기값을 설정할 수 있습니까? 예 예 자식 구성 요소에서 변경할 수 있습니까? 예 아니

개요 이번에 면접을 진행하면서 질문으로 “주어진 과제에 전역상태관리로 Redux-toolkit 사용하였던데, 다른 상태관리 라이브러리도 많을 텐데 왜 Redux-toolkit을 사용했는지?”에 대한 질문을 받게 되었다. 경험해본 전역상태 관리 라이브러리에 대해서는 답변을 잘 하였지만, Jotai와 Zustand의 경우 경험해보지 못하고 사용해 본적이 없어서 거론 정도로 설명을 하고 끝나게 되어 이참에 전역상태관리에에 대한 부분을 집고 넘어가보자 이 글을 작성하게 되었다. 전체적인 공통점 React는 단방향 데이터 바인딩 방식(Flux Architecture)이라 Props와 state를 다른 컨포넌트에서 사용하기 위해서는 을 이용해야만 했다. Props drilling 방식을 이용하면 관리해야되는 컴포넌트가 많거나 하위 컴포넌트에서 사용하기 위해 불필요한 props를 전달해야되는 경우 등 불편함을 많이 느끼게 되었고, 전역적인 상태 관리의 필요성이 대두 되었다. Context AP…

잡썰.. 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것들을 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것을 권장한다는 글을 종종 보게 되었다. 그 이유는? 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다. 본론 리듀서 함수는 순수함수이여야 하며, 사이드 이팩트가 없어야 한다. 그렇기 때문에 api 요청과 같은 비동기 요청 관련 로직을 리듀서에 작성할 수 없고, 적는다면 컴포넌트에서 useEffect에 로직을 작성할 수 있다. (아래의 로직은 취업을 준비를 모기 업 과제로 얼마 준비하지 않았을 때의 로직이다. 상태관리로 리코일을 이용) 위와 같이 작성할 경우 시간이 얼마 되지 않았음에도 불구하고 어디서 데이터가 호출하는지 까먹었었다. 그렇다. 외부 API 정보를 컴포넌트에서 호출하게 되면 어디서 호출하는 지 알아봐야하고…

트리거란? 데이터베이스 삽입, 갱신, 삭제 등의 관련 되는 절차형 SQL이다. 테이블에 대한 이벤트에 반응해 자동으로 실행되는 작업을 의미 목적 일반적으로 이벤트와 관련된 테이블의 데이터 삽입, 추가, 삭제 작업을 DBMS가 자동적으로 실행시키는데 활용 데이터 무결성 유지 및 로그 메시지 출력 등의 별도 처리를 위해 사용되기도 함 데이터베이스에 저장된 데이터 값과 그 것이 표현하는 실제 값이 일치하는 정확성을 의미 구성 구성요소 설명 선언부(DECLARE) 트리거의 명칭을 정의하는 부분 이벤트부(EVENT) 트리거가 실행되는 타이밍, 이벤트를 명시하는 부분 시작/종료부(BEGIN/END) 트리거의 시작과 종료를 표현하는데 필수적이며, BEGIN/END가 쌍으로 이루어 추가되므로 블록으로 구성, 다수 실행을 제어하느 기본적 단위가 되며 논리적 프로세스를 구성 제어부(CONTROL) 기본적으로 순차적으로 처리, 비교 조건에 따라 블록 또는 문장을 실행, 조건에 따라 반복 실행 SQ…

any any의 사전적인 의미는 이고, TypeScript에서는 으로 해석할 수 있다. 어떤 것이든지 허용하는 는 엄격하게 타입을 검사하고 처리하는 TypeScript에서 치명적이다. 개발 당시에는 문제가 없으나 개발 후 예기치 못한 문제가 발생할 가능성이 매우 높다. unknown unknown의 사전적인 의미는 이다. unknown도 any와 하지만, 함부로 . unknown 타입으로 변수를 정의하면 컴파일러에게 변수의 타입이 unknown이라 어떤 값이든 올 수 있다. 그래서 하다. 체크를 해야 되는 코드는 많아지겠지만, any와 다르게 프로퍼티 또는 연산을 하는 경우 컴파일러가 체크하기 때문에 문제가 되는 코드를 미리 예방할 수 있다. 한줄 정리 우선 와 은 모든 타입을 혀용한다는 점에서 같다. 하지만 컴파일 타임에 프로퍼티 또는 연산을 하는 경우, 타입은 에러가 출력되지 않지만 의 경우 타입을 체크하기 때문에 문제되는 코드를 미리 예방할 수 있다. any unkn…

enum이란? 열거형 변수로 정수를 하나로 합칠 때 편리한 기능 임의의 숫자나 문자열을 할당할 수 있으며, 하나의 유형으로 사용해서 버그를 줄일 수 있음 TypeScript가 자체적으로 구현하는 기능 JavaScript에서는 사용할 수 없기 때문에 아래와 같이 객체를 사용하는 코드를 작성하게 됨 enum은 편리한 기능이지만 TypeScript가 자체적으로 구현했기 때문에 Tree-shaking이 되지 않는다. 참고링크 TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다. enum이란? 참고링크

기본적으로 Next.js는 모든 페이지를 사전렌더링 한다고 공식문서에 적혀있다. 사전렌더링이라 하면, 클라이언트 측 JavaScript에서 모든 작업을 수행하는 대신 미리 각 페이지에 대한 HTML을 생성해 성능효과와 SEO를 얻을 수 있다. Next에서 존재하는 두 가지의 렌더링 방식 두 개의 차이점은 페이지에 대한 HTML을 생성할 때 이루어 진다. 정적 생성(권장): HTML은 빌드 시 생성되며, 각 요청에서 재사용된다. 서버측 렌더링: HTML은 각 요청에서 생성된다. (또는 이라고도 한다.) 공식문서에서는 설명을 하자면 정적으로 생성된 페이지는 성능 향상을 위한 추가 구성 없이 CDN에 의해 캐시를 할 수 있어서라고 한다. 하지만 경우에 따라 서버측 렌더링이 유일한 경우가 있다고 한다. 정적 생성 페이지가 정적 생성을 사용하는 경우, 시 HTML이 생성되게 되는데, 이 HTML은 각 요청에서 재사용된다.(CDN에서 캐시할 수 있음) 데이터가 없거나 있는 경우를 정적으로…

JWT는 웹표준으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전성 있게 전달함 구성요소 JWT는 을 구분자로 3가지 문자열로 구성되어 있음 헤더(Header) typ와 alg 두가지의 정보를 가지고 있는데, 는 을 지정하고 는 을 지정함 typ에는 JWT이기 때문에 JWT의 값이 들어가며, alg에는 기본적으로 HMAC, SHA256, RSA가 사용되며, 토큰을 검증 할 때 사용되는 signature부분에서 사용 정보(Payload) Payload 부분에는 정보의 한 을 이라고 부르고, 으로 이루어짐 클레임의 종류는 총 3가지로 등록된 클레임 / 공개 클레임 / 비공개 클레임이 있음 서명(Signature) 헤더의 인코딩값과 정보의 인코딩값을 합친 후 주어진 비밀키로 해쉬를 하여 생성’ 로그인 인증시 JWT 사용 JWT 토큰 사용시, 유효기간이 짧거나 길면 작업이 번거롭거나 보안에 취약함 이를 보안하기 위해 이 나오게 되었고, 의 유효기간이 만…

Software as a Service의 약어 클라우드 기반의 소프트웨어 제공 모델 클라우드 제공업체가 클라우드 애플리케이션 소프트웨어를 개발 및 유지 관리하고, 자동 소프트웨어 업데이트를 제공하고, 인터넷을 통해 Pay-as-you-Go 방식으로 고객에게 소프트웨어를 제공 보통 클라우드 제공업체는 미들웨어, 애플리케이션 소프트웨어, 보안을 포함한 모든 하드웨어 및 전통적인 소프트웨어를 관리함 이점 이용 클라이언트는 온프레미스 시스템 및 소프트웨어를 유지 관리할 때보다 더 비지니스 을 배포, 확장, 업그레이드 등 총 을 더 정확하게 SaaS의 예 Freshdesk Google Workspace (이전 GSuite) Dropbox GoToMeeting 유사 다른 용어 IaaS Infrastructure as a Service의 약어 서비스형 인프라로 비즈니스 운영에 필요한 스토리지, 네트워킹 및 컴퓨팅 리소스를 제공 IaaS의 예 DigitalOcean Linode Racks…

Cache 물건을 일시적으로 저장, 보관하기 위해 사용하는 곳이라는 사전적 의미를 가지고 있는데 개발 기술적인 Cache의 뜻으로는 의 복사본을 으로 을 말한다. Caching 에 데이터나 계산된 결과 값의 복사본을 저장해 둠으로써 전체적인 처리 속도를 향상 시킨다. 데이터에 직접적으로 접근하는데 걸리는 시간이 오래 걸릴 때 필요한 값을 얻기 위해 계산하는 과정을 생략하고 싶을 때 반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸네일 등) 은 복사본을 이용하는 것이다. 하지만 복사본과 가 생길 수 있으니 에 유의해야 한다. 컴퓨터의 동작원리 컴퓨터의 동작원리 CPU RAM Hard Drive 중앙처리장치 주기억장치 보조기억장치 매우 빠름 빠름 매우 느림 기억장치에서 데이터를 받아들여 연산작업 전원이 꺼지면 데이터가 지워짐 전원이 꺼져도 데이터가 지워지지 않음 RAM은 하드 디스크에서 데이터를 불러오고 CPU는 RAM에 저장되어 있는 데이터를 이용하여 연산 작업을 수행하는 구조이다…

각 주제에 따라 테이블을 나누어 작성한 후, 정보를 가져오는 경우 가 있다. 이때 을 사용하게 되는데, 그 중 많이 사용하는 것이 과 이다. 차이점 두 테이블에서 을 위한 기준 열이 서로 값을 가지고 있는 경우 조회에서 누락되는 행은 존재하지 않는다. 그렇다면 과 은 같은 조회 결과를 보인다. 이때, 이 상대적으로 성능이 좋다고 한다. 결론 은 합집합, 은 교집합이다. 결과가 같다면 대신 을 사용하는게 좋다. 차이점 결론

SQL(관계형 DB) SQL을 사용하면 RDBMS(관리 시스템)에서 데이터를 저장, 수정, 삭제 및 검색할 수 있음 관계형 데이터베이스의 핵심 특징 데이터는 테이블에 저장된다. 데이터는 여러 테이블에 분산된다. 데이터는 테이블에 레코드로 저장되는데, 각 테이블마다 명확하게 정의된 구조가 있다. 해당 으로 정의된다. 따라서 스키마를 준수하지 않은 레코드는 테이블에 추가할 수 없다. 즉, 스키마를 수정하지 않은 이상 정해진 구조에 맞는 레코드만 추가가 가능한 것이 관계형 데이터베이스의 특징 중 하나다. 또한, 데이터 중복을 피하기 위해 ‘관계’를 이용한다. 데이터 중복을 피하기 위한 데이터 관계 예시 하나의 테이블에서 중복 없이 하나의 데이터만을 관리하기 때문에 다른 테이블에서 부정확 데이터를 다룰 위험이 없어지는 장점이 있다. NoSQL(비관계형 DB) SQL(관계형 DB)와 반대로 스키마도 없고, 관계도 없다. NOSQL에서는 레코드를 문서(documents)라고 부른다. 여기…

HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 WebStorage 스펙이 포함됨(로컬과 세션스토리지로 나뉨) Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 젖아할 수 있는 방법을 제공한다. SessionStorage 각각의 출처에 대해서 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다. 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다. 데이터를 절대 서버로 전송하지 않는다. 저장 공간이 쿠키보다 큽다.(최대 5MB) 입력 폼 정보, 비로그인 장바구니 용도로 많이 사용된다. LocalStorage SessionStorage와 비슷하지만, 브라우저를 닫았다 열어도 데이터가 남아있다. 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다. 저장 공간이 셋중 제일 크다. 자동 로그인을 유지시킬 때 …

인증과 인가 정의 전달, 공개하기 위한 방법으로 인증 : (식별가능한 정보로) 서비스에 등록된 유저의 신원을 입증하는 과정 인가 : 인증된 사용자에 대한 자원 접근 권한 확인 HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특성이자 약점을 보완하기 위해 을 사용 기본적으로 HTTP 프로토콜 환경은 “connectionless(무연고), stateless(국적없는)” 한 즉, ****을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야되는데, 이를 해결하기 위해서 쿠키와 세션, 그리고 추가적으로 토큰을 사용하게 되었다. 쿠키(Cookie) 쿠키란? 에서 쿠키를 개발하였다. 클라이언트(브라우저) 에 된다. 로 구성되어 있으며, 브라우저 환경마다 다르긴하지만 로 데이터를 보낼 수 있다. 로 구성되어 있으며, 이다. 사용자 인증이 할 수 있으며, 유효 시간이 정해지면 되는 특징이 있다.(날짜를 정해주면 , 안 정해주면 참고) 쿠키는 사용자가 따로 요청하지 않아도…

차이점은 파일은 으로 되어 있고, 파일은 로 되어있어 이미지 확대시, 는 이 일어나고 는 가 유지된 채 표현된다. PNG(Portable Network Graphics, PNG) 비손실 그래픽 파일 포맷(픽셀형식) 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기위에 고안됨 컬러 팔레트 화상과 그레이스케일 화상, 풀 컬러 화상 방식을 지원함 고해상도를 지원하므로 파일 크기가 큼(이미지를 처리/공유/저장/실행하는데 시간이 걸려 페이지 로딩 시간이 길어짐) SVG(Scalable Vector Graphics, SVG) 2차원 벡터 그래픽을 표현하기 위함 XML 기반의 파일 형식(벡터 그래픽 파일 형식) SVG 형식의 이미지와 그 자동은 XML 텍스트 파일들로 정의 되어 있어 검색화/목록화/스크립트화가 가능하며, 필요하다면 압축도 가능함(검색 엔진이 텍스트를 분석할 수 있어서, 접근성과 SEO(검색 엔진 최적화)측면에서 좋음) 기본적으로 파일 사이즈는 작은 편에 속하지만, 수…

CDN이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 경우 시간이 오래 걸릴 수 있는데, 클라이언트와 웹 사이트 서버 간에 를 두어 효율성을 높일 수 있다. CDN 서버를 통해서 를 할 수 있음 이미지 CDN의 URL을 이용하여 최적화 옵션을 나타내는 방법 이미지 CDN에서의 URL에는 이미지에 대한 변환 및 최적화에 대한 중요한 정보를 전달하게 되는데, URL의 형식은 보통 아래와 같다. url 예시 Origin: 도메인(자체 도메인 또는 이미지 CDN의 도메인이 있을 수 있다.) Image: 이미지(일반적으로 필요할 때 기존 위치에서 이미지를 자동으로 검색하도록 구성할 수 있다.) Security key: 이미지의 새 버전마다 고유한 보안 키를 필요로 하게하여, 다른 사람이 이미지의 새 버전을 만드는 것을 방지 Transformati…

개요 란 클라이언트가 자신을 거쳐 다른 네트워크에 접속할 수 있도록 해주는 서버를 말한다. 서버와 클라이언트 사이에서 대리로 통신을 라고 하고 그 기능을 하는 라 부르게 되는 것이다. 프록시 서버의 원리 프록시 서버는 서버와 클라이언트 사이에서 요청과 응답을 처리해주게 되는 것을 말하는데 클라이언트에서 프록시 서버로 데이터 전송 프록시 서버에서 다시 웹 서버로 웹 응답 웹 서버에서 프록시 서버로 웹 응답 프록시 서버에서 클라이언트로 데이터 전송 프록시 서버의 사용 목적(이유) 캐시 데이터를 사용하기 위함 프록시 서버 중 일부는 프록시 서버에 요청된 내용을 캐시를 사용해 저장해둔다. 그러면 캐시에 저장되어있는 내용에 대한 재요청은 서버에 따로 접속할 필요가 없어 저장된 내용을 그대로 돌려주면 되기 때문에 전송 시간을 절약할 수 있고 외부 트래픽을 줄임으로써 네트워크 병목 현상을 방지할 수 있다. 보안 목적 프론시 서버가 중간에 경유하게 되면 IP를 숨기는 것이 가능하기 때문이다. 또…

정의 Object를 사용하여 Object를 생성하면 Object가 반환된다. 이때 라고 부른다. new 연산자를 사용하여 Object를 생성하여 변수에 할당할 수 있으며, 변수에 할당된 Object가 instance인 것이다. ## instance를 사용하는 이유는? instance마다 다른 값을 유지/제어하기 위해서 instance를 생성하는 것이다. 다시말해, 원본의 값을 그대로 사용하면 원본의 데이터가 변경되기 떄문에 instance를 생성하여 원본의 값을 건들지않고 사용하기 위해 instance를 생성하여 사용하는 것이다. 참고링크 object MDN 오브젝트(Object)와 인스턴스(instance),instanceof 정의 참고링크

면접에서 기술질문으로 아래와 같은 질문을 받게되었다. 나는 위와 같은 질문을 받고 와 관련된 최적화 방안에 대해 질문한 것이라고 생각은 들었지만, 알지못하여서 답변으로는 아래와 같이 말을 하게 되었다. 아직까지는 대규모 프로젝트를 진행해본 경험이 없다. 하지만 2차례의 프로젝트를 진행하면서 최적화 방안으로 사용하거나 학습한 바로는 관심사의 분리나 단일 책임원칙을 적용하여, 컴포넌트가 최대한 한개의 기능을 수행하게 작성하거나 분리를 하고 공통으로 사용되는 코드는 분리하여, 코드의 양을 줄이고 최소화는 방법을 이야기하였다. 그 후 추가적으로 와 , 에 대해 말을 하였지만 면접관의 질문에 대한 답변을 말한 것이 아니여서 이 글을 작성하게 되었다. 지금 드는 생각 단순하게 최적화를 하기위해서는 코드를 적재적소에 사용한다. 라는 생각이 들게 되었는데 이유는 작성한 코드들이 항상 사용되는 것이 아니여서 필요할 경우에만 사용하면 된다 라는 생각이 들었다. 그래서 다음 면접시, 모르는 답안이 나…

하드웨어 생산자와 소프트웨어 개발자의 관계를 나타낼 때 사용 그 중에서 게임제조사와 소비자를 연결해주는 게임회사(퍼블리싱) 스마일게이트와 같은 회사 개발자 측면에서 보면 퍼스트 파티 개발자 : 하드웨어 생산자가 직접 소프트웨어를 개발하는 경우 세컨드 파티 개발자 : 하드웨어 생산자인 기업과 자사간의 관계(또는 하청업체)에 속한 소프트웨어 개발자 서트 파티 개발자 : 아무 관련없는 제 3자 소프트웨어 개발자 결론 주로 편한 개발을 위해 이나   혹은  를 사용하는데, 이처럼 제 3자로 중간다리 역할로 도움을 주는 것이 서드 파티 로 볼 수 있고, 이런 것을 만드는 개발자가 서드 파티 개발자다. 참고링크 서드 파티 개발자 - 위키백과, 우리 모두의 백과사전 결론 참고링크

CI란? 자동화 과정 자동화 프로세스인 을 의미하는데, CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있음 동작을 확인하고 변경으로 인해 문제가 생기는 부분이 없도록 보장 CD란? 자동화 과정 지속적인 서비스 제공(Continuous Delivery) 또는 지속적인 배포(Continuous Deployment)를 의미하며 으로 사용됨 는 테스트 및 배포 단계를 자동화하는 DevOps 방식을 논리적 극한까지 끌어 올림 코드 변경이 파이프라인의 이전 단계를 모두 성공적으로 통과하면 수동 개입 없이 해당 변경 사항이 프로덕션에 자동으로 배포 됨 는 또한 성숙하고 입증된 지속적 통합 및 지속적인 전달 단계를 기반으로 함 간단한 코드 변경이 정기적으로 마스터에 커밋되고, 자동화된 빌드 …

정의 애플리케이션을 트리의 각 노드들 즉, 일종의 나무와 같이 보고 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 이라고 명명하였다고 한다. 사용하지 않는 코드를 제거하는 기법 방법 import시, 필요한 것만 작성하여 사용 사용하는 모듈로부터 으로 한다. Babel이 ES6 모듈을 commonjs module로 변환하지 않도록 조치(.babelrc 설정) Babel은 대부분의 웹 애플리케이션에서 필수로 사용하는 도구 중 하나 이지만 를 사용중에 있다면 를 자동으로 로 한다. 좋은 기능이지만 트리 쉐이킹 관점에서는 그렇지 못하다고 한다. 에서 로 변환하지 못하도록 설정을 추가해 줘야한다. 또한 위와 같이 설정을 하면 웹팩은 코드를 광범위하게 호환되는 형식으로 변환하므로, 이 프로세스는 호환성 문제를 일으키지 않는다고 한다. 프로젝트의 모듈들이 Tree Shaking시, 해야 한다.(package.json 설정) 예측 가능한 입력을 가지고 동일하게 함수의 스코프 밖에 어떤 …

📺 동기부여 어떤 상황에서도 나는 부딪혀 이길 수 있는 사람이 된다 📚 보면 좋을 것 같아 나만의 리액트 라이브러리 만들기 이미지 CDN을 사용하여 이미지 최적화 리액트의 렌더링은 어떻게 일어나는가? Be Aware of Stale Closures when Using React Hooks useEffect 완벽 가이드 WebRTC 응용 서비스를 개발하는 2가지 방법 패턴에 대해서 공부한다면 Tech Interview for developer ⭐️ 내가 자주보는 사람 블로그 뚱이로고 - yceffort daleseo 위펄슨 기술 블로그 📺 동기부여 📚 보면 좋을 것 같아 ⭐️ 내가 자주보는 사람 블로그