etc./TIL

[TIL] 2022년 01월 24일 TIL - Event Bubbling

이번시간에 배운 내용은 이벤트 버블링에 대해 배운 시간이었다 이벤트 버블링? 이벤트 버블링은 상대방이 내용을 클릭할때 상세보리고 가는 경우에 문제가 발생하는데 어느 것을 클릭하든 전체를 클릭했을때 상세페이지로 넘어가고 싶을때 문제가 발생한다. onClick 이벤트 시 유저를 불러오기 위해서는 어떤 방식으로 넣어야 할까? 이벤트 버블링은 자식에게 부모로 이벤트를 전달해주는 것 전달이 자식에서 부모로 올라간다. 자식 태그를 클릭해도 onClick이벤트가 발생하는데 그런데 이 클릭이 전파되는 것은 부모태그에도 전달이 된다. 실제로 onClick 함수는 부모한테 바인딩 허더라도 자식이 내용을 클릭하더라도 밖에 있는 onClick이 실행된다. const onClickUser = (event) => { alert(..

[TIL] 2022년 01월 21일 TIL - Eslint - Typescript

이번 시간에 배운 과정은 협업시 편리하게 사용할 수 있는 Eslint 에대해 배웠다. 타입스크립트를 엄격하게 관리하는 도구 - strict API로 받는 데이터 타입은 ? - graphql -codepen 협업하는데 규칙은 있어야지! - eslint / prettier 규칙을 지키지 않는 사람은 Push할 권리도 없다! - husky API 응답데이터를 GRAPHQL-CODEPEN 이라 한다. 이것은 직접 입력 없이 명령어 한번에 정의해준다. 기존의 fetchBoard를 gql을 사용해서 불러오는 방식에서 fetchBoard가 담긴 types.ts 파일에 정의해 Import해서 불러올 수 있다. types.ts에서는 graph-ql의 fetchBoard에 types가 정의되어있어 Pick함수로 Query..

[TIL] 01월 20일 Typescript 적응기

이번 오전 교육에서는 Typescript의 기초에 대해 배웠다. 자세한 목차 이걸 쓰면 더 안전하다고? => Typescript 기존의 Javascript를 typescript로 바꾸자 Typescript는 기존의 Javascript에서 한단계 UP된 언어이다. 타입 스크립트란? 자바스크립트의 타입을 강제시키는 언어이다. let aaa = "안녕하세요" aaa = 123; 예를 들어 aaa라는 상자에 문자열을 넣다가 다시 숫자 타입으로 넣을 수 있는 방식이 기존의 자바스크립트의 방식이었다. let aaa:string = "안녕하세요" aaa = 123 // 문자만 들어가는 string type이라 숫자는 불가능 typescript에서는 문자열로 선언을 string값으로 넣어주면 숫자는 들어갈 수 없다. ..

[TIL] 2022월 01월 19일

이번 시간에는 게시판을 수정하는 수정페이지를 구현하는 방법을 배웠다. import React from 'react'; import BoardWrite from '../../../../src/components/units/board/08-write/BoardWrite.container'; export default function BoardsEditPage() { return } 먼저 BoardWrite 컴포넌트에 props 마다 기본 List페이지에서는 수동 버튼이 보이고 삭제페이지에서는 삭제페이지 가 보일 수있도먼 처음 페이지에는 isEdit라는 수정페이지에 props 값을 잡아준다. import axios from 'axios'; import { useState } from 'react'; impor..

[TIL] 2022년 01월 18일

이번시간에 배운 내용은 React 7강 반복문을 대체할 여러가지 문법에 대해 배웠다. React 7강 나이제 for문 안써 => map함수/filter함수 최신 데이터를 가져와줘!! => refetch 목록에서 삭제가 안되는데... => key/index map vs filter map const classmates = ["철수", "영희", "훈이"] classmates.map((el) => (el + "어린이")) map함수를 사용해 classmates라는 값에 배열형태에 값이 선언되었을때는 map함수를 사용해 element를 사용해 index 뒷부분에 문자을 삽입할 수 있는 map 함수이다. const classmates = [ { name: "철수" }, { name: "영희" }, { name:..

[TIL] 2022년 01월 17일

오늘 배운 TIL은 React 실무를 대비해서 파일 나누기를 배웠다. 목차 - 커리큘럼 실무적인 폴더구조 -> Container / Presenter 컴포넌트 분리 및 전달 => Props 목록 형태에 데이터를 보여주자 => map 함수 / filter 함수 컴포넌트의 재사용성을 높이는 방법 => Axios / Apollo-Client 안전한 코드를 작성하는 법 => Typescript 규칙을 정해서 협업 하는 방식 => Prettier / ESLint / Huskey -> 룰을 정해서 깃허브에 올리는 방식선언 Day 6 - 목표 실무적인 폴더 구조 컴포넌트 분리 데이터 전달 => props setState는 이런 원리다? => setState 동작원리 Optional-Chaning vs nulish-c..

[TIL] 한주간의 정리 - 코드캠프

한주간의 정말 많은 언어와 객체 그리고 개발자를 택하면서 배워보지 못한 GrpahQL에 대한 이해를 단 한주 만에 이해하는 시간이 되었다. 나로써 내가 직접 게시물을 생성하는 방법을 터득하고 많은 코드량과 어려운점에 대해 알아가는 한주가 되었다. 이번 한주는 NextJs를 직접 탐구하는 시간을 가졌고 실제로는 NextJs를 사용하지는 않고 React 와 Navie를 사용한다고 하였다. 그럼 이번 한주간을 되돌아보면서 어느것을 배우고 어떤 것이 어려웠는지 분석해보겠다. 01. 1월 10일 코드캠프 12기의 첫시작 코드 캠프에 참가하기전 이전에 한주간 프리캠프 과정을 거치고 마침내 코드캠프 12기에 입성하게 되었다. 오전에 오자마자 강의실에 대한 설명과 고민사항에 대한 Qustion-Table 이용방법에 대..

[TIL] 2022년 01월 14일

이번주는 Routing을 배워보는 시간을 가지게 되었다. 1.페이지를 이동하는 방식 => Routing 2.정적페이지와 동적 페이지 => Static-Routing / Dynamic-Routing 3.게시물을 가져오는 방법 => Apollo-Client / Query 4.API 요청 에러 try-catch 라우팅 => 페이지 이동 const router = useRouter(); router.push("이동할 페이지"); -> 이동하고 싶은 주소 // 페이지 이동하기 router.reload(); router.replace(); router.pathname(); 상세페이지가 다른 경우 const router = useRouter(); router.push("이동할 페이지"); -> 이동하고 싶은 주소 /..

[TIL] 01월 13일 - 동기 vs 비동기

아주 예전에 배운 동기와 비동기 방식에 대해 배워보았다. 동기와 비동기 방식의 목표는 1.동기 비동기 => async / await 2.변수 함수가 이상할때 => Hoisting 3.vscode에서 데이터 전송 -> Apollo Client / Mutation 동기 vs 비동기 컴퓨터와 컴퓨터 사이의 데이터를 주고 받기 위해 요청 요청받는 컴퓨터는 그것을 응답 HTTP 글을 등록하고 불러오기를 하는데 안불러와지는 이유는 바로 글등록 요청과 불러오기 요청을 같이한 이유중 하나다. 그것을 바로 비동기 라고한다. 동기는 등록요청을 하면 요청이 될때까지 기다린 뒤 불러오기를 요청한다. 비동기는 동시에 여러일을 할때 사용한다. 동기는 등록 요청을 하면 요청이 완료될때까지 기다리고 불러오기를 요청하는데 비동기는 동..

2022년 01-12 GraphQL의 시작

점점더 포스팅 시간이 늦어지는 것 같은데... 이번 시간 Day 3 목표는 RestAPI vs GraphQL이다. 두 컴퓨터간 데이터 전송을 담당하는 => HTTP 백엔드의 데이터 처리 담당자 => API 데이터 처리 담당자의 2종류 => GraphQL vs Rest API!! HTTP를 정리해보면 HTTP는 하나의 컴퓨터에서 다른 컴퓨터로 request(요청)을하는 작업 중 하나다. Front-end가 입력해놓은 State를 임시 저장해서 백엔드 컴퓨터에 요청한다. 데이터 베이스를 설치하면 표형태의 Execle로 DB에 저장하고 DB는 Beck-end에게 응답결과를 Front-End에게 전해준다. 그런 응답 데이터도 Text 형태의 데이터라고 말할 수 있다. HTTP는 응답(answer) & 요청(re..

2022년 01-11 Next.js TIL. React!!

오늘은 Next.js와 함께 사용할 React에 대해 배워보았다. 오늘 강의에 3단계 구성은 이렇다. #1. 왜 React인가 => npm trends #2.컴포넌트란? => react-hooks #3.컴포넌트 변수 => State 1. 왜 React인가 React를 요약하자면 대표적인 Front-end 도구 라고 말할 수 있다. React를 포함한 Vue.js, Angular.js 가 대표적인 프론트엔드 언어 중 3가지라고 말할 수 있다. 그래서 왜 많은 사람들이 왜 React를 사용할까? React에는 3가지 개발 플랫폼으로 나눠서 정의할 수 있는데 React.js => 페이스북, 인스타, 트위터, 넷플릭스등 웹에서 최적화된 라이브러리 Reaact-Native => 앱 => 크로스플랫폼 / 안드로이드..

2022년 01-10일 Next.js TIL..

이번교육에서 블로거를 만들기 위한 Next.js에 관해 교육을 받았다. React를 자주 다뤄본 나로써 Next.js를 입문하는데는 그렇게 어려움은 없었다. 기존 css에서 복잡한 스타일링은 쉽게 Styled-components라는 라이브러리를 사용해서 Next.js를 구동해보았고 사실 이전에 Next.js를 직접 다뤄보았는데 개발하는 방식이 복잡했는데 이렇게 간단하고 쉬운줄 몰랐다... 초반 교육에서는 API통신까지는 배우지 않았고 기본적인 웹 구동이나 CSS스타일링 하는 법에 대해 배운뒤 블로그 레이아웃을 설계하는 시간을 가졌다. 수업시간과 남아서 개발하는 시간까지 많은 시간동안 교육을 받았지만 딱히 어려운점은 없었다. 오늘 배운것은 아주 간단한 스타일이고 다음 교육에서는 어떤 기능을 구현할지 기대가..