코드노트

RN을 공부하면서 처음부터 막혔던게 CLI환경 구축이였던것 같다. 예전 강의들을 보면서 공부를 하다보니 버전문제로 계속 에러들이 발생했다.. React-Native CLI 환경을 구축하면서 만났던 에러들과 해결방법들을 정리해보려고 한다. [React Native] Mac에서 React Native CLI 환경 구축부터 실행까지 2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Ho myung-ho.tistory.com 이 블로그를 참고하여 실행 순서에맞게 작성하였다. 순서 1. ..

axios는 HTTP 클라이언트 라이브러리로, HTTP 요청을 보내고 응답을 받는 것을 간단하게 처리할 수 있다. 이번 사이드프로젝트를 하면서 axios에서 인터셉터를 사용하여 요청/응답을 가로채는 기능을 정리해보려고 한다. 보통 요청 전과 후에 로그인 후에 헤더에 Authorization을 담는 작업들을 할 수 있다. api요청마다 이렇게 axios를 사용해서 인터셉터를 만들고 사용하게 되면 각 요청마다 정의하지 않고 사용할 수 있기 때문에 참 좋은 라이브러리인것 같다! 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; ..

취준을 하며 면접도 봤고, 사이드프로젝트도 진행중이다. 사이드 프로젝트를 진행하면서 TDD를 접목시키면서 STORYBOOK, JEST를 사용하며 손에 익히는 가운데 원티드에서 이번에 클린코드 관련 프리온보딩을 한다기에 신청을 하였다. 1주차 에서는 클린코드란 무엇인가? 그리고 스타일가이드, 멘탈 모델.. 개선할 점들에 대해서 배우게 되었다. 이러한 것들을 다시 한번 정리해보려한다. 내가 알던것들이 전부가 아니였고... 내가 아는것도 맞는게 아니였다...! 클린코드란?- 처음 클린코드란에 질문에 수백명이 많은 프론트개발자들은 각기 생각하는 클린코드가 달랐다. 크게보면 같은것 같기도 하다. - 누구나 처음봐도 이해하기 쉬운 코드, 즉 직관적인 코드 - 확정성이 좋은 코드 (유지보수가 좋은?) - 가독성이 좋..

GraphQL란? GraphQL은 페이스북에서 개발한 데이터 쿼리 및 조작 언어이다. 클라이언트가 필요한 정확한 데이터를 서버에 요청할 수 있다. RESTful API는 GET 메서드 등을 사용하여 서버에 요청하여 정해진 데이터를 받게 되지만 GraphQL을 사용하게 되면 클라이언트가 서버에서 받아야할 데이터의 구조를 명시할 수 있어 필요한 데이터만 받아 사용할 수 있게 해준다. GraphQL은 REST의 부족한점을 보완하기 위해 나왔다. 주요 특징과 차이점을 살펴보고 상황에 맞게 사용할 수 있으니 알아보자! GraphQL의 주요 특징 및 GraphQL과 차이점 데이터 오버페칭과 언더페칭 문제 해결 - RESTful API REST는 각 리소스를 고유한 URL로 표현하며, HTTP 메서드(GET, POS..

10798번 세로읽기 문제 더보기 문제 아직 글을 모르는 영석이가 벽에 걸린 칠판에 자석이 붙어있는 글자들을 붙이는 장난감을 가지고 놀고 있다. 이 장난감에 있는 글자들은 영어 대문자 ‘A’부터 ‘Z’, 영어 소문자 ‘a’부터 ‘z’, 숫자 ‘0’부터 ‘9’이다. 영석이는 칠판에 글자들을 수평으로 일렬로 붙여서 단어를 만든다. 다시 그 아래쪽에 글자들을 붙여서 또 다른 단어를 만든다. 이런 식으로 다섯 개의 단어를 만든다. 아래 그림 1은 영석이가 칠판에 붙여 만든 단어들의 예이다. A A B C D D a f z z 0 9 1 2 1 a 8 E W g 6 P 5 h 3 k x 한 줄의 단어는 글자들을 빈칸 없이 연속으로 나열해서 최대 15개의 글자들로 이루어진다. 또한 만들어진 다섯 개의 단어들의 글자..

2566번 최댓값 문제 더보기 문제 과 같이 9×9 격자판에 쓰여진 81개의 자연수 또는 0이 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 행 몇 열에 위치한 수인지 구하는 프로그램을 작성하시오. 예를 들어, 다음과 같이 81개의 수가 주어지면 3 23 85 34 17 74 25 52 65 10 7 39 42 88 52 14 72 63 87 42 18 78 53 45 18 84 53 34 28 64 85 12 16 75 36 55 21 77 45 35 28 75 90 76 1 25 87 65 15 28 11 37 28 74 65 27 75 41 7 89 78 64 39 47 47 70 45 23 65 3 41 44 87 13 82 38 31 12 29 29 80 이들 중 최댓값은 90이고, 이 값..

2738번 행렬 덧셈 문제 더보기 문제 N*M크기의 두 행렬 A와 B가 주어졌을 때, 두 행렬을 더하는 프로그램을 작성하시오. 입력 첫째 줄에 행렬의 크기 N 과 M이 주어진다. 둘째 줄부터 N개의 줄에 행렬 A의 원소 M개가 차례대로 주어진다. 이어서 N개의 줄에 행렬 B의 원소 M개가 차례대로 주어진다. N과 M은 100보다 작거나 같고, 행렬의 원소는 절댓값이 100보다 작거나 같은 정수이다. 출력 첫째 줄부터 N개의 줄에 행렬 A와 B를 더한 행렬을 출력한다. 행렬의 각 원소는 공백으로 구분한다. 예제 입력 1 3 3 1 1 1 2 2 2 0 1 0 3 3 3 4 4 4 5 5 100 예제 출력 1 4 4 4 6 6 6 5 6 100 - 2차원 배열을 사용하는 문제이다. 프로그래머스로만 코테 문제..

프로그래머스에서 코딩테스트를 진행하다가 시간초과가 나왔다. 먼저 문제에서 배열을 순회해야했었고 for문을 통해서 작성하고 for문 안에서 indexOf를 순회했다. 배열의 길이가 길어질수록 각 호출마다 indexOf를 연산하게 되면서 O(n)의 시간복잡도를 가지게 된다. 문제를 풀다가 Map객체를 활용하는 방법이 효율적이게 작용하는걸 알게 되었다. 더보기 문제설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe..

프로젝트에 채팅기능을 만들려고한다. WebSocket을 사용하여 실시간 통신을 하지만 WebSocket 이전의 양방향 통신 Rest 방법도 함께 정리해보려고 한다. Rest는 일반적으로 요청을 하고 서버에서 응답받는 방식이다. WebSocket을 많이 들어보고 알고는있지만 REST API와는 어떤것들이 다를까? 가장 큰 차이는 접속을 유지하고 있는지의 차이가 있다. REST 방식은 요청을 하고 응답을 받는다. 그러나 WebSocket은 한번 요청을 하게되면 그 뒤로 계속해서 업데이트 해주는 방식의 API이다. 구독형 API라고도 한다. 배달 어플을 생각해보자. 고객과 배달기사는 서로의 위치를 알려면? REST 고객 -> 서버에 배달기사의 위치를 요청하고 서버에서 배달기사의 위치를 받아서 받아볼 수 있다...

이번 프로젝트를 하면서 정말 많은걸 경험하고 배우게 되었다. 규모가 크기도 했지만 SSR, CSR 관련해서도 다시한번 정리가 되었고, 프로젝트가 끝난 후 QA를 진행하고 생각하지도 못했던 에러들을 만나고 수정했다. 그 중에서도 처음에는 원인을 찾지 못했던 에러가 있다. - 웹페이지의 일부분을 코드 스니펫으로 나타나고 있었다. 장시간동안 페이지를 켜두거나 재시동 또는 다시 시작을 한 후 사용하던 페이지가 열리면 이렇게 에러가 발생했다. 만약 router로 다시 그 페이지에 접근하게 되더라도 이러한 문제가 발생했다. SSR로 작업을 했지만 SSG로 빌드되었고, 정적인 파일로 동작을 하다보니 미리 서버측에서 가져온 HTML파일을 생성하다보니 그 뒤에는 서버와 연결이 되지 않아서 나오는 문제인걸로 파악했다. 우..