profile
투명인간
post-thumbnail

[Project] Pre-onboarding: Sir.Loin

🏃🏻‍♀️ 프로젝트 기간 및 인원 📆 2022년 1월 27일 ~ 1월 29일 / Front-end 3명 👀 Repository [배포주소] (http://admin-page-from-sirloin.s3-website.ap-northeast-2.amazonaws

2022년 4월 19일
·
0개의 댓글

[React] Custom Hook 이란?

1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까?

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

[React] useEffect 알아보기

useEffect는 리액트 훅의 하나로 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 해준다. 여기서 렌더링이란 state와 props를 기반으로 UI를 그려내는 행위이다.형태:useEffect(함수, 타이밍)함수: 렌더링이 끝난 후 실행시킬 로직타

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

[React] State, Props

state: 상태state란 화면에 나타날 컴포넌트의 UI상태이다. 컴포넌트 내에서 상태값이 정해지며 함수를 통해 값의 업데이트가 얼마든지 가능하다. 과거 함수형 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트를 사용하곤 했다. hook등장한 이후

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

[React] Hooks란?

Hook은 React 버전 16.8부터 React요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 가능을 사용할 수 있습니다. - React 공식문서리액트의 컴포넌트는 클래스형과 함수형으로 나눠

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

[React] 드롭다운 메뉴 만들기

드롭다운 메뉴 만들기! 메뉴 선택시 상품코드 출력드롭다운 구현하여 상품목록 만들기상품선택시 상품코드 화면에 출력체크박스 리스팅을 위해 상수데이터 만들기(카테고리 목록은 임의로 작성하였습니다.)map함수를 이용하여 렌더링 해준다상수데이터는 렌더될때마다 불러질 필요없이 한

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

[React] 체크박스 및 카테고리 선택, 해제 기능 구현하기

useState를 이용하여 체크박스 및 카테고리 선택 기능 구현하기!체크박스 구현하여 카테고리 리스트 만들기체크박스 선택시 리스트에 해당 카테고리 추가(중복 선택 가능)체크박스 지정 해제 시 카테고리 리스트에서 해당 카테고리 삭제카테고리 지정이 아무것도 안되어 있을 경

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

[Project] 'Air-pnp' 회고(fin)

내가 있는 지역에 내가 원하는 재능을 가진 사람의 시간을 빌리는 서비스를 제공합니다 :)2021.12.13 ~ 2021.12.24Air-pnp 홈페이지 시연 영상 보러가기!Back-end: 3명Front-end: 3명 GitHub: Air-pnp Repo 👉🏻 Co

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[Project] 'Air-pnp' 회고(2)

1. 프로젝트 기간 및 팀 구성 > 2021.12.13 ~ 2021.12.23 Front-end: 3명, Back-end: 3명 2. 프로젝트 담당 업무 2-1. 상세 페이지

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[Project] 'Air-pnp' 회고(1)

참고 사이트: 에어비앤비 에어피앤피 시연영상 보러가기 1. 프로젝트 기간 > 2021.12.13 ~ 2021.12.23 2. Introduce 숙소를 대여해주는 사이트인 에어비앤비를 모티브로 삼아 지역에 내가 원하는 재능을 가진 사람의 시간을 빌리는 서비스를 기획

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[Project] 프로젝트 'FRA-WE-Tak' 회고(fin)

World's best eco-friendly egg or dinosour egg, FRA-WE-TAK 다양한 종류의 계란을 전시 및 판매하는 사이트 입니다 :)FRA-WE-TAK 홈페이지 시연 영상 보러가기!2021.11.29 ~ 2021.12.10Back-end :

2021년 12월 19일
·
2개의 댓글
post-thumbnail

[React] map을 이용한 상수 데이터 관리

상수데이터란 변하지 않는 값, 정적인 데이터를 뜻한다. 조금 더 풀어서 설명하자면 화면 구성에는 필요하지만 변하지 않기 때문에 백엔드 API를 통해서 가져오지 않아도 되는 데이터들은 상수 데이터로 따로 관리하면 보다 더 효율적으로 사용할 수 있다.반복되는 데이터들을 하

2021년 12월 16일
·
0개의 댓글
post-thumbnail

[Project] 프로젝트 'FRA-WE-Tak' 회고(2)

2021.11.29 ~ 2021.12.10Front-end 3명, Back-end 3명로그인 / 회원가입 페이지아이디 찾기 / 비밀번호 찾기 / 비밀번호 재설정 페이지마이 페이지메인 페이지리스트 페이지상세 페이지레이아웃 : JXS, 컴포넌트유효성 검사: 백엔드로부터

2021년 12월 13일
·
0개의 댓글
post-thumbnail

[Project] 프로젝트 'FRA-WE-Tak' 회고(1)

1차 프로젝트가 시작 되었다. 우리팀은 가방 판매 사이트인 'FREITAG'을 진행하게 되었다.사이트 주소: FREITAG2021년도 11월 29일 ~ 2021년도 12월 10일팀편성은 Front-end 3명, Back-end 3명 총 6명의 인원으로 구성되었다.

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

[TIL] JWT(JSON Web Token)

참고하기: 인증(Authentication)과 인가(Authorization)JWT란 JSON 포맷을 이용하여 인증정보와 사용자에 대한 정보를 저장하는 Claim 기반의 Web Token이다. 말 그대로 유저 정보를 담은 JSON 데이터를 암호화 해서 클라이언트와 서버

2021년 12월 12일
·
0개의 댓글

[TIL] 인증과 인가

인증은 유저의 신원을 확인하는 절차이다. 인증을 하기위해서는 회원가입과 로그인 절차가 먼저 필요하다.1) 유저의 아이디와 비밀번호 생성.2) 유저의 비밀번호를 암호화하여 DB(데이터베이스)에 저장한다.1) 등록된 아이디와 비밀번호를 입력한다.2) DB에 저장된 유저의

2021년 12월 8일
·
0개의 댓글
post-thumbnail

[TIL] 버튼 구현 - align-items설정하기

회원가입 페이지 등 로그인과 관련된 페이지를 만들던 중 버튼이 공통적인 요소가 되어 컴포넌트화를 하게 되었다. Create New Account / Log In / Find / Reset 등 버튼에 들어가는 글자에 따라서 버튼의 크기도 달라져야 했다. 컴포넌트화를 시

2021년 12월 7일
·
0개의 댓글
post-thumbnail

[React] 회원가입 페이지 유효성 검사하기

리액트를 사용해 회원가입 페이지 레이아웃 및 유효성 검사 기능을 구현하였다. 버튼이 활성화 되기 위한 조건은 아래와 같다.1) 모든 input창의 입력값이 1자 이상이 될 것.2) 이메일(ID)은 '@' 와 '.' 두개를 모두 포함할 것.3) 비밀번호는 특수문자 1자이

2021년 12월 4일
·
0개의 댓글
post-thumbnail

[React] onFocus 와 onBlur이벤트를 사용하여 인풋창 색상 변경하기

로그인 페이지를 만드는 중 구현하기로 한 필수사항 중 인풋창을 클릭했을 때 밑줄 색이 바뀌고 인풋 바깥인 메인페이지를 다시 클릭했을 때 원래 색상으로 돌아오게 하는 기능이 있었다. 인풋창을 클릭할때마다 이벤트가 발생하는 토글 기능이 아닌 활성화된 기능을 다시 해제시켜야

2021년 12월 4일
·
0개의 댓글
post-thumbnail

[React] SPA 와 Router

SPA는 Single Page Application의 약자이다. 즉 페이지가 한 개인 어플리케이션 이라는 의미를 지닌다. 보통 전통적인 웹어플리케이션에서는 페이지를 구성할 때 페이지 수 만큼html 파일이 존재한다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아

2021년 12월 2일
·
0개의 댓글