목록전체 글 (291)
거의 알고리즘 일기장
저번주에 퇴근하려는데.. 갑자기 이런 에러가 생겼다. 그 당시에 에러에 대해서 명확히 정의하기가 힘들었어서, 다른 rn 개발자들은 이 글을 보고 바로 퇴근하셨으면 좋겠어서 올린다. 에러상황 브라우저: 정상작동 ios: 정상작동 android: network request failed error mac os terminal: gql codegen시 graphql codegen Unable to verify first certificate 접근 왠지 인증서 문제같은데.. 브라우저랑 ios에서는 정상작동하니까 확신을 하기가 힘들었다. 그러던중 아래의 링크를 발견했다. 안드로이드에서만 network request failed error 1. flipper에서 network plugin 이슈일 경우 x 이건 내 ..
프로젝트의 스택사항 react native typescript apollo client Intro 지난 몇년간 프론트에서의 테스트에 대한 발표가 쏟아져 나왔고 핫한 주제였다. 그 당시엔 막 개발을 배우는 단계였기 때문에 아직 때가 아니라고 생각해서 넘어 갔었다. 하지만, 이제 때가 왔다. 테스트가 왜 필요할까? 테스트를 왜 작성해하는지에 대한 이유는 정말 많다. 리팩토링시에 필수적 요소이다. 내 코드에 대한 믿음을 가질수 있다. 예기치 못한 사이드 이펙트에 대한 디버깅이 편할수 있다. 무엇을 테스트할까? 테스트를 하는 궁극적인 이유는 요구되는 사항에 맞춰 프로덕트가 정확하게 동작할까? 이다. 그렇다면, 프론트에서의 요구되는 사항에 맞춰 프로덕트가 정확하게 동작이 무엇인지 안다면 무엇을 테스트할지도 보일것..
이제까지 나의 경우, ref를 prop으로 넘기는 일은 거의 없었다. 대부분 밑의 코드처럼 1. ref를 쓰는 컴포넌트의 상단에 ref 선언후 사용 2. hook에 ref 선언후 가져와서 사용 하지만, 최근에 시각적 테스트를 위해 storybook을 도입하게 되면서 구조가 변경이 되었다. 이로 인해 prop으로 ref를 내려줄 일이 생겼다. 그냥 prop에다가 ref를 내려주면 안되나여?? 다른점이 뭐임? ref는 prop으로 내려줄수 없다. 그 이유는 react 공홈에서 찾을 수 있었다. refs는 전달되지 않는다는 것입니다. 그것은 ref는 prop이 아니기 때문입니다. key와 마찬가지로 ref는 React에서 다르게 처리합니다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아니라 가장 ..
Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기 이 글을 참고하여 yarn berry와 workspace를 이용한 monorepo 구축을 해봤습니다. vscode를 사용한다고 가정하고 진행하겠습니다. 사전지식 모노레포? 모노레포에 대해서는 저번에 작성한 글에 있으니 참고하시면 좋을 것 같습니다. yarn berry yarn berry는 npm, yarn1 과 같은 package manager입니다. 기존 npm, yarn1에서 사용하는 node_module의 단점을 해소하기 위해 만들어졌습니다. 여러 특징이 있는데, 간략하게만 적자면 1. pnp 지원 pnp는 plug&play의 약자로 기존의 node_module 방식과 다르게 pnp.cjs 파일로 dependency를 관리하고..
구현 방법 1. top부분은 collapse 되는 component는 absolute이다. 2. vertical scrollview는 top부분만큼 top padding을 준다.
graphql이란? A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. 간단히 요약하면 1. ..
jsx란? react component안을 보면 html tag처럼 생긴걸 볼수 있다. jsx는 javascript의 확장 문법으로, ui가 어떻게 생겨야 하는지 간단히 작성할수있다. //예시 import React from 'react'; const Test = () => { //return안에 있는 html tag같은게 jsx return ( ) } export default Test; JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. 한문장으로 정의하자면 이렇다. ( JSX 이해하기 머릿글이다.) jsx는 그냥 React.createElement(...args)을 우리가 보기 편한 형태인 html tag형..
error log [!] /bin/bash -c set -e #!/bin/bash # Copyright (c) Facebook, Inc. and its affiliates. # # This source code is licensed under the MIT license found in the # LICENSE file in the root directory of this source tree. set -e ... xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist Use `sudo xcode-select --switch path/to/Xcode.app` to specify the ..