Front_End

React 정리 (useState, className, propTypes, CSSModule, useEffect, Route, map)

프로젝트 진행하면서 프론트 엔드를 안 할 수는 없어서 간단한 무료 강의 보고 중요했던 부분 간단 정리 시작~ (정보 공유보다는 복습 용도로 작성하는 글이다.) useState() 컴포넌트에서 동적인 state를 관리할 수 있다. import {useState} from "react";로 불러와서 사용한다. 값을 변경한 후 rerender까지 처리해준다. useState는 해당 값과, modifier를 반환해 준다. ex) const [counter, setCounter] = usetState(0); [counter, setCounter] 각각 순서대로 변수, modifer이다. useState(0)의 0은 counter의 초깃값으로 세팅된다. modifer까지 사용하는 예제를 작성해 보겠다. ex) co..

[Front End] mini project

문법 외우고 태그들 외우기만 하는 것은 재미가 없으니까.. 프로젝트라고 부르기는 조금 창피하지만 나만의 토이 프로젝트를 하나 해봤다. 처음에는 웹사이트를 하나 만드려 했으나 주제 정하기가 어려웠다. 아니 아무생각도 떠오르지않았다. 그러다 느닷없이 떠오른 tmi퀴즈 이유는 모르겠다 그냥 떠올랐다. 주제가 무겁지않아서 이후에는 아이디어에 대한 어려움은 별로 없었다. 기본 레이아웃만 잡아놓으면 안에 질문만 바꾸면되니까 나름 잘 진행되는듯 했다. 여기까지 너무 단조로운것 같아서 좀 멋나는것을 만들고 싶어서 괜히 쓸데없이 로그인 창을 하나 만들었다. 왼쪽처럼 만들었는데 대만족. 시크함의 black&white.. 좋았다. (배포하고 나서 알게된건데 저렇게 하니까 입력창에 치고 모바일 키보드에 엔터키로만 입력이 받아..

[Front End] Do it! HTML+CSS+JAVASCRIPT 웹 표준의 정석 마무리(웹 사이트 만들기)

책 뒤에 실습할 수 있는 부록 pdf가 있어서 이틀동안해서 마무리했다. 실제 웹 사이트를 만들 때 필요한 팁과 어려운 점을 조금 맛볼수 있어서 좋았다. 관련해서 정리해두면 좋을 것 같아서 글을 쓴다. 옆의 사진과 같은 구성이 먼저 나왔다. 웹 사이트를 만들 때 무작정 코딩에 들어가는게 아니라 전체적인 틀을 구상해아 할 필요가 있어보인다. div를 사용해서 목적별로 파트를 나누어 묶었다. 이렇게 하니 작업의 순서를 어느 정도 정할 수 있는것 같다. 각 박스별로 하나씩 html코드와 css를 작성하니 헷갈림 없이 진행할 수 있었다. 요즘은 grid, flex box를 사용해서 전체 프레임을 짠다고 해서 걱정이 있었는데 간단한 사이트 정도는 div로도 충분한 거 같다. 그 다음은 전체적인 틀의 디자인을 css..

[javascript] + [Front End] 간단 정리 및 마무리

html은 어느 정도 외울 수 있어서 필수적인 부분만 정리했고 css는 양이 너무 방대해서 따로 정리해놓은 페이지에서 그때그때 검색하면서 찾아 사용 중이다. js는 언어인데 반복문, 조건문 같은 기본 문법은 따로 정리하고 싶지 않다. 사실 프론트는 깊게 할 생각이 전혀 없었기 때문에 어쩌면 다 핑계일 수도 있다. 그렇지만 여기에 시간을 더 쓰고 싶지 않기에 기본적인 공부는 실습하면서 많이 쓴 javascript 부분만 정리하고 여기서 끝내려 한다. window.open() - 팝업 창을 생성해준다. 보통 링크나 이미지 클릭하면 반응하게 작성한다. 기본형은 window.open(경로, 창 이름, 옵션) 이다. 경로는 팝업에서 띄울 화면의 링크나 주소를 작성한다. 이름은 설명이 부족해서 구글링을 해본 결과 ..

[HTML] <form>, <input>, <select> 사용자에게 입력 받기 (2)

form에 유저가 정보를 작성하고 나면 내용을 서버로 전송을 해줘야한다. 그럴때 사용하는 태그가 과 이다. 유저가 해당 버튼을 클릭하면 form태그의 value속성에 작성한 폼 처리 프로그램으로 넘어가게 된다. 는 submit과 똑같은 기능을 하는데 클릭하는 부분만 개발자가 원하는 이미지로 설정한다. 버튼은 작성한 모든 정보를 지우고 초기상태로 돌아간다. submit과 reset 버튼에 보여질 내용은 value속성에 작성한다. input의 주요 속성을 소개하자면 1. placeholder: 입력창안에 흐린 글씨로 내용이 표시된다. 2. autofocus: 사용자가 해당 페이지에 들어오면 autofocus를 작성한 input 폼에서 커서가 깜빡인다. 3. readonly: 입력이 불가능하다. 하지만 전송 ..

[HTML] <form>, <input>, <select> 사용자에게 입력 받기 (1)

html에서 태그는 사용자에게 정보를 입력 받고 처리하는데 사용된다. 에 작성 가능한 속성값 5개를 소개하겠다. 1. method: 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. 속성값=> get, post 2. name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다. 3. action: 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다. 4. target: action 속성에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에서 열도록 한다. 5. autocomplete: 예전에 입력한 값을 토대로 자동완성을 해준다. (default값이 on이므로 비밀번호를 입력할때는 off로 작성해준다.) 하나의 form안에서 영역을 나눌 때는 을 사용하고 각 fied..

[HTML] <a> 하이퍼링크,앵커(anchor)

HTML을 사용해서 하이퍼링크를 거는 법을 정리하겠다. 하이퍼링크는 다른 주소로 넘어가게 만들어주는 링크다. 기본형은 이미지나 텍스트 이고 이 상태로 작성하면 주소에 입력한 페이지가 현재 페이지를 새로고침하며 생성된다. 페이지를 새로운 탭에다가 열고 싶으면 이와 같이 target이라는 속성에 "_blank" 속성 값을 작성해주면 된다. 앵커(anchor)는 다른 페이지가 아닌 현 페이지에서 지정한 부분으로 이동할 수 있게 한다. 방법은 목적 요소에 id값을 부여한다. 그리고 a태그 href의 속성값으로 "#id값"을 주면 된다. ex) See the Pen 1 by Te___ho (@xogh8755) on CodePen. See the Pen Untitled by Te___ho (@xogh8755) on..

[HTML] <video>, <audio> 오디오와 비디오 삽입하기.

HTML을 사용해서 웹 페이지에 오디오, 비디오 파일을 삽입할 때는 각각 , 태그를 사용한다. 기본형은 이다. 둘 다 동일한 속성을 갖고 있다. controls 화면에 컨트롤 바 표시 autoplay 자동 실행 loop 반복 재생 muted 소리 제거 preload 페이지 불러올때 어떻게 로딩할 것인지 지정. 속성값은 auto, metadat, none이 있고 default값은 auto이다. width, height 너비, 높이 지정. poster="파일이름" 비디오 태그에서 재생되거 전에 화면에 표시될 포스터 이미지 삽입.