분류 전체보기
api 요청마다 header에 token 넣기
처음 실무를 막 시작했을 때, 새로운 웹사이트를 처음부터 만들어야 했다. 프로젝트를 몇개 해왔지만 이제 실무를 시작한 주니어 개발자였고, 회사에 프론트엔드 개발자는 나 혼자였다. 초반에 많은 시행착오를 겪었었는데, 그 중 하나가 api 요청을 할 때 header에 token을 넣는 것이었다. 간단하고 기본적인 것이지만 처음에는 몇시간을 헤맸었는데, 지금은 어떻게 처리하고 있는지 기록해본다. 일반적으로 클라이언트에서 api 를 호출해서 데이터를 불러오거나 데이터를 보낼때, header에 token을 넣어 요청을 한다. 왜 이렇게 token을 넣어서 api 를 호출해야 할까? 헤더에 token을 넣는 이유 API 요청시 헤더에 token을 넣는 것은 보안을 유지하기 위해서다. 클라이언트에서 허가된 사용자가 ..
Agile 방법론 (애자일 방법론)
팀단위의 소프트웨어 개발을 하게 되면 '애자일'이라는 주제를 자주 접하게 된다. 이 애자일 이라는 것이 무엇인지 알아보기로 하자. 1. 애자일(Agile)이 탄생하게 된 이유는? 애자일이라는 용어 자체는 '재빠른', '민첩한' 등의 뜻을 가지고 있고, 이는 개발 방법론 중의 하나다. 애자일 용어자체의 뜻을 생각해보면 개발을 민첩하게 한다? 이런 의미인가 싶다. 결론부터 말하자면 소프트 웨어를 개발함에 있어서 유연하고 빠르게 대처하며 일하는 방식이라고 말할 수 있다. 과거의 개발방식은 요구사항을 분석하고, 요구사항에 맞게 설계한 후에 개발하고 배포하는 단계로 진행되어 왔다. 설계한 순서대로 일이 진행되고 그 과정의 점검은 띄엄띄엄 이루어진다. 커뮤니케이션의 오류가 있더라도 그 오류를 바로 알아차리기엔 쉽지..
useEffect hook
useEffect 함수는 리액트 컴포넌트가 렌더링 될때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. component가 mount, unmount, update 됐을 때 설정해 놓은 특정 작업을 처리할 수 있어서 리액트 기반의 어플리케이션을 만들 때 굉장히 유용하게 많이 사용된다. useEffect이 사용되는 시점을 중요하게 두고 프로젝트에 사용하다보면, 어떻게 적절히 사용할 수 있는지 더 깊게 알게 될것이다. useEffect는 기본적으로 다음과 같은 형태를 가지고 있다. useEffect(function, deps) - function : 수행하려는 작업 - deps : 배열의 형태로, 구독하고자 하는 값 또는 빈배열 1. Component가 mount 되었을 때 (처음 페이지가 렌더링 될때..
React Native Vector Icons 설정
React Native로 애플리케이션을 만들 때 icon은 필수적이다. react native에서 icon을 사용하려면 몇가지 설정이 필요하다. 1. React Native Icon 설치하기 npm i react-native-vector-icons 2. Xcode 설정하기 (iOS 설정) 프로젝트의 ios 폴더 안의 .xcworkspace 를 Xcode로 실행한다. 해당 프로젝트 이름의 폴더에 new folder를 추가하고 이름을 Fonts로 한다. 새롭게 추가한 Fonts 폴더안에 node_modules/react-native-vector-icons/Fonts 하위에 있는 모든 폰트를 추가한다. (중요!) 3. Info.plist 파일 설정 해당 프로젝트의 ios 폴더 안의 Info.plist 파일을 ..
React Native 초기 설정
1. React Native 란 리액트 네이티브는 오픈소스 라이브러리로, 이를 통해 Android 와 iOS 애플리케이션을 제작할 수 있다. React Native를 사용하면 React Component를 사용하여 javascript 코드에 대한 View를 만들수 있다. 런타임에 React Native는 Component에 해당하는 Android, iOS 뷰를 생성한다. 리액트 네이티브는 앱을 구축하는데 사용할 수 있는 필수 요소들을 제공하고 있고, 이러한 구성 요소는 리액트 네이티브의 Core Components요소라 한다. 리액트 네이티브의 Core Components는 앞으로 더 설명을 하려한다. React native core components는 여기 공식문서에서 자세히 확인할 수 있다. 리액트..
SPA (Single Page Application)
SPA를 이해하려면 우선 서버와 클라이언트의 관계를 이해해야 한다. User가 서버에 html 을 요청하면 서버에서 모든 html을 보내주었던 방식이 전통적인 서버 사이드 방식이다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아 렌더링을 하면 속도가 느려지고 트래픽도 낭비된다. 그래서 최근에는 클라이언트 사이드 방식으로 우선 애플리케이션을 브라우저에 로드한 다음 필요한 데이터만 서버에서 전달받아 다시 렌더링을 한다. 이러한 클라이언트 사이드 방식은 SPA에서 사용되는 방식이고, SPA 구현에 리액트가 사용될때 라우터가 필요하다. 라우터를 이해하기 위해 먼저 SPA가 무엇인지 알아보겠다. 1. SPA 란 SPA는 Single Page Application 의 약자로, 페이지가 1개인 어플리케이션이란..
CORS (Cross-Origin Resource Sharing)
1. CORS 란 프로젝트를 하면서 API 서버와 통신을 할 때 마주치게 되는 이슈 중의 하나가 이 CORS 정책 위반 에러다. CORS는 Cross-Origin Resource Sharing 의 줄임말로, '교차 출처 리소스 공유' 라고 해석한다. 이렇게 단순히 직역을 하게 되면 무슨 의미인지 도통 감이 안오는데 내용을 자세히 알게되면 이 말을 충분히 이해할 수 있다. 우선 단어를 하나씩 쪼개서 알아보기로 하자. 1.1 Cross-Orgin 이라는 게 무슨 뜻이지? 우선 Origin은 출처인데, 이는 서버의 위치라고 생각할 수 있다. 즉 URL을 말하는 것이고, 이 URL은 Protocol과 Host, path와 포트 번호로 이루어져 있다. 포트 번호는 출처에서 생략이 가능한데, 이는 프로토콜의 기본 ..