웹 개발의 기록들

vercel로 처음 홈페이지를 업로드 할 때 빌드를 하다가 process.env.CI = true 라는 오류가 뜰 것이다. 그럴 땐, 이렇게 해결하면 된다. 1. 다시 홈으로 돌아와서, 해당 프로젝트를 클릭한다. 2. 위에 보이는 메뉴 중 Settings로 간다. 3. Environment Variables 클릭! 4. Add New 란이 보일 것이다. NAME에는 CI라고 입력하고 VALUE는 false를 입력 후, Add 클릭! 5. 그리고 다시 Deployments로 돌아가서, 해당 로그를 클릭하고 Redeploy를 클릭해서 빌드를 하면 된다. 다들 오류가 해결 됐길 바라며! 다른 오류 해결책으로 봐요!ㅎㅎㅎ

1. 일단 터미널을 이용해서, 원하는 경로에 React.js를 설치한다. ( npm이 설치되어 있어야 합니다. ) [ Javascript ] npx create-react-app '프로젝트 이름' [ Typescript ] npx create-react-app '프로젝트 이름' --template typescript 2. Firebase로 이동해서 프로젝트를 만든다. - 아래 링크를 타고, 프로젝트 만들기 또는 프로젝트 추가를 클릭한다. 애널리틱스는 나중에 추가가 가능하기 때문에, 사용 설정을 꺼주어도 된다. https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.c..

npx create-react-app '프로젝트 이름' --template typescript 이렇게 입력하면 React.js 환경에서 Typescript를 사용할 수가 있다.

- 터미널 사용법은 생략하겠습니다. - 1. sass 설치하기 npm install sass -g 2. 설치 확인하기 npm show sass version 3. scss 파일이 있다면, 터미널 커맨드 창에서 sass [변환할 scss 파일명] [변환 될 css 파일명]을 입력 sass index.scss index.css 4. 3번으로 하면, 매 번 수동으로 입력을 해야하는데, 귀찮다.. 자동으로 저장되면 변환되게 해주는 건 없나? - 이렇게 하면, index.scss 파일에서 수정하고 저장하면, 자동으로 index.css 파일이 변환된다. sass --watch index.scss index.css 5. 폴더 단위로 자동으로 변환해볼까? sass --watch [scss 파일이 있는 폴더명]:[변환 ..

padding과 margin 축약형 1. 상,하,좌,우가 전부 10px이라면? .클래스{ padding: 10px; } 2. 만약 상하( top / bottom ) 이 20px이고, 좌우 ( left / right ) 가 10px 이라면? .클래스{ padding : 20px 10px; } 3. 상(top) 하(bottom) 좌(left) 우(right) 가 다 각자 다르다면? .클래스{ padding-top : 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } 저 위 코드를 .클래스{ padding: 10px 20px 30px 40px; } 로 축약 가능 4가지를 축약형으로 사용할 때엔, 상,우,하,좌를 생각하면 될 것 같다.

css에서, border를 사용하면 기본적으로 inner가 아닌 outer로 설정이 되어 있기 때문에 border의 px 사이즈가 커지면 커질수록 찌그러지는 현상이 나타나는데, 이걸 inner로 변경할 수 있는 방법이 있다. 그게 바로 box-sizing 속성이다. .클래스 { box-sizing: border-box; } [ box-sizing 미적용시 이미지 ] [ box-sizing 적용시 이미지 ] 저 이미지는 width와 height가 300px로 된 원이다. box-sizing을 하지 않게 되면, outer로 설정이 되어 있어서 300px보다 더 큰 원이 생성된다. 하지만, box-sizing을 border-box로 하게 된다면, inner로 그려져서, 원의 크기가 변하지 않고 border가 ..

css에서, 배경색을 투명색으로 만들고 싶을 때가 있다. rgba 함수를 사용해서, opacity를 0으로 만들어 투명색을 만들 수도 있지만 간단하게 만들 수도 있다. .클래스{ background-color: transparent; } 위 코드를 사용하면 투명색으로 만들 수 있다. transparent가 투명색을 의미한다.

[ 이전 글 보기 ] https://includecoding.tistory.com/221 [ HTML / CSS 공부 ] 4. Flexbox란? [ 이전 글 보기 ] https://includecoding.tistory.com/220 [ HTML / CSS 공부] 3. CSS 기본구조 [ 이전 글 보기 ] https://includecoding.tistory.com/219 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 ) [.. includecoding.tistory.com 1. Grid 사용하기 .클래스 네임 { display: grid; } 이렇게 사용하면, 해당 클래스 안에 들어오는 아이템들을 grid로써 사용할 수 있게 된다. 2. Grid의 속성들 2-1. grid-templat..