본문 바로가기

전체 글

(31)
[HTTP] 웹 초기의 인증/인가에서 오늘날 로그인까지 1. 클라이언트 식별과 쿠키에서는 사용자를 식별하여 콘텐츠를 개인화시키는 기법을 다룬다.2. 기본 인증에서는 사용자를 확인하는 기초적인 체계를 중점적으로 다룬다. 그리고 어떻게 HTTP 인증이 데이터베이스와 동작하는지도 알아본다.1. 클라이언트 식별과 쿠키인증의 필요성*인증 authentication - 인증은 누군가 또는 무언가의 신원을 확인하는 프로세스.*인가 authorization - 인가는 권한 부여입니다. 인증이 완료되어 인증이 필요한 대상에 대한 권한을 허락하는 행위. 인증된 사용자에게 어떤 자원에 접근할 수 있는지 확인하는 절차가 인가.클라이언트&서버 구조 / 비연결성connectionless / 무상태성stateless은 http 프로토콜의 주요 특징.비연결성 connectionless클..
[React] ref는 state와 달리 리렌더링 이후에도 어떻게 값을 유지할까? A ref is a plain JavaScript object with a single property called current, which you can read or set.- React 공식 문서  useRef는 React 컴포넌트의 렉시컬 환경에 대한 참조를 유지합니다.useRef 훅은 컴포넌트 내에서 변수를 만들고 유지합니다.리렌더링 되어도 이 값은 유지됩니다.(또한 state와 달리 값이 변경되더라도 리렌더링을 촉발하지 않습니다.)useRef로 생성된 ref 객체 내에는 current property가 존재하고 current property에 값이 유지됩니다.useRef 훅은 클로저(closure)를 활용하여 현재 property를 유지하고 렌더링 되더라도 값을 보존합니다.useRef가 클로..
[React] Ref 는 언제 사용되고 왜 필요한걸까 When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref.리액트에서 컴포넌트를 설계하다 보면 특정 컴포넌트의 렌더링을 제한해야할때가 있습니다.이런 케이스가 종종 있지 않나요?컴포넌트가 현재의 특정한 정보를 기억하면서(remember) 그 정보가 새 렌더링을 촉발하지 않도록 구현해야하는 경우가 있습니다.ref를 이용하면 가능합니다.React Ref 어트리뷰트란?리액트 ref는 리액트 요소에 대한 참조를 생성하는데 사용되는 기능입니다.ref가 유용히 사용되는 일반적인 경우를 3가지로 나누어서 설명하겠습니다.1) DOM 요소에..
[React] 리액트의 기본 특징 보호되어 있는 글입니다.
[Deploy] AWS EC2에 프로젝트 배포(REACT) 1. AWS EC2 인스턴스 생성 (키 페어 설정 - pem) 키(pem) 파일이 공개되지 않도록 유의해주세요! 또한 다시 다운받을 수 없으니 해당 키를 잘 보관해주세요. 2. 터미널에서 EC2 인스턴스 접속 FileZilla 프로그램 활용 AWS 홈페이지에서 EC2 인스턴스 연결 버튼 활용 MAC 터미널 이용 // MAC 터미널 // 1 sudo chmod 400 키페어이름.pem // 2. 비밀번호 입력 ssh -i 키페어이름.pem ubuntu@public IPv4 주소 // 3. yes 입력 3. 환경 설정 (1) npm 설치 sudo apt-get install npm npm --v // npm 설치 후 npm 버전 확인으로 npm이 제대로 다운되었는지 체크해주세요. (2) nvm 및 node ..
3. 네트워크 Q&A Basics 1. OSI 7 계층에 대해서 설명해주세요. OSI 7계층은 '네트워크 통신이 일어나는 과정을 7단계로 나눈 표준 네트워크 모델'입니다. ISO에서 네트워크간 호환을 위해서 국제 표준 모델을 만든것입니다. 응용 계층, 표현 계층, 세션 계층, 전송 계층, 네트워크 계층, 데이터링크 계층, 물리 계층이 있습니다. 1계층인 "물리 계층"은 실제 장치 연결을 위한 전기적/물리적 세부사항을 정의한 계층입니다. 2계층 "데이터링크 계층"은 물리 계층을 이용해 네트워크 상의 주변 장치들 간의 데이터 전송 역할을 합니다. 쉽게 말하면, 물리 계층을 통해 송수신되는 정보의 오류와 흐름을 관리하여 안전한 정보의 전달을 수행할 수 잇도록 도와주는 역할을 합니다. 3계층인 "네트워크 계층"은 여러..
2. 기본적인 기술면접 질문 및 답변 1. HTML, CSS, Javascript에 대해서 설명하세요. HTML은 웹페이지를 제목, 이미지, 표 등으로 정의하고 '구조와 의미를 부여'하는 '정적 언어'입니다. 웹의 '전체적인 구조'를 담당하고 있습니다. CSS는 HTML이 실제 표시되는 스타일인 색상, 레이아웃, 크기, 폰트 등을 지정하여 '콘텐츠를 꾸미는 정적 언어'입니다. 웹의 시각적인 표현을 담당합니다. Javascript는 HTML의 정적이고 단조로운 한계를 극복하기 위해 만들어진 언어입니다. '웹문서를 동적으로 처리'할 수 있도록 도와줍니다.2. 쿠키에 대해 설명해주세요. 쿠키란 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다. ..
10. MA와 MSA 아키텍쳐 1. MA 모놀리틱 아키텍처 Monolithic Artchitecture 마이크로 서비스 아키텍쳐(MSA)에 반대되는 개념으로, 애플리케이션 모든 구성 요소가 한 프로젝트에 통합되어 있는 형태를 말함. 전체 어플리케이션이 하나로 되어있어 배포 및 테스트도 하나의 애플리케이션만 하면 되기에 개발 및 환경 설정이 단순함. 각 컴포넌트들이 함수로 호출 되기 때문에 성능 제약이 덜하고 운영이 용이. 작은 볼륨의 시스템 개발시 유용. 서비스 간 호출이 하나의 프로세스 내에서 이루어지기 때문에 속도가 상대적으로 빠를 수도 있음. 출처 : https://medium.com/koderlabs/introduction-to-monolithic-architecture-and-microservices-architecture-..