프론트엔드 상식13 인증과 인가 우아한 테크코스 2기내용인증과 인가란인증의 방법목표인증과 인가에 대한 지식 습득 및 복습프로젝트에서 선택한 인증 방식에 대한 근거인증이란식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정인가란인증된 사용자에 대한 자원 접근 권한 확인인증과 인가란자원을 적절한/유효한 사용자에게 전달/공개하기 위한 방법인증 단계1. 인증하기 (Request Header)무상태성(Stateless): 서버는 클라이언트에서 오는 요청이 각각 연관관계가 없다고 생각하고 처리한다Request Header 활용하기사용자가 http://www.cocktailpick.com/login 에 로그인 요청을 보내기 위해 직접 타이핑해http://user:1q2w3e!@www.cocktailpick.com/login 요청 시 브라.. 2024. 6. 4. 리라우팅vs리다이렉션 리라우팅 vs 리다이렉션: 핵심 차이와 활용법 비교리라우팅과 리다이렉션은 웹 개발에서 자주 사용되는 용어이지만, 종종 혼동되기도 합니다. 두 가지 개념은 유사하지만, 중요한 차이점이 있으며, 상황에 따라 적절하게 사용해야 합니다. 1. 정의:리라우팅: 서버 측에서 사용자 요청을 다른 URL로 변경하는 프로세스입니다. 실제로 사용자 페이지 이동이 일어나지 않고, 서버에서 조용히 처리됩니다.리다이렉션: 사용자를 다른 URL로 보내는 프로세스입니다. 브라우저에서 새로운 요청을 발생시켜 실제 페이지 이동이 일어납니다.2. 주요 차이점:구분리라우팅리다이렉션작동 방식서버 측에서 처리클라이언트 측(브라우저)에서 처리사용자 인식사용자가 인지하지 못함사용자가 새로운 URL을 확인 가능주소 표시줄 변화새로운 URL 반영되.. 2024. 6. 4. 토스 | SLASH 21 - 실무에서 바로 쓰는 Front-end Clean Code 명확한 이름 중복 줄이기 읽기 좋은 코드 짜기 실제 액션 아이템 공유 1. 실무에서 클린 코드의 의의 2. 안일한 코드 추가의 함정 3. 로직을 빠르게 찾을 수 있는 코드 4. 액션 아이템 1. 클린 코드 의의 지뢰 코드.. - 흐름 파악이 어렵고 - 도메인 맥락 표현이 안 되어 - 동료에게 물어봐야 알 수 ㅣㅇㅆ는 코드 유지보수할 때 오래 걸림,, 기능 추가 불가능한 상태..유저 입장에서도 쾌적하지 못함 실무에서 클린 코드의 의의 = 유지보수 시간의 단축 기존 코드에 기능을 추가하는 일 2. 안일한 코드 추가의 함정 As-is To-be - 하나의 목적인 코드가 흩뿌려져 있으면 안된다! 헉 - 하나의 함수가 여러가지 일을 하고 있으면 안된다 - 함수의 세부 구현 단계가 제각각 ?? = 큰 그림을 보며 .. 2023. 6. 1. [자바스크립트 상식 #1] AJAX 🍔 AJAX Asynchronous Javascript And XML의 약자로, 비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법을 의미한다. 🍔 동작법 사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버에는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트하는 방식이다. 🍔 사용하는 이유 단순하게 웹에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다. 일반적으로 HTTP 프로토콜은 단방향 통신이므로 클라이.. 2022. 5. 24. 타입스크립트 특징, 사용하는 이유, 문법 타입스크립트란 자바스크립트에 타입을 부여한 언어! 🥨 타입스크립트의 특징 컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 자바스크립트와 달리 브라우저에서 실행하려면 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환해야 한다. 이 변환 과정을 컴파일(compile)이라고 부른다. 장점 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다. 단점 : 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다. 자바스크립트 슈퍼셋(Superset) 타입스크립트는 자바.. 2022. 5. 24. Next, Next 특징, Next 설치 🥓 Next React(SPA) + SSR 원래 SPA에 SSR을 더하려면 웹서버, 웹팩, 데이터 로딩, 코드 스플리팅 등등이 필요하지만.. Next를 사용하면 그럴 필요가 없다! 🥓 Next 특징 사전 렌더링 및 서버 사이드 렌더링(SSR) Next는 빌드 시 모든 페이지를 미리 렌더링한다. 따라서 처음 페이지를 불러올 때, 미리 렌더링 해서 만들어진 HTML를 빠르게 사용자에게 제공할 수 있다! 이 특징은 검색 엔진 최적화(SEO)에도 좋다. HTML을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드를 불러와 사용한다. 서버 데이터가 필요한 페이지의 경우엔 SSR로 HTML을 생성한다. Hot Code Reload 코드 변경 사항 저장 시 프로그램이 자동으로 리로드된다. 자동 코드 분할 불필.. 2021. 11. 30. React create 구현하기 ( + onSubmit, shouldComponentUpdate 함수 ) 🧂 기본 개념 정리 지금까지 우리가 공부한 개념들을 정리해보자. Props는 컴포넌트 내 (우리의 경우 Content.js 내부)에서는 값을 변경할 수 없으며 읽기, 불러오기만 가능하지만 외부에선 변경할 수 있다. State는 setState 함수로 컴포넌트 내부에서도 동적으로 값을 변경할 수 있다. Props와 State 모두 render 함수를 호출하며 호출한 결과로 UI가 바뀌게 된다. 새로운 개념을 하나 추가하자면, 실제 브라우저 HTML을 의미하는 DOM이 있다. 상위 컴포넌트가 하위 컴포넌트에 명령할 때, 즉 데이터를 전달할 땐 Props를 사용한다. 여기서 위에 말한 것처럼 하위 컴포넌트는 Props를 읽기만 가능하다. 반대로, 하위 컴포넌트가 상위 컴포넌트에 데이터를 전달할 땐 Event를.. 2021. 1. 13. React Event - React 컴포넌트 이벤트 만들기 컴포넌트에 이벤트를 추가하는 것은 애플리케이션에 역동성을 부여한다. 우리가 만들 이벤트는 특정 버튼을 눌러 원하는 페이지로 이동하거나 페이지를 이동하지 않고, 또는 페이지를 리로딩하지 않고 화면을 전환하는 이벤트이다. 🌭 State Setting 페이지의 state가 기본 모드인 welcome mode인지, 카테고리를 선택하면 밑에 설명이 나오는 read mode인지 구분하기 위해 constructor의 this.state에 mode를 추가한다. mode의 기본값으로는 'welcome'을 준다. mode : 'welcome', mode가 welcome일 때, contents에 표시할 문구도 this.state에 작성한다. welcome : { title:'Welcome', desc:'Hello React.. 2021. 1. 12. React State 의 소개와 사용법 이번 내용은 이해하기 어려운 게 맞으므로 일단 그러려니 하고 보면서 익숙해지는 게 중요하다..! 🥚 Props와 State의 의미 앞서 배운 props란, 사용자가 component를 사용하는 입장에서 중요한 것으로 component의 기본 동작을 바꾸고 싶을 때 사용자가 조작하는 것이다. 쉽게 말해 태그의 속성에 해당하며 component 외부에 존재한다. state란, props의 값에 따라 내부 구현에 필요한 데이터들을 가리키며 component 내부 동작을 의미한다. 둘은 철저하게 분리되어 있어야 하며 철저하게 분리되어 있을수록 좋은 웹, 앱이라 칭할 수 있다. 🥚 props(속성) 부분을 state로 표현해보자 App 컴포넌트의 하위 컴포넌트인 Subject 컴포넌트에서 하드 코딩되어있는 pro.. 2021. 1. 11. React Refactoring 및 components 파일로 분리하기 🍳 Refactoring :: 태그의 속성(attribute, props)을 웹페이지에 표시하기 Refactoring이란, 동작 변화 없이 내부 구조를 변경하는 것을 의미한다. 밑의 코드처럼 태그의 속성인 title, sub에 값을 주어 웹에 표시되는 문구를 바꾸고자 한다. class App extends Component { render() { return ( ); } } 이 경우, JSX의 {this.props.name} 문법을 사용한다. 예를 들어 name이 title이라면 {this.props.title}으로 표기한다. class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } JSX.. 2021. 1. 11. HTML 코드를 React 코드로 변환해보기 🧇 HTML 코드 작성하기 public이라는 디렉토리는 create-react-app에서 npm을 실행시켰을 때, 파일을 찾는 document root를 의미한다. public디렉토리 안에 간단한 pure.html을 추가한다. MEOW The cat rules the world! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 터미널에서 npm을 실행시키고 localhost:3000/pure.html에 들어가보면 다음과 같은 화면을 볼 수 있다. 🧇 React로 Component 만들기 pure.html과 App.js를 함께 보며 진행한다. 우선 미리 말하자면 Component를 만드는 부분은 이렇게 구성된다. class App extends C.. 2021. 1. 8. Node.js,npm,create-react-app 설치, React 실행·배포 저번 시간에 npm이란 Node.js로 만들어진 프로그램을 쉽게 설치할 수 있게 해주는 일종의 앱스토어라고 했다. 🥞 Node.js, create-react-app 설치 오늘은 Node.js를 설치하며 시작하도록 하겠다! 먼저 Node.js 공식 홈페이지에 접속한다. LTS는 안정화된 버전이고 Current는 가장 최신 버전을 의미한다. 둘 중에 취향에 맞게 선택해서 다운로드하면 된다. 나는 Current를 선택해 다운로드했다. 다음엔 npm이 잘 다운로드되었는지 확인할 차례다. cmd를 켜 아래 명령어를 입력한다. npm -v 버전을 나타내는 숫자가 출력되었다면 다운로드가 완료된 것이다. 그럼 다운로드된 npm으로 create-react-app을 설치해보자. npm install -g create-re.. 2021. 1. 8. 이전 1 2 다음
