React-Native에 Recoil 추가하기 (v0.70.0

Recoil은 React를 위한 상태관리 라이브러리입니다. React Native 프로젝트에 Recoil을 추가하는 방법에 대해 알아보겠습니다. 설치하기 시작하기 또는 파일에 아래와 같이 RecoilRoot…

React-Native i18n(다국어지원) 구현하기 (with Typescript)

React Native에서 i18n(다국어지원)을 설정하는 방법에 대해서 알아보겠습니다. react-native-localize, i18n-js를 사용합니다. 설치하기 0.6…

즐거웠던 넥스터즈 21기 후기

8주간의 넥스터즈 21기 활동이 얼마전에 마무리되었습니다 🎉 충분히 길다고 생각했었는데, 순식간에 지나가버려서 당황스럽네요 ㅎ.ㅠ 많은 기대를 했고, 기대한 것보다 훨씬 많이 얻어갈 수 있는 좋은 시간이었습니다 😄 👀 넥스터즈? 넥스터즈는 IT…

[넘블] 다른 색깔 찾기 게임 챌린지 해설/회고

이번에 좋은 기회로 넘블에서 리액트 챌린지를 맡았습니다. 링크 (넘블은 IT…

마케터 ___의 일을 읽고

…

Nest.js 프로젝트 견고하게 구조화하기 1 - Config, Providers

이번 글에서는 꽤 오랫동안 NestJS를 사용하면서, 제가 만든 대부분의 프로젝트에서 사용중인 구조를 공유해보도록 하겠습니다. NestJS를 처음 접하셨거나 구조가 뭔가 애매하다고 느끼는 개발자분들에게 도움이 됐으면 좋겠습니다 😄 Before…

자연어처럼 읽히는 코드 작성하기

…

TypeORM Migration 작성 요령

소개 MIgration이란? 데이터베이스 스키마에 대한 변경 이력을 그때그때 남겨놓은 파일입니다. 다음과 같은 효과가 있습니다. 특정 시점으로 되돌리기 쉬움 변경 이력을 누구나 볼 수 있게 됨 cli…

React Facebook Login 페이스북 로그인 간단하게 구현하기

페이스북 로그인, 어떻게 구현해야할까? 페이스북 개발자 사이트에 들어가보면 페이스북, 인스타그램 관련 기능을 붙이기 위한 SDK들이 제공됩니다. 이 SDK…

Factory Pattern 개념부터 적용까지

안녕하세요! 오늘은 Factory 패턴과 DDD의 factory에 대해서 알아보고, Typescript로 구현해보겠습니다~ 관련 개념: Template, Abstract Factory, Prototype, Builder Pattern Factory…

PICKK iOS 앱스토어 리젝 해결 일지

최근 개발중인 PICKK 앱이 조만간 플레이스토어/앱스토어 출시를 앞두고 있습니다. iOS 심사가 까다롭기로 소문나서 걱정했는데, 리젝 사유가 명확하고 피드백이 빨라 무난했습니다 :) PICKK iOS…

React-Native Firebase Analytics 설정 팁!

Firebase? Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 입니다. Dynamic Link, Cloud Messaging…

좋은 코드 작성하기 (feat. 가독성, 생산성)

…

React-Native Kakao Login 카카오 로그인v2 구현하기 (추가)

카카오 로그인, 어떤 라이브러리를 사용해야할까? kakao developers 페이지에 들어가보면 각종 카카오 서비스 관련 기능을 붙이기 위한 SDK가 제공된다. 이 SDK…

유용한 vscode extension 10가지

소개 vscode의 매력은 여러가지 extension들을 통해서 쉽고 빠르게 커스터마이징할 수 있다는 점인 것 같습니다. 제가 유용하게 사용중인 10가지를 소개해보겠습니다~ 1. Eslint 추천도: 5 javascript library인 Eslint…

git add -p 사용법 (y, n, q, s, e)

소개 git에 대한 개념과 기본 명령어들은 물론 숙지해야겠지만, 실제로 활용할 때는 GUI가 제공되는 툴을 사용하는 것이 더 좋다고 생각합니다. GUI가 CLI 보다 훨씬 빠르고, 직관적이고, 실수할 여지가 적기 때문입니다. 저도 git commit…

Next.js dev server 멈추는 현상 해결하는 법

위 사진처럼 Next.js의 dev 모드에선, 특정한 경로에 대한 request가 들어오면 dev server가 해당 페이지를 build해서 제공한다. 일정 시간이 지난 후부터 dev server가 browser의 request…

RN Gesture Handler : Handler의 상태 (3)

종류 UNDETERMINED 초기값이다. gesture 인식을 대기하는 중인 상태다. FAILED Handler가 touch를 인식했으나, 활성화(activated)되지 못한 상태다. 이후 로 전환된다. BEGAN Handler가 touch…

RN Gesture Handler : Gesture Handler란? (2)

소개 Gesture handler는 RNGH의 핵심 block이다. 이를 통해 우리는 Javascript + React Component로 Native touch system을 구현하고 조작할 수 있다. 각 handler는 하나의 gesture(pan…

RN Gesture Handler : 시작하기 (1)

소개 React Native의 기본 터치 시스템인 Gesture Responder System을 대체한다. 차별점은 성능 및 Native Component의 가짓수이다. 제공하는 기능 Gesture Handler…

git 협업 기본 가이드 (명령어 & 활용)

이 글에서는 git의 기본 명령어들에 대해서 정리하고, 협업시 지켜야할 기본 규칙들에 대해 설명해 보겠습니다. Git을 왜 사용하나요? (이제는 모두가 당연하게 git을 사용하기 때문에, 다른 버전관리 시스템과 git…

SEO독학 2장 - head 태그 SEO 대응하기

HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크, 파비콘, 메타데이터 등을 포함합니다. 제대로 정의되지 않은 HEAD는 웹페이지 SEO…

SOLID 원칙 : React에 적용해서 생각해보기

개발자라면 누구나 고도화된, 좋은 코드를 작성하고 싶어할 것입니다. 하지만 모든 코드에 대해 미래에 추가될 변경 사항, 다른 모듈들과의 관계, 가독성등을 종합적으로 고려하는 것은 매우 까다로운 일입니다. 또, 생산성과 확장성이 trade-off…

Express.js 서버 개발 첫걸음 딛기

express.js는 가장 유명한 Node.js기반 웹프레임워크다. 이미 조약하게나마 몇번 써본 경험이 있기 때문에 Hello World는 건너 뛰고, 프로답게 사용하기 위한 방법/팁들을 배우고 정리해보겠다. Bulletproof node.js…

핔 크롤러 테스팅 도입기

핔 크롤러가 뭔가요? 핔 서비스에서 사용되는 아이템의 이름, 가격, 옵션, 품절 여부, 추가 금액등의 정보들을 크롤링합니다. Node.js + Typescript로 작성했고, Cheerio를 사용하며, Vercel Serverless…

Next.js 10, 뭐가 바뀌었을까?

Nextjs 공식 블로그의 Next.js 10를 번역 및 요약한 글입니다.의역 및 개인적인 의견이 많이 추가될 예정입니다. 와! Next.js 10! 지난 Next conf와 함께 Next.js 10이 공개되었다. 언제나 실망시키지 않는 Vercel…

디자인시스템 참고 자료 모음

Design system 만들기 쏘카 - 쏘카프레임 구축 배경과 과정 semantic…

아토믹 디자인(Atomic Design) 적용기 : 한계점, 단점

…

ECMAScript란? 개념부터 디테일까지

자바스크립트를 사용하는 사람이라면 ES6 표준, ES5, ES2020등의 단어를 들어본 적이 있을 것이다. 나는 처음으로 들은 udemy 강의에서 arrow function, let, spread operator 등이 ES…

리액트 단점, 리액트를 사용하면 안 되는 이유

ender minyard의 Stop Using React…

Figma에서 SVG 추출하는법

요즘 Figma 덕분에 디자인 진입장벽이 많이 낮아졌죠. 개발자들도 이제 간단한 페이지 디자인 제작 및 수정 정도는 직접 할 수 있는 시대가 온 것 같습니다. 디자인을 구현하다보면 svg나 png 같은 파일이 필요한 순간이 많은데요, Zeplin…

SEO독학 1장 - Semantic HTML5 tags와 싸워 이기는 법!

HTML 태그들은 브라우저가 컨텐츠를 어떻게 보여줘야할지 알려주기 위해 사용됩니다. 일반적인 HTML 태그들은 내부의 컨텐츠가 어떤 이고, 해당 페이지에서 어떤 역할을 맡고 있는지에 대해선 알려주지 않습니다. 하지만 HTML…

ios::sync_with_stdio(false), cin.tie(NULL) 설명 및 사용법

1. ios::sync_with_stdio(false); C 표준 stream과 C++ 표준 stream의 를 끊습니다. 기본적으로, 모든 표준 stream들은 동기화 되어있습니다. 그래서 우리는 C와 C…

<cstdio>, <iostream>, <stdio.h> 설명 및 차이점

<cstdio>란? cstdio는 의 약자로, C언어의 와 같습니다. 입/출력과 관련된 C함수들을 포함한 헤더파일입니다. (, , , ) C++의 <stdio.h>와 뭐가 다른가요? 기능상의 차이는 없으나 stdio.h는 를 사용하고 cstdio…

초보 리액트 개발자를 위한 팁 13가지

동아리에서 코드리뷰를 하며 자주 알려드렸던 내용 13가지를 뽑아봤습니다! 1. CSS의 길이 단위 참고 링크 스타일링을 할 때 px, vh, rem…

Nextjs 프로젝트에 Google Analytics 깔끔하게 붙이기

유저들의 데이터를 수집 및 분석하기 위해서 구글 애널리틱스 도입은 필수죠. next-ga 라이브러리는 글로벌 적용으로 automiatic static optimization을 opt out 하므로 사용하지 않고, react-ga를 사용하겠습니다.…

Nextjs+Typescript 프로젝트에 styled-components 추가하기

설치 styled-components를 설치합니다. : styled-components의 type definition 모듈입니다. (참고 : @types라이브러리란?) : className에 해당 component…

React+Typescript 절대경로 import 설정하기

상대 경로를 사용하면 package 구조가 깊어질 수록 파일 간의 관계를 파악하기 어려워지고, 파일 이동시 귀찮게 경로를 수정해야 합니다. 예시 절대 경로를 사용하면 depth…

Next.js "window,document is not defined" 해결하는 법

Next.js 개발환경에서 window object를 사용할 때, document is undefined, Cannot read innerWidth of undefined 등의 에러메세지를 마주할 때가 있다. Next.js…

Django migration 롤백, 재생성 방법

feature 브랜치에서 작업하던중 develop 브랜치에 새로운 변경 사항들이 생겼다. 확인해보니 두 브랜치에서 같은 app내의 모델을 수정해, 넘버링이 겹치는 문제가 생겼다. 😅 remote 브랜치의 migrations를 보존하면서 local…

Query Parameter Hook 만들기

window.location.search를 읽어, 사용하기 좋은 object 형태로 만들어야 한다. 이를 구현할 수 있는 여러 라이브러리(react-router, react-router-dom, use-react-router…

Scroll Direction Hook 만들기

헤더가 컨텐츠를 가리지 않게 하기 위해, Scroll Direction에 따라 유동적으로 나타나도록 만들 필요가 있었다. EventListener와 state…

CI, CD 제대로 정리하기

CI/CD…

TypeScript 기초 다지기

Typescript에 대한 기본적인 배경 지식과 사용법을 알아보자 Overview 프로그래밍 언어입니다. Compiled Language입니다. 전통적인 Compiled Language와는 다른 점이 많아서 Transpile…

객체 지향의 사실과 오해를 읽고

…

여러가지 기술스택과 그 용도

아는게 전혀 없기 때문에 원티드의 채용공고들을 보며 현업에서 사용되는 기술스택들을 파악했다! 다음은 레이블스토어에서 사용중인 기술스택 목록이다. TypeScript React.js, Next.js : Front-end GraphQL(Apollo…

하늘옷장앱 개발 + CEOS 신촌 9기 활동 회고

3월부터 시작한 CEOS 활동이 드디어 마무리 되었습니다. 🎉 길다면 길고 짧다면 짧은 시간이었지만, 정말 많은 일이 있었습니다. 도, 도 처음 접해봤는데 좋은 팀원들과 함께하니 잘 배울 수 있었던 것 같아요! CEOS? CEOS는 신촌연합IT…

[React Native] Failed to capture fingerprint of output files for task ':app:processDebugResources' property 'sourceOutputDir' (fixed)

SkyCloset 릴리즈버전 테스트를 위해 를 입력했는데 아래 에러메세지와 함께 앱빌딩이 종료됐다. 에러내용 해결 구글링 결과 다음 방법으로 해결가능하다. 라이브러리를 추가해서 이 update 됐는데 가 check하지 못 했고, clean…

[React Native] Android Release버전에서 fetch가 작동하지 않는 현상 (해결)

오늘 SkyCloset의 Release버전을 처음으로 테스트해봤는데, SplashScreen에서 HomeScreen으로 화면전환이 되지 않았다. 원인을 살펴본 결과 함수에서 isLoaded state를 true…