사전과제 피드백 원티드 프리온보딩 인턴쉽을 수강하기 위해 진행했던 사전과제의 피드백입니다. 과제의 분석 과제의 주제 Simple 인증 / 인가 Simple CRUD 과제에서 파악하고자 한 것 : 출제자의 의도 기본적인 형태의 서비스를 만들 수 있는가? 코드 스타일은 어떤가? 프로젝트 구조를 어떻게 설계 했는가? 과제를 수행하는 기본적인 태도 README.md 잘 작성되었는가? Git활용은 잘 했는가? 코드 분석 ← 무조건 기업들이 보는것들 코드의 가독성 컴포넌트가 잘 분리되었는가? 컴포넌트를 논리적인 단위로 분해 했는가? 컴포넌트의 쓰임 컴포넌트의 역할과 책임 관심사가 잘 분리되엇는가? 반복되는 코드들 : 추상화하고 분리했는가? 프로젝트의 아키텍쳐는 어떻게 설계 되었는가? 과제의 목표 ? 과제의 목표는 ..

날짜: 2023년 3월 13일 태그: 교육, 원티드 프리온보딩 세션 기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐 세션이란 무엇인가? 세션이란 단어는 무엇을 의미 하는가? 토큰의 의미를 다시 한번 새겨 보자 이처럼 토큰은 명백한 뜻이 있고 정의를 내릴 수 있다. 그렇다면 세션은..? 세션(session)은 컴퓨터 과학에서, 특히 네트워크 분야에서 반영구적이고 상호작용적인 정보 교환을 전제하는 둘 이상의 통신 장치나 컴퓨터와 사용자 간의 대화나 송수신 연결상태를 의미하는 보안적인 다이얼로그(dialogue) 및 시간대를 가리킨다. (출처 : 위키백과) 위의 정의를 보고 다양한 생각이 들 수 있는데,, 데이터 저장 방식? 통신 프로토콜? 인증 방법론? 암호화 방식? “아무튼 로그인에 쓰이는 방법 아닌..

날짜: 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...