문제점 기존 앱 개발을 안드로이드 지원할 생각이 없었는데, 안드로이드를 지원하게 되면서 기존에 사용하던 react-native-bottom-sheet 란 라이브러리가 작동이 안되었다.. https://github.com/gorhom/react-native-bottom-sheet 해결방법 index.js /** * @format */ import {gestureHandlerRootHOC} from 'react-native-gesture-handler'; import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(ap..
회사에서 사용하는 노트북은 인텔칩이고, 개인 노트북은 M1칩인데 둘 다 동일한 로직으로 앱을 빌드하는데 M1일때만 Unable to load contents of file list: '/Target Support Files/Pods-MyButler/Pods-MyButler-resources-Debug-output-files.xcfilelist' 해당 오류가 나서 찾아보니 M1칩에서만 일어나는 오류 같았다. 일단 해결 방법을 먼저 말하고 왜 이런 오류가 일어나는 지는 더 찾아봐야 할 것 같다. Unable to load contents of file list: '/Target Support Files/Pods-MyButler/Pods-MyButler-resources-Debug-output-files.xc..
에러 발생 기존에는 로컬 이미지만 next/Image를 사용하고 있다가 리모트, 서버상에서 받아오는 값에도 적용을 시켜야 해서 아 그냥 하면 되겠다 싶었다. 하지만..? 아래와 같은 에러가 발생했다.. 심란스러웠다.. 빠르게 구글링을 통해서 무슨 에러인지 찾았다. 해결책 해당 에러는 Next.js의 Image태그를 사용해서 외부의 이미지를 불러올 경우 해당 이미지에 대해 보호하려고 발생하는 오류로 확인되었다. 이 에러를 해결하기 위해선 우리의 next.config.js에 아래와 같은 코드를 입력한다. module.exports = { images: { domains: ['firebasestorage.googleapis.com'], }, }; images 하위의 domains에 [] 안에 에러 문자의 ho..
Next.js를 사용하는데 새 창을 띄우고 싶다면 보통 Link나 Router를 이용해야 한다고 생각했다. 특정 글씨를 눌렀을 때 새 창을 띄우고 싶다면 Link를 생각하겠지만 Next.js에서는 a 태그만 사용해도 된다고 나와있다. 하지만 내가 원하는 상황은 글씨가 아니라 특정 부분을 누르고 나서 새로운 창이 열리면서 이동하길 바랬다. 그래서 찾은 방법을 공유하고자 한다. router.push('이동할 url') 처음에는 위와 같은 방법으로 이동하려고 했다. 특정함수를 실행하고 마지막에는 이동할 url로 새창을 여는 상황 하지만 새 창이 뜨지는 않았다. window.location('이동할 url') Next.js에서는 You don't need to use router.push for external..
검색의 자동완성 기능을 구현할 때 적합한 자료구조 문자열을 저장하고 효율적으로 탐색하기 위한 트리 형태의 자료구조 특징 - 찾는 문자열의 길이만큼만 시간 복잡도가 걸린다. - 저장공간을 좀 더 많이 사용한다. 구조 루트는 비어있다. 각 간선은 추가될 문자를 키로 가진다. 각 정점은 이전 간선의 키를 값으로 가진다. 해시 테이블과 연결 리스트를 사용한다. 트리 생성하기 function makeTrie(words) { const root = {}; // 먼저 루트 노드를 설정할 변수를 만든다. for (const word of words) { // Trie를 구성하기 위한 루프를 돌린다. let current = root; // 루프부터 시작 for (const letter of word) { // 단어의 ..
Project
-
[Project] 네집내집
airbnb를 모티브로 진행한 네집내집 프로젝트를 마치며.. 🏠 네집내집 프론트인원 3명, 백엔드 인원 3명으로 이루어진 팀으로, 에어비앤비 보다 더 친근한 느낌으로 숙박 서비스를 계획했다. 네집내집? 어릴 적, 친한 친구의 집에서 자고 가는 느낌을 담아 우리 집 근처의 우리 집, 네집내집 이라는 의미로 서비스명을 기획했으며, 홈페이지에서 숙소 예약까지의 flow를 그리기로 했다. 프로젝트를 시작하며... 이번 프로젝트에서는 저번 삼십 문방구 프로젝트를 마치면서 아쉬운 부분이었던 기능 구현적인 면을 더 구현해보고 싶은 마음이 들었다. 그래서 페이지가 가장 길고 다양한 기능이 있는 디테일 페이지를 선택했다. 디테일 페이지의 구성은 아래와 같았다. 숙소의 내부,외부를 보여주는 부분 숙소에 대한 내용을 담고 ..
-
[Project] 삼십 문방구
배민 문방구를 모티브로 진행한 삼십 문방구 프로젝트가 끝이 났다. 👩👩👧👦 Woowa-Siblings[우아한 남매들] 프론트인원 2명, 백엔드인원 2명으로 이루어진 4 인팀으로, 같이 공부하고 있는 사람들의 가치를 알리기 위해서 프로젝트를 시작했다. 삼십 문방구? 삼십 문방구는 동료들인 30기의 가치를 물건으로 취급하여 30기에 대한 것들을 파는 이커머스 사이트이다. 프로젝트를 시작하며... 4명으로 이루어진 우리 팀은 "다른 팀보다 적은 인원으로 다른 팀과 비교했을 때, 같은 결과물의 수준을 낼 수 있을까?" 라는 걱정으로 프로젝트를 시작했다. 🏃🏻 1차 스프린트 우리는 1주간의 계획을 세우고 공동 컴포넌트인 Nav, Footer를 2일 안에 끝내기로 하였다. 주말까지 해서 모든 페이지의 스타일링..
views
-
MUI를 사용하는 방법MUI 2022.07.06 00:52
한국말로는 MUI 사용하는 방법이 많이 나와있지는 않아 내가 사용한 코드와 커스텀하는 방법들에 대해서 글을 남기려 한다. MUI는 React의 UI 라이브러리이다. 사용방법은 생각보다 간단하다. 그걸 커스텀하는게 생각보다 쉽지 않을 뿐 사용방법 (컴포넌트 Autocomplete를 예시로 설명하겠다.) mui를 설치한다. mui는 emotion 과 styled-component 둘 다 사용가능하다. // npm npm install @mui/material @emotion/react @emotion/styled //yarn yarn add @mui/material @emotion/react @emotion/styled 2. 페이지의 좌측에 있는 메뉴 중에 components을 클릭하여 나의 웹 사이트에 적..
-
[Next.js] Router로 새 창 띄우기카테고리 없음 2022.10.04 21:56
Next.js를 사용하는데 새 창을 띄우고 싶다면 보통 Link나 Router를 이용해야 한다고 생각했다. 특정 글씨를 눌렀을 때 새 창을 띄우고 싶다면 Link를 생각하겠지만 Next.js에서는 a 태그만 사용해도 된다고 나와있다. 하지만 내가 원하는 상황은 글씨가 아니라 특정 부분을 누르고 나서 새로운 창이 열리면서 이동하길 바랬다. 그래서 찾은 방법을 공유하고자 한다. router.push('이동할 url') 처음에는 위와 같은 방법으로 이동하려고 했다. 특정함수를 실행하고 마지막에는 이동할 url로 새창을 여는 상황 하지만 새 창이 뜨지는 않았다. window.location('이동할 url') Next.js에서는 You don't need to use router.push for external..
-
MUI - TextFieldMUI 2022.07.16 02:35
Mui의 TextField를 수정하는 방법을 알아보자. Mui의 거의 대부분 컴포넌트의 기존 색들은 Mui의 고유 색인 하늘색을 띤다. 하지만 사이트마다 사용해야 할 색상이 다르기 때문에 수정해야 할 일이 생긴다. 그럼 수정하면 된다 라고 생각할 수 있지만 Mui는 이미 우리가 사용하기 좋게 누군가가 코드를 작성해놓은 상태라 생각보다 style 값들을 변경하는 것이 쉽지 않다. Mui를 사용하는 중이라면 이미 알고 있을 것이다. 그중에 바꾸기 어려운 요소였던 TextField를 소개하고 내가 수정한 부분까지의 코드를 공개한다. 먼저 TextField 그 자체의 상태이다. 번거로움을 피하기 위해 css-in-js인 sx 만을 사용해서 커스텀하겠다. import { Box, TextField } from '..
-
DOM 요소 선택 / 변경JavaScript 2022.05.16 16:29
DOM 요소 선택 자바스크립트에서 HTML의 요소를 선택해보자. 6가지의 방법을 통해서 요소를 선택할 수 있다. 1) HTML 태그 이름으로 선택하기 getElementsByTagName() HTML 태그 이름을 이용하여 HTML 요소를 선택합니다. 위의 메서드를 사용하여 HTML요소에 접근, 생성, 변경할 수 있다. let selectTagName = document.getElementByTagName("p"); //모든 요소를 선택한다. for (let i = 0; i < selectTagName.length; i++) { //태그의 수만큼 selectTagName.item(i).style.color = "red"; } // 선택된 모든 의 텍스트 색상을 변경함. item()메서드는 해당 HTML 객..
본 것을 정리
-
Map 객체JavaScript 2022.06.25 19:06
Map 객체는 키와 값의 쌍(Key : Value)으로 이루어진 컬렉션이다. 객체와 유사하지만 차이점이 존재한다. 객체를 포함한 모든 값을 키로 사용할 수 있다. 이터러블 요소 개수를 map.size로 확인한다. Map 객체를 생성해보자. Set 객체와 같은 방법으로 생성할 수 있으며, Map 생성자 함수로 생성하고 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map객체를 생성한다. 이때, 이터러블은 키와 값의 쌍으로 이루어져야 한다. const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]); con..
-
Set 객체JavaScript 2022.06.25 16:39
Set 객체란 중복되지 않는 유일한 값들의 집합이다. 배열과 비슷해 보이지만 다음과 같은 차이점이 존재한다. 동일한 값을 중복하여 포함하지 못한다. 요소 순서가 의미가 없다. 인덱스로 요소에 접근하지 못한다. Set은 수학적 집합을 구현하기 위한 자료구조로서, Set 객체를 통해 다양한 집합을 구현할 수 있다. 그럼 먼저 Set 객체를 생성하는 법을 알아보자. Set 객체 생성하기 Set 객체는 Set 생성자 함수로 생성한다. 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블(반복 가능한)을 인수로 받아 객체를 생성한다. 이터러블의 중복된 값은 객체 요소로 저장되지 않는..
-
객체 프로퍼티 존재 확인하기JavaScript 2022.06.12 16:24
코딩 테스트를 하면서 자바스크립트의 메서드를 더욱더 단단하게 공부해야겠다는 생각이 들었다. 객체에 대해서 말해보자. 객체 객체는 key와 value을 한 쌍으로 이루어진 형태이다. 특정 프로퍼티(Key) 확인하기 객체 안의 특정 프로퍼티의 존재를 확인하고 싶다면 (1) in 연산자를 사용해보자. const obj = { name: "suin", age: "18" }; console.log("name" in obj); //true in 연산자를 사용하면 해당 프로퍼티가 객체 안에 있는지 없는지를 boolean 값으로 출력해준다. (2) Reflect.has(객체, "프로퍼티") 는 ES6에서 도입된 문법으로 in 연산자와 같은 역할을 한다. const obj = { name: "suin" }; consol..
-
new 연산자와 생성자 함수JavaScript 2022.06.03 17:16
객체 리터럴을 사용하면 객체를 만들 수 있다. /* 객체 리터럴 */ const user = { name : "janggu", age : 25, }; 하지만 비슷한 객체를 여러 개 만들어야 할 경우가 있을 때, 객체 리터럴을 사용하기엔 너무 많은 중복이 일어난다. 그럴 때, new연산자와 생성자 함수를 사용하여 객체의 중복을 줄여보자. 생성자 함수 constructor function 생성자 함수는 함수의 첫 글자를 대문자로 시작해야 하고, 함수 앞에 new 연산자를 붙여 실행하는 컨벤션이 있다. function User(name, age) { this.name = name; this.age = age; } const user = new User("짱구", 7); console.log(user.name)..
-
DOM 요소 선택 / 변경JavaScript 2022.05.16 16:29
DOM 요소 선택 자바스크립트에서 HTML의 요소를 선택해보자. 6가지의 방법을 통해서 요소를 선택할 수 있다. 1) HTML 태그 이름으로 선택하기 getElementsByTagName() HTML 태그 이름을 이용하여 HTML 요소를 선택합니다. 위의 메서드를 사용하여 HTML요소에 접근, 생성, 변경할 수 있다. let selectTagName = document.getElementByTagName("p"); //모든 요소를 선택한다. for (let i = 0; i < selectTagName.length; i++) { //태그의 수만큼 selectTagName.item(i).style.color = "red"; } // 선택된 모든 의 텍스트 색상을 변경함. item()메서드는 해당 HTML 객..