프론트엔드 지망생

- 프론트엔드 공부 36일차 -   이번 실습에서는 실제 데이터를 DB에 저장할 수 있도록 수정하였다. const CREATE_BOARD = gql`  mutation createBoard($createBoardInput: CreateBoardInput! ){    createBoard(createBoardInput: $createBoardInput ){    _id    }  }`  const OnclickRegist= async() => {    if (!writer) {      setWriterError("이름을 입력해주세요.");    }    if (!pw) {      setPwError("비밀번호를 입력해주세요.");    }    if (!title) {      setTitleError..

- 프론트엔드 공부 35일차 -동기 vs 비동기 동기  서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신 비동기 서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신, 서버에 요청(등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행동기 통신을 위해서는 async 와 awiat를 사용해야한다.ex)async function 함수이름() { const data = await axios.get(url)console.log(data) } import axios from "axios";export default function RestGetPage() { function onClickAsync() { const result = axios.get("https://koreanjson.com..

- 프론트엔드 공부 34일차 -  두 컴퓨터 간의 데이터 전송 파일 FTP간단한 메일 SMTP텍스트/하이퍼텍스트(HTML) HTTP HTTP두 컴퓨터간의 텍스트 데이터를 주고받는 HTTP 는 요청(Request) 응답(Response) 두 가지 통신을 할 수 있다.   응답 상태코드Back-end 컴퓨터는 응답할 때 응답 코드를 함께 보내준다.응답 코드는 100 ~ 599 숫자로 이루어져 있다.100 개열 : 정보200 개열 : 성공 의미300 개열 : 리다이렉션 요청 (요청 완료를 위해 추가 작업 필요)400 개열 : 클라이언트 에러의미500 개열 : 서버 에러 의미 대표적인 응답상태코드200 : 성공400 : Front-end 오류500 : Back-end 오류 APIHTTP 요청을 Back-end ..

- 프론트엔드 공부 33일차 -  필수 입력 요소(이름, 비밀번호, 제목, 내용)을 입력하지 않고 게시글 등록 버튼을 터치하면 하단에 오류 메시지가 출력되도록 작성하였다.만약 필수 입력 요소를 작성하면 오류메시지가 실시간으로 삭제되도록 하였다.또한 모든 필수 요소 입력 시 게시글 작성 토스트 메시지가 출력되도록 하였다. const [wirter, setWriter] = useState("");  const [pw, setPw] = useState("");  const [title, setTitle] = useState("");  const [content, setContent] = useState("");  const [wirterError, setWriterError] = useState("");  c..

- 프론트엔드 공부 32일차 -React의 핵심 Component란?UI 또는 기능을 부품화해서 재사용 가능하게 하는  것 함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단하다하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없다.그래서 React에서 `함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었는데, 이 도구를 Hooks(훅) 이라고 부른다. Hooks란?use로 시작하것들 useState?State를 만들어준다 state?컴포넌트에서 사용하는 변수 1. 변수 만드는 방법 비교let count = 0const count = 0 const[ count, setCount ] = useState(0)const[ 변수명, 변수바꾸..

- 프론트엔드 공부 31일차 -   참고사항export const ContentText = styled.textarea`  width: 996px;  height: 480px;  font-size: 16px;  border: 1px solid #bdbdbd;  padding: 16px;`; textarea 태그란? input 태그보다 더 많은 내용의 텍스트를 불러올때 사용하는 태그이다. 입력되는 글자가 많을 경우 자동 줄바꿈의 효과가 있다.   SettingRadio type="radio" id="youtube" name="radio-button" />RadioText htmlFor="youtube">유튜브RadioText>SettingRadio type="radio" id="image" name="ra..

- 프론트엔드 공부 30일차 -프로그램 설치1. VSCODE 설치2. Node.js 설치3. Yarn 설치 폴더에 기능 설치하기1. 바탕화면에 폴더 만들기2. 폴더에 "class" 라는 이름의 Next.js 프로젝트 설치하기3. class 폴더에 Emotion(CSS 쉽게 만들어주는 기능) 설치4. class 폴더에 Apollo-Client, Graphql(백엔드 통신 쉽게 해주는 기능) 설치5. class 폴더에 Ant-Design(누가 만든 버튼과 인풋창 등) 설치6. class 폴더에 Axios(백엔드 통신 쉽게 해주는 기능2) 설치VSCODE 추가 익스텐션vscode-styled-components 설 프로그램 설치1. 인터넷을 통해 VSCODE 설치2. 인터넷에 Node.js 검색 후 설치3. ..