Kwangkki

캠프에서 GraphQl API와 REST API에 대해 배우고 나서, 주변 백엔드 개발자들에게 물어봤다. "API 그래프QL 쓰세요 레스트 쓰세요?" 돌아오는 답변은 하나같이 "네?" 내가 두 개념에 대해 잘 못 이해하고 있나? 싶어 급하게 다시 찾아봤다. API? 우선 API가 무엇인지 보자면, API는 Application programming Interface의 약자로 컴퓨터나 소프트웨어를 서로 연결하는 역할을 한다. 그렇다고 툴이나 프로그램의 개념이 아니라 두 애플리케이션 간 원활한 연결을 위해 정하는 규칙이나 약속?으로 보면 좋다. 이 두줄로 정리한 개념을 이해하기 위해서 유튜브도 보고 AWS 문서와 여러 블로그를 읽어봤다. API에 대해서 정리하고 보니 무슨 API 쓰세요? 라는 질문에 당황한..

나는 이전 회사에서 터미널로 깃 관리를 하지 않았었다. 깃 크라켄을 사용했기 때문에 간단한 마우스 클릭만으로 깃 관리를 했었다. 캠프에 와서는 오로지 터미널로만 깃허브와 파일 관리를 해야했다. 터미널 사용법은 부족한 부분이었기 때문에 연습을 위해 단순히 폴더를 열거나 들어가는 것도 계속 터미널을 사용했다. 이제 조금 익숙해진 터미널 사용법과 깃 개념을 함께 묶어 정리해 본다. git의 시작 깃을 검색해보면 모두 "분산형 버전 관리 시스템"이라고 한다. 그렇군.. 사실 이런 개념 정의보다 좀 더 재미있을 것 같은 깃의 역사를 찾아봤다. 깃의 시초는 리누스 토르발즈에서 시작된다. 참고로 리누스 토르발즈는 리눅스 운영체제를 개발한 사람으로 대단한 개발자이자 직설적이고 거침없기로 유명하다고 한다. 이 리누스 토..

자바스크립트 ES6 부터 Template literal 기능이 도입되었다. 우선 사용법 부터 알아보자 템플릿 리터럴 사용법 빽틱이라고 불리는 이 따옴표 같은 것을 사용하면 된다. `` const str = `1,2,3 "1,2" [1,2] 템플릿 리터럴은 빽틱안에 있는 모든 것을 String으로 출력한다`; console.log(typeof str); //String 템플리 리터럴 활용법 기존 따옴표로 사용하면 되지 왜 이것을 사용하느냐. 바로 문자열 안에 함수를 사용할 수 있다는 것이다. //백틱 없이 문자열을 합칠 때 return "의류를 구매한 횟수는 총" + count + "회 금액은" + sum + "원이며 등급은" + rating "입니다" //백틱 사용 시 return `의류를 구매한 횟수는..

javascript에는 Import와 export라는 개념이 있다. 덕분에 컴포넌트를 활용하기가 참 편리하다. Import와 Export로 모듈을 쉽게 내보내고 사용할 수 있기 때문이다. ❗️모듈(Module)이란? 하나의 Javascript 파일에 많은 내용이 담기면 파일이 커지고 관리하기가 어려워진다. 그래서 여러 파일로 생성해서 관리하는데 이런 각각의 파일을 모듈이라고 부른다. 파일 Import, Export 다른 파일을 가져오고 싶을 때 아래와 같이 import를 사용하면된다. 보통 코드 상단에 import 코드를 작성한다. import app from './app.js'; // 변수명은 자유롭게 바꿀 수 있다. 변수, 함수 Import, Export 원하는 변수나 함수를 가져올 때도 비슷하다. ..

JSX 개념 JSX를 쉽게 이해하려면 React 전용 HTML이라고 봐도 좋다. 좀더 자세히 풀자면 리액트 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장 개념에 가깝다. JSX를 사용하지 않은 리액트 예제를 보면 쉽게 이해할 수 있다. //JSX 없이 리액트 기본문법 사용 React.createElement('h1', {className: 'title'},'Hello World') //JSX 사용 'Hello World' React.createElement를 사용해서 h1 태그를 만들던 것을 HTML 문법처럼 태그를 사용할 수 있다. JSX를 사용하는 이유 위에서 봤듯이 JSX 엄청난 편의성을 제공을 하는 것을 알 수 있다. React 공식홈페이지에서도 JSX 사용을 장려한다...

에러 상황 21번 줄 fetchBoard 데이터가 문제인 듯 하다. console.log로 data.fetchBoard를 찍어 봤더니 역시나 데이터에서 오류가 있는 것 같다. 에러가 뜨는 부분을 주석 했더니 에러는 사라지는 것을 확인할 수 있다. 이상한건 이 상태에서 주석을 풀면 화면이 표시 된다는 것 이건 비동기 실행 때문에 data를 받아오기도 전에 div가 표시되면서 발생하는 에러라고 한다. — 그래서 아래와 같이 조건문을 사용했다. and 연산자는 왼쪽이 ture면 오른쪽을 실행하는 조건문. 아래 코드를 풀이하자면 “&& 연산자 왼쪽의 data가 있을 때 오른쪽을 실행시켜달라”는 뜻 이런 방식으로도 동기실행 상태로 만들어 줄 수도 있다. 다양한 방법으로 변형할 수도 있다. ?를 사용해서 옵셔널 체..

작업한 것을 푸시하는데도 깃허브 잔디가 심어지지 않는다. 새로 레포지토리를 팔 때만 심기고 이후에 커밋이나 푸시를 해도 감감무소식. 다크모드라 깜깜무소식 잔디 안 심기는 건 못 참지. 바로 구글링을 해봤다. 찾아보니 크게 3가지를 체크해보라고 한다. 1. 토큰 확인 토큰 기간이 만료되어있을 수 있으니 체크해보라고 한다. 내 프로필 -> settings -> Developer settings -> Persnoal access tokens -> tokens 위 경로로 들어가서 확인해보니 내 토큰은 유효기간이 없는 토큰이다. 예전에 기한 만료전 귀찮아서 무제한으로 바꿨던 기억이,, 근데 토큰이 없으면 푸시가 되나? 여튼 이 문제는 아닌 듯 하다. 2. Email, Name 확인 터미널에 아래 명령어를 입력하면..

리액트 리액트 말은 많이 들어봤다. 하지만 이것이 언어인지 프레임워크인지 감이 잘 오지 않았다. 이번에 리액트의 기초에 대해 공부하며 알게된 것들을 정리해보고자 한다. 리액트, 도대체 뭔데? 리액트는 컴포넌트를 만들고 사용하는 거라고 보면 된다. 어플을 보면 뒤로가는 백버튼은 모두 똑같이 생긴 것을 알 수 있다. 이런 경우 이 백버튼을 리액트 컴포넌트로 만들어두고 꺼내 쓰면 참 편리하다. 그렇기 때문에 중복되는 UI 요소는 리액트로 만든 후 불러와서 사용하면 된다. 이런 경우 버튼 디자인 수정이 필요할 때 컴포넌트만 수정하면 모든 버튼에 적용되기 때문에 유지보수에도 이점도 있다. vue, angula도 있는데 왜 다들 리액트를 할까? 리액트 외에도 vue나 angula 등 좋은 프레임워크가 많은데 대부분..

최근에 배운, 혹은 재밌는 것들 1. 프론트엔드 개발자에 대해 자세히 알게 되었다. 내가 부트캠프를 한다고 하니 아는 분이 자신의 지인인 7년차 개발자분과의 자리를 마련해주신다고 하셨고, 2시간 정도의 커피챗을 가지게 되었다. 내가 가장 궁금했던 것은 프론트엔드 포지션이 가지게 될 주업무와 주목표가 궁금했다. 단순 웹퍼블리셔는 아닐테니까. 의외로 프론트엔드 개발자의 목표는 명확했다. 웹페이지 뷰를 저비용으로 컨슈머 혹은 유저에게 더 빠르게 전달하는 것. 여기서 저비용이란 서버와 프론트 간의 리소스 소모에 관한 이야기인 것 같았다. 이 목표를 달성 하기 위해서 무려 6가지의 cs 원리를 알려주셨는데 메모를 하지 못했다 ㅠ 아, 메모도 중요하다고 하셨다. 그 분이 후회하는 것 중 하나가 그동안의 에러 노트를..

원시타입, 참조타입 설명이 앞서 이 문제를 다루는 이유에 대해 말하자면 다음과 같다. let arr = [1,2,3] arr === [1,2,3] //false arr 변수에 배열 1,2,3을 담은 후, 변수 arr과 배열 [1,2,3]을 비교하면 false가 결과값으로 나온다. 분명 타입도 같고 배열 값도 같은데 왜 false인가. 이는 메모리의 주소값에 따른 차이다. 자세히 알아보겠다. 원시타입 (primitive type)과 참조타입(Reference type) 자바스크립트에 원시타입의 종류는 아래와 같다. 1. String 2. Number 3. Boolean 4. Bigint 5. undefined 6. Symbol 7. Null 그외에 모든 타입은 참조타입으로 봐도 무방하다. 원시타입의 특징은..