오늘은 html에 대한 전반적인 내용과 자주 사용되는 태그들을 배웠다.

 

그 전에 간단히 HTML, CSS, JS를 비교해봤는데 간단히 말해서

 

HTML : 집의 구조

 

CSS : 인테리어

 

JS : 집의 기능

 

라고 생각하면된다. 부가적으로 <!DOCTYPE html>이라는 명령어는 html5 사용을 위해 작성한다는 것도 알 수 있었다.

 

사용되는 여러 태그들을 이해하고, 총 4가지의 실습을 하며 수업을 진행했다. 중간중간에 쉬는 시간도 있어서 그때 카페메뉴 웹페이지를 제작한 실습 1에서 각 메뉴의 가격들을 더해주는 기능을 만들어보기도 했다. 교육을 들으며 정리했던 메모를 바탕으로 글을 작성하기 때문에 살짝 어색한 감이 있을수도 있다.

 

 

 

일단 html 구조를 잘 잡아주는 툴을 알려주셨다. prettier라는 툴이고 설치 방법은 다음과 같다

 

세팅의 editor.fomat에서 세이브 포맷 체크 후 디폴트.포맷을 검색하여 프리티어 선택하면 된다.

 

저장할 때, 기본 구조를 유지 시켜주는 장점이 있으나 원하는 공백을 만들 수 없는 단점이 있어서 나는 사용하지 않기로 결정했다.

 

 

 

그리고 간단한 단축키 팁도 알려주셨다.

 

커서 위치한 상태에서 알트키를 누르고 화살표를 누르면 해당 줄이 이동한다.

 

!를 입력한 후에 탭을 누르면 기본 html 구조가 생성된다.

 

 

 

다음은 태그들의 설명이다.

 

본문태그 <p></p>

 

줄 바꿈 태그 <br> //빈요소 break

 

목록 <ul></ul> <ol></ol>

 

<ul type="circle">로 목록 앞의 모양을 지정할 수 있다

 

<ol type="순서 모양 지정" start="시작 숫자 지정" reversed(역순)>

 

 

 

수평 줄 <hr>

 

 

 

Golive 설치

 

 

 

문자열 볼드채 <b></b>

 

 

 

과제 코드

 

위 과제에서 고른 것의 값을 가져와 더해주는 사이트를 만들어 보고자 한다.

 

 

 

 

 

이미지 태그 <img>

 

src 사용

 

alt=“”를 지정하면 이미지가 로드되지 않을 때, 어떤 이미지가 그런지 확인할 수 있다.

 

- 인터넷에서 가져오기

 

파일 내에서 가져오기

 

 

 

하이퍼링크 <a>

 

naver

 

target에 _blank를 지정해줌으로써 네이버를 클릭했을 때, 새로운 탭에서 접속한다.

 

_self는 현재 탭이다

 

 

 

form 태그와 input 태그

 

input

 

여러 타입이 있다.

 

 

 

type=’radio‘ 한가지만 설정 가능함

 

 

 

<select> 태그

 

안에 옵션을 넣을 수 있다.

 

 

 

<table> 태그

 

rowspan과 colspan을 잘 이용해야한다.

 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 35일(08.11)차 회고 |  (0) 2023.08.12
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 34일(08.10)차 회고 | 데이터베이스 응용 + sequelize  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 33일(08.09)차 회고 | mvc 만들기...  (0) 2023.08.09
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04

이번주 월요일부터 쭉 mvc 만드는 것에 매달려 있었다. 토요일에 진행한 실습은 월요일에 크루 형의 도움을 받아 해결했고, 새로운 회원가입 mvc 만드는데 한세월이 걸렸다. 실력이 정말정말 부족한 것 같다.. 그래서 오늘 진행한 씨퀄라이저 진도도 따라가지 못했다ㅜㅠ 그리고 정말 블로깅도 정말 많이 밀린 상태이다 이대로 가다간 이도저도 안될 것을 알기에 차근차근 다시 따라가보고자 한다. 처음에 배웠던 html부터 지금까지 한 실습들을 한번 쭉 복습하고, 개인 공부 카테고리에 정리해서 차근차근 올릴 예정이다. 

이거 외에도 아직 못적은 것들이 너무 많다.. 진짜 차근차근 잘 나누어서 다 적을 것이다. 그리고 산업체 리스트도 뽑아 놓고, 잠을 좀 줄여서라도 해야겠다. 내가 정말 취업이 가능할만큼 실력을 끌어올릴 수 있을지에 대한 걱정도 들지만 하나하나 꼼꼼히 하다보면 가능할 것이라 믿는다. 다시 열심히 해보자 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 34일(08.10)차 회고 | 데이터베이스 응용 + sequelize  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 2일(07.04)차 회고 | HTML  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 29일(08.04)차 회고 | SQL  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 25일(07.31)차 회고 | 자바스크립트 고급 + Node.js  (0) 2023.07.31

리액트를 쓰는 이유 

1. 싱글 페이지 어플리케이션을 만들려고 만든다 : 앱처럼 부드럽게 동작하는 웹페이지

2. 제일 오래됐고 유저가 많다

3. html 재사용이 편리하다

4. 리액트를 통해 앱개발도 가능하다

5. 요즘 대부분의 회사는 리액트를 사용한다.

 

개발 환경 셋팅

1. Node.js 설치

2. vscode 설치

 

리액트 프로젝트 실행하기

리액트를 사용할 폴더를 하나 만들어주고,

시프트 우클릭을 한 후 여기에 powershell열기를 클릭

뜬 창에 위 명령어를 입력한다 이후에 vscode에서 오픈폴더를 눌러 폴더를 연후에 app.js(메인페이지)에서 코드를 짜면 된다. 이는 create-reacte-app 라이브러리를 이용하여 필요한 파일들을 한번에 설치해주는 것인데 이는 Node.js를 설치할때 같이 설치된다.

 

App.js의 코드는 index.js가 index.html로 연결시켜주기 때문에 바로바로 적용이 된다.

 

npm start를 터미널에 입력하여 미리보기를 볼 수 있다.

 

js 내에서도 div, p 태그등을 사용할 수 있다.

 

이는 리액트에서 사용하는 언어가 JSX라는 언어를 사용하기 때문에 사용 가능하다.

CSS를 연결할때 VUSGKRP import를 사용하여 불러올 수 있다.

 

- 레이아웃을 만들 때 쓰는 JSX 문법 3개

 

1. 클래스를 넣을땐 class를 사용하지 않고, className을 사용한다.

왜냐하면 js에서 클래스를 만들 때 사용하는 class와 겹치기 때문이다.

 

2. 데이터바인딩 : 리액트에서 변수를 html 구조 사이에 넣을때 {}를 사용하여 넣을 수 있다.

3. jsx 상에서 스타일 속성을 사용할려면 ""가 아니라 {}를 사용하고 객체형으로 값을 넣어줘야 한다.

- 기호는 사용하지 못한다.

 

- 중요한 데이터는 state에..!

자료를 잠깐 보관할때는 state를 사용할 수 있다.

import  {useState} from 'react'; 

로 불러와 사용한다. 그 후에 아래와 같이 사용한다.

a : state에 보관한 자료

b : state 변경을 도와주는 함수

 

일반 변수의 내용이 갑자기 변경되면 html에 자동으로 반영되지 않는다.

> state는 자동으로 html의 내용이 변경이 된다. 즉, html이 자동으로 랜더링된다.

 

 

 

'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글

React를 이용해 블로그를 만들어보자(0) - 백엔드 setting  (0) 2024.02.04
리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript)  (2) 2023.10.19
웹개발 배워보자! - 리액트(3) | Component, map, props  (0) 2023.08.20
웹개발 배워보자! - 리액트(2) | state 변경하는 법  (0) 2023.08.13

요즘 감기에 걸려서 몸상태가 좋지가 않아 처음으로 지각을 했다..ㅠㅠ 앞으론 몸관리 잘해야겠다..

일단 오늘 초반에는 테이블 만드는 법을 가르쳐 주신것 같다 일전에 SQL은 배운 경험이 있어 바로 따라가기가 수월했다. 지금까지 한 부분을 정말 간단히 짚고 넘어가고자 한다. 테이블을 만드는 과정이기 때문에 어렵지 않다.

DDL

[명령어 정리]

기능 명령어 사용 예시
시작하기 1. mysql -u 'ID' -p 'DB이름'
2. mysql command line client 접속		 1. mysql>mysql -u root -p
(DB 최상위단으로 접속시)

후에 비밀번호 입력 후 사용
DB 검색 show databases; mysql> show databases;
DB 만들기 create database 'DB이름'; mysql> create database Test;
DB 사용 use 'DB이름' mysql> use Test;
Table 검색 1. 테이블 목록 : show tables;
2. 테이블 내용 조회 : desc 테이블 이름		 mysql> show tables; mysql> desc member;
Table 만들기
+ 값 추가		 create table '테이블 이름';
기본값 추가 : default로 넣을 수 있음		 mysql> create table member(
    -> id varchar(20) NOT NULL PRIMARY KEY,
    -> name varchar(5) NOT NULL,
    -> age int,
    -> gender varchar(20) NOT NULL,
    -> email varchar(50),
    -> promotion varchar(2) default "dj" );
Table 불러오기  select*from 'table이름';(DML이다) mysql> select*from member;
Table 수정 alter table 테이블 명
1. 삭제 drop column 컬럼명
2. 추가 add 컬럼명
3. 속성 변경 modify 컬럼명

DML

- 내용 조회

select * from user(테이블 이름)

- 특정 어트리뷰트만 가지고 오기

select name,age from user;

- where로 조건 걸기

- 오름차순 내림차순 정렬

// 나이 오름차순

// 나이 내림차순 

 

- between과 in 사용

select * from user

where age

between 25 and 30;

//25살과 30살 사이인 사람들 가지고오기

 

select * from user

where age in (25, 30);

//25살과 30살인 사람들만 가져오기

 

등 나중에 정리 페이지에서 더 잘 정리해서 올릴 예정이다. 

 

'포스코x코딩온 KDT 8기 풀스택 과정 회고록' 카테고리의 다른 글

[포스코 코딩온 KDT 8기] 웹 풀스택 과정 2일(07.04)차 회고 | HTML  (0) 2023.08.10
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 33일(08.09)차 회고 | mvc 만들기...  (0) 2023.08.09
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 28일(08.03)차 회고 | 데이터베이스 설정  (0) 2023.08.04
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 25일(07.31)차 회고 | 자바스크립트 고급 + Node.js  (0) 2023.07.31
[포스코 코딩온 KDT 8기] 웹 풀스택 과정 24일(07.29)차 회고 | 비동기 처리  (0) 2023.07.29

+ Recent posts

티스토리툴바