profile
꾸준하게..!!
태그 목록
전체보기 (63)JavaScript(13)react native(5)data structure(2)typescript(2)React(2)자바스크립트알고리즘(2)타입스크립트(2)CSS Layout(1)netlify(1)scope(1)git(1)sop(1)react-native-code-push(1)Expo Expo CLI vs React Native CLI(1)SDK location not found(1)정규표현식(1)underscore(1)let var const(1)완주하지 못한 선수(1)cors(1)웹팩(1)promise(1)credentials(1)codepipeline node ts(1)react-native 외부 앱 실행(1)react-native-webview 외부 앱 실행(1)Tree vs BinarySearchTree(1)React 이미지 미리보기(1)react portal 모달(1)react-native tab-view(1)higher-oder component(1)react native font(1)ScrollPager(1)linked list(1)react-native domain Error(1)AWS S3(1)Build failed with an exception(1)AWS Elastic Beanstalk(1)Page Not Found on netlify with React Router(1)reduxjs/toolkit(1)async-storage(1)shallow copy vs deep copy(1)안드로이드 이미지 깨져 보일 때(1)git commit 합치기(1)recursion(1)typescript + express.js + node.js 세팅(1)typescript-type(1)TDD(1)code-push(1)정규 표현식(1)netlify 배포(1)테스트 주도 개발(1)node s3(1)react redux(1)git commit 삭제(1)Bubble Sort(1)Insertion Sort(1)Merge sort(1)Quick Sort(1)타입스크립트 타입(1)node.js(1)git stash(1)객체 지향 prototype(1)mongoose(1)safe-area-inset(1)ESLint(1)Prettier(1)webpack(1)react 이미지 슬라이드 구현(1)redux-toolkit(1)React LifeCycle(1)eb https(1)브라우저 렌더링 과정(1)타입스크립트 객체지향(1)context(1)DOM(1)react webpack 설정(1)mysql(1)react @reduxjs/toolkit(1)반복문 promise(1)정규 표현식 정리(1)Image Slider 구현(1)Design Pattern(1)다른 도메인 쿠키 전송(1)eb 배포(1)asynchronous 비동기 프로그래밍(1)화살표 함수(1)react-native run-android error(1)sorting algorithm(1)stack or tab 스크린 이동 시 새로고침(1)HoC(1)withCredentials(1)Hash Table(1)ViewPagerAdapter(1)datastructure(1)Big O 시간복잡도(1)커밋 메세지 수정(1)netlify aws(1)https SSL(1)redux(1)
post-thumbnail

브라우저 렌더링 과정 이해하기

웹 브라우저에서 주소창에 google.com을 입력했을 때 어떤 일이 일어날까? 면접 질문으로 많이 나오는 질문이다.크게 두 가지 관점으로 나누어 볼 수 있다.하나는, 네트워크 관점이고 또 하나는 브라우저가 웹 페이지를 그리는 관점이다.점점 자세히 들여다볼수록 너무 복

약 11시간 전
·
0개의 댓글
post-thumbnail

TDD (테스트 주도 개발)

TDD란 Test Driven Development라는 약자로 테스트 주도 개발을 의미한다.테스트는 서비스의 품질 확인 및 버그를 찾는 데 사용할 수 있다. 내가 작성한 코드가 예상하는 대로 동작하는지 검증하고 확인하는 것이다.테스트 주도 개발은 무엇일까? 테스트 주도

어제
·
0개의 댓글

정규 표현식 정리

|표현식|의미|ex| ex 설명| |---|---|---|---| |^|텍스트의 시작|^hello|hello 텍스트로 시작되는 것을 의미| |$|텍스트의 마지막|hello$|마지막 텍스트 hello를 의미| |\$|$의 경우 문자열 끝을 찾을 때 사용 되기 때문에$를 일반 문자열로 바꿔주기 위해 \(역슬래시)를 사용|^\$|텍스트 $로 시작되는 것을 의미|...

2022년 6월 10일
·
0개의 댓글

React에 Redux Toolkit 사용하기

Redux Toolkit이란? Redux Toolkit은 redux에서 지원하는 개발 도구이다. 스토어 설정, 리듀서, 데이터 가져오기 등 Redux 로직을 작성하기 위해 권장되는 접근 방식이다. Redux Toolkit의 configureStore는 설정을 단순화하

2022년 5월 12일
·
0개의 댓글
post-thumbnail

AWS CodePipeline을 이용한 배포

사이드 프로젝트를 CodePipeline을 이용해서 배포해 보았다. 그 과정을 아래와 같이 정리해 보았다. CodePipeline으로 배포할 때 Source -> Deploy으로 바로 배포할 수 있지만 프로젝트에 Typescript를 사용했기 때문에 Source ->

2022년 5월 9일
·
0개의 댓글

Node에서 S3 이미지 저장 및 삭제

AWS S3 버킷 생성 및 권한 설정에서 이미지 저장 및 삭제는 권한(IAM 정책)을 부여했다.IAM 정책 생성시 받은 액세스 키(AWS_ACCESS_KEY), 시크릿 키(AWS_SECRET_KEY)와 S3 리전(AWS_REGION)을 .env에서 관리한다.ex)이미지

2022년 5월 7일
·
0개의 댓글
post-thumbnail

AWS S3 생성 및 설정

사이드프로젝트를 진행하면서 이미지 관리를 위해 S3를 사용하면서 알게된 정보를 정리해보았다.쉽게말해 AWS(Amazon Web Service)에서 제공하는 클라우드 파일 저장소이다.서버(EC2, ELB)만을 사용해서 파일을 저장을 하게되면 성능 및 여러 다른 문제들이

2022년 5월 6일
·
0개의 댓글
post-thumbnail

React 이미지 업로드 전 미리보기 기능

이미지를 미리 보여 주는 기능을 만들려고 생각했을 때 아래 두 가지 방법을 생각했다.이미지를 서버에 올리고 반환된 이미지 주소로 이미지를 미리 보여주는 방법이미지를 서버에 올리기 전 이미지를 미리 보여주는 방법두 번째 이미지를 서버에 올리기 전 이미지를 미리 보여주는

2022년 5월 4일
·
0개의 댓글

커밋 메세지 수정하기

변경된 커밋 메세지 해시 코드를 확인해 보면 해시 코드가 변경된 것을 확인할 수 있다. 때문에 서버에 아직 업로드되기 전에 사용하고, 개발자와 협업하고 있는 상황에서는 서버에 업로드된 history에는 사용하지 않는 것이 좋다.git log 확인최근 커밋 메세지를 변경

2022년 3월 24일
·
0개의 댓글

git stash

커밋을 하지 않고 스택에 잠시 하던 작업물을 임시로 저장할 수 있다.잠시 하던 작업물을 stash stack에 저장 후 다른 브랜치로 이동할 때 유용하다.stack 구조로 새로운 것이 위로 쌓이는 구조이다.위 명령어로 stash stack에 저장할 경우 타이틀 없이 저

2022년 3월 23일
·
0개의 댓글

typescript + express.js + node.js 세팅

install tsconfig.json 설정 .gitignore .gitignore 파일 생성 후 위와 같이 작성해 필요하지 않는 파일 들을 git에서 제외시킨다. 자동으로 재실행 시키기 package.json ESLint & Prettier 적용 .es

2022년 3월 20일
·
0개의 댓글

React Portal을 이용해 모달 구현

Portal 이란 부모 컴포넌트를 벗어나 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법이다.DOM은 트리구조로 부모와 자식 관계를 가지면서 렌더링 되는데 엘리먼트가 위치한 부모와 자식 관계의 구조 따라 z-index가 먹히지 않는 경우가 있다.아

2022년 3월 17일
·
0개의 댓글
post-thumbnail

React 이미지 슬라이드(infinite loop) 구현

To do 라이브러리 없이 아래 나열된 기능을 기준으로 이미지 슬라이드 구현을 해보았다. ``(다음) 버튼 클릭으로 슬라이드 이미지 전환 모바일에서 터치로 슬라이드 이미지 전환 무한 루프로 마지막 이미지에서 다음 이미지로 터치 또는 클릭시 자연스럽게 첫번째 이미지

2022년 3월 13일
·
0개의 댓글

git commit 합치기

위 명령어로 아래와 같이 git history를 확인한다.예를 들어, .으로 되어있는 커밋들을 합쳐서 2 commit으로 만들고 싶다면합치고 싶은 이전 commit 해시 키값 3ab1e91ea735703d92fb264c25316ca01a0e70c4을 복사한다.rebas

2022년 2월 24일
·
0개의 댓글

Git 커밋 삭제하기

위 명령어로 아래와 같이 git history를 확인한다.삭제하고 싶은 커밋 이전 커밋 해시 키값을 복사한다.예를 들어, 3 commit 을 삭제하고 싶거나 3 commit ~ 4 commit을 삭제하고 싶다면 2 commit해시 키값을 복사한다.rebase -i 옵션

2022년 2월 21일
·
0개의 댓글

Redux

에러 나면 아래와 같이 설치 후 다시 실행package.json.eslintrc.jsbaseUrl 옵션을 사용하여 기본 경로를 지정해주면, 상대경로가 아닌 절대경로로 파일을 import 할 수 있다. base 가 되는 경로를 직접 설정함으로써, 패키지 depth 가 깊

2022년 2월 21일
·
0개의 댓글

safe-area-inset 안전영역(Next.js)

아이폰 디스플레이에서 영역이 상/하단 라운드 영역을 포함하고 있는 경우 추가적으로 상단 영역은 카메라, 스피커 등의 센서가 있는 노치(notch) 영역 존재하므로 안정적으로 콘텐츠가 보일 수 있도록 Safe Area를 설정해 주어야 한다.\_app.tsx 파일에 뷰포트

2021년 12월 27일
·
0개의 댓글

[React Native] stack or tab 스크린 이동 시 새로 고침

옵션에unmountOnBlur: true 추가하면 해당 탭에 이동할 때 항상 새로 고침이 된다.스크린을 이동 navigation.pop()(뒤로 가기)를 할 때 lifecycle 실행이 되지 않는데 lifecycle을 실행시키고 싶을 때 useIsFocused를 적용한

2021년 10월 20일
·
0개의 댓글

[React Native] 커스텀 폰트 사용하기

디렉토리에 font를 넣어준다. 다운받은 폰트를 디렉토리안에 넣어준다. > ex)

2021년 10월 19일
·
0개의 댓글

ESLint & Prettier 적용하기

ESLint는 JavaScript, JSX의 정적 분석 도구로 코드를 분석해 문법적인 오류를 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. ESLint는 스타일 가이드를 좀 더 편리하게 적용할 수 있다.(예: Airbnb Style Guide, Google Sty

2021년 8월 29일
·
0개의 댓글