동탁의 개발자취

엘리스 트랙 2차 스터디로 만든 엘리스 취업 스터디 엘취스에서의 1차 CS스터디 발표 자료 입니다. 해당 발표는 엘리스 트랙 스터디 중에서 제가 준비한 발표 자료로 정확하게 일치하는 정보가 아닐 수 있습니다. 내용은 실행 컨텍스트 (Execution Context)로 실행 컨텍스트에 대한 이해가 있어야 JavaScript에서의 로직 읽기, 로직 짜기가 가능하다고 생각하여 준비하게 되었습니다. 실행 컨텍스트란? 자바스크립트 코드가 실행되는 환경으로 크게 전역 실행 컨텍스트 , 함수 실행 컨텍스트가 있습니다. 전역 실행 컨텍스트는 해당 브라우저를 닫을 때까지 유지가 되며 함수 실행 컨텍스트는 함수가 호출 될 때마다 새롭게 실행됩니다. 저는 실행 컨텍스트에서의 적용 범위를 해당 방법으로 이해를 하고 생각을 하..

사전 과제로 요구하는 CSR 어플리케이션 - NextJS 등의 SSR 어플리케이션이 아닌, CSR 어플리케이션을 구축한다. - 최소 3개 이상의 페이지를 가지도록 구현한다. - 모든 페이지에 공통으로 반복되는 헤더와 사이드바가 있도록 구성한다. 추가 구현 사항 - 로그인을 수행할 수 있는 페이지를 만들 되 공통 레이아웃이 적용되지 않도록 만들기 사전 과제 구축 기획 - React사용 - 로그인 페이지 까지 구현 - 페이지 이동은 SPA로 이동 구현 2022-02-27 구현 완료 사용한 라이브러리 : react-router-dom v6 styled-components 구현 내용 : - index.js에서 App.js를 렌더 - App.js에서 삼항 연산자를 이용하여 Login component또는 Main..

SQL : RDB (관계형 데이터베이스)에서 데이터를 다루고 관리하는데 사용하는 데이터베이스 질의 언어 SQL을 쓰는 이유 : 엑셀은 최대 104.8만 행을 지원하지만 데이터가 커지면 급격하게 느려진다. SQL 구문으로 엑셀과 같은 결과를 도출할 수 있으며 Python, R에 상관없이 데이터를 쉽게 전처리 하는 것이 가능하다. ! Database란 : 구조화 된 데이터의 집합, 여러 사람들과 실시간으로 공유하여 사용이 가능하다. 1. DBMS DataBase Management System 1) 데이터 베이스의 데이터 조작과 관리를 극대화한 시스템 소프트웨어 2) 여러 목적으로 사용할 데이터의 접근, 관리 등의 업무를 DBMS가 전담 3) 응용 프로그램이 필요한 데이터 작업을 DBMS에 요청하면, DBM..

담당하여 구현한 기능 회고 - 로그인 import React, { useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import FloatingLabel from "react-bootstrap/FloatingLabel"; import axios from "axios"; const LoginForm = () => { const [email, setEmail] = useState(""); const [password, ..

1. 로그인 로그아웃 관리자 계정 로그인 ! 현재 로직은 보안상 아주 위험한 로직이지만 우선적으로 기능 구현 후 리팩토링 할 예정입니다. 로그인 시 ID가 관리자의 ID인 경우 localstorage에 key와 value를 role과 admin으로 값을 저장 아닐 경우 (일반 유저) 백엔드로 부터 JWT 토큰을 발급 받아 localstorage에 저장 해당 로직 완성 전 마주친 에러와 해결한 방법 1. 로그인 완료후 navigate로 메인페이지로 이동하자 새로고침이 생기지 않아서 localstorage에 token을 가지고 있는 status가 인식되지 않음 2. 따라서 window.location.href로 전체 페이지 새로고침으로 유저의 token status를 인식시킴 (로그아웃도 마찬가지로 wind..

이틀에 걸쳐 로그인 구현을 마쳤다. 내가 구상한 로그인 로직은 이러하다. 1. 회원가입과 동일하게 form을 통하여 input값을 받는다. 2. axios의 post를 통하여 id , password를 보낸다. 3. JWT 토큰을 백으로부터 발급 받는다. 4. JWT 토큰을 프론트단에서 보관한다. 5. 토큰이 있으면 로그인 상태, 토큰이 없다면 비로그인 상태 이 중 3번까지는 쉽게 완료가 되었으나 4번이 어려웠다... JWT 토큰을 보관하기 위하여 local storage / session / cookie 3가지의 방법이 있었으나, 이미 팀원분이 local storage에 상품을 담는 방법을 어느 정도 구현을 하시고 계셔서 같이 local storage에 jwt토큰을 저장하기로 하였다. 이에 따라 두가지..

오늘은 하루종일 정보수정 로직을 수정하고 테스트 해보았다. 해당 로직에서 특이점이 있었는데 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. 2. 백으로부터 res프론트에서의 then문이 실행 되지 않는다. 따라서 오늘은 하루 종일 해당 로직을 프론트 , 백 두가지에서 수정을 진행하였다. 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. -> User.findOne이 name인데 name을 전송하고 있지 않아서 온갖 방법을 다해봤는데 아직은 방법을 못찾았다... 혹시나 해서 email을 일치하게 해서 post보냈는데도 변경 되지 않는다. 추후 백엔드와 같이 얘기해서 해결해 ..

get 하는 중 생긴 여러 error에 대한 회고 1. Page에서 get요청을 여러번 보냄 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 3. backend에서 받은 데이터 출력 1. Page에서 get요청을 여러번 보냄 useEffect, reactstrictmode 제거해서 해결 get요청을 Page내에서 3번씩 보내서 해당 방법으로 해결 하였으나, reactstricmode를 제거 함으로 어떤 문제가 생기는지는 추후 개발하면서 더 공부해봐야 할 예정 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 catch 안에서 error를 변수로 받지 않고 바로 alert을 출력하여 발생 .catch도 일종의 .then으로 작동하는것으로 추측 만약 error를 받도록 설정..

Submit 후 백엔드 서버에 전달하는 로직 작성 후 지속적으로 post요청을 보냈으나 post는 되지만 막상 백엔드 db에는 등록이 되지 않는 문제 발생 여러 에러 파악 후 백엔드와 프론트엔드간 주고 받는 인터페이스가 일치 하지 않았음을 알게 되었고 프론트에서는 formdata로 묶어서 보냈지만 백엔드에서는 formdata로 받기로 되어 있지 않다는 것을 알고 formdata를 구조분해해서 전달 후 통신 성공. 그러나 백엔드 db문제로 db에 작성되는 것에는 실패 하였다. 추가로 test용 console.log와 alert을 작성하여 어디까지 성공하였는지 체크하는 메커니즘 작성 백엔드와 상의 후 주고 받는 인터페이스 정의해서 명세 받기로 결정 하였다.

1. UI 대부분 구현 완료 - 시간 잡고 더 만들기 X, 각자 기능 파트 맡았을 때 필요한 화면 각자 구현 2.프론트엔드 - 이제부터 로직에 집중 대부분 로직 구현해놔야 테스트나 구글링으로 발전이 가능 3. 백엔드 - 불러올 api 구현 -> 포스트맨 , 스웨거 중에서 명세 작성