프로그래밍

React Native에 Apollo Client, GraphQL 부착하기

우선 리액트 네이티브를 사용하려면 리액트 네이티브를 설치하여야한다. 그리고 안드로이드 스튜디오도 설치해야하고... ios용으로 빌드하기 위해선 xcode도 설치해야하고... watchman도...cocoapod도...create-react-native-app도... 그치만 그것은 생략맨 리액트 네이티브에 그래프큐엘을 부착해보려고 한다. 목표 1. expo를 사용하지 않고 React Native 프로젝트를 생성 2. Apollo Client를 사용하여 GraphQL 부착하기 1. expo를 사용하지 않고 React Native 프로젝트를 생성 먼저 프로젝트를 만들어보자. 리액트 네이티브 프로젝트를 만드는데 가장 널리쓰이는 방법은 2가지가 있다. 1) Expo를 사용 2) React-native CLI를 사..

[토이프로젝트] today-woozoo 제작기 (2/2) - 이미지 로딩처리, 번역모듈 부착

이 글은 나의 토이프로젝트 제작기를 정리하는 글이다. 왜 만들때 안하고 이제 하냐면 이런 스토리가 있다... 뭐냐면... [토이프로젝트] today-woozoo 제작기 (1) - 리덕스 툴킷 (Redux Toolkit) 이 글은 나의 토이프로젝트 제작기를 정리하는 글이다. 왜 만들때 안하고 이제 하냐면 이런 스토리가 있다... 처음에 CSR을 써보려고 시작했던 프로젝트였는데 만들고보니 굳이 CSR을 안써도 되는 1nnovator.tistory.com 여따 써놓았읍니다. 얼추 레이아웃을 잡고 NASA API를 연결해서 데이터를 불러와 이미지를 띄우는 것까진 했는데...걸리적거리는 문제가 있었다. 그리고 이미지를 화면에 표출할때 이미지 크기가 크면 천천히 화면에 표출되는 문제가 있었다. 이걸 해결하기 위해 ..

[토이프로젝트] today-woozoo 제작기 (1/2) - 사이트 개요, 리덕스 툴킷 (Redux Toolkit)

이 글은 나의 토이프로젝트 제작기를 정리하는 글이다. 왜 만들때 안하고 이제 하냐면 이런 스토리가 있다... 처음에 CSR을 써보려고 시작했던 프로젝트였는데 만들고보니 굳이 CSR을 안써도 되는 컨셉의 프로젝트였던 것이다. 그래서 SPA 기반의 웹으로 다시 전환하면서 정리해보려고 한다. *학습내용보단 제작기록을 주로 정리해두려고 한다. 사이트의 내용은 간단하다. - NASA의 APOD(Astronomy Picture Of the Day) OpenAPI를 사용하여 매일매일 새로운 우주(천문학) 사진을 보여준다. - 이전 일자들의 데이터들도 불러올 수 있다. - 우주 사진에 대한 번역된 설명을 제공한다. NASA OpenAPI React 18 (+ Typescript) RTK (Redux Toolkit) N..

정리노트: 클로져(Closure)랑 놀기

자바스크립트의 기본부터 천천히 공부하고 있다. 공부한 내용을 나만의 방식대로 정리해두어야 나중에 까먹어도 쉽게 다시 이해할 수 있을 것 같아 정리했다... 로 시작했지만, 사실 이번 글은 나 혼자 클로저를 이렇게 저렇게 따라해보며 이해해가는 글에 가깝다. 어떤 개념을 배울때 나에게 가장 중요한건 나의 언어로 정리하는게 가장 중요하다. 내가 클로져를 한 마디로 정의하자면 '생성시점을 기억하는 폐쇄공간'으로 정의 할 것 같다. 클로져를 공부하다보면 스코프(Scope), 스코프 체인(Scope Chain), 실행컨텍스트(Execution Context), 어휘적 환경(Lexical Environment) 등 부수적으로 공부해야할 말들이 굉장히 많이 나온다. 때문에 클로져에 대한 정리를 하려다가 부수적인 공부도..

정리노트: Javascript에서 this란 무엇일까?

자바스크립트의 기본부터 천천히 공부하고 있다. 공부한 내용을 나만의 방식대로 정리해두어야 나중에 까먹어도 쉽게 다시 이해할 수 있을 것 같아 정리했다. 해당 유튜브를 보고 따라하며 작성하였다. 핵심1. this는 '자신이 속한 객체를 가리키는 변수' 이다. 핵심2. this는 자신을 '호출'하는 방법에 따라 다른 값을 가리킨다. var someone = { name: 'KMS', someFunction: function() { console.log(this); } } 위와 같은 객체를 하나 만들어, 여러 케이스를 접해보며 this를 알아가보려한다. someone이라는 객체는 someFunction이라는 속성을 가지고 있으며, 이 속성엔 this를 콘솔에 찍는 함수가 담겨있다. // case 1 someo..