uomnf97_web.log

TailwindCSS로 Header와 Footer 정복하기

Mon, 18 Apr 2022 12:49:54 GMT

안녕하세요! 제이덥입니다~ 오늘은 React.js로 웹페이지 Footer/Header를 만들려고 하는데요! TailwindCSS Config를 다루고 해당되는 부분의 코드를 함께 작성해보려고 합니다!

1. React-App 생성하기

+) yarn이 안깔려 있는 분은 여기로! +) react가 안깔려 있는 분은 여기로!

처음에 해주어야 하는건 우선 React-app을 생성하는 것입니다. 저는 yarn을 이용해서 생성을 해줄 건데요, 만약 npm으로 설치하는 분들은 npm create-react-app 을 입력해주면 됩니다.
```
yarn create react-app webstructure
```
설치가 다 되면 아래 문구가 뜰꺼에요!(저는 이미 webstructure라는 이름으로 디렉토리를 만들어둔 상태라 디렉토리 이름을 다르게 설정하기는 했습니다. 하지만 webstructure로 옮겨서 나머지 작업은 진행할 예정입니다)
이후 다음 입력어를 입력하면 react.js가 시작됩니다! 그럼 벌써 1단계가 마무리 되었네요~!
```
yarn start
```

2. TailwindCSS 설치하기

TailwindCSS는 CSS 프레임워크입니다. 다른 태그안에 속성을 넣어주는 방식으로 디자인을 진행합니다. 기존 CSS에서는 따로 내용을 커스터마이징을 해주어야하나, Tailwindcss에서는 미리 해당 내용이 정의되어 있어, 개발 시간을 단축해줍니다. 코드가 조금 길어지고, 보기 어렵다는 단점이 있기는 하지만, 간단한 페이지를 구현하고, 빠른 개발을 해야한다면 사용하기 편한 프레임워크입니다.
또한 일반 CSS처럼 커스터마이징도 해줄 수 있기 때문에 확장성도 갖추고 있습니다.

2.1 TailwindCSS설치하기

그럼 설치해볼까요? 설치는 다음과 같은 입력어를 통해 설치해줄 수 있습니다. 본인이 쓰고 있는 것을 이용해서 설치해주시면 됩니다.

yarn add -D tailwindcss postcss autoprefixer
npm install -D tailwindcss

아래와 같이 나오면 저희가 활용할 CSS설치까지 마무리 되었네요!

이제 tailwind.config.js파일을 추가해줍니다! 아래 명령어를 추가해주시면tailwind.config.js파일이 추가된 것을 보실 수 있습니다!

npx tailwindcss init

이후 tailwindcss파일을 다음과 같이 수정해주세요! 전체 복사하셔서 기존 있던 내용을 모두 지우시고 넣어주시면 됩니다~!

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

그리고 추가로 src > index.css파일에 들어가서 해당 내용을 깔끔하게 날리신 뒤에~ 이 내용을 추가해주시면 됩니다 :)

// index.css 파일 내부 내용
@tailwind base;
@tailwind components;
@tailwind utilities;

3. Craco 설치

create-react-app은 PostCSS를 지원해주지만, 재정의를 할 수 없기에 TailwindCSS를 이용하기에 다양한 제약이 따릅니다. 따라서 CRACO를 설치하고, craco.config.js파일을 추가해서 쉽고 다양하게 커스터마이징을 할 수 있도록 설정해줍니다. 아래는 다운로드 받을 수 있는 명령어입니다.
```
yarn add @craco/craco
npm install  @craco/craco
```
이것 또한 아래와 같이 나오면 설치가 완료가 된거에요~!

그리고 이제 craco를 이용해서 PostCSS를 활용할 수 있도록 craco.config.js파일을 만들어줍니다. 코드는 다음과 같아요~

module.exports = {
    style: {
        postcssOptions: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
        },
    },
};

주의해야하는 부분은 아래와 같이 가장 상위 디렉토리에 저장을 시켜야한다는 것!

마지막으로 package.json에 이부분을 요렇게 수정해줍니다!

"start": "craco start",
"build": "craco build",
"test": "craco test"

위에 코드를 해당하는 부분에 찾아서 붙이시면 됩니다 :)

그럼 모든 세팅은 끝났습니다! Header와 Footer를 만들어볼까요?

4. Header 와 Footer를 만들기

오늘은 Header와 Footer를 만들건데요. 제가 작성한 코드를 임의로 넣어주시면 될 것 같습니다. React-script가 5로 업데이트가 되서 실행이 잘 안되는게 많을 텐데요. craco가 특히 문제가 많다구 하네요;; 빨리 craco가 업데이트 되길바라며.... 아래 따라하시고, 문제 생기시면 연락을 주시기 바랍니다! 시험 화이팅~

4.1파일 정리

우리는 이제 App.css파일이 필요없습니다! src에 있는 App.css 파일을 지워주시고, App.js에 있는 아래 문장을 삭제해줍니다!

import './App.css'

4.2

App.js파일을 아래와 같이 수정해줍니다! 전체 내용을 지우시고 복사 붙여넣기 해주시면 됩니다!

import logo from './static/photo/logo.png';
import './index.css';

function App() {
  const currentDay = new Date();
  const currentYear = currentDay.getFullYear();

  return (
    
      
        
          
            
            동글동글 코인 지표 인덱스
          
          
            
              Speedometer
            
            
              Graph
            
            
              Chart
            
          
        
      
      
        Speedometer가 들어갈 자리입니다!
      
      
        Graph가 들어갈 자리입니다!
      
      
        Chart가 들어갈 자리입니다!
      
      
        
          
            
              © {currentYear} 동글동글
            
            
              경기도 용인시 처인구 모현읍 외대로 81, 한국외국어대학교
            
          
          
            
              Developed by 김도영, 김주원, 김태우, 정서영
            
          
        
      
    
  );
}

export default App;

이후 yarn start 혹은 npm run start를 눌러주시면 바로 시작하실 수 있습니다! 아래 같은 화면에서 원하는 대로 디자인을 고쳐보세요!

파일 구조 및 코드는 아래 깃헙주소에서 확인하실 수 있습니다! +) 파일 구조 및 코드보러 깃헙에 가기!

출처 : Tailwindcss Documentation installation 차곡차곡 님의 블로그

학회 웹페이지 만들기 :: 버그 고치기

Fri, 18 Feb 2022 12:03:49 GMT

안녕하세요! 방문객 여러분 오늘은 제가 학회앱페이지를 만들면서 받은 피드백 해결 사항에 대해서 포스팅을 하려고 합니다!

제가 만든 웹은 현재 한국외국어대학교 컴퓨터공학부 학회 PNP의 웹페이지인데 현재 웹페이지 퍼블리싱 이전에 깃헙에 deploy를 해놓은 상태입니다. 궁금하신 분들은 아래 링크를 따라 가셔서 확인하시면 좋을 것 같네요~

+) 학회 홈페이지 살펴보기

맡은 역할

학회페이지는 전반적으로 각 페이지를 각 사람에 할당해서 만드는 방식으로 진행했습니다. 깃허브에서 학회깃헙에 프로젝트를 생성하고 각자 fork한 다음 각자 할당받은 페이지를 개발을 했구요! 이후에 프로젝트 페이지에 병합을 하는 방식으로 진행했습니다.

저는 기본적으로 '학회소개'페이지와 'FAQ'페이지를 만들었습니다. 전체 학회 기본 소개 페이지부터 활동 및 연혁 등을 소개하는 페이지를 만들었네요! ㅎㅎ
추가로 저는 학회페이지에서 라우터를 관리하고, 전체 페이지 병합의 초기작업을 진행했습니다! 덕분에 라우터라는 개념에 대해서 경험지를 많이 획득할 수 있어서 좋은 경험이었던 것 같네요!

FeedBack

피드백으로 받은 사항은 다음과 같습니다!

- About
1. '학회소개 페이지'에서 따라 글자 중앙정렬이 안되는 해상도 존재
    - 세부 사항 : FHD(1920 X 1080) 해상도 모니터에서는 문제점이 생김
2. '학회 활동', '연혁 페이지'에서 특정해상도에서 Footer가 하단에 고정되어 있지 않고 여백이 존재
    - 세부 사항 : FHD(1920 X 1080) 해상도에서 모니터에서 문제점이 생김
3. '연혁 페이지'에서 선이랑 원의 중심이 만나지 않고 원이 타원이다
    - 세부 사항 : FHD 해상도 상태 혹은 모바일에서 문제점 발생
4. '학회장 페이지, 교수 페이지'부분이 모바일에서 보면 겹쳐져 나타난다.
    - 세부 사항 : 모바일, 패드 크기에서 문제 발생
5. 모든 페이지에 있는 페이지 제목이 모바일 상황에서 header에 가려진다. 
6.  버튼이 모바일 상황에서 깨짐 문제 발생
- FAQ
1. 오타
    - 세부사항 : 좌측에 플러스 “친구”로 바꾸기  
2. 모바일 상황에서 컨테이너가 겹치는 문제 발생

정리 : 대부분의 문제점이 Responsive화면에 의한 문제점이었습니다. 개인 개발을 할 때 쓰는 맥 14인치 컴퓨터가 1280 X 720 사이즈라 이보다 큰 Full HD사이즈 혹은 패드, 핸드폰 사이즈일 때 문제가 발생하는 경우가 많았습니다. 따라서 이 점을 유념해 해당 페이지들의 수정을 진행하였습니다! 따라서 Responsive화면을 만들어주기 위해서 학습을 진행했습니다.

TailwindCSS

Tailwind CSS란?

Tailwind CSS is the only framework that I've seen scale on large teams. It's easy to customize, adapts to any design, and build size is tiny

Tailwindcss란 CSS 프레임워크로 인라인 스타일을 가능하게 해주는 쉽고 빠르게 스타일링을 하게 해주며, 일관된 디자인을 가능하게 해줍니다. 스타일 변경을 위해 따로 클래스를 제작해줄 필요가 없으며 선언된 태그 안에 속성을 부여하는 방식으로 디자인을 적용해주는 방식으로 CSS적용을 진행합니다.

장점 :

  - 빠른 개발 시간
  - 일관된 디자인 
  - 쉽고 자유로운 커스텀
  - 로우레벨의 스타일 제공 
  - 미리보기, 자동완성 등 디자인 개발에 편한 환경

단점

  - 길고 난잡한 코드
  - 클래스명 선언할 필요가 없는 대신 익숙해질 수 있도록 일부를 학습해야함.

추가로 관심이 있는 분들은 Tailwindcss공식 사이트를 통해서 확인하실 수 있습니다! -> TailwindCSS 살펴보기

TailwindCSS에서 Responsive 화면 만들기

우선 아래 페이지에서 공식 문서에서 권장하는 내용을 확인하실 수 있습니다. +) Responsive Design 공식 documentation확인

관련 내용을 살펴 보면 특정 픽셀에서 적용될 수 있도록 아래 나와있는 Breakpoing prefix를 입력 한뒤 정렬을 하도록 하여 관련 부분에서 정렬이나 내용이 어떠한 방식으로 정리 될 수 있는지 정의합니다.

Breakingpoint prefix	Minimum width	CSS
'sm'	640px	@media (min-width: 640px) { ... }
'md'	760 px	@media (min-width: 760px) { ... }
'lg'	1024 px	@media (min-width: 1024px) { ... }
'xl'	1280 px	@media (min-width: 1280px) { ... }
'2xl'	1536 px	@media (min-width: 1536px) { ... }
사용 방법은 해당 `prefix : config내용` 순으로 이루어 져있는데요. 예를 들어 내가 1024 px상황에서 중앙 정렬을 하고 싶다면 `lg: text-center`와 같이 정의하면 되는 것입니다! 쉽게 적용 할 수 있네요!

또한 Tailwindcss는 default값으로 모바일에 적용되기 최적화되는 방식으로 디자인을 먼저 한다는 것을 알고 있어야합니다. 따라서 이보다 큰 상황에서 적용되는 breakpoint들은 현재 설정된 breakpoint 그리고 그 이상만 적용되는 걸 유의 해주세요!

Targeting Mobile Screens: 앞서 말씀드렸던 건 모바일 상황이 default임으로 굳이 모바일에 적용하시려면 sm:속성을 이용안하셔도 됩니다! 만들어 주실 때는 아무런 breakpoint없이 추가해주면 됩니다!

Targeting a single Break Points: 여기서 나오는 breakpoint prefix는 모두 min-width가정입니다. min-width보다 큰 상황에서는 모두 적용이 되는 것이죠. 따라서 이보다 이상이하를 표현해주고 싶으실 때에는 더 큰 Breakingpoint prefix를 이용해주시면 됩니다.

이렇게 되면 md(760px)~lg(1024)에서는 red-500 배경 색상으로 적용되고 lg(1024px)이상에서는 green-500이 배경색상으로 정해집니다.

Customizing breakpoints 아래와 같이 tailwind.config.js 파일을 이용해서 관련 내용을 정의할 수 있습니다.

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

관련 내용을 공부하였으니,,, 학회페이지를 수정하러 가볼까요?!

피드백 반영하기

1. About Page 중앙 정렬문제

1. '학회소개 페이지'에서 따라 글자 중앙정렬이 안되는 해상도 존재
    - 세부 사항 : FHD(1920 X 1080) 해상도 모니터에서는 문제점이 생김

문제 화면: 수정 화면: 수정 사항 : 해상도 별로 왼쪽 마진을 responsive하게 설정하여 해당 문제점을 해결해주었습니다.


    Our Goal
    학회 목적
    
        
        1. 자신이 되고자 하는 목표를 찾기                       
        
        
        2. 컴퓨터 기술 및 이론에 관한 학습을 통해 자신의 소프트웨어 분야 전문성 증진
        
        
        3. 학회원들과 함께 협력하며 자신의 프로젝트를 완성
        
        
        4. 실무 경험과 현업에서 필요한 각종 정보를 공유
        
        
        5. 선후배 간의 친목을 증진

2. '학회 활동', '연혁 페이지'에서 특정해상도에서 Footer가 하단에 고정되어 있지 않고 여백이 존재
    - 세부 사항 : FHD(1920 X 1080) 해상도에서 모니터에서 문제점이 생김

문제 화면:

수정 화면: 수정 사항 : 문제가 있는 두개의 페이지에서 1280px이상이 되는 경우 상단의 아이템과의 마진을 조정함으로서 문제를 해결하였습니다!

// Activity Page

//Professor Page

3. History Page 원이 만나지 않는 문제

3. '연혁 페이지'에서 선이랑 원의 중심이 만나지 않고 원이 타원이다
    - 세부 사항 : FHD 해상도 상태 혹은 모바일에서 문제점 발생

문제 화면:

수정 화면:

수정 사항 : 불필요한 코드들을 삭제하고 중앙 정렬로 바꾼다음 해당 border을 글씨가 들어있는 컨테이너 뒤로 가는 "z값"을 조정함으로서 문제점을 해결하였습니다.

4. Leader/Professor Page 겹침문제

4. '학회장 페이지, 교수 페이지'부분이 모바일에서 보면 겹쳐져 나타난다.
    - 세부 사항 : 모바일, 패드 크기에서 문제 발생

문제 화면:

수정 화면: 수정 사항 : 이 상황역시 md, lg, xl 등을 적극적으로 활용하여 해당 상황일때 각 컨테이너의 크기를 조정해줌으로서 문제를 해결하였습니다.

//leader page


                    
                    
                    
                    
                    
                        2000~
                        경력
                        
                        서울공대 제어계측공학과 학사(1986) 
                        
                        한국과학기술원 전기 및 전자공학과 석사(1988)
                        
                        한국과학기술원 전기 및 전자공학과 박사(1994)
                        
                        한국과학기술원 전기 및 전자공학과 Post-Doc(1994-1995)
                        
                        한국외대 디지털정보공학과 교수(1995-현재)
                        
                        대한전자공학회 정회원 
                        
                        IEEE member
                        
                        한국외대 과학기술학회 PNP 지도교수(2000-현재)
                        
                        한국외대 컴퓨터공학부 학부장(2021)

5. Header가 페이지 제목을 가리는 문제

5.  모든 페이지에 있는 페이지 제목이 모바일 상황에서 header에 가려진다.

문제 화면:

수정 화면: 수정 사항 :

문제점이 발생하는 상황은 모바일 크기 상황이었음으로 일반적인 상황에 대한 top 마진을 40으로 조절하고, 이후에 lg: mt-24로 일관된 상단 여백을 가질 수 있도록 조절해주었습니다.

6. 상단 버튼 크기 문제

6.  버튼이 모바일 상황에서 버튼의 크기가 달라짐

문제 화면: 수정 화면: 수정 사항 : 기존의 코드는 flex-row로 한행으로 묶어주었는데 해당을 1024px 이상인 경우에서만 해당코드를 활용할 수 있도록 하고 모바일 사이즈에서는 flex flex-wrap으로 상황에따라 flex하게 반응 할 수 있도록 해주었다.

7. FAQ Page 문제

- FAQ
1. 오타
    - 세부사항 : 좌측에 플러스 “친구”로 바꾸기  
2. 모바일 상황에서 컨테이너가 겹치는 문제 발생

문제 화면:

수정 화면:

수정 사항 : hidden 기능을 사용해서 특정해상도에서 숨기고 text관련 속성을 이용해서 글씨 크기를 조정함으로서 버튼이 깨지는 문제점을 해결했습니다!

참고 : 블로그

Gh-Pages 배포의 모든것!

Fri, 04 Feb 2022 13:29:04 GMT

안녕하세요! 좋은 하루 보내셨나요?! 제이덥입니다!

오늘은 Github에서 web을 Publishing 하는 방법에 대해서 정리해볼까 합니다! 어떻게 Publishing하는지 기본적인 부분에 대해서 다루고 추가적으로 제가 발생했던 오류에 대해서 설명해보고 마치려고 합니다!

1. Github Repository만들기

당연히 첫번째로 해줘야할 것은 repository를 만들어야 합니다! 우선 github에 들어가셔서 본인이 만들고 싶은 _주소이름_으로 repository를 만들어줍시다!

2. React-App 만들어주기!

물론 여기서 react App.js말고 다른 웹사이트를 만들어주셔도 됩니다! 하지만 저는 react로 웹을 배포해보았기에 react에 대해서 설명할께요! 아래 명령어를 입력해주시는데 #repository-name#으로 표시된 부분을 본인이 추가하신 repository이름과 똑같이 해주세요!

yarn create react-app #repository-name#

이후 원격 저장소를 연결해주어야 겠죠?! 관련된 내용을 연결해주기 위해서는 아까 여러분의 Git-hub에 만들어주신 repository에 들어가셔서 git clone을 위한 주소를 아래와 같이 복사하신 다음에! 여러분의 Visual Studio Code에 혹은 터미널에 아래와 같이 추가해주세요~!

git remote add origin #repository 주소#

그럼 이제 React-app과 호스팅 준비가 거의 다 완료된 상태입니다!

3. Gh-pages

1. gh-pages 관련 패키지를 다운로드 받기!

아래 명령어를 터미널 혹은 Visual Studio Code에 아래 명령어를 입력하여 다운로드 받습니다!

yarn add gh-pages --save-dev ##또는 npm install gh-pages --save-dev

2. package.json에 코드 추가!

아래와 같이 name, version, private 다음에 혹은, 맨 아래에 코드를 추가합니다! 여기서 username을 여러분의 github username 그리고 repository name은 여러분의 repository name으로 추가하면 됩니다~

"https://username.github.io/repository/

//pakage.json
{
  "name": "pnp",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://username.github.io/repository/",
  "dependencies": {
   //...
}

추가로 script로 묶여 있는 부분안에 predeploy와 deploy를 추가합니다.

//pakage.json
{
  "scripts": {
  //...
  "predeploy": "npm run build" //혹은 yarn start,
  "deploy": "gh-pages -d build"}
}

원리

gh-pages라는 디렉토리를 형성시키고 yarn run deploy와 같은 명령어를 입력하면 npm run build를 통해 전체 내용을 build합니다. 그리고 deploy과정이 진행되면 gh-pages라는 폴더가 생성되고 관련 폴더에 build한 내용이 옮겨지게 됩니다. 이후 gh-pages라는 브랜치를 깃헙에서 생성시켜 관련된 부분에 포스팅이 되는 것입니다!

Posting하다가 생긴 문제점!

nwitter clone coding그리고 학회페이지를 포스팅을 하다보니 문제점이 생겼었는데요, 바로 빈화면이 나타나는 것이었는데 주로 react-dom-router를 사용할 때, browser라우터를 이용할 때 발생한다고 합니다!

특히 아래와 같이 js파일에 home을 '/'로 설정해줄 경우 repository주소로 이동하지 않고 /로 이동하려고 하기때문에 올바르게 설정이 되지 않는다고 하네요!

import React from 'react';
import { Route } from 'react-router-dom';

import Index from './pages/Index';
import About from './pages/About/About';
import About_history from './pages/About/About_history';
import About_leader from './pages/About/About_leader';
import About_activity from './pages/About/About_activity';
import About_professor from './pages/About/About_professor';
import Achievements from './pages/Achievement/Achievements';
import Members from './pages/Members/Members';
import Recruit from './pages/Recruit';
import FAQ from './pages/FAQ';
import Blog from './pages/Blog/Blog';
import Graduates from './pages/Members/Graduate/Graduates'

const App = () => {
  return (
    
      
      
      
      
      
      
      
      
      
      
      
      
    
  );
};

export default App;

따라서 그럴경우 를 basename={process.env.PUBLIC_URL}로 묶어주면 해결이 됩니다! 우리가 설정한 루트와 repository를 일치시켜주는 거라고 이해하시면 됩니다!

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

트위터 클론 코딩 :: #2 Authentification

Fri, 28 Jan 2022 14:26:42 GMT

#2.0 Using Firebase Auth

router.js를 따로 선언하여 활용하는 이유 : 모듈화 시켜 router로서만 활용할 수 있도록 하고, 추가로 App.js에는 footer, header등 다양한 것들을 추가시킬 수 있도록 하였다.

사용방법

먼저 import를 해줘야한다

//firebase.js => fbase.js로 바꿔주었다. 
import "firebase/compat/auth";

authService.currentUser를 호출한다. 이는 user가 있을 경우 없으면 null을 반환하는 원리를 이용해 코드를 작성한다.
잡기술

절대 경로로 만들어주기 : 아래코드를 가진 파일을 jsconfig를 추가해주면 ../../firebase/compat/auth와 같은 상대경로가 아닌 위와 같은 절대 경로로 표현해줄 수 있게 된다.

jsconfig.json

{
    "compilerOptions":{
        "baseUrl": "src"
    },
    "include":["src"]
}

firebase에서 특정함수를 불러주고 싶을때 아래와 같이 추가해주면 import할 때 활용할 수 있다. export const authService = firebase.auth();

코드 수정 사항 최종 :

//Router.js
import React from "react";
import { HashRouter as Router , Route, Switch} from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = ({ isLoggedIn }) => {
    return(
        
            
                {isLoggedIn ?
                <>
                    
                        
                    
                :
                  
                     
                
                }
            
        
    )
};

export default AppRouter;

//App.js
import React, { useState}  from "react"
import { authService } from "fbase";
import AppRouter from "components/Router";

function App() {

  const [ isLoggedIn, setIsLoggedin ] = useState(authService.currentUser);
  return (
    <>
      
      © {new Date().getFullYear} Nwitter 
    
  );
}

export default App;

미리 가입했던 firebase홈페이지에서 생성된 nwitter 프로젝트에서 authentication을 통해서 이메일 인증, 깃헙인증 등을 추가해줄 수 있다.

authentification > enable 을 통해 원하는 계정 설정
- github으로 하고 싶을 때에는 app에서 생성해줘야함
1. github계정 > setting > developer setting > OAuth App 발급된 Client ID와 Clients Secret을 붙여넣기

코드 수정

//Auth.js 수정사항
import React, { useState } from "react";

};
const onSubmit = (event)=>{
    event.preventDefault();
}
return(

)}; export default Auth

- 결과창![](https://images.velog.io/images/uomnf97_web/post/066b0600-42e4-4e10-96a6-90d9ef9d331e/Screen%20Shot%202022-01-28%20at%205.45.27%20PM.png)

# #2.2 Recap
__코드 설명__ : 
1. const를 통해서 email, password 변수를 추가하여 사용자가 입력하는 값을 전달하도록 함. 
2. onChange 함수는 Hook으로 만든 함수인데 내부에서 입력되는 변수의 모형을 {name:value}에 해당하는 모형으로 바꿔주고 value에 값을 키보드가 입력될 때마다 저장하도록 함. 
3. `event.preventDefault()` : 사용하고 있는 사용자가 아닌 개발자가 관련된걸 컨트롤 할 수 있도록 보호하도록 하는 코드 

# #2.3 Creating Account 

- documentation의 email provider를 활용할 계획임 
- promise와 같이 나와있는 것은 await를 사용해야 함. 
- `authService.createUserWithEmailAndPassword`를 활용하여 email과 password로 된 계정을 생성할 수 있다. 
- `authService.signInWithEmailAndPassword`를 활용하여 로그인을 할 수 있다. 
- 또한 persistance를 설정해주어야 하는데, 이를 통해서 local로 설정하면 계속 로그인되어있고, session으로 설정하면 탭이나 브라우저가 열려있는동안 로그인되어 기억되고, none으로 설정하면 로그인 되어있지않는다. 


- 코드 :
```js
//auth.js
import React, { useState } from "react";
import { authService } from "../fbase";

const Auth = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [newAccount, setNewAccount] = useState(true);
    const onChange = (event) =>{
        const {
            target : { name, value}
        } = event;
        if(name ==="email"){
            setEmail(value)
        } else if (name==="password"){
            setPassword(value)
        }

    };
    const onSubmit = async(event)=>{
        event.preventDefault();
        if (newAccount) {
            // create account
            await authService.createUserWithEmailAndPassword(email, password);
        } else {
            // log in 
            await authService.signInWithEmailAndPassword(email, password);
        }
    }
    return(
        
            
                
                
                
            
            
                
                
            
        
)};
export default Auth

결과 :

#2.4 Log In

*모르는 내용에 대한 documentation을 검색하고 싶으면 https://firebase.google.com/docs/ 를 통해서 확인할 수 있다

출처: 노마드코더: 트위터 클론 코딩

트위터 클론 코딩 :: #1 Setup

Fri, 14 Jan 2022 13:33:40 GMT

#1.0 React + Firebase Setup

환경설정 하기

Github에 "nwitter" 저장소 생성하 : Readme, .gitignore 추가하지 말기
create-react-app을 이용해서 추가하기

yarn create react-app nwitter

index.js

지워야 할 코드

import './index.css';

import reportWebVitals from './reportWebVitals';

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

최종 코드

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( , document.getElementById('root') );


4. __App.js__
- 아래 코드만 남기고 나머지 제거
```js
import React from "react"

function App() {
  return (
    
  );
}

export default App;

아래와 같이 다섯개의 파일을 제거 : App.css, App.test.js, index.css, logo.svg
__package.json 부분에서 test부분 삭제 __
변경 사항을 git에 commit
```
git add . 
```

git commit -m "1.0 introduction update"

git push origin main

8.__ Firebase 프로젝트 생성 __ : Firebase 아이디를 생성한뒤 > 새 프로젝트 클릭 > nwitter라고 만들어주기 : 아래와 같은 순서로 진행

마지막 단계에서 유의해야 할 점. : 이곳에서는 npm 설치를 이용해서 firebase 설치를 진행하고, 아래 코드는 복사 붙여넣기 하여 firebase configuration에 추가해야함
```
//firebase.js추가 내용
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
```

const firebaseConfig = { apiKey: "**", authDomain: "**", projectId: "**", storageBucket: "**", messagingSenderId: "**", appId: "**" };

export default firebase.initializeApp(firebaseConfig);

추가로 버전이 바뀌었기 때문에 현재 트위터 클론을 따라 하고 싶으면 아래와 같은 방식으로 따라해야함.

```bash 
Firebase V9 업데이트 되면서. 이슈가 생겼습니다. 이에 코드의 큰 변경 없이 버전 9.0 을 사용하기 위해서. Firebase 의 'compat' 호환 버전 사용을 권장합니다.

또한 React Router Dom 이 버전 6 으로 업데이트 되었습니다. 따라서 수강하시는 동안 버전 6으로 업그레이드 하지 말고. 버전 5 유지를 권장합니다.

Firebase 설치시 npm i firebase 을 하지마시고.

npm i firebase@9.6.1 혹은 
yarn add firebase@9.6.1이와 같이 입력하세요.

React Router Dom 설치시 npm i react-router-dom 을 하지마시고.

npm i react-router-dom@5.3.0 이와 같이 입력하세요.

Firebase 을 import 할 때. 아래와 같이 입력하세요.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

yarn start를 통해 올바르게 서버가 활동하는지 확인 : App.js를 아래와 같이 바꾸어 돌어가는지 확인

import React from "react"
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
console.log(firebase);

function App() { return (

); }

export default App;

아래와 같이 오류가 없으면 올바르게 설정 완료!![](https://images.velog.io/images/uomnf97_web/post/607d57b9-a18a-437b-b2c1-a41af9fa06d6/Screen%20Shot%202022-01-14%20at%207.54.18%20PM.png)

# #1.1 Securing the Keys

- .env 에 `REACT_APP_`라는 변수를 이용해서 암호화 할 수 있음, 하지만 명시해두어야 하는 것이 __build를 할 때 복호화가 이루어지기 때문에 사용자로부터 완전히 막을 수 있는 기능이 아님__ 즉 .gitignore에 등록함으로서 github에 본인 암호를 보일 수 없게 하는기능이지 완벽한 Key 보안은 아님. __github에 본인 firebase key를 보이지 않게 하기 위하여 사용__


- root 에 .env생성 뒤, 반드시 `REACT_APP_변수이름`과 같은 형식으로 등록해야함


- github에 올라갈 js 코드
```js
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_API_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_PROJECTID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID
  };

export default firebase.initializeApp(firebaseConfig);

#1.2 Router Setup

components와 routes 두개의 파일을 src파일 안에 추가 해주고 다음과 같이 파일 구성 : Auth.js - Authentification을 위한 페이지 : Home.js- Home page로 트윗을 하거나 볼수 있음 : Profile.js- 본인 계정을 확인하는 profile 페이지 : EditProfile.js- 본인 계정 정보를 수정하는 페이지 아래과 같은 모습으로 파일 구조를 정리해야함

코드 추가사항

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render( , document.getElementById('root') );


```js
//Auth.js
import React from "react";

const Auth = () => Auth;
export default Auth

//Home.js
import React from "react";

const Home = () => Home;
export default Home

//Profile.js
import React from "react";

const Profie = () => Profie;
export default Profile

//EditProfile.js
import React from "react";

const EditProfile = () => Edit Profile;
export default EditProfile

아래와 같은 코드 방식으로 쓰면 자동으로 import 됨
```
const Auth = () => Auth;
export default Auth
```
react-router-dom 설치
```
yarn add react-router-dom@5.3.0
```

components에 Router.js 추가

//App.js
import React from "react"
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
import AppRouter from "./Router";

function App() { return ( ); }

export default App;


```js
//Router.js
import React, { useState} from "react";
import { HashRouter as Router , Route, Switch} from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
    const [ isLoggedIn, setIsLoggedin ] = useState(false);
    return(
        
            
                {isLoggedIn ?
                <>
                    
                        
                    
                :
                  
                     
                
                }
            
        

    )
};

export default AppRouter;

*결과창

Fragment : <>,로 부모 태크 없이 한번에 묶어야 할 때 사용. 출처: 노마드코더 : 트위터 클론 코딩

트위터 클론 코딩 :: Introduction

Thu, 13 Jan 2022 13:23:05 GMT

#0.0 Welcome !

강의 소개

Firebase를 이용해서 Twitter를 클론하는 Nwitter을 만들어 볼 것임
Firebase를 통해 아래와 같은 매우 다양한 기능을 구현할 것임
- 이메일, 깃헙 등과 같은 Authentification을 통한 회원 가입
- Password를 통한 회원 가입
- Twitter 업로드, 파일 업로드
- 계정 수정, 게시글 수정
- 실시간 연동 시스템 등
모든 내용은 백엔드 처리 과정 없이 진행 될 예정이며, CSS로 디자인을 하는게 가장 오래 걸릴 정도로 쉽고 빠르게 코딩을 할 수 있도록 수업을 기획하였음

#0.1 Requirements

코코아톡 클론 코딩(CSS, HTML, Github), React Fundamental course, React for Beginners Course, 실전형 React Hooks를 듣고 오는 것이 좋음

필요한 기술 : HTML, CSS, React JS, Github 을 활용할 줄 알아야 함.

React Hooks를 이용한 다양한 Component building 방법과 함께 State를 업데이트 하는 방법을 배우게 될 예정

#0.2 What is Firebase?

Firebase란?

Firebase는 데이터 베이스에서 시작되었으며, 구글에 속해있지 않았으 인수되어 현재의 모습으로 발전되었음

Firebase의 기능

백엔드 기능을 포함하여 제공되는 서비스
앱을 만들 수 있는 다양한 기능들을 제공함.
Cloud Firestore는 백엔드 코드 없이 백엔드기능을 사용할 수 있는 기능임
Firebase ML은 머신러닝이 가능하도록 한 백엔드임
Cloud Function은 serverless function 제공, AWS Lambda와 같은 기능
Cloud Storage는 AWS의 S3와 같은 기능으로 사진과 같은 것들을 업로드 할 때 활용
Hosting은 우리가 만든 Asset을 배포하거나 React Application을 배포하고 싶을 때 활용 가능
Authentifcation은 이미 구현된 기능으로 10분안에 관련된 Authentification을 할 수 있도록 도와준다.
Realtime database는 Realtime Firebase database로 Realtime기능이 구현되어있으나 요즘 자주 쓰지는 않음
다양한 Analytics 기능을 제공함
Crashlytics: 앱의 충돌에 관련된 정보를 제공함
Performance monitoring: app의 보여주는 기능을 제공함
Test Lab: 웹사이트를 다양한 기기별로 테스트 할 수 있는 기능을 제공함
App distribution : 너의 ios나 android의 버전 배포를 도와줌
Grow business에서는 In-App Messaging, Google Analytics등 훨씬 더 다양한 기능을 배포함
각각 호환되는 OS가 다르므로 주의할 것
이번 강의에서는 Cloud Firestore, Hosting, Authentification, Cloud Storage을 사용할 것임

경쟁사 : AWS amplify - GraphQL, REST API 등 다양한 내용을 지원. 다양한 기능을 제공해주는 반에 새롭게 나온내용이라 많은 자료가 있지 않다는 단점이 있음.

#0.3 When To Use Firebase

Firebase나 Amplify를 써서 특정한 프로젝트를 진행한다는 것은 모든 내용을 AWS혹은 Google 과 공유한다는 것을 의미한다. 따라서 사업적으로 진지한 서비스나 프로젝트를 해야할 때 권장하지는 않는다. 모든 시스템의 데이터베이스나 정보들은 구글 혹은 AWS서비스 것이 되기 때문이다.

하지만, 서비스의 테스팅이나 간단한 프로토타입 버전을 세상에 먼저 공개하려고 한다면, 사용가능하다. 서버를 만들거나 시스템을 만들지 않고도 간단하게 이미 구현된 기능을 이용할 수 있기 때문에 빠른 개발이 가능하다. 따라서 이런 경우 Firebase나 Amplify를 사용해야 할 시기이다.

#0.4 Pricing in Firebase

Firebase는 무료 한도가 정해져있다. 5기가 클라우딩 업로드 제한이라든지, 하루에 20000번 업로드 가능한다든지, 이러한 방식으로 무료로 사용할 수 있는 범위가 정해져있기 때문에 반드시 확인하고 진행하기를 권장한다. 출처: 노마드코더

실전형 리액트 Hooks : #0 Introduction

Fri, 07 Jan 2022 10:52:13 GMT

#0.2 introduction

강의 소개

내용 : use state, use effect에 관해 배우고, hooks library build를 할 것. 이론, 예제, 실전 실습으로 이루어진 강의

npm : 여러가지 npm package를 등록해두는 곳으로 use-input, use-interval등 여러 패키지를 등록하고 사용할 수 있는 곳.

To do list: npm package를 생성하여 npm사이트에 등록할 예정.

목록 list
1. useTitle : react document의 Title을 바꾸는 것
2. useInput : input 역할
3. usePageLeave : page를 벗어나는 시점을 발견하고 함수 실행
4. useClick : element가 클릭되는 시점을 발견
5. useFadeIn : 어떤 Element든 안으로 서서히 사라지게 만듦. 
6. useFullscreen : 어떤 Element든 풀스크린으로 만들거나 원래화면으로 돌아가게 됨
7. useHover : 마우스가 올라갔을 때 어떤 것인지 감지함 
8. useNetwork : useNetwork는 Online 또는 Offline인지 감지함
9. useNotification : notification API를 사용할 때 알림을 보내줌
10. useScroll : 스크롤을 사용할 때를 감지해 알려줌
11. useTabs : 웹사이트에 메뉴 또는 무엇이든지 간에 tab을 사용하기 매우 쉽게 만들어주는 hook
12. usePreventLeave : 유저가 변경사항이 있을 때 저장하지 않고 떠나는 것을 방지해주는 hook
13. useConfirm : 어떤 것을 확인하고 싶을 때 쓰는 hook
14. useAxios : HTTP requests client axios를 위한 wrapper

#0.3 Requirements

강의 전 알고 있어야 하는 것들 : 노마드 코더의 Movieapp이나 다른 리액트 강의를 들어봤어야함. set state와 props등을 알고 있어야 hooks가 훌륭한 이유를 이해할 수 있을 것임. Only react, node js가 다운로드 되어 있어야함

0.4 Workflow

작업 환경 : Codesandbox
- 웹으로 하는 작업 환경이며, react, visual studio, node js등 다양한 개발환경을 설정해서 사용할 수 있음.
- 코드 작성 후 결과를 바로바로 확인할 수 있는 장점이 있고, 완성되는 동시에 VS code의 NPM package direcotry에 저장하고 올릴 예정임
To do list :
- codesandbox 가입
- create sandbox > react 클릭
- codesandbox.io/s/new인 상태에서 저장 단축기 클릭(맥 command + s , 윈도우 : ctrl + s ) -> 화면의 주소 new부분이 변환된것을 체크 했을 때 바뀌어 있으면 올바르게 저장되어 있는 것임을 알 수 있음.
- 기본적인 css, html 코드 등이 제공되고 홈페이지가 어떻게 바뀌고 있는지 확인가능함.

출처: 노마드코더 - React Hooks

React Native 날씨앱 만들기 - 3

Mon, 23 Aug 2021 16:01:42 GMT

How does React Native Work

3 Ways To Develop Application

Fully Native

Fully Native란? Swift or object C로 IOS앱을 만듦, 혹은 Java나 코틀린을 사용해서 개발함

Web View Based App

Web View Based App? simple 앱을 만들고, Cordova 나 Phone Gap을 통해 HTML, CSS를 넣는 것

React Native 날씨앱 만들기 - 2

Mon, 23 Aug 2021 16:01:31 GMT

Getting to know Expo

Run as iOS Simulator: __simulator 특징 __: assets > splash.png 파일로 변경가능

Expo Dev tools Issues : project issues > expo optimize 명령어로 이미지를 압축시켜줌

Metro Bundler: React Native 제어장치

I phone X : 디바이스 로그

장점

live reloading, hot reloading : app.js 의 부분을 바꾸고 저장하면 바로 reloading 되어 simulator에 나타남( 혹은 시뮬레이터에서 ㅊcommand + r 을 누르면됨 / 핸드폰: shaking) simulator에서 command + d __: 다양한 옵션을 실행가능![] __debug remote js : 크롬을 통해서 디버깅 가능, 다만 조금 느려짐, 네트워크 리퀘스트, 콘솔을 확인 가능

expo 실행 명령어 1)Expo simulator : Run on android device emulator or Run on iOS simulator 2)Visual Studio Code : start : expo star android : expo start --androi ios : expo start -- ios web : expo start --web eject : expo eject *expo eject는 a모든 파일을 종료시키기 때문에 다시 사용할 수 없게 하는 명령어이다. 제대로 활용하고 싶으면 다른 것을 이용하기를 바란다.

React Native 날씨앱 만들기 - 1

Mon, 23 Aug 2021 16:01:17 GMT

Introduction

알고있어야하는 내용 : React, javascript, expo
활용할 내용 : icon , layout 시스템 공부해보기

Requirements

node : version 10 이상
npm : version 6 이상
Simulator 다운로드 1) Mac OS : Xcode developer.apple.com > expo 검색 > 다운로드 2) 핸드폰: expo 다운로드
npm install -g expo-cli : 명령어에 입력해서 expo 다운로드 ( 동작이 안될 경우 yarn global add expo-cli를 이용해서 다운로드 )

Expo

Expo란 ? Create-react-app을 말함. 리엑트 네이티브를 위한 설정 파일같은 것들이 없는 방식으로 모든 것이 셋업 되어 있음. React Native CLI 를 이용해서 command line 명령을 이용해서 셋업해줄 수 있음

React Native CLI : 많은 설정을 직접 해줘야할 때 사용하는 방법
Expo의 장점 : 1) 빠르게 시뮬레이션을 돌릴 수 있다. 2) Native files를 자동으로 관리해주고 심겨줌 3) Expo가 훨씬 더 많은 내용을 다룰 수 있게 해줌 ( Expo > Native ) 4) Expo가 Building Problem을 해결해줌

Creating Project

expo init fokin-weather
blank모드 : 가장 기본적인 옵션( 이외 : Typesciprt, tab( 템블릿있을 때 등 있음)
Project 이름 설정, Yes 를 입력해서 npm으로 다운로드 ( yarn 사용가능)
Github에 Repository 생성
Visual Studio Code 실행
terminal 실행

-git remote add origin [repos] -git pull origin main --allow-unrelated-histories 7. terminal : yarn start로 시작 8. 핸드폰 종류별 expo 실행법

Android : QR Code 실행
I Phone : Expo 로그인 -> expo login 입력
컴퓨터 실행방법 : __ Run on Andoroid device/emulator__ or Run on iOS simulator click!

파일 구성

Read Me : Learning React Native by Building foking weather app 파일 생성
app.json : expo가 읽을 파일
app.js : 기본적인 react 파일

출처 : 노마트 코더

NomadCoder :: React JS 로 영화 만들기 (2) Setting -1

Thu, 13 May 2021 12:43:27 GMT

출처: NomadCoder

Creating your first React App

리액트를 구현하는 방법:

원래 리액트 JS를 구현하기 위해서는 WebPack, Babel download , compile 등을 해야되나 Facebook에서 제공하는 간단한 명령어를 통해 구현해줄 수 있음.

npx create-react-app [file-name] : 이 명령어를 통해, Node react JS에 필요한 것들을 한번에 구현해 줄 수 있다.

Visual Studio로 파일 열기

명령어 창에 code [file-name]/이라고 적어줘도 되고, Visual Studio 앱을 직접열어, 파일 안으로 들어갈 수도 있다.

Delete Readme content -> write # Movie App 2019 React JS fundamental Course (2019 update!)

package.json 에서 script 섹션에
```
 "test": "react-scripts test",
     "eject": "react-scripts eject"
```
부분을 삭제해준다.( 실습에 필요 하지 않음 )
yarn = npm 이 같으므로 삭제해줘도 됨.

__ ctrl + __ 로 VS Code terminal을 열어줄 수 있다. 해당 파일 명에 접근한뒤,npm start`를 입력하면 react가 생성된다.

첫 번째 주소는 개인이 접근할 수 있는 주소,
두 번째 주소는 와이파이로 접근할 수 있는 주소

NomadCoder :: React JS로 영화 웹서비스 만들기- 개발환경 설정

Thu, 13 May 2021 10:11:55 GMT

Requirements

Installation

__ 1. Node JS Download __

구글에 Node Js 검색후 다운로드 Node 10 -> 구 버전이나, 안정성이 높음 ( 2021년 기준 14) Node 12 -> 최신 버전으로 불안전함 (2021년 기준 16 )
node -v : check version(설치한 Node Js 버전 확인)
npm -v: Node Js 와 함께설치 되는 파일, 설치 됬는지 확인.
npm install npx -g : 설치

__ 2. Visual Studio code __

atom, vim등을 사용할 수 있지만, api와 확장 프로그램이 잘되어있으므로 설치를 권장함 . Google에 검색해서 바로 다운로드 받을 수 있음.

__ 3. Git __

git-scm.com 에서 다운로드를 받음 MAC은 Homebrew를 통해서 terminal에 입력어를 통해 다운로드를 받을 수 있음 : brew install git

m1 에서 brew 설치하기 vi 편집기에 추가할 path export PATH="/opt/homebrew/bin:$PATH"

Git 설치

Git Gui 설치

git -v,git —version : 설치 후 버전 확인(터미널에서)

Mac에서 설치를 할경우 EACCES: permission denied 와 같은 권한 에러가 나타날 수 있음. 이 때 sudo를 사용해도, 설치가 안될 가능성이 큼 아래와 같은 명령어를 이용해서 권한 설정을 해주면 무사히 설치할 수 있음.

Theory Requirements

__ 1. HTML __ : div , span

__ 2. CSS __ : flexible

__ 3. Vanilla JS( Javascript ) __ : function, return, arguments const, let, array

__ Need to Know __ : variables, function, class, package.json

Why React

에어비엔비, 페이스북, npm , spotify 등 많은 회사들이 React를 이용해서 웹 사이트를 만들고 있음. 주당 400만 다운로드 횟수를 기록하고 있을 정도로 수요가 높으며, 페이스북에서 많은 지원을 받아 지속적으로 업데이트 되고 있음. 또한, 64퍼센트 사람의 사람들이 사용하고, 또 사용할 예정이라고 답을 했고, 다른 프론트 엔드 기술에 비해 많이 알려져있음. 마지막으로 자바스크립트를 기반으로 하는데, 이를 통해서 자바스크립트의 역량을 함께 향상 시킬 수 있으므로 좋은 기술임.

HTML Image/Audio/Video

Thu, 08 Apr 2021 12:52:08 GMT

1. 이미지

: 이미지 태그와 다음에 있는 어트리뷰트를 이용하여 정의한다.

src : 이미지 파일 경로
alt : 이미지 파일이 없을 경우 표시되는 문장
width: 이미지의 너비 (CSS에서 지정하는 것이 일반적)
height: 이미지의 높이 (CSS에서 지정하는 것이 일반적)

2. 오디오

<오디오> : 오디오 태그와 다음에 있는 어트리뷰트를 이용하여 정의한다. HTML 5이하에서는 사용할 수 없다. Internet Explorer 8에서는 활용 불가능하다.

src: 음악 파일 경로
preload: 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay: 음악 파일을 자동의 재생 개시할 것인지 지정
loop: 음악을 반복할 것인지 지정
controls: 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

3. 비디오

<비디오> : 비디오 태그와 다음에 있는 어트리뷰트를 이용하여 정의한다. HTML 5이하에서는 사용할 수 없다. Internet Explorer 8에서는 활용 불가능하다.또한 브라우저 별로 차이를 보이는 것도 특징이다.

src: 동영상 파일 경로
poster: 동영상 준비 중에 표시될 이미지 파일 경로
preload: 재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay: 동영상 파일을 자동의 재생 개시할 것인지 지정
loop: 동영상을 반복할 것인지 지정
controls: 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width: 동영상의 너비를 지정
height: 동영상의 높이를 지정

참고: PoiemaWeb

HTML Form Practice

Thu, 08 Apr 2021 12:50:36 GMT

Form

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.

button

checkbox
 사과

 포도

 복숭아



color



date



datetime



datetime-local



email



file



hidden

hidden filed는 사용자에 표시되지 않는다.


image



month



number



password



radio
 남자

 여자



range



reset



search



submit



tel



text



time



url



week

참고 : PoiemaWeb

HTML List & Table

Thu, 08 Apr 2021 12:48:08 GMT

List

순서없는 리스트

태그를 이용하여 목록을 만들어 준다.

순서있는 리스트

1. 태그를 이용하여 목록을 만들어 준다.
2. type 어트리뷰트* : 순서를 소문자 알파벳, 로마숫자 등 지정해 줄 수 있다.
3. start 어트리뷰트*: 시작 숫자를 지정해준다.
4. reversed 어트리뷰트*:리스트의 숫자를 거꾸로 만들어 줄 수 있다.

중첩된 리스트

여러 리스트 태그를 중첩하여 구조화하면, 리스트를 중첩하여 표현 해 줄 수 있다.




  Teams
  
    Hufs
    Web
      
        HTML
        CSS
      
    
    AI

테이블

과거에는 이 태그를 이용해서 레이아웃을 만들었으나 요즘은 div 를 대신하여 쓰고 이 태그는 레이 아웃을 만드는데 쓰이지 않는다.

: 표를 감싸는 태그 : 표 내부의 행 (table row) : 행 내부의 제목 셀 (table heading) : 행 내부의 일반 셀 (table data) border: 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) rowspan: 해당 셀이 점유하는 행의 수 지정 colspan: 해당 셀이 점유하는 열의 수 지정 2개의 culumn을 span Name Telephone Uomnf97 010 123 1234 02 2182 1234 2개의 column을 span으로 표현하기 Name Cellphone Telephone Uomnf97 010 123 1234 02 2182 1234 참고: PoiemaWeb HTML Body Tags Practice Thu, 08 Apr 2021 12:23:07 GMT HTML Body Tags Trend: 최근의 웹트렌드는 텍스트를 줄이고 이미지나 동영상으로 콘텐츠를 구성하는 것이다. 제목 태그 , ... : heading태그라고 부르며 h1 부터 h6까지 다른 크기를 가진 글자로 써줄 수 있다. 시멘틱 정보가 있으니 중요한 정보만 h1태그로 처리 할것 글자 태그 ( Text Formatting ) : bold체를 만들어주는 태그, semantic 의미는 없다. : bold체를 만들어주는 태그, semantic의미를 갖는다. : Italic체를 지정한다. Semantic의미는 존재하지 않는다. : emphasize text를 지정한다. Italic체로 표현되며, semantic적 중요성을 갖는다. small: small text 를 지정한다. : highlighted text 를 지정한다. : 특정한 단어에 가운데 줄을 그린다.. : 특정한 단어에 밑줄을 그린다. _/: sub는 밑첨자 텍스트를, sup는 윗첨자 텍스트를 작성해준다. 본문 태그 : 단락을 만들어주는 태그 :줄바꿈 태그, 종료 태그가 존재하지 않는다. : 연속된 공백을 넣어줄때 필요한 문자기호 : performatted text를 지정한다. 작성된 그대로를 출력해주는 태그 : 수평 줄을 삽입한다. : 짧은 인용문 태그 인용부호는 큰따옴표로 감싼다. : 긴 인용문 블록을 지정한다. block quote 요소를 들여쓰기를 하며, css 를 이용하여 다양한 style을 적용할 수 있다. 참고: Poiemaweb HTML Tag Practice Thu, 08 Apr 2021 12:22:35 GMT 1. 문서 정의 태그 앞서 언급했듯 모든 html앞에 오는 태그로 문서별로 단 하나만 존재한다. XHTML인지, HTML 5인지 그 문서의 형식을 알려준다. HTML 5 : HTML 4.01: XTML 1.0: 2. html tag html : 문서 형식을 지정하는 을 제외하고 모든 HTML요소의 부모 요소 이다. 따라서 html의 열림 태그와, 닫힘 태그 안에 모든 html요소가 구서되어있어야한다. Lang Attribute : 보통 Lang 어트리뷰트와 함께 쓰이는데, 언어에따라 ko, es, en등의 축약형으로 언어를 지정한다. 위키백과같은 코드를 복사해서 실습을 해본다면, 해당언어로 되어있는 부분만 출력하는 것을 알 수 있다. 즉, 그 HTML content를 제한해준다고 볼 수 있다. 3. head tag head: 헤드 태그는 그 문서의 메타 데이터를 담고 있는 요소이며 문서에 단 하나만 존재해야 한다. 메타데이터의 종류로는 title, style, link, script에 대한 데이터이다. 이때 head태그로 감싼 코드는 문서내에서 표시 되지 않는다. - 메타데이터 태그 종류 1. title tag : title 요소는 문서의 제목을 의미하고, 브라우저 탭부분에 표기 된다. 2. style tag: *style요소는 문서의 style 정보를 제공한다. 글자 색상, 폰트, 배경 색 등이 정의되어있다. * 3. link tag : link 요소는 외부 리소스와 연계 정보를 저장한다. 주로 HTML과 외부 CSS파일을 연계해서 사용한다. 이때 링크의 href에서는 링크할 파일을 설정해준다. ** 4. script tag** : script요소를 통해 client-side java 를 정의한다. src어트리뷰트를 사용하여 자바스크립트 파일을 로드할 수 있다. ** 5. meta tag** : meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(Keywords)등에 사용된다. charset : 문서가 사용할 문자셋을 의미한다. ex) utf-8, ascii etc name="keywords" : SEO(검색엔진 최적화)를 위해 검색엔진이 사용할 Keywords을 정의한다. name="descriptions" : 웹페이지의 설명을 정의한다. name="author" : 웹페이지의 저자를 명시한다. http_equiv="refresh" : 웹페이지를 일정 시간마다 Refresh 한다. 4. body tag body tag: HTML문서의 내용을 나타내며, 웹페이지에 표현되는 모든 요소든의 부모 요소이다. 메타데이터를 제외한 대부분의 요소가 기술되어있으며, 문서상 하나만 존재한다. 1~4번의 내용을 가지고 가상 html문서를 만들어보았다. HTML실습!! 배웠던 태그 실습 Welcome to my Velog 안녕하세요 Hello こんにちは你好 שלום สวัสดี 결과: 이외의 태그 reference 정리 : http://www.tcpschool.com/html-tags/link 참고: PoiemaWeb HTML (4) :: Hyper Link Thu, 08 Apr 2021 12:21:09 GMT Hyper Link HyperLink란 한텍스트에서 다른 텍스트로 텍스트의 일반적인 순서가 아닌 사용자가 원하는 순서대로 이동할 수 있는 링크를 말한다 HTML 은 HyperText언어로 하이퍼링크를 지원한다. : a 태그를 통해 서로 다른 웹페이지로 이동을 가능하게 한다. href 어트리뷰트 : href는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 본인을 기반으로 한 상대경로를 받을 수도 있고, url을 통한 절대 경로를 받을 수도 있다. 또한 앞선 포스팅에 설명했듯이 script, style기능에 활용되며 ,페이지 상단으로 이동하거나 하단으로 이동할 때 활용가능하다. target 어트리뷰트 : 링크를 어떠한 방식으로 오픈할 지 정한다. _self는 현재 윈도우에서 오픈을 시키며, _blank는 새로운 윈도우나 탭에서 오픈한다. 참고: PoiemaWeb HTML (3) :: LayOut Thu, 08 Apr 2021 12:19:19 GMT HTML Layout 만들기 HTML의 문서공간을 다음 사진과 같이 효과적으로 활용해주기 위해 태그를 활용하여 문서의 공간을 나눠준다. 사진 출처: PoiemaWeb 트렌드 : span div table 등을 사용하였고, 과거에는 table 태그를 이용하여 레이아웃을 구성했으나, 모던웹에서는 주로 div태그를 이용하여 레이아웃을 구성하고있다. span : inline 단위 구역을 지정한다. div: block 단위의 구역을 지정한다 HTML 5 : html에서는 새롭게 추가된 태그들 중 구역을 나누는, 레이아웃을 구현해주는 시멘틱 태그가 있으므로 이런 태그들을 사용하는게 좋을 것이다. Internet Explorer에서 제공되지 않기에 유의해 서 작성한다. header: 헤더를 의미한다. nav: 내비게이션을 의미한다. aside: 사이드에 위치하는 공간을 의미한다. section: 본문의 여러 내용(article)을 포함하는 공간을 의미한다. article: 본문의 주내용이 들어가는 공간을 의미한다. footer: 푸터를 의미한다. 사진 출처: PoiemaWeb 참고: PoiemaWeb HTML(2) :: Semantic Web Thu, 08 Apr 2021 12:18:30 GMT Semantic Web Semantic web 이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상을 가지고 만들어진 웹시 스템을의미한다. Semantic 요쇼(Semantic Element) : 브라우저, 검색엔진, 개발자 모두에게 콘덴츠의 의미를 명확히 설명하는 역할을 한하며, 시맨틱 태그(Semantic Tag)로 구현된다.이때 시멘틱 요소는 img, header, aside 등이 있으며 각각 이미지, 헤더, 사이드에 위치하는 공간 등 content의미를 전달해주는 역할을 한다. Non-Semantic 요소: div, span 등이 있으며, content에 대한 어떤 내용도 전달하지 않는다. 시맨틱 웹의 장점: 개발자가 의도한 요소의 의미가 명확히 드러내어, 코드의 가독성을 높이고, 유지보수를 쉽게 만든다. 예)브라우저가 검색엔진에서 웹사이트정보를 크롤링하여 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응 하는 인덱스를 만들어주는데, 이때 시맨틱 요소를 해석하여 대응하는 텍스트를 만들어준다. 따라서 만약 웹에 본인 웹사이트가 검색이 잘 안될경우시맨틱 요소를 수정하는 방법을 통해 쉽게 해결할 수 있다! 시멘틱 요소의 의미 전달 예시 자료 사진출처 #코드 예시 참고:PoiemaWeb

uomnf97_web.log

TailwindCSS로 Header와 Footer 정복하기

1. React-App 생성하기

2. TailwindCSS 설치하기

2.1 TailwindCSS설치하기

3. Craco 설치

4. Header 와 Footer를 만들기

4.1파일 정리

4.2

학회 웹페이지 만들기 :: 버그 고치기

맡은 역할

FeedBack

TailwindCSS

Tailwind CSS란?

TailwindCSS에서 Responsive 화면 만들기

피드백 반영하기

1. About Page 중앙 정렬문제

Our Goal

학회 목적

2. Footer 하단 고정하기

3. History Page 원이 만나지 않는 문제

4. Leader/Professor Page 겹침문제

2000~

경력

5. Header가 페이지 제목을 가리는 문제

6. 상단 버튼 크기 문제

7. FAQ Page 문제

Gh-Pages 배포의 모든것!

1. Github Repository만들기

2. React-App 만들어주기!

3. Gh-pages

1. gh-pages 관련 패키지를 다운로드 받기!

2. package.json에 코드 추가!

원리

Posting하다가 생긴 문제점!

트위터 클론 코딩 :: #2 Authentification

#2.0 Using Firebase Auth

사용방법

잡기술

#2.1 Login Form Part1

#2.4 Log In

트위터 클론 코딩 :: #1 Setup

#1.0 React + Firebase Setup

환경설정 하기

#1.2 Router Setup

트위터 클론 코딩 :: Introduction

#0.0 Welcome !

강의 소개

#0.1 Requirements

#0.2 What is Firebase?

Firebase란?

Firebase의 기능

#0.3 When To Use Firebase

#0.4 Pricing in Firebase

실전형 리액트 Hooks : #0 Introduction

#0.2 introduction

강의 소개

#0.3 Requirements

0.4 Workflow

React Native 날씨앱 만들기 - 3

How does React Native Work

3 Ways To Develop Application

Fully Native

Web View Based App

React Native 날씨앱 만들기 - 2

Getting to know Expo

장점

React Native 날씨앱 만들기 - 1

Introduction

Requirements

Expo

Creating Project

파일 구성

NomadCoder :: React JS 로 영화 만들기 (2) Setting -1

Creating your first React App

리액트를 구현하는 방법:

NomadCoder :: React JS로 영화 웹서비스 만들기- 개발환경 설정

Requirements

Installation

Theory Requirements