전체 글

위국일기 - 야마시타 토모코

지난 주말에 코로나 3차 백신을 맞은 뒤 열이 올라 움직일 수 없는 상태에서 충동적으로 보기 시작한 만화다. 야마시타 토모코의 만화 중 처음으로 제대로 읽은 작품. 왜 그렇게 갑자기 읽기 시작했냐면.. 이 장면 때문에. (무려 이 장면이 뒷표지에 들어가있다. 대원씨아이 영업 잘한다.) 작품 소개 소설가 코다이 마키오(35)는 언니 부부의 장례식에서 고아가 된 언니의 딸 아사(15)를 친척들이 서로 떠넘기는 것을 보고, 발끈하여 충동적으로 자신이 맡겠다고 나선다. 그러나 바로 다음 날, 아침에 눈을 뜨자마자 타고난 극도의 낯가림이 발동! 타인과 함께 생활하는 걸 불편해하는 자신의 성격을 그만 깜빡했던 것이었다…. 반면, 아사는 낯가림은커녕 ‘어른답지 않은 어른’ 마키오와의 생활을 아무 거리낌 없이 자연스레..

TIL - 2022.01.13 목요일

오늘의 TIL을 쓰기에 앞서 - TIL을 잘 쓰는 방법에 대해 고민중이다. 여기서 '잘 쓴 TIL'이라는 것은 쓰는 내 입장에서도, 그리고 읽는 사람들의 입장에서도 무의미한 정보값이 적고 잘 읽히는 글을 뜻한다. 더불어 단순 정보의 나열이기보다는 그 날의 공부를 통해 내가 구체적으로 무엇을 배웠는지 기록하는 일지였으면 좋겠다. 그래서 몇가지 나만의 TIL 룰을 정했다. - 개발 자료 부분에 별도로 포스팅 한 내용은 TIL에 중복 게시하지 말 것. (언급이나 서술은 ok, 똑같은 정보값의 무의미한 중복을 최대한 피하자는 뜻) - 나를 전혀 모르는 사람이 봐도 무슨 말인지 이해할 수 있도록 쓴다. - 정확하게 이해하지 않은 단어의 사용은 최대한 지양한다. - 무의미한 반성은 지양하고 개선과 학습을 위해 쓴다..

[API] Rest-API vs Graphql-API

Rest-API vs Graphql-API API에는 크게 rest-API, graphql-API 2종류가 있다. Rest-API GraphQL-API API 함수 이름 주소처럼 생긴 이름 http://naver.com/board/1 http://naver.com/profile/철수 일반 함수와 같은 이름 board(1) profile("철수") 응답 결과물 일부 데이터만 필요한 경우에도 전체 데이터를 받아야만 하는 구조 원하는 일부 데이터만 골라 받을 수 있음 요청담당자 axios apollo-client GraphQl은 효율적인 데이터 통신을 위해 페이스북 개발팀에서 만들었으며, facebook, airbnb, github 등 많은 사이트에서 사용중인 통신 방법이다. 하지만 국내에서는 아직 Graph..

TIL - 2022.01.12 수요일

오늘 배운 것 오늘은 HTTP의 개념과 API를 배웠다. (+ Json과 CRUD도) 그리고 Rest API vs GraphQL 의 차이를 배우고 기본 방식을 연습했다. 오늘은 단순 개념 정리가 많아서 요약노트같은 TIL이 될 듯. 1. HTTP와 API HTTP란? HTTP는 두 컴퓨터간의 데이터 전송을 담당하는 일종의 길이다. 우리의 경우, 프론트엔드와 백엔드 사이를 연결하는 데이터들의 길이라고 생각하면 쉽다. HTTP의 규칙 요청을 해야 그에 대한 응답을 보내준다. (요청과 응답 / Request & Response) 응답을 줄 때에는 숫자를 같이 보낸다. 이것을 응답 상태코드라고 한다. 이 상태코드에는 일정한 규약이 있다. 자주 볼 수 있는 응답 상태코드에는 성공(200), Front-end 에러..

[React] JSX란?

JSX란? React에서 사용하는 React 전용 문법. JSX : JavaScript XML JSX는 JavaScript에 XML을 추가한 확장 문법으로, 공식적인 자바스크립트 문법은 아니다. 웹브라우저에서 읽어올 수 없는 형태이기 때문에, 브라우저에서 실행하기 전 일반 html 코드로 변환되어 출력된다. 기타 상세한 사항은 React 공식 문서를 참고하면 좋다. https://ko.reactjs.org/docs/introducing-jsx.html JSX 문법 예시 ▽ 기존 HTML 방식 제목 버튼 ▽ JSX 방식 제목 버튼 속성값이나 대소문자 정도 차이 등을 제외하고는 거의 비슷하다. [ 주의점 ] JSX는 본질적으로 HTML보다는 Javascript에 가깝기 때문에 html 속성명 대신 camel..

[React] Emotion으로 Reset.css 설정하기 / 글로벌 스타일 설정하기

본 포스팅은 링크한 블로그의 내용을 기반으로 실제 프로젝트에 적용한 내용을 서술한 글이다. https://egg-programmer.tistory.com/226 css를 사용하지 않고 순수 Emotion으로 React에 글로벌 스타일 적용시키는 방법. 나의 경우, 웹폰트와 box-sizing 등의 reset css 적용을 위해 사용하였다. index.js 1. @emotion/react에서 Global을 import 한다. import {Global} from '@emotion/react' 2. 문서 내에 Global style이 들어갈 위치를 지정해준다. reset.js 1. index의 reset 과 연결한 뒤 필요한 css 값을 입력한다. 그렇게 한 뒤 서버를 실행하면 로 지정한 위치에 태그가 삽입..

TIL - 2022.01.11 화요일

오늘 한 일 오늘 하루는 내내 '리액트 진짜 좋은데?' 의 반복이었다. 컴포넌트 구조와 state는 정말 정말 정~말 충격적일만큼 편리하다! 세상에 이런 게 있었다니. 내가 원시시대 코드를 짜는 회사에서 일을 하다 와서 더 큰 갭을 느끼는걸지도 모른다. (옛 방식 javascript와 jQuery 퍼블리싱, php 코딩 쪼끔 했다) 회사 다니던 당시에도 '우리 회사 코드 너무 구린데..' 라고 생각했지만, 나와서 공부하면서 돌이켜보니 뭔, 10년도 더 전에 쓰던 방식으로 코드를 짜고 있으니.. 할 말은 많지만 별 의미 없으니 길게 하지 않겠다. 그저 퇴사해서 다행이다. 그리고 구시대 코딩을 경험한 덕분에 공부가 재밌다. 혼자 시간여행하는 기분이다. 1. 리액트의 핵심, Component Component..

[Git] github의 소스코드를 Clone 하는 방법

Github에서 코드를 Clone 하려면? 1. 복사할 Repository에 들어가서 Clone URL을 카피한다 2. git으로 복사할 위치로 이동한다. 3. 해당 스테이지에서 git clone CloneURL 을 입력한다. 4. Clone 완료! 짠! Next.js 기본 설정을 유지한 자료를 Clone해올 경우.. 어라? 클론해보면 패키지 파일이 담겨있어야할 node_modules가 없다. 이유는 애초부터 Repository 안에 없기 때문. 저장소에 업로드할때 해당 폴더는 무시하도록 설정해두었기 때문에 commit시에 빠진 것이다. 해당 정보는 .gitignore 파일 안에 있다. node_modules가 .gitignore 안에 들어있는 이유는 얼마든지 재설치가 가능한 패키지 파일들이기 때문이다...

[Git] Git 과 Github / Github 저장소 생성 방법

일단 Git과 Github는 다르다. 서로 관련은 있으나 전혀 다른 프로그램! (난 처음에 둘이 같은 건 줄 알았다. 이름이 비슷해서..) 깃(GIt)이란? 컴퓨터 파일의 변경사항을 추적하는 분산 버전 관리 시스템(DVCS). 소스코드 저장을 도와주는 프로그램으로, 누가 언제 어떤 글자 또는 코드를 변경했는지 알 수 있어서 버전 관리에 매우 용이하다. 또한, 중요한 코드를 실수로 잘못 건드렸을 경우 다시 되돌리기도 가능하다. 형상 관리 도구라고도 부른다. Git 이외에 널리 쓰이는 형상 관리 도구에는 SVN, CVS 등이 있다. 깃허브(Github)란? Git 저장소(Repository) 호스팅을 지원하는 웹 서비스. Git으로 저장한 파일들이 실제로 저장되는 공간이다. Git hub, GitLab, B..

TIL - 2022.01.10 월요일

오늘 배운 것 1. Github 사용법 그 전에도 github를 간간히 사용하기는 했다. 하지만 매번 숙련된 조교(멘토님 or 블로그)의 시범을 따라했을 뿐, 어떤 프로세스로 Repository를 업데이트하는건지 제대로 익히지는 못했다. 이제는 본격적인 공부도 시작했겠다, '습득한다'는 생각으로 Git push를 머릿속에 집어넣었다. Git bash를 연다. Repository에 업로드할 폴더로 이동한다 (명령어 : cd) git init 한다 (기존에 업로드한 적 없는 폴더일 경우) ls -al 해서 .git 폴더가 생겼는지 확인한다. 상위폴터에 .git을 만들었는데 하위 폴더에 .git이 겹쳐있는 경우 에러난다. 여러 폴더를 묶어서 올릴 때에는 꼭 최상위 폴더에'만' git init 해야함. 다른 패..