본문 바로가기

전체 글

(24)
React Native에서 웹뷰(react-native-webview)를 사용할 때, 고려해야할 것들(#삽질, #Next.js) 들어가며 이 글은 리액트 네이티브에서 웹뷰만으로 서비스 개발을 하다가 큰 문제에 부딪혀 프레임워크 자체를 변경하게된 일을 작성한 회고록입니다. Web-View만으로 리액트 네이티브 개발을 생각중인 분들에게 도움이 될 것이라 생각합니다. 아래부턴 간결한 문장을 위해 평어로 진행하겠습니다. Web-View 개발을 선택한 이유 내가 만들고자 하는 서비스는 소셜로그인으로 회원가입이 되고, 카카오톡처럼 핸드폰의 연락처를 가져와 친구를 만들고, 쇼핑에 결제까지 되는 서비스이다. 그래서 SSR, CSR 등 각 페이지에 맞는 렌더링 기법을 선택할 수 있는 Next.js를 활용하면, 빠른 속도 경험을 유저에게 제공할 수 있을 거라 생각했고, Next.js를 웹 프레임워크로 선택했다. 이렇게 web을 만들고, 해당 web..
프론트엔드 테스트는 어디서부터 어디까지, 어떻게, 꼭 해야할까? (+Jest, Puppeteer, Cypress) 들어가며 이 글에선 프론트엔드의 테스트 코드에는 어떤 것들이 있으며, 테스트 코드 작성법, 좋은 테스트란 어떤 것인지, 나아가 리액트에서는 어떻게 적용할 수 있는지를 설명할 것입니다. 저와 같은 문제를 겪은 분들께 도움이 되는 글이 될 것이라 생각합니다. 간결한 문장을 위해 평어체로 진행하겠습니다. 내가 겪은 문제 나는 테스트 코드를 작성하려고 할 때면, 어디까지 Mocking을 해야하는지, 파라미터 테스트 범위는 어느 정도가 적합한지, 테스트 단위를 얼마나 나눠야하는지 막막했다. 그리고 이렇게 짜는게 맞는건지, 생각할 수 있는 케이스는 다 해본 것 같은데도 불구하고 테스트 커버리지가 높지 않아 고민하기도 했다. 그러다 최근 우테코에 지원해 4주간의 프리코스를 진행 중인데, 여기서 또 테스트와 만나게 되..
OAuth 로그인 요청의 주체는 어디일까? (클라이언트(React)? 서버(Spring)?) 들어가며 이번에 프로젝트를 진행하면서 서버측 친구와 의견이 맞지 않았던 적이 있다. 바로 OAuth 요청의 주체가 누가 되느냐였다. 나는 클라이언트에서 해야한다는 입장이었고, 서버측 친구는 서버에서 요청을 해야한다는 입장이었다. 서버는 spring으로 개발을 하고 있는데, spring security의 OAuth를 제대로 쓰려면 서버에서 진행을 해야한다는게 친구의 주장이었다. 나도 초반에는 오히려 OAuth 서버 요청을 프론트에서 노출하지 않고, 우리 서버로 한 번 감싸서 진행하는게 더 안전할 것 같다는 생각에 동의를 하고 진행을 했었다. 하지만 뭔가 개발을 해나갈수록 끼워맞추기로 개발을 해나가게 되는 느낌이었다. 서버가 주체가 되면 끼워 맞추기가 되는 이유? 그 이유는 첫 번째, [1]프론트에서 우리측..
[Agile, 스토리포인트] 일정을 추정하는 것이란 얼마나 어려운 일인가. 들어가며 이 글은 애자일 방법론을 팀에 도입했으나 생각대로 되지 않은, 저의 이야기를 담은 일종의 회고록이자 스토리 포인트(story point)에 대한 개념을 정리한 글입니다. 저처럼 스토리 포인트를 제대로 알지 못하고 쓰고 계셨던 분들에게 도움이 될 것이라 생각합니다. 간결한 문장을 위해 평어체로 진행하겠습니다. 팀이 겪은 문제 부끄럽지만 프로젝트를 진행한지 6주 째, 지금껏 한 번도 제대로 스프린트의 태스크를 전부 끝내본 적이 없다. 처음에는 욕심을 많이 냈던 것 같다. "이 정도는 할 수 있을거야" 라는 마음으로 제대로 된 팀의 velocity(팀의 생산성, 추후 설명 예정) 측정도 하지 않은채로 개개인의 일감을 관리했다. 하지만 이렇게 6주가 진행되자 문제가 보이기 시작했다. 뭔가 일은 하는 것..
[React Native] WebView 적용하는 방법(localhost 안될때,nsurlerrordomain) WebView를 어떻게 App에서 적용할 수 있는 건지 항상 궁금했었는데, 이번 프로젝트를 통해서 알게됐다. WebView란 웹 프로젝트 그 자체를 그냥 앱에서 띄우는 것이다. Naver도 WebView로 만들어진 앱으로 유명한데, 웹뷰는 즉, naver.com을 치면 나오는 화면을 그대로 앱에서 보여주는 것이다. React Native에서 적용하는 방법은 엄청 간단하다! import React from 'react'; import {WebView} from 'react-native-webview'; export default function Home() { return ( ); } 이렇게 해주면? 나도 네이버앱 완성이다!ㅋㅋㅋㅋ 다만 WebView를 보여줄 때, 고려해야할 점은 바로 Stack이다. A..
[Network] 5계층 Transport Layer(+TCP, UDP차이) 전세계에서 유일하게 특정지을 수 있는 컴퓨터 주소는 바로 IP이다. 그럼 그 안에서 프로그램을 특정지을 수 있는 번호는 무엇일까? 그것은 바로 PORT 번호이다. 참고로 이 둘을 합친 것을 Socket Address라고 한다. 그리고 Transport Layer에서의 주소는 포트번호로 쓰인다. 무슨 말인지 자세히 알아보자! 우리는 운영체제의 구멍(포트번호)을 통해서 그 프로그램과 대화를 시도한다. 하나의 컴퓨터 안에 여러 개의 소프트웨어가 있을 것이고, 여기서 운영체제는 어느 소프트웨어로 전송할지를 이 포트 번호(Transport Layer의 주소)를 보고 결정을 하게되는 것이다. TCP/UDP의 포트번호는 16비트로0~65,535안에 존재한다. 웹브라우저가 웹서버 접속할때 80번에 주로 접속하는데, 이..
[Network] Network Layer에 대한 깊은 이해하기(+IPv4, NAT, PAT, UDP, TCP) 저번 2계층에 이어 3계층 네트워크 레이어중에 가장 유명하고 인터넷의 근간이 되는 IP네트워크에 대해 알아보려한다. IP네트워크는 위처럼 패킷 단위로 전송된다. 1, 2, 3, 4의 순서로 패킷이 전송되지만 속도에 따라 도착하는 순서는 위처럼 달라질 수 있다. 이 순서를 맞춰주는 것이 TCP이고, UDP는 순서를 맞춰주지 않는다. TCP를 쓴다면 1,2,3,4로 도착할 것이고 UDP를 쓴다면 위의 그림과 같은 순서로 도착을 할 것이다. R들은 Router로서 특정 포트에서 받은 패킷을 다른 특정 포트에 전달한다. 라우터의 인터페이스란(inteface) 라우터 장치에서 줄이 꽂혀있는 포트를 뜻한다. 네트워크 계층에는 가장 기본이 되는 IP외에도 이를 도와주는 IGMP, ICMP, ARP 등이 있다. 게임을..
[Server] 2계층 MAC Layer (CSMA/CD, CSMA/CA 개념정리) OSI 2계층의 데이터링크는 LLC(Logical Link Control)와 MAC Layer(Media Access Control)로 나뉘게 된다. 그 중 MAC 계층의 네트워크 방식에 대해 알아보자. Channeliztion 프로토콜은 주파수를 이용한 복잡한 방법, 물리계층에 가까운 기법이다. Controlled-access 프로토콜은 소프트웨어적인 기법으로 예약방식 등이 있다. Random-access 프로토콜은 통상적으로 가장 많이 쓰이는 프로토콜이다. Random access 방식을 쉽게 설명해보자면 수많은 사람들이 동일 시간대에 인터넷을 쓴다. 하지만 동시에 그 많은 사람들의 데이터를 처리할 수 없기에 사람들이 데이터를 보낼 때마다 수학적으로 구간대를 주고 그 안에서 수가 배정되어 전송되는 통..