post-thumbnail

0224 : 회원가입 검증

마켓컬리의 경우 사용자가 입력하는 값이 사이트 회원가입 조건에 맞는지를 바로바로 색상으로 표현해 줌입력값 조건 만족 여부 색상 표현 목표1\. 정규표현식으로 조건 설정2\. 함수로 입력값의 조건 만족 여부 true/false 반환3\. 삼항연산자 이용 함수 반환값에 따

2022년 2월 25일
·
0개의 댓글
post-thumbnail

0222 ~ 0223 : 상세페이지

인터파크 도서 상세 페이지를 참고해서 도서 상세 페이지에 필요한 정보 props로 가져오기마켓 컬리 디자인 참고해 CSS 적용인터파크 도서 Search GET API 사용해 도서 정보 받아오기요청 파라미터 : 1\. query : 책제목2\. searchTarget,

2022년 2월 23일
·
0개의 댓글

0220 ~ 0222 : 카카오 로그인 & 유저 프로필 & 암호화

fake-Store API를 통해 정상적인 로그인 요청과 회원가입은 성공했으나 DB가 없으니 실제 유저 정보까지 이용하는데 한계점이 있었다. 그와중에 카카오 소셜 로그인을 이용하면 어떨까 생각이 들어 사용해 봄공식 문서를 따라 SDK 방식으로 진행해봄를 public/i

2022년 2월 22일
·
0개의 댓글
post-thumbnail

0216 ~ 0219 : 카테고리 선택 & 상품 목록

"MD의 추천"의 title 있으며 다른 Section의 title과 동일한 형태\-> Component로 작성해 재사용카테고리명(value)\-> 가로/중앙으로 나열\-> 마우스 hover 연하게 색상 변화\-> 클릭시 해당 카테고리가 메인 보라색으로 변하고 그에 맞

2022년 2월 16일
·
0개의 댓글

Daily Scrum

네트워크다수의 노드와 데이버 정보 연결되어 주고 받는 네트워크 시스템이더넷, G-PON, 프로토콜 및 표준 (IEEE, RFC, ITU-T)경제적인 요소 중요임베디드 S/W구조 및 특징, 리눅스, 개발 환경/방법네트워크 장비장비 개발 프로세스자사 장비군의 H/w, S/

2022년 2월 16일
·
0개의 댓글
post-thumbnail

0213 ~ 0215 : Carousel

💙 Carousel 회전목마를 뜻하고 웹에서는 슬라이드 형태로 순환하며 이미지, 영상 등의 콘텐츠를 노출하는 UI 실제 마켓컬리에 사용된 Carousel (1,2,3,4) -> (5,6,7,8)과 같이 4개씩 넘어감 맨 처음 (1,2,3,4)이 보여질 때는 이전

2022년 2월 12일
·
0개의 댓글
post-thumbnail

0213 : Footer

실제 마켓컬리 Footerdisplay: float로 layout 배치 진행함우측 부분 특정 구문만 보라색인데 하나하나 id나 className을 부여하고 그거에 보라색 스타일링하는 것은 비효율적인 것 같다.링크 연결하는 작업 진행

2022년 2월 12일
·
0개의 댓글
post-thumbnail

0213 : 회원가입 & 다음 우편번호 api

실제 마켓컬리 사용자 정보 검증여러 입력 정보 중 fake api의 user 등록 request body와 맞춰서 어떤 정보까지 받을 지 결정해야함사용자 입력 정보 목표아이디, 비밀번호, 비밀번호 확인, 이름, 이메일, 휴대폰, 주소, 성별, 생년월일실제 마켓 컬리 사

2022년 2월 12일
·
0개의 댓글
post-thumbnail

0212 : 로그인

JWT 방식 이해하기

2022년 2월 12일
·
0개의 댓글
post-thumbnail

20. 서버 사이드 렌더링

빈 페이지자바스크립트 실행컴포넌트 렌더링되며 사용자에게 보임⭐ 서버 쪽에서 초기 렌더링을 하고 사용자가 HTML 전달 받을 때 그 내부에 렌더링된 결과물이 보임검색엔진의 웹 어플리케이션 수집이 수월함자바스크립트가 실행되지 않는 환경에서 SPA가 제대로 나타나지 않을 수

2022년 2월 2일
·
0개의 댓글
post-thumbnail

1. 데이터 타입

기본형 타입 참조형 타입기본형 타입과 참조형 타입이 다르게 동작하는 이유number, string, boolean, null, undefined, symbol값이 담긴 주소값을 복제object, array, function, date, regexpobject 하위 분류

2022년 1월 21일
·
0개의 댓글
post-thumbnail

유트브 클론 코딩

https://serendipity24.tistory.com/159?category=896597git 연결npm initpackage.json 파일에 디버깅 부분에 스크립트 런 커맨드 추가커멘드창에 npm run start 입력하면 index.js 파일 실행됨

2022년 1월 20일
·
0개의 댓글
post-thumbnail

땡독 프로젝트

회원가입 : RegisterPage : "/register"로그인 : LoginPage : "/login"포스트 작성 : WriterPage : "/write"포스트 읽기 : PostPage : "/@username/:postId"포스트 목록 : PostListPage

2022년 1월 19일
·
0개의 댓글
post-thumbnail

23. JWT 이해

✔ 세션 기반 인증 시스템 ✔ 토큰 기반 인증 시스템 ✔ User 스키마/모델 만들기 ✔ 회원 인증 API 만들기 1. 회원가입 구현 2. 로그인 구현 ✔ 토큰 발급 및 검증 1. 비밀키 설정 2. 토큰 발급 3. 토큰 검증하기 4. 토큰 재발급하기

2022년 1월 16일
·
0개의 댓글
post-thumbnail

22. mongoose 이용 MongoDB 입문

✔ MongoDB란 ✔ MongoDB 서버 준비 & 적용 1. .env 환경변수 파일 생성 .env 환경 변수에 사용할 포트와 MongoDB 주소 넣기 src/index.js dontev 불러와 config() 함수 호출 process.env 통해 Node.

2022년 1월 10일
·
0개의 댓글
post-thumbnail

17. 리덕스 사용해 리액트 어플리케이션 상태 관리

프로젠테이셔널 컴포넌트: 상태 관리 X: props 받아와 화면에 UI 보여주기만 함컨테이너 컴포넌트: 리덕스와 연동된 컴포넌트: 리덕스로부터 상태 받아와 리덕스 스토어에 액션을 디스패치숫자 더하기/빼기components/Todos.jsApp.jsDucks 패턴 사용:

2022년 1월 8일
·
0개의 댓글
post-thumbnail

16. 리덕스 라이브러리 이해하기

상태에 어떠한 변화가 필요하면 발생액션 객체 : type 필드 필수 (액션 이름): 그 외 값은 상태 업데이트 시 참고액션 객체 만드는 함수변화 발생시키기 위해 액션 객체 만들어야 함이를 매번 작성하는 번거로움 피하기 위해 함수 만들어 관리변화를 일으키는 함수액션 만들

2022년 1월 8일
·
0개의 댓글
post-thumbnail

21. 백엔드 프로그래밍 : Node.js의 Koa 프레임워크

서버 포트를 4000번 열고, 서버에 접속하면 "hello world" 텍스트 반환코드 작성 : index.js서버 실행실행화면app.use 함수를 사용해 미들웨어 함수를 애플리케이션에 등록미들웨어 함수 구조ctx : 웹 요청과 응답에 대한 정보 지님next : 현재

2022년 1월 7일
·
0개의 댓글
post-thumbnail

13. 라우터로 SPA 개발

페이지 이동에 따른 html 받아와 로딩할 때마다 서버에 리소스 전달 받아 해석 후 화면에 보여줌사전에 html 파일 생성하거나 데이터에 따른 유동적인 html 생성하는 템플릿 엔진 사용화면 전환마다 html 서버에 요청 시 UI 상태 유지 어려움, 불필요한 로딩있어

2022년 1월 6일
·
0개의 댓글
post-thumbnail

15. Context API

여러 컴포넌트를 거쳐 props 사용 시 기존의 top->bottom 흐름으로 많은 컴포넌트 거치거나 데이터가 많아지는 경우 유지 보수성 낮아짐Context 만들어 한번에 원하는 값 받아옴createContext 함수를 사용해 Context 생성파라미터로 해당 Cont

2022년 1월 6일
·
0개의 댓글