I'm a Fig, Not a Pig

1주차에는 HTML/CSS에 대한 전반적인 내용을 배웠다. 각 주차가 끝나고 과제가 주어지는데 이번 주차는 CSS의 Cascading에 설명하라는 과제를 받았다. Cascading 우선 Cascade는 '종속'이라는 의미이다. 사전적인 의미는 이렇지만 "위에서 아래로 내려오는 또는 단계적인"의 의미를 내포하고 있다. 따라서 CSS(Cascading StyleSheet)에서 쓰이는 cascading이란 여러 CSS 규칙이 적용될 때 순서에 따라 합쳐지는 것이다. 그럼 이때 합쳐지는 순서는 어떻게 정해질까? Cascade 순서 여러가지 기준이 있지만 가장 핵심적인 3가지에 대해 알아보자. 1. 스타일시트의 종류 크롬 개발자도구(F12)를 보면 브라우저에 기본 CSS가 있다. 이걸 user agent styl..

1. 불필요한 파일 삭제하기1. public 폴더index.html을 제외하고 모두 삭제하기   2. src 폴더App.js, index.js를 제외하고 모두 삭제하기  삭제했다면 아래와 같이 된다.  2. index.html, index.js, App.js 수정// index.html // index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( , document.getElementById('root'));// App.jsfunction App() { ret..

프로젝트에서 로그인 부분을 맡게 됐다. 이메일 로그인 인증 API 연동까지 완료했고 이메일 인증 코드 검증하는 부분을 하려고 한다. 두 달 전쯤 프로젝트 기획안을 짜면서 로그인 구현을 하게 될 것 같아 accessToken과 refreshToken의 개념에 대해 공부하며 정리했었는데 오늘은 accessToken과 refreshToken을 담는 저장소들의 차이점들을 정리하며 나은 방향을 고민해보려고 한다. 로컬 스토리지, 세션 스토리지 우선 로컬 스토리지, 세션 스토리지 둘 을 합쳐서 웹 스토리지라한다. HTML5에 추가된 저장소이며 키-값을 저장할 수 있다. (key-value 스토리지 형태라고 한다.) 로컬 스토리지, 세션 스토리지 차이점 둘의 차이점은 데이터의 영구성이다. 로컬 스토리지의 데이터는 사..

이메일 폼을 만들던 중.. 이메일이 유효하지 않은 상태에서 다음 버튼을 누르면 주황색으로 변하는 문제가 있었다. (이메일이 유효한 상태에서만 주황색으로 변하게 하고 싶음) 내가 원하는 건 변하지 않게 하는 것..! 그래서 active를 사용해서 이메일이 유효하지 않은 경우 버튼 클릭 시 그레이 색으로 유지되도록 코드를 짰는데 계속 주황색으로 바뀌었다. 구글링 도중 스택오버플로에서 나와 비슷한 상황이신 분을 발견했고 active가 아닌 focus로 하는게 적절하다는 답변을 보았다. 이후에 active 대신 focus를 적용했더니 문제해결! 그래서 오늘은 active와 focus에 대해 알아보았다. active와 focus acitve나 focus 둘 다 user의 action에 따라 스타일링의 변화를 주고..

리액트에서는 화면이동을 위해 Link 와 useNavigate 라는 두 가지 방법을 사용한다. 1. Link 라이브러리 설치 npm install react-router-dom --save​ // Router.js function Router() { return ( ); } export default Router; // Login.js import React from "react"; import { Link } from "react-router-dom"; function Login() { return ( 회원가입 ); } export default Login; 첫번째 방법은 Link 컴포넌트를 사용하는 것이다. Link는 상품 리스트에서 상세 페이지 이동 시와 같이 클릭 시 바로 이동하는 로직 구현시에 ..

깃의 서로 다른 브랜치를 병합하고 싶을 때가 있다. 이럴 때에는 merge를 하고 싶은 브랜치로 간뒤 git merge "해당 브랜치" 를 적어준다. 예를 들어 master 브랜치에 dev 브랜치에서 커밋한 내용을 merge 하고 싶다면 master 브랜치로 git checkout 명령어를 통해 이동 한 뒤 아래와 같이 git merge 명령어를 실행하면 된다. - dev 브랜치의 변경 내역이 master 브랜치로 병합 git checkout master git merge dev 이때 중요한점은 dev 브랜치가 commit을 한 상태여야한다는 점이다.

오늘은 깃에서 병합하는 방법들 중에 fast-forward와 3 way merge 방식에 대해서 공부하려고 한다. GIT에서 사용되는 병합 방법 2가지 1. fast-forward branch간의 병합을 진행할 때 커밋이 생기지 않고 merge 명령어를 실행하는 브랜치의 Head Commit이 병합되는 branch의 Head commit으로 이동되는 방식이다. 어떤 경우에서 사용될까? 서로 다른 브랜치의 base commit에 내용이 변경되지 않았을 때 사용된다. 이는 base commit이 커밋을 하지 않은 것과 동일한 의미를 갖는다. 직관적으로 예로 들자면, main branch에서 새로운 브랜치 하나를 생성 한 후에 main branch는 더이상 커밋하지 않고, 생성된 브랜치에서만 커밋을 하는 경우..

git init : 새로운 git 저장소 초기화git add . : 현재 directory의 모든 파일울 staging Area로 이동git add : 파일을 staging area에 추가하기git reset : 파일을 staging area에서 제거하기git status : staging area와 작업 영역의 상태 확인git log : 전체 깃 history 보기. git log -5 하면 최근 다섯줄 보기처럼 마지막 줄을 지정할 수 있음git log --pretty=oneline : --pretty 옵션을 사용하면 커밋 히스토리를 다양한 방식으로 출력할 수 있음. (--pretty  옵션에 oneline이라는 값을 주면 커밋 하나당 한 줄씩 출력함)git commit -m "message" : S..

이메일, 비밀번호 정규식 const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/; const passwordRegEx = /^[A-Za-z0-9]{8,20}$/ /^ : 시작 $/ : 끝 [A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작 ([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음 * : 문자 또는 숫자가 0개 이상 나타남 @가 중간에 반드시 들어가야 함 도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음 . 이 최소한 하나는 반드시 들어가야 함 .뒤에 com..

오늘은 효율적인 효율적인 구조를 짜기 전 CRA 초기세팅 후 생성되는 폴더와 파일들에 대해 알아보려고 한다. CRA 초기세팅 후 디렉토리들 살펴보기  CRA로 초기세팅 후 생성되는 파일 구조이다. node_modulesCRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더package.jsonCRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일모든 프로젝트마다 package.json이 하나씩 존재한다."dependencies"리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.실제 코드는 node.modules 폴더에 존재한다."scripts"start : 프로젝트 development mode(개발 모드) 실행..