티스토리

LeeHyojin Blog

검색하기

블로그 홈

LeeHyojin Blog

hyojin96.tistory.com/m

Lee_hyojin 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

블로그 이전 중입니다. 블로그 이전 중입니다! 🔥 공감수 0 댓글수 1 2023. 7. 21.
그래프 VS 트리 / 실생활 예시 ❗️그래프의 방향 VS 무방향 / 트리의 종류들을 나누어서 설명하지는 않습니다. 각각의 자세한 설명은 여기에서 각각 확인하실 수 있습니다. 위의 그림을 통해 그래프와 트리가 어떻게 생겼는지 눈으로 먼저 익혀보고, 쉽게 받아들이고 공감할 수 있도록 우리의 실생활에서 어떤 경우와 관련이 있는지 그림과 함께 연관 지어 설명해 보도록 하겠습니다. 먼저, 그림 그대로를 설명해 보면 트리는 방향(화살표)이 있고, 그래프는 방향(화살표)이 없이 선으로만 이어져 있는 것을 볼 수 있습니다. 방향이 있는 것으로 보아 트리는 계층형 모델이라는 것을 알 수 있을 것이고, 그래프는 양방향이라는 것을 알 수 있을 것이고 트리는 동그라미와 동그라미 사이에 반드시 1개의 경로만 가지고 있지만 그래프는 화살표가 따로 없는 것으로 보.. 공감수 3 댓글수 2 2022. 5. 24.
비동기처리 작동 원리, Microtask Queue & Task Queue Q: JS에서의 비동기처리의 작동 원리를 알고있나? A JS의 런타임에 메모리 할당을 담당하는 메모리 힙과 코드가 호출될 때 스택으로 쌓이는 콜스택이 있고, 콜스택은 후입선출 방식으로 실행됩니다. JS 작동 원리에서 비동기 함수일 경우를 설명해보자면 SetTimeOut이라는 함수가 콜백함수를 가지고 호출되어 콜스택에 쌓이면 이 함수는 Web API를 호출하는 함수라서 얘가 실행되는 순간 Web API의 타이머를 호출합니다. 그 후, 타이머가 SetTimeOut의 콜백함수를 가지고 Web API에 등록을 하고 콜스택에 있는 SetTimeOut 함수는 어찌됐든 실행완료가 되었기 때문에 콜스택에서 빠져나갑니다. 이어서 다음 줄의 코드들을 콜스택에 넣고 할일을 이어서 합니다. 그리고 타이머가 가지고 있는 콜백함.. 공감수 0 댓글수 0 2022. 4. 2.
CSR VS SSR / 크로스 브라우징 QA Q: CSR, SSR 무엇인가? A 🖥 CSR 사용자가 Website 요청을 보내면 CDN이 HTML파일이랑 JS로 접근할 수 있는 링크를 클라이언트로 보내고 클라이언트는 이 파일들을 받아서 실행하고 데이터를 위한 API가 호출됩니다. 서버사이드렌더링 때와는 다르게 클라이언트가 파일들을 받아서 실행하는 그 사이에 사용자는 아무것도 볼 수가 없고, 데이터를 위한 API가 호출 됐을 때는 placeholder 의 정보들이 보입니다. 서버가 API로부터 요청에 응답하고 API로부터 받아온 data를 placeholder자리에 넣음으로써 상호작용이 시작됩니다. [ 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없습니다 ] 💾 SSR .. 공감수 0 댓글수 0 2022. 4. 1.
OOP와 함수형 프로그래밍 QA Q: OOP 특징에 대한 설명이 가능한가? A OOP란 Object Oriented Programming으로 객체지향 프로그래밍이라고 하며, 4가지의 특징이 있습니다. 상속은 클래스 개념에서 부모 클래스로부터 자식 클래스가 유산을 물려받는것과 같이 부모의 메소드나 변수를 사용할 수 있는 것을 말하고, 다형성은 같은 함수가 있다고 가정하면 그 함수가 매개변수에 따라 다른 역할을 할 수 도 있는 것이고, 캡슐화는 보통 데이터를 은닉 시킨다고 표현하는데, 외부에서 쉽게 데이터를 접근할 수 없게 만들기도 하고, 데이터 구조와 데이터를 다루는 방법들을 한곳에 묶는 것을 말합니다. 추상화는 공통적인 속성이나 기능을 묶어서 이름을 붙이는 것입니다. [ 예: a,b,c가 있다면 이것은 영어로 묶을 수 있습니다 ] Q:.. 공감수 0 댓글수 0 2022. 4. 1.
클로저와 호이스팅에 대한 QA Q: 클로저가 무엇이며 장단점은 무엇인가? A A라는 함수가 있고 B라는 함수가 있다고 가정하고 A함수는 B함수 자체를 값으로 넘김으로써 B함수를 참조하는 함수 객체 자체를 반환합니다. B함수는 함수가 선언된 Lexical Environment 밖에서 실행 됐고 B함수가 선언된 위치 때문에 A함수의 Environment에 대한 Lexical Environment 클로저를 가지고, A함수는 B함수가 나중에도 참조할 수 있도록 Environment를 살려두어서 B함수가 계속 참조를 가지게 되는데 이 참조를 클로저라고 부릅니다. 예를들어 A를 실행하여 변수 C에 할당했는데 다른 코드를 실행하다가 어느 순간 C를 또 실행해야 하면 A는 B가 리턴되려면 C를 실행해야하기 때문에 GC에 의해 사라지면 안되는 것입니.. 공감수 0 댓글수 0 2022. 3. 31.
최적화에 대해 알아보며 나한테 묻는 QA Q: 애니메이션의 최적화와 Reflow / Repaint 개선 방법은? A 먼저, 컨텍스트 관점에서의 최적화는 CSS 애니메이션 중에 Transform과 Opacity와 같은 속성 변경은 컴포지터 스레드에서 처리되어서 메인 스레드와 병렬 처리가 가능하지만, JS 애니메이션은 항상 메인 스레드에서 처리되기 때문에 블로킹이 발생할 수 있습니다. 따라서, JS에서 처리되고 있는 애니메이션 중 CSS로 처리가 가능한 애니메이션을 CSS에서 처리함으로써 성능 개선이 될 수 있습니다. 리플로우 개선으로는 애니메이션이 들어간 요소의 Position은 Fixed나 absolute로 지정한다거나, 인라인 스타일을 최소화시키고 ClassName의 변화에 따라 스타일이 변경될 경우 Reflow를 완전히 피할 수는 없지만 D.. 공감수 0 댓글수 0 2022. 3. 31.
Execution Context 알아보며 나한테 묻는 QA Q: Execution Context은 왜 필요한가? A: 코드가 실행되는 환경이자 실행 가능한 코드가 되기 위해서 필요한 환경입니다. 실행 컨텍스트(Execution Context)는 함수를 호출했을 때 생성됩니다. JS엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보를 알고 있어야 하는데 실행 컨텍스트가 활성화 될 때, JS엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집에서 실행 컨텍스트에 저장합니다. 제가 생각하기에 실행 컨텍스트로 인해 얻을 수 있는 장점(필요성)을 몇가지 정리해보았습니다. 전체 코드의 환경과 순서를 보장하기 위해 필요합니다. 코드가 여러번 실행되어도 정보들을 저장해둔 덕분에 동일한 환경을 구성할 수 있습니다. 선언에 의해 생선된 모든 식별자들의 변화들.. 공감수 0 댓글수 0 2022. 3. 16.
DOM 알아보며 나한테 묻는 QA Q: DOM과 HTML의 차이점은? A: DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지는 않습니다. HTML은 화면에 보이고자 하는 구조를 문서화 한 것으로 단순 텍스트로 구성되어 있고, DOM은 HTML 문서의 내용과 구조가 Object Model로 변화되어 실제 화면에 나타나는 인터페이스 입니다. DOM과 HTML의 차이점은? 위와 같이 HTML 규칙의 필수 사항인 요소들이 빠져있지만 DOM트리에는 올바르게 교정되어 나타난 것을 보아 유효하지 않은 HTML 코드들을 DOM을 생성하는 동안 규칙에 맞게 교정하고 있는 것을 알게 되었습니다. 또한 JavaScript로 DOM을 수정할 때에도 마찬가지입니다. let p = document.createElement('p'); let PText = .. 공감수 0 댓글수 0 2022. 3. 15.
브라우저의 렌더링 과정 & Render Tree와 DOM Tree의 차이점 🌲 렌더링 트리 생성 과정 1. 객체 모델 (Object Model) 생성 > 변환 HTML 코드가 있으면 렌더링 엔진은 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 개별 문자로 변환한다. 토큰화 개별 문자로 변환된 것을 HTML5 표준으로 지정된 고유 토큰으로 변환한다. 각 토큰은 고유한 의미와 규칙을 가진다. DOM 생성 마지막으로 HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결된다. 이 트리 데이터 구조에는 마크업에 정의된 상위-하위 관계를 포함한다. (ex: HTML 객체는 body 객체의 상위라는 관계다.) 이렇게 구성된 DOM 트리는 HTML 문서 마크업의 속성과 각 노드의 관계에 대한 정보를 가지고 있지만, 아.. 공감수 1 댓글수 0 2022. 3. 15.
Tree와 Binary Search Tree Tree 트리는 노드로 구성된 계층적 자료구조입니다. 최상위 노드(루트)를 만들고, 루트 노드의 child를 추가하고, 그 child에 또 child를 추가하는 방식으로 트리 구조를 구현할 수 있습니다. Array, Linked List, Stack, Queue는 라인처럼 생긴 일직선 데이터 구조인데 Tree는 부모 자식 관계를 가지는 구조입니다. Tree는 계층적 자료구조라고 했는데 이 것을 가능하게 한 것은 노드가 하나 이상의 child를 갖기 때문입니다. 노드중에는 부모를 아는경우도 있고 자식만 아는 경우도 있습니다. 또한 어떠한 순서에 의해서 데이터가 관리되는 경우도 있고, 데이터가 마구 섞여있는 경우도 있습니다. ※ 트리의 용어 정리 루트 노드 (Root) : 부모가 없는 노드, 트리는 하나의 .. 공감수 0 댓글수 0 2021. 2. 26.
GraphQL - [ useQuery & useLazyQuery ] 🌸 TIL 이번에 회사에서 담당하는 프로젝트에 전부터 사용해보고 싶었던 GraphQL을 적용해보았다. 처음 사용해보기 때문에 아직까지는 좋은 퍼포먼스를 보일 수 없지만 단시간에 공식문서를 보며 빠르게 적용할 수 있다는 것도 큰 장점이라 생각한다. 서버에서는 어떤식으로 typeDefs를 설계하고, resolvers는 어떤식으로 작성이 되는지 간단하게나마 이해하고 client와 server를 직접 구현하여 한 싸이클을 타보는 것도 좋을 것 같아서 처음에는 서버는 Node를, 클라이언트는 React를 사용하여 간단한 예제를 만들어보았었다. 간단한 예제를 만들어보면서 서버와 클라이언트의 흐름을 파악하고 나니까 실제 서비스에 적용하는 시간도 절약되었고, 이해도 더 빠르고, 백엔드 개발자분들과의 소통도 좀 더 원활.. 공감수 2 댓글수 0 2021. 2. 17.
Hash Table (해시 테이블) Hash Table ( 해시 테이블 ) 해시 테이블(해시 맵이라고도 합니다.)은 연관배열 구조를 이용하여 키(key)에 결과 값(value)을 저장하는 자료구조 입니다. 해시 테이블은 키를 저장할 때에 메모리 공간을 덜 사용할 수 있도록, 키를 "해시 함수"(Hash Function)라는 함수를 통해 특정 숫자값의 인덱스로 변환합니다. 해시 테이블은 필요할 때에만 메모리 크기를 늘리고, 가능한 작은 크기를 유지합니다. 연관배열 구조( associative array )란 키(key) 1개와 값(value) 1개가 1:1로 연관되어 있는 자료구조 입니다. 따라서 키(key)를 이용하여 값(value)을 도출할 수 있습니다. 연관배열 구조는 다음의 명령들을 지원하고 이 명령들은 해시테이블에서도 동일하게 적용.. 공감수 1 댓글수 0 2021. 1. 28.
API Documentation - PostMan 🌸 TIL 프로젝트를 하다보면 나를 위해서든 다른 개발자를 위해서든 좀 더 원활한 협업을 위해 Api Documentation이 필요하다고 느낄 때가 온다. 이번에 담당했던 프로젝트를 진행하면서 Api Documentation의 필요성을 느끼게 되었고, 아직 잘 정리된 문서가 없다는 것을 알게되었다. (...없....으면 내가 만들면 돼!!!!! ㅎ히힣..ㅎㅎㅎ.....ㅎㅎ...........) 아직 만들어본 경험이 없어서 서툴기도 하고 완벽하진 않지만 처음부터 완벽한건 없으니까!! 포스트맨으로 Api Documentation 만들기 포스트맨을 사용하여 Api Documentation 만드는 방법은 조금만 구글링해도 너무 친절하게 나와있기 때문에 만드는 방법은 적지 않겠지만, 만들면서 얻은 정보들, 편리.. 공감수 0 댓글수 0 2021. 1. 27.
React-Navigation 화면 포커스 감지 문제 해결 🌸 TIL 💥 문제점 구현하던 기능 중에 A screen에서 B screen으로 navigate한 후, B screen에서 A screen으로 goBack했을 때 A screen에서 API 호출이나 재렌더링이 이루어져야 하는 상황이 생겼다. 다시 말해 B screen에서 useContext에 있는 상태 값을 변경하였고, goBack을 통해 A screen 으로 돌아왔을 때 변경된 값이 적용되어야 하기 때문에 재렌더링을 해야만 하는 것인데 goBack을 사용해야하기 때문에 A screen에서 재렌더링이 이루어지지 않고 있다. 🌈 해결 방안 react-navigation은 총 3가지 방법을 제공한다. Listening to the 'focus' event with an event listener. Using.. 공감수 8 댓글수 6 2020. 11. 25.
TDD 💎 🌸 TIL 회사에서 React Native + TypeScript 를 사용하여 프로젝트를 진행하면서 뒤늦게 TDD를 도입하게 되었다. TDD의 필요성을 느끼지 못했고, 그저 요구사항을 구현하기 급급하다는 핑계로 TDD 도입을 뒷전으로 미루었는데 프로젝트 기능을 하나하나 추가해 나가면서 복잡한 로직들이 늘어나게 되었고 기능이 제대로 작동하고 있는지 일일이 테스트하는 것도 번거로워졌다. 🔎 선 기능구현, 후 TDD 처음에는 기능을 먼저 구현하고 나중에 TDD를 작성하여 테스트하는 방식을 적용했었다. TDD의 의미는 "테스트 주도 개발" 인데 선 기능구현 후 TDD를 한다는 것은 TDD의 존재의미를 잃게 되는 것이고 테스트 주도 개발이라고 볼 수 없다. 기능을 다 구현한 후 몰아서 작성한 테스트 케이스는 당연.. 공감수 1 댓글수 0 2020. 11. 2.
🍀 useEffect VS useLayoutEffect 🍀 🌸 TIL 회사에서 담당하고 있는 React-Native 앱을 구현하던 중에 Navigation 중에 Stack.Screen을 사용하여 Header Bar를 커스텀하여 사용해야 하는 경우가 생겼다. 먼저 기본적으로는 상단에 header가 있고 navigation.push()를 통해 페이지를 이동했을 시 header 왼쪽에 이전버튼이 보여지게 되는데, 내가 구현해야 하는 것은 이전 버튼을 사용하지 않고 header에 내가 지정하고 싶은 이미지나 버튼 등등을 커스텀하여 만들어내는 것이었다. import React, { useState } from 'react'; import { Text, View, TouchableOpacity } from 'react-native'; const App = ({ naviga.. 공감수 6 댓글수 10 2020. 10. 22.
TypeScript 의 Interface 사용하기 🌸 TIL TypeScript 를 사용하게 되면 함수의 반환 값의 타입을 지정해줄 수 있다. const func = async(foo: object): Promise => { try { const res = await fetch(url, options); return await res.json(); } catch (err) { let errCode = {ok: false, data: err} return errCode; } }; 위와 같은 async await 을 사용한 비동기 함수가 있다면 반환 값의 타입으로 Promise 를 사용하여 타입을 지정해줄 수 있는데 반환 값의 타입이 항상 같을 수 없을 때가 있다. const func = async(foo: object): Promise => { try {.. 공감수 1 댓글수 0 2020. 10. 21.
프로젝트 TIL (5) - [ XML -> JSON 변환, CORS 이슈 ] 오늘 한 일 🥴 오늘은 네이버 도서 API에서 카테고리별로 도서 정보를 받아오는 기능을 구현했습니다. 이 API는 사용자가 요청한 카테고리별로 도서를 필터링하여 응답해주는 API인데 클라이언트에서 요청하려고 하니 CORS 에러가 났습니다. 해결하기 위해 요청 시 headers에 Access-Control-Allow-Origin 설정도 추가해보고 이런저런 방법을 적용해보았지만 해결되지 않아서 검색한 결과 이 API는 서버프로그래밍(python, jsp, php, node.js 등)을 통해서 호출하도록 되어 있었습니다. 그 이유는 다른 사람의 클라이언트 id, secret을 도용해서 API를 호출하는 것을 막기 위해서입니다. 그래서 저는 서버에서 처리하기 위해 다음과 같은 과정을 거쳐 해결하였습니다. 카테고.. 공감수 1 댓글수 0 2020. 9. 28.
프로젝트 TIL (4) - [ 디버깅의 중요성 & 함수형 프로그래밍의 중요성 ] 오늘 한 일 😒 input 태그를 사용할 때 주의할 점을 평소에 잘 알고 있다고 생각했었고 또 많은 input 태그를 다뤄보았음에도 불구하고 왜 이런 실수를 했는지 자괴감이 들었습니다...... 시작하기에 앞서 제가 구현하고자 했던 로직은 다음과 같습니다. 유저가 독후감 작성하기를 클릭하여 WriteReport 페이지에 오면 기존에 있던 독후감 보여주기 기존에 있던 독후감을 수정버튼을 통해 수정할 수 있다. 수정버튼을 누르면 기존에 있던 value값에 입력하고자 하는 value 값을 더해서 수정할 수 있다. 이 로직을 수행하기 위해서 input 속성 중 readOnly라는 속성을 사용하게 되었습니다. readOnly 속성은 input값이 읽기 전용인지 아닌지를 boolean 값으로 판단하는 속성입니다. .. 공감수 0 댓글수 0 2020. 9. 18.
프로젝트 TIL (3) - [ 사용자가 삭제 요청 시 경고창 띄워주기 ] 오늘 한 일 🤓 오늘은 사용자가 책 삭제 버튼을 눌러 책을 삭제하고자 할 때 경고창을 띄워주기 위해 모달을 구현했습니다. 처음에는 경고창을 따로 만들지 않고 책 삭제 버튼 클릭 시 바로 서버에 삭제요청을 하여 삭제가 되도록 구현했었는데 내 서비스는 해당 책에 대한 독후감을 작성할 수 있는 서비스라 만약에 사용자가 책 삭제 버튼을 실수로 누르게 된다면 애써 작성하여 모아놓은 독후감까지도 의도치 않게 삭제되는 불미스러운 일이 발생할 것 같다는 생각을 하게 되었습니다. 그래서 " 이 문제를 어떻게 해결하면 좋을까? " 하고 생각해보니 보통 다른 서비스들을 접하다 보면 삭제 버튼을 누르면 정말 삭제할 것인지에 대한 모달창이 뜬다는 것이 문득 생각이 나서 " 아 이래서 유저가 어떠한 액션을 취할 때 필요에 따라 .. 공감수 0 댓글수 0 2020. 9. 16.
프로젝트 TIL (2) - [ window.location.replace() ] 오늘 한 일 🤪 오늘은 리액트로 MyLibrary 페이지를 구현하면서 데이터가 바뀜에 따라 화면에 새로고침이 필요한 부분에 대하여 어떻게 코드를 작성해야 할 까 고민을 하다가 window.location.replace() 라는 메서드를 처음 사용해보았습니다.. 먼저 제가 구현하고자 했던 것은 내 서재에 있는 책을 삭제했을 때 삭제한 책을 뺀 나머지 책을 다시 UI로 MyLibrary 페이지에 바로바로 보여주고 싶었습니다. 저는 이 과정을 작성하면서 다음과 같은 과정을 거치게 되었습니다. useEffect를 사용하여 특정 Props가 바뀔 때, 리렌더링 시키기 history.push()를 사용하여 페이지 이동시키기 window.location.replace("/MyLibrary") 를 통해 새로고침 효과 .. 공감수 3 댓글수 0 2020. 9. 14.
프로젝트 TIL (1) - [조건부렌더링 & Hooks 최적화] 오늘 한 일 😜 오늘은 내 서재 페이지에 조건에 따라 다른 UI를 보여줄 수 있는 화면을 구현했습니다. 삼항 연산자를 사용하여 조건을 분리했는데 가독성도 좋지 않은 것 같고 이러한 조건이 많아지게 된다면 렌더링 될 때에 UI가 매끄럽게 보여지지 않을 것 같다는 생각을 하게 되었습니다. 먼저 삼항연산자를 통해 작성한 코드는 다음과 같습니다. 위의 코드를 수도코드와 if/else 코드로 작성해보면 다음과 같습니다. 1. 사용자가 로그인을 한 상태이고 내 서재에 등록한 책이 있을 경우 2. 사용자가 로그인을 한 상태이고 내 서재에 등록한 책이 없는 경우 3. 사용자가 로그인을 하지 않은 상태인 경우 if(loggedUserCheck && myLibraryBookLists) { // ... }else if(lo.. 공감수 2 댓글수 0 2020. 9. 11.
2048 첫 사이드 프로젝트를 마치며 2048 링크 http://2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com/ 2048 2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com 프로젝트 소개 및 회고 React, JS, AWS배포와 알고리즘 공부를 하면서 여태 배운 내용을 되돌아보고 복습하며 간단한 사이드 프로젝트를 하고 싶던 와중에 동기분께서 2048 프로젝트를 제안해주셔서 같이 협업하여 프로젝트를 경험할 수 있는 좋은 기회를 얻게 되었습니다. 혼자서 했다면 정말 힘들었을텐데 같이 협업함으로써 정말 왜 협업이 필요한 것인지를 몸으로 느낄 수 있었습니다. 에러를 마주하게 되거나 오랫동안 풀리지 않는 코드를 붙잡고 있다면 번아웃.. 공감수 0 댓글수 0 2020. 6. 30.
Express Express는 Node.js의 핵심 모듈로 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크 입니다. 서버의 페이지 개수가 늘어나고 사이트가 커지면 코드가 복잡해지는데 Express 프레임워크를 사용하게 되면 코드의 양도 줄고 추후 유지보수가 쉽도록 만들어줍니다. http를 통해서 Node.js 만을 사용하여 클라이언트와 통신할 때와 Express를 사용하여 클라이언트와 통신할 때를 비교하면 다음과 같습니다. 클라이언트의 요청을 받아서 처리한 후, 다시 클라이언트에게 응답한다는 점은 같지만 중간에 미들웨어들을 거친다는 점이 다릅니다. Node.js만 사용하여 http서버를 통신하게 되면 Node.js 에 등록된 콜백들을 사용하여 처리하고, Express를 사용하면 Express 내부에 개.. 공감수 0 댓글수 0 2020. 6. 25.
Cookie와 Session Cookie와 Session을 사용하는 이유 HTTP 프로토콜에는 비연결성과 비상태성 이라는 특성이 있습니다. 클라이언트로부터 오는 요청마다 연결과 해제의 과정을 거치면서 연결 상태를 유지하지 않고 연결 해제 후에도 상태 정보를 저장하지 않기 때문에 서버의 자원을 절약할 수 있습니다. 즉, 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 비연결성 특성이 있는 것입니다. 하지만 서버의 자원을 절약할 수 있는 장점으로 인해 사용자를 식별할 수 없어서 같은 사용자가 요청을 여러번 하더라도 매번 새로운 사용자로 인식하는 단점이 있습니다. 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나게 되면서 상태 정보는 유지하지 않는 비상태성 특성이 있는 .. 공감수 0 댓글수 0 2020. 6. 18.
Virtual DOM 과 DOM 리액트의 주요 특징 중 하나는 가상 돔( Virtual DOM ) 을 사용하는 것입니다. 그렇다면 이 가상 돔이 정확이 무엇인지 DOM과 무슨 차이가 있는지 알아보겠습니다. DOM이란? Virtual DOM을 알아보기 전에 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야할 것 같습니다. DOM은 Document Object Model을 의미하고 이것은 구조화된 텍스트의 개념입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 HTML은 단순 텍스트일지라도 돔은 메모리에 가지고 있는 표현 식입니다. HTML 돔은 노드를 탐색하거나 수정할 수 있는 API를 제공합니다 ( getElementById, removeChild 등등... ) DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에.. 공감수 0 댓글수 0 2020. 5. 26.
클래스형 컴포넌트와 함수형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지 입니다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트 입니다. 먼저 클래스형 컴포넌트와 함수형 컴포넌트의 차이점에 대해 설명하기 위해 두 가지 방법의 코드를 보여드리겠습니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name}; } export default App; 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render(){ const name = 'react'; return {name}; } } expor.. 공감수 1 댓글수 0 2020. 5. 25.
web security ( XSS, CSRF, CORS와 OPTIONS 메서드 ) HTTP 요청은 기본적으로 Cross-Site HTTP Request가 가능합니다. 즉, 태그로 다른 도메인의 이미지 파일을 가져오거나, 태그로 다른 도메인의 CSS를 가져오거나 로 둘러 쌓여 있는 스크립트에서 생성된 Cross-Site HTTP Request는 Same Origin Policy를 적용 받기 때문에 Cross-Site HTTP Request가 불가능 합니다. ( Same Origin Policy란 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. ) AJAX가 널리 사용되면서 로 둘러 쌓여 있는 스크립트에서 생성되는 XMLHttpRequest에 대해서도 Cross-Site HTTP Request가 가능해야 한다는 요구.. 공감수 2 댓글수 0 2020. 5. 20.
http 개체와 서버구축 (bare code) Node.js는 "http" 개체라는 것에서 "http.Server" 개체를 만들어 서버를 구축합니다. 또한 요청과 응답을 다루는 "request" , "response" 개체에서 송수신을 수행합니다. 이런 개체의 사용법에 대해서 설명하겠습니다. 1. http 개체 로드 하기 const http = require('http'); Node.js로 서버를 구축할 때 최초로 해야하는 것은 필요한 라이브러리들을 로드하는 것입니다. require() 함수를 사용하여 인수에 가져올 개체 이름을 지정하여 해당 개체가 로드되어 반환됩니다. 위의 코드에서는 http라는 개체를 로드하여 변수 http 에 할당한 것입니다. 2. Server 개체 생성하기 const server = http.createServer((requ.. 공감수 2 댓글수 2 2020. 5. 20.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.