[Bootstrap] Grid Gutters 제거, Badge 텍스트 정렬

Grid Gutters 제거 제거 전 제거 후 gx-*: 수평 gutter gy-*: 수직 gutter g-*: 수평 및 수직 gutter Ref https://runebook.dev/ko/docs/bootstrap/layout/gutters/index Badges 텍스트 정렬 개발자 도구로 웹 상에서 확인했을 때는 수평 정렬이 정상적으로 되어있다...

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

[Git Error] Your local changes to the following files would be overwritten by merge: ... 해결하기

❓ 에러 발생 원인 조원들과 Git을 이용해 해커톤을 진행하던 중, 다음과 같은 pull 에러가 발생했다. 아무래도 하나의 브랜치(main)에서 여러 사람이 작업하다보니 발생한 것 같다. 💡 해결법 사실 에러 메시지 하단을 보면 해결법을 알려준다. > Pleas

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

5월 31일, 6월 2일(React, 쇼핑몰 만들기)

쇼핑몰 만들기 1. styled-components 장점 CSS파일을 열지 않아도 된다. styled-components를 이용한 스타일링은 스타일이 다른 JS파일에 간섭하지 않는다. (Detail.js에서 사용했다면 Detail.js에서만 적용된다는 것!) 페이지

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

5월 30일(React, 쇼핑몰 만들기)

쇼핑몰 만들기 1. 이미지 넣기 배너 이미지 CSS CSS 상에서는 다음처럼 배경을 넣을 수 있다. HTML HTML 상에서는 CSS 방식과는 다르게 import를 해서 필요한 곳에서 변수를 사용할 수 있다. 👉 결과 public 폴더 이용 HTML 상에서

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

패스트 캠퍼스 MGS 3기 - 6주차, 7주차 주간 회고

6주차(22-05-16~22-05-22) 주간 회고, 7주차(22-05-23~22-05-29) 주간 회고

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

패스트 캠퍼스 MGS 3기 - 5월 27일(Router)

wildcard(*), Navigate props.path로 `(asterisk)를 넘겨주는 경우 모든 url에 대응한다. (Route는 순서대로 동작하므로, 일반적으로 `는 가장 아래 배치한다.) 이를 이용해 유저가 잘못된 url로 접근 시 404 페이지를 띄워주거나 메인 페이지로 이동시키는 등의 처리를 할 수 있다. (} />) ``: 해당 url로...

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

[React] 로그인 구현하기

axios를 통해 서버와 통신하여 로그인을 진행하는 로그인 컴포넌트 구현 Redux를 이용해 사용자 정보를 state로 관리 Component, Form, React Hooks, Redux 다루기 기본 구조 App Redux Login Component ![](

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

5월 25일(Router)

SPA(Single Page Application) 새 페이지를 보여줄 때, 페이지 이동 대신 자바스크립트를 이용하여 기존 DOM을 새로운 DOM으로 대체한다. MPA와 비교했을 때 SPA의 장단점 장점: 자연스러운 페이지 이동 UX 제공 가능 새로고침이 발생하

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

5월 25일(React, 쇼핑몰 만들기)

Bootstrap https://react-bootstrap.github.io/ Bootstrap 설치 및 CSS 파일 import 컴포넌트를 import 해야 하는 것도 잊지 말것! Redux 장바구니 페이지를 만들기 위해 Cart.js 파일을 생성했다. 장바구니 데이터를 state에 보관해두고 데이터 바인딩을 해보자. 그런데 이 state가 ...

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

5월 24일(React, Blog 만들기)

Blog 만들기 1. 글수정 버튼 변수 뿐만 아니라 함수명도 props로 전달 가능하다. ``에 글제목, 글제목변경을 props로 전달해주었다. 2. 각 글에 해당하는 모달창 지금은 어떤 글을 누르든 첫 번째 글에 해당하는 모달창만 나온다. 각 글을 누르면 그 글

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

패스트 캠퍼스 MGS 3기 - 5월 23일(useEffect, Memoization)

useEffect side effect를 다룰 때 사용하는 Hook이다. 다음 코드는 리렌더 될 때마다 Document에 대해 이벤트 리스너가 중복으로 생성된다. 이벤트 리스너가 중복으로 생성되어서 클릭 한 번에 alert이 여러 번 뜨게 되는 것 이때, useEffect를 사용해서 코드를 다음처럼 수정하면 이벤트 리스너가 최초 렌더 시 한 번만 생...

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

5월 23일(React, Blog 만들기)

blog 만들기state 쓰는 이유?일반 변수는 갑자기 변경되면 HTML에 자동으로 반영되지 않는다.state는 변경되면 HTML이 자동 재렌더링된다.\-> 변동 시 자동으로 HTML에 반영되게 만들고 싶을 때 state를 사용하면 된다! (자주 변경될 거 같은 HTM

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

패스트 캠퍼스 MGS 3기 - 5월 20일(useState, useRef)

기존 바닐라 자바스크립트에서 input element가 필요하면 getElementByID, querySelector 등을 이용해 해당 DOM을 가져와서 사용한다.리액트에서는 useRef라는 것을 사용한다. 여러 HTML 엘리먼트 중에서도 <input>을 제어할

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

Props, State, Lifecycle

공식문서 - Components and Props(https://ko.reactjs.org/docs/components-and-props.html컴포넌트에 직접 주입하는 값을 props라고 한다.children도 props의 일부이다.props로 classNa

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

패스트 캠퍼스 MGS 3기 - 5월 19일(React 라이브러리)

CSS의 문제점 (React를 쓰면서)Global Namespace: 글로벌 변수를 지양해야 하는 JS와 대치Dependencies: css 간의 의존 관리Dead Code Elimination: 안 쓰는 css 인지 어려움Minification: 클래스 이름 최소화S

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

패스트 캠퍼스 MGS 3기 - 5월 18일(useState)

state 컴포넌트 안에서 관리되는 유동적인 데이터이다. 1. useState > 🤔 리액트 컴포넌트가 다시 렌더되는 조건 함수 컴포넌트가 렌더된다. = 함수 컴포넌트가 다시 실행되었다. prop이 업데이트 된 경우 state가 업데이트 된 경우 부모 컴포넌트가

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

패스트 캠퍼스 MGS 3기 - 5월 18일(React 라이브러리)

Date 관련(날짜 표기/계산 도구)스타일링 관련(스타일링을 조금 더 편하게 도와주는 도구)디자인 UI 관련(미리 해둔 스타일링을 제공하는 도구)애니메이션 관련(애니메이션 기능을 미리 구현해두고 제공하는 도구)모킹 관련(데이터 페칭을 대체해주는 도구)상태 관리 관련(컴

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

패스트 캠퍼스 MGS 3기 - 5월 17일(React, 공식문서)

1. Memoization 공식문서: https://ko.reactjs.org/docs/react-api.html 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠

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

패스트 캠퍼스 MGS 3기 - 5월 16일(Rendering, onClick)

1. Rendering 조건부 렌더링 렌더 시 무시되는 값 루프 활용 렌더링 key의 역할 조건부 렌더링 실습 true, false, null, undefined 이러한 값들은 화면에 렌더되지 않는다. 이를 {true ? : undefined} 이런 식으로

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

패스트 캠퍼스 MGS 3기 - 5월 16일(React, 공식문서)

1. Hooks 공식문서: https://ko.reactjs.org/docs/hooks-intro.html 클래스의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 한다. 사용 규칙 훅은 자바스크립트 함수지만 두 가지 규칙을 준수해야 한다. 최상

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