날짜: 2023년 3월 9일 태그: 교육, 원티드 프리온보딩 ❔ 토큰이란 사전적 정의 토큰은 화폐 대신 사용할 수 있는 동전처럼 생긴 주조물을 말한다. 현실세계에서 토큰을 사용하는 경우는 꽤나 있다. 지하철 티켓… 놀이공원 자유이용권… 조건을 확인할 수 있는 경우에 주로 사용한다. 기술적 정의 그럼 디지털 세상에서 토큰이란? 로그인을 하는방법, 이유와 일치 한다. 토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말합니다. (출처 : https://www.okta.com/kr/identity-101/what-is-token-based-authentication/) 로그인에 토큰을 사용하는 이유 토큰을 사용하지 않는 경우 유저는 로그인을 통해 신원확인을..

날짜: 2023년 3월 6일 태그: 교육, 원티드 프리온보딩 로그인 개념과 어플리케이션 구조 알아보기 로그인의 기본적인 개념과 왜 로그인을 하는지 로그인이란게 대체 뭘까? 컴퓨터 보안에서 로그인(영어: login, 문화어: 등록가입)과 로그아웃(영어: logout)은 접근 허가 증명을 얻기 위해 사용자 인증으로 개인이 컴퓨터 시스템에 접근하는 작업을 말한다. 컴퓨터 보안에서 중요한 역할을 담당한다. 사용자 자격 증명은 일반적으로 사용자이름과 그에 일치하는 비밀번호 형태를 이루며[1] 이를 기반으로 사용자는 액세스 하기 위해 시스템에 로그인할 수 있으며 더 이상 필요하지 않을 때 로그아웃할 수 있다. ( 출처 : 위키 백과 ) 정의를 살펴 보면 다음과 같은 단어들이 있다. 접근 허가 증명 사용자 인증 시스..

What is Next js and Why? The React Framework for production React의 “common problems” 를 해결해주는 프레임워크 이다. react의 "common problems"는 SPA로 이루어진 웹앱의 단점이다. Client Side Rendering 서버에서 한 페이지만 받고 클라이언트에서 렌더링을 하는 방식 기존 리액트 app의 방식 페이지간 이동이 발생하지 않음 : route 방식 seo 검색 엔진 최적화에 불리 Server Side Rendering 서버에서 클라이언트에게 전송 후 렌더링하는 방식 페이지간 이동(새로고침)이 발생 seo 검색 엔진에 유리 next js는 CSR방식의 리액트 앱을 SSR로 전환시켜주는 역할 브라우저 렌더링부터 CS..

날짜: 2023년 3월 3일 생성일: 2023년 3월 3일 오후 2:51 태그: 프론트 엔드 이 글을 쓰는 이유? 데브 매칭 대비하기 위해 지난해 진행했던, 과제 테스트 해설을 보고 학습한 내용을 정리하려고 합니다. 출제 내역을 보면 SPA(Single Page Application)을 순수 자바 스크립트로 개발하는 문제가 주로 출제 됐습니다. 그렇기 때문에 자바스크립트의 문법을 응용하면서 문제해결을 위해 어떤 문법이 필요한지 알아보겠습니다. 저도 처음부터 알고는 있었지만, “이 문법을 이런식으로 응용해서 사용하면 되는구나” 를 많이 깨달았습니다. 컴포넌트 만들기 SPA는 컴포넌트를 기반으로 개발을 하기 때문에 원래 html의 노드요소들을 Class를 통해서 동적으로 생성해줘야 한다. 따라서 index...

날짜: 2023년 2월 25일 생성일: 2023년 2월 25일 오후 5:12 태그: 프론트 엔드 원티드 프리온보딩 사전 과제를 하면서 react router v6.4에서 좀 많이 바뀐듯한 react router를 사용해봤다. https://reactrouter.com/en/main Home v6.8.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com r..

날짜: 2023년 2월 24일 태그: 프론트 엔드 개발을 진행하다 보면 중복되는 코드와 빈번히 재사용하는 코드를 볼 수 있다. 중복되는 코드를 분리해서 재사용하면 차후 유지보수에도 도움이 되고, 남이 볼 때 쉽게 코드를 파악할 수 있다. 상속과 합성은 객체지향 프로그래밍에서 널리 사용되는 코드 재사용 기법이다. 상속 상속이란? 상속(Inheritance)은 객체들 간의 관계를 구축하는 방법이다. 이 때 객체를 상속받는 객체 클래스는 자식, 상속된 객체는 부모 클래스이다. 클래스 상속을 통해 자식 클래스는 부모 클래스의 자원을 물려 받게 되며, 부모 클래스와 다른 부분만 추가하거나 재정의 함으로 써 기존 코드를 쉽게 확정 할 수 있다. class Animal { // #는 private 접근 제한자 #ag..