전체 글

[Rest-API/GraphQL] axios/Apollo-Client 사용하는 방법 (get/mutation)

axios | Rest-API import axios from 'axios' import해온다. export default function RestGet(){ const [aaa, setAaa] = useState("") const zzz = async () => { const result = await axios.get('https://koreanjson.com/posts/1') console.log(result.data.title) setAaa(result.data.title) } zzz() return ( REST-API 요청하기 ( ° ͜ʖ °) {aaa} ) } 사용한다. 참 쉽죠? apollo-client | GraphQL-API 여기는 상대적으로 할 일이 좀 더 많다. _app.js Next..

[Javascript] 호이스팅이란? | Hoisting

호이스팅이란? "끌어올린다"는 뜻. 함수 안에서 변수의 선언만 분리해서 코드의 최상단으로 옮기는 것이다. Code1 console.log(aaa) var aaa = 3 위와 같은 코드가 있다고 가정해보자. console.log(aaa)는 aaa를 선언하기 전에 불러왔으니 오류가 나야 정상이다. 하지만 undefined일 뿐 실행은 된다. 이것은 var aaa = 3 이 호이스팅 됐기 때문이다. 이러한 현상은 var로 변수/상수를 선언했을 때에 발생한다. Code2 console.log(bbb) const bbb = 2 그렇다면 let/const는 어떨까? 여기도 마찬가지로 호이스팅은 이루어지나, TDZ(Temporal Dead Zone)라는 별개의 임시공간에 저장되었기 때문에 오류가 난다. 이러한 작동이..

[React] Fragment

Fragment란? div나 span처럼 특정한 역할을 하지 않고 크게 묶어주는 기능만을 하는 요소. 문법 React JSX의 경우 최상위에 하나의 요소로 묶여있지 않으면 오류가 발생한다. 이럴 때 Fragment를 사용할 수 있다. 단, react에서 Fragment 를 import해야 사용 가능하다. 언어의 발달로 아래와 같은 빈 태그도 Fragment처럼 사용할 수 있다. 이 경우에는 별도의 import가 필요 없다.

[Javascript] async와 await | 동기와 비동기 방식

동기와 비동기 방식이란? 서버와 통신하는 방식의 종류이다. 동기 (Syncronous: 동시에 일어나는) - 서버 컴퓨터의 작업이 끝날 때까지 기다리는 통신 방식 - 서버에 여러가지 요청을 보낼 경우, 이전 요청에 대한 응답이 끝나야 다음 요청을 보낼 수 있다. 비동기 (Asynchronous : 동시에 일어나지 않는) - 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신 방식 - 서버에 여러가지 요청을 보낼 경우, 이전의 요청에 대한 응답이 끝나지 않아도 다른 요청을 보낼 수 있다. - 비동기 처리는 Javascript의 중요한 이슈 중 하나이다. Javascript의 비동기 처리 비동기 처리 방식으로 작동되는 함수의 경우, 이전에 요청한 작업이 완료되지 않았는데 또 다른 요청을 보내는 바람에 오류..

[React] export와 export default

export한 컴포넌트를 import 컴포넌트를 낱개로 export 했을 경우 내가 원하는 요소만 골라서 import 해오는 것이 가능하다. 받아오고자 하는 컴포넌트의 이름을 {중괄호} 안에 콤마로 구분해서 나열해주면 된다. import { MyInput } from './BoardWrite.styles.js' 그렇다면 해당 경로 문서의 컴포넌트를 한번에 다 받아올 수는 없을까? 물론 가능하다. import * as S from './BoardWrite.styles.js' // S라는 객체 안에 해당 경로의 export된 컴포넌트를 전부 넣어서 가져오는 방법. // 쓸때에는 S.MyInput 같은 식으로 사용 가능 export dfault한 컴포넌트를 import export default는 대상을 기본..

TIL - 2022.01.15 토요일

오늘 배운 것 - Oh .... git pull을 잘못 해서 오늘 작업한 분량이 다 날아갔다.. - 원래 주말에는 TIL을 쓰지 않으려고 했는데 영혼에 깊은 상처를 받아서,, 또 이런일이 발생하지 않도록 기록하러 옴- git push / pull 할 때는 항상 신중하자 ,,, 특히나 master 브랜치에서 바로 작업하고 있을 경우에는 더더욱.. 어디부터 어디까지 날아간건지 감도 안온다. 마지막 커밋 상태랑 비교하며 수동 업데이트 해야 할 듯. ㅎㅎ. - 헐.. 확인해보니 금요일에 수업 듣고 기록해둔 내용도 다 날아갔다. 5일차 quiz도 날아감 실화냐? 앞으로 할 것 이런 실수는 두 번 다시 하지 않기 폴더 원상복구하기 (가능할까 ?) 후기 수업때 실습했던 코드까지 다 날아갔는데, 다솔님이 공유해주신 덕..

TIL - 2022.01.14 금요일

오늘 배운 것 - 어제 과제를 오전에 조금 더 손본 뒤 제출 완료했다. 게시물 등록 API와 state를 활용해서 자유게시판 폼에 내용을 입력하고 등록을 누르면 데이터가 전송되도록 하는 작업까지 끝났다. 라이브 서버에서 확인 후 Playground에 접속해서 API에 들어간 것 까지 확인하였다. state와 GraphQL-API 사용을 계속 반복했더니 이제 조금 손에 익는 것 같다. 역시 반복 학습만이 살 길이다. - GraphQL 활용 실습 퀴즈를 풀었는데 이유를 모르는 구문 오류가 발생해서 한시간 정도 틀린그림찾기만 했다. 알고 보니 Int로 가야하는 Value가 String으로 전송되어 발생한 문제더라. 이렇게 간단한 걸 놓치다니. 해결한 뒤 조금 허무했지만 그래도 문제의 원인을 스스로 찾아냈다는 ..

[Javascript] 템플릿 리터럴 | Template literals

템플릿 리터럴이란? 내장된 표현식을 허용하는 문자열 리터럴이다. 백틱을을 이용하여 여러 조각으로 이루어진 문자열과 변수, 상수 등의 조합을 훨씬 읽기 편하게 입력할 수 있다. 문법 예시 const apple = 3 const banana = 10 console.log("철수는 사과를 " + apple + "개 가지고 있고, 바나나를 " + banana"개 가지고 있어요!") 이런 식으로 라인에 여러가지 요소가 들어가면 코드가 번잡해진다. 그럴 때 템플릿 리터럴을 사용하여 코드를 간결하게 만들 수 있다. console.log(`철수는 사과를 ${apple}개 가지고 있고, 바나나를 ${banana}개 가지고 있어요.`) 백틱(` `)안에 문자열을 넣고 스페이스 홀더( ${expression} ) 안에 표현..

[Javascript] 객체의 Key와 Value가 동일한 경우 | Shorthand Property

Javascript 객체에서 key와 value 값이 동일할 경우 생략이 가능하다. 이러한 것을 Shorthand property라고 부른다. ▶ Code1 createBoardInput: { writer:writer, password: password, title: title, contents: contents } ▶ Code 2 createBoardInput: { writer, password, title, contents } Code 1을 Code 2번 처럼 쓸 수 있다는 이야기. 잘 익히면 코드가 훨씬 간결해질 것이다.

[JavaScript] import 와 export

React 등 현대의 Javascript 기반 프로젝트 파일을 열어보면 import와 export가 무수히 많다. import와 export는 무엇일까? 사전적 정의 import : 수입, 가져오다. 1. to buy or bring in products from another country 2. to introduce new goods, customs, or ideas to one country from another export : 수출, 내보내다. 1. to send goods to another country for sale 2. to put something from one country into use in other countries 사전적 정의를 보아 짐작할 수 있듯, 소스코드를 각각 내보..