profile
프론트엔드 개발을 공부중입니다 :)

[TIL] 39. 문자열 자르기 method 비교 : slice(),substr(), subString()

slice(시작 인덱스, 종료 인덱스) 기존 배열은 변하지 않고, 잘라낸 배열을 반환한다. 단, 시작 인덱스는 리턴값에 포함되며 종료 인덱스는 포함되지 않는다. substring(시작 인덱스, 종료 인덱스) 시작인덱스부터 종료 인덱스 전까지 잘라서 반환 단, slic

방금 전
·
0개의 댓글

[Project 02] 2차 프로젝트 회고

프로젝트 소개 2주동안 (2.21 ~ 3.6) 네이버 바이브 웹/앱 클론코딩을 진행하였습니다. 프론트엔드 3명 + 백엔드 2명 + 네이티브 1명 총 5명의 개발자들이 한 팀이 되었으며, 저는 네이티브를 담당했습니다. 프론트엔드 Github 백엔드 Github 네이티브

3일 전
·
0개의 댓글
post-thumbnail

[TIL] 38. 크로스 브라우저 테스팅 (Cross Browser Testing)

웹 사이트(또는 웹앱)가 어느 버전의 브라우저에서나, 어느 디바이스에서도 원하는 결과물이 나오도록 확인하고 수정하는 단계를 말한다.인터넷 익스플로러(Internet Explorer, ie), 크롬(Chrome), 사파리(Safari)는 기본이고 모바일에서 카카오톡 웹뷰

4일 전
·
0개의 댓글

[Project 02] 6. 음악 재생바

1주차 : 초기세팅, 메인 페이지, 로그인 페이지2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test가장 어려웠던 음악 재생바..😭라이브러리를 안쓰고 하려니 정말 막막했다.음악 재생하고 끄는 것 까지는 완료 했는데, 재생버튼을 누른 상태에서 멈

6일 전
·
0개의 댓글

기업협업 1주차

벌써 기업협업을 시작한지 일주일이 되었다 🤭 기업협업을 나갈까 말까 많이 고민했었는데 결론적으로 말하면 나가길 정말 잘한 것 같다. 우선 너무 실력있고 좋은 분들에게 배울 수 있는 것만으로도 너무 감사하고, 친절하게 가르쳐주셔서 열심히 하고 싶은 마음이 불끈불끈 생

7일 전
·
0개의 댓글

[TIL] 37. Node.js 입력받기

기본적인 구조는 다음과 같으며, 위 코드는 한 줄의 입력만 받고 프로그램이 끝나는 구조이다.만약 rl.close()부분이 없다면 무한으로 입력을 받을 수 있다. 그리고 받은만큼 실시간으로 console.log를 찍는다. 다른 분들 코드를 보니 다음과 같은 함수도 볼 수

7일 전
·
0개의 댓글

[Project 02] 5. 스테이션 페이지

1주차 : 초기세팅, 메인 페이지, 로그인 페이지 2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test ✔️ 스테이션 페이지 스테이션 페이지는 취향에 맞는 곡들을 골라 들을 수 있는 페이지이다. 예를들어 집중할때, 잠이 오지 않을 때, 운동할

2020년 3월 29일
·
0개의 댓글

[Project 02] 4. 차트 페이지

1주차 : 초기세팅, 메인 페이지, 로그인 페이지2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test차트페이지는 백엔드 API받아와서 데이터를 뿌려주기만 하면 되서 딱히 어려운 기능구현은 없었다.페이지마다 비슷한 디자인들이 많아서 메인페이지에 있

2020년 3월 27일
·
0개의 댓글

[TIL] 36. Arrow Function과 Function의 차이

ES5의 일반 function안의 this는 자신을 가장 마지막으로 품고 있는 scope로 항상 변한다. Arrow Function Arrow Function은 es6에서 정의한 문법이며, 익명함수 선언 방식으로 간결하게 코드를 작성할 수 있다. 일반적으로 () =>

2020년 3월 26일
·
0개의 댓글

[TIL] 35. Ajax (axios & fetch)

React와 React Native에서 API로 부터 데이터를 받아올 때 사용한다. axios 구형 브라우저를 지원한다. request aborting에 대한 방법을 제공한다. 응답 시간 초과를 설정하는 방법이 있다. JSON 데이터 자동변환이 가능하다. node.j

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

[TIL] 34. Next.js

Next.js란? 리액트를 기반으로한 SPA를 빠르게 빌드할 수 있도록 도와주는 Next.js의 장점 서버사이드 렌더링 검색엔진 최적화 초기 로딩 성능 개선 SEO (Serach Engine Optimization) 더욱 빠른 페이지 로드를 위한 코드

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

[Session] 05. Git Rebase

Rebase란? rebase는 말 그대로 (re-base)로 베이스를 재배치한다는 뜻이다. 그렇다면 왜 rebase를 사용할까? git merge를 사용하다보면 history를 볼 때 뿌리가 여러개로 나눠져 있어 찾아가기가 어렵다. rebase를 사용하면 베이스를 다

2020년 3월 22일
·
0개의 댓글

[Project 02] 3. 로그인 페이지

2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test바이브 앱은 네이버 로그인만 가능하기 때문에 먼저 Expo에서 네아로(네이버 아이디 로그인)가 가능한지 찾아보았다. 찾아본 결과 Expo로 네아로를 적용시티려면 Eject를 시키거나 Webview

2020년 3월 22일
·
0개의 댓글

[Project 02] 2. 메인 페이지

1주차 : 초기세팅, 메인 페이지, 로그인 페이지2주차 : 차트 페이지, 스테이션 페이지, 음악 재생바, API Test바이브 앱의 메인페이지는 사실 비슷한 슬라이드들이 반복되는 형식이여서 어려운 부분은 없었다. 기본적으로 FlatList를 이용하여 슬라이드를 구현

2020년 3월 18일
·
0개의 댓글

[Session] 04. Git Flow

master (실제 배포된 코드)hotfix(실제 서비스에서 긴급한 문제가 생겼을 때)develop (master 역할, 개발이 기준이 되는 브랜치)featurerelease (배포 후보 / 배포 테스트용)개발용이 아닌 실제 서비스하는 코드가 필요하기 때문에 즉, 배포

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

[TIL] 33. React Native - React Native CLI

Expo CLIReact Native CLI리액트 네이티브는 페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크이다.모바일 크로스 플랫폼으로서 하나의 프로그래밍 언어(Javascript)로 iOS 와 Android 모바일 앱을 동시에 개발할 수 있는 오픈소스이다.필

2020년 3월 16일
·
0개의 댓글
post-thumbnail

[TIL] 32. React Native - Expo

Expo CLIReact Native CLI리액트 네이티브를 크로스 플랫폼으로 개발하기 위한 빌드도구로써, 네이티브 모듈을 쉽고 편하게 사용할 수 있고 빠르게 실제 기기에서 테스트해볼 수 있도록 도와주는 툴이다.jsx/javascript로 작성하고 컴파일링 할때 각각

2020년 3월 14일
·
0개의 댓글

[TIL] 31. Styled Component

자바스크립트 파일 안에 스타일을 선언하는 방식이다.그렇기 때문에 .css또는 .scss 파일을 따로 만들지 않아도 되는 장점이 있다.설치한 디렉토리로 이동 후, package.json 파일에 dependencies 중 styled-components 이 설치되었는지 확

2020년 3월 11일
·
0개의 댓글

[Project 02] 1. 초기 세팅

👩🏻‍💻 Vibe App Clone Coding >1주차 : 초기세팅, 이벤트 메인페이지, 상품 상세페이지 2주차 : 주문서 페이지, 주문내역 페이지, API Test ✔️ 초기 세팅 1. CRA Install 설치과정 자세히 보기 2. Router Ins

2020년 3월 11일
·
0개의 댓글

[TIL] 30. TypeScript-React

src 디렉토리를 만든 후, Greetings 라는 새로운 컴포넌트를 만들어준다. 컴포넌트의 props에 대한 타입을 선언할 때에는 type을 사용해도 되고, interface를 사용해도 된다.단, 프로젝트 내부에서 일관성만 유지해주면 된다.\* 참조 : typescr

2020년 3월 10일
·
0개의 댓글