본문 바로가기
반응형

전체 글539

[REACT] Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use an array instead. React 오류 따라잡기 사건의 발달 To do list 를 React로 만드는 중, 할 일을 입력한 후 버튼을 누르면 useState를 사용하여 내용을 업데이트 하려 했다. addRef는 input의 현재 상태 값을 확인하기위해 useRef Hook을 사용하여 입력한 상황. 예상대로라면 addRef의 값이 업로드 되어야 하는데, 버튼을 누르면 홈페이지에는 경고창이 없이 하얀 페이지만 나오는 상황. console창에 들어가 경고를 확인 해보니 Uncaught Error: Objects are not --- valid as a React child (found: object with keys {current}). If you meant to render a collection of children, use.. 2021. 8. 25.
[GIT] branch 생성 & 사용하기 깃허브를 사용하면서 계속 반복해서 실수해 정리하는 branch 사용법 branch란? 개발자들이 동일한 소스코드를 추가 작업함에 있어, 동시에 다양한 사람들이 접근해 개발할 수 있도록 하기 위해 만들어진 기능이다. 각자 branch를 만들어 나무가지 처럼 뻗어나가 원하는 방향으로 개발해 나갈 수 있다. branch 확인하는 법 git branch 라는 명령어로 확인이 가능하다. 현재 main branch에 위치해 있다. 자주 사용하는 git status 명령어로도 확인 가능하다. On branch main이라는 답을 통해 main branch위에 있는 것을 확인 할 수 있다. git branch -r 을 통해 원격 저장소의 브랜치를 확인 할 수 있다. git branch -v 을 통해 브랜치의 마지막 커.. 2021. 8. 25.
[REACT] 글씨 타이핑 효과 내기 리액트에서 글씨 타이핑 효과 내기 위에 처럼 타이핑 효과를 Javascript 또는 css 애니메이션을 통해 코드를 작성한다. 구글에 찾아보면 작성하는 방법들이 많이 나온다. JS, CSS는 많이 나오지만 REACT에서 직접 코드로 작성하는 자료는 없어, 작성해 본다. ( 대부분 라이브러리를 사용하여 쉽게 작성하는 것 같다.) 타이핑 될 문자를 txt로 정의해주고, REACT HOOK 중 useState와 useEffect를 사용한다. setInterval과 cleaerInterval을 사용하여 코드를 작성했다. JS에서 작성하는 것과 크게 다르진 않다. useState와 useEffect의 기본적인 형식만 알고있다면 REACT HOOK을 사용하여 보다 편하게 작성할 수 있다는 장점이 있는 것 같다. 2021. 8. 23.
[부산] FIRSTAGE COFFEE 바다 앞, 애플파이 하나 드시고 가세요 흰여울 문화마을을 돌아다니다보면 바다 앞에 카페들이 많이 줄서있다. 최근 관광지로 유명세를 얻어 많은 사람들이 다녀가다 보니 그에 따라 많은 카페 & 악세사리 가게들이 생겨나는 것 같다. 유명한 카페들도 많지만 사람들을 피해 발견하게 된 FIRSTAGE COFFEE. 많은 카페 들 중에 가장 끝쪽에 자리 잡아 있어서 그런지 사람들이 많지 않아서 가장 좋았고, 깔끔한 인테리어와 초록색 심플한 로고가 마음에 들었다. 딱 봐도 커피의 맛을 신경쓰는 게 느껴졌다할까. 다른 카페와 마찬가지로 내부는 넓지 않았다. 다만 새로 생긴 것 같이 느껴지는 깔끔한 인테리어와 시원한 에어컨 바람이 분다는 점. 그리고 바다를 바로 눈앞에서 볼 수 있다는 점이 좋았다. 직원은 사장님으로 보.. 2021. 8. 22.
[판교] h'541 깔끔한, 양식 판교 현대백화점에 입점해 있는 h'541. 9층에 위치해 있고 판교에서 꾸준히 인기있는 식당 중 하나이다. 판교 현대백화점이 매출이 서울에 있는 지점보다 많이 나오면서 점점 더 다채로워 지는 것 같다. 지하 푸드코드에도 계속해서 식당들이 리뉴얼 되면서 선택지가 점점 많아지고 있다. 코로나로 인해 거리두기와 사람들이 있어 대기를 해야 했다. 9층에 있는 식당들은 핸드폰 번호를 입력해 놓으면 연락이 오기 때문에 웨이팅 하는데 크게 불편함은 없다. 테이블에 셋팅되어 있는 식기. 그리고 식전 빵. 소스가 새콤한게 빵에 찍어먹으니 참 맛났다. 스테이크 리조또랑 피자를 시켰다. h'541은 시금치 파스타가 유명한데 전에 먹어봤기 때문에 오늘은 안먹어본 메뉴로 시켰다. 리조또는 밥알이 설익은 감이 있기.. 2021. 8. 22.
[JS] 프로그래머스 가장 큰수 (LEVEL2) 문제 https://programmers.co.kr/learn/courses/30/lessons/42746 코딩테스트 연습 - 가장 큰 수 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 programmers.co.kr 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 .. 2021. 8. 19.
[부산] 손목서가 바다 앞, 개인 서점 부산의 친퀸테레, 흰 여울 문화마을에서 가장 유명한 카페 '손목서가'. 인스타 및 여러 블로그 매체에서 감성카페로 유명하기 때문에 방문하기 전부터 크게 기대는 하지 않았다. 평일이었지만 사람이 많을 게 확실하고, 그렇다면 여유로움을 느끼기 어렵기 때문이다. 흰 여울 마을을 따라 내려가면 쉽게 찾을 수 있다. 손목서가는 전직 신문사 사진작가인 남편분과, 시인인 아내분이 같이 운영하는 바다위에 책방이다. 하지만 요즘 사람들이 책을 오프라인에서 구매를 많이 안하다보니 책 마진율보다, 음료 마진율이 더 높다고 한다. 공간이 매우 좁은 개인 서점이기 때문에 많은 책이 없을 거라 생각했지만, 생각보다 다양한 책들을 구비해 놓으셨다. 베스터 셀러가 아닌 책들을 진열해 놓았기 때문에 책을 사기전에.. 2021. 8. 18.
[JS] substring() / substr() 비교 substring() / substr()은 문자열을 추출하는 메서드이다. 사용법이 비슷한 대신 두개의 차이가 헷갈려 정리해 보기로 했다. - str.substring(indexStart[, indexEnd]) - str.substr(start[, length]) 시작점은 같지만, 두번째 인자가 substring은 indexEnd / substr은 length로 차이가 있다. substring은 두번째 인자 값을 미포함, substr은 두번째 인자값을 포함한다. 음수만 입력 된 경우 substring은 기존 값 그대로 / substr은 뒤에서 시작하는 것을 확인 할 수 있다. start숫자만 입력 된 경우 두 수는 같은 값을 반환한다. 2021. 8. 17.
[부산] 본전 돼지 국밥 부산역, 돼지국밥 부산을 대표하는 음식 중 한 가지는 돼지국밥이다. 부산을 통틀어 유명한 돼지국밥이 두 군데 있지만, 부산역 근처는 아니다. 그래도 부산을 왔으면 바로 돼지국밥은 먹어야겠다는 생각 때문에 부산역 근처 돼지국밥집을 찾게 됐다. 대표하는 음식 답게 역 근처에 수십 개의 돼지국밥집이 존재했다. 그중에 방문한 곳은 본전 돼지 국밥. 부산역 근처에 거주하는 주민들도 자주 애용하는 로컬 식당이라고 하여 선택했다. 45년 전통을 자랑하는 돼지국밥 이라고 한다. 식당은 1층과 지하 1층으로 구성되어 있다. 가급적 1층에서 식사하는 것을 권한다. 지하 1층은 청소가 제대로 이루어지지 않는 느낌이었다. 정갈한 밑반찬. 김치를 먹어보면 그 집의 맛을 알 수 있다고 하는데 김치가 참 매력적이었다. 젓갈을 따로.. 2021. 8. 16.
[포천] 강릉 메밀 막국수 여행, 식사, 막국수 강릉 메밀 막국수 포천으로 나들이를 나갔을 때, 어떤 메뉴를 식사메뉴로 고를까 고민하다가 방문하게 됐다. 경기도 근교로 여행 나갔을 때 메뉴가 고민된다면 막국수를 선택하면 실패하는 일은 거의 없는 것 같다. 그만큼 남녀노소 누구나 즐길 수 있고 메뉴 자체가 무겁지 않다 보니 쉽게 먹을 수 있다는 장점 때문이라 생각된다. 포천인데 왜 강릉이지? 라는 의문이 들었다. 찾아보니 강릉 메밀 막국수가 체인점이었다. 쉽게 풀리는 의문. 강원도 쪽이 메밀이 유명하다 보니 지역 타이틀을 내건 것 같다. 막국수만 먹기 아쉬워 수육을 시켰는데, 막국수도 맛있었지만 수육 또한 생각 이상으로 맛있었다. 고기 질도 좋았고 살육과 지방이 골고루 어우러져 딱 좋아하는 수육 그 맛이었다. 집 근처였다면 자주 방.. 2021. 8. 11.
[이태원] 비스트로 루틴 한국에서, 프랑스 가정식을 이태원에서 가장 유명한 카페 사유옆에 위치한 조그만 식당, Routine. 한국에서는 쉽게 접하지 못할 정통 프랑식 음식을 판매한다. (프렌치 레스토랑에 맞게 다양한 와인도 같이 판매 중) 사전에 알고 방문하는 게 아니면, 쉽게 방문하기 힘든 위치와 분위기를 풍긴다. 메뉴 또한 사전에 찾아보지 않았다면 어떤 모양과 어떤 맛을 띄울 지 쉽게 상상할 수 없다. 그렇기에 조금은 어려운 곳이지만, 그렇기에 방문한 손님들의 평가는 높은 평점으로 확인 할 수 있다. 오른쪽이 루틴의 대표메뉴 돼지안심 로스트. 다른 후기를 찾아보더라도 고정값으로 나온다. 그 만큼 루틴의 시그니쳐 메뉴. 그런 만큼 눈으로 음식을 처음 보게 되는 순간, 1차 시각적으로 음식이 주는 즐거움을 느낄 수 있다. 돼지.. 2021. 8. 10.
[JS] 로또의 최고 순위와 최저 순위 문제 설명 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 4 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다.. 2021. 8. 10.
[상봉] 샐러디 Salady 기분 좋은 한끼 뭘 먹을까 고민하다가, 무겁게 먹긴 싫고 가볍게 먹고싶어 방문한 샐러디. 신규 오픈하여 매장이 깔끔했다. 가게명에서 확인할 수 있듯이 샐러드 전문점으로 건강식 위주로 판매하고 하고있다. 신기한 점은 메뉴에 곡물밥을 추가하여 비빔밥 형식으로도 섭취 가능했다. 가게 인테리어는 White & Green 으로 밝고 상큼한 느낌을 주는 색을 택해, 음식을 먹기 전부터 벌써 신선해지는 기분이 들어 좋았다. 매장은 크다 할 수 없지만 메뉴 특성상 1, 2인 손님들이 많다는 점, 조용히 식사만 하고 간다는 점, Take-out을 많이 해가기 때문에 불편하단 생각은 들지 않았다. * 음식을 주문할 때 테이블에 있는 네이버 QR코드로 접속해 네이버 주문이 가능하다! 샐러드 메뉴 중 가장 인기가 많은 거라고.. 2021. 8. 10.
[ETC] ICON 사이트 ICON을 얻을 수 있는 여러 사이트 중 주로 즐겨쓰는 사이트를 정리할 겸 작성하는 글! 1. ICON FINDER https://www.iconfinder.com 5,825,000+ free and premium vector icons - Iconfinder Iconfinder is the world's largest marketplace for vector and raster icons in SVG and PNG formats. www.iconfinder.com 개인적으로 깔끔한 아이콘을 즐겨쓰는데, 그 중 주로 사용하는 사이트이다. 약 580만개 이상 아이콘이 있다고 하니 웬만한 아이콘들은 찾을 수 있다. 무료 & 유료로 제공하고 있으면 무료의 경우 free라고 기재되어 있으니 참고해서 사용 하면 .. 2021. 8. 8.
[JS] 프로그래머스 실패율 문제 설명 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가.. 2021. 8. 5.
[해방촌] 보니스피자펍 Bonny's Pizza Pub 피자를 좋아하는 사람들은 가보지 않았어도 꼭 들어는 봤을 보니스피자. 위치는 녹사평역에서 해방촌 올라가는 도입부에 위치해 있다. 이태원 자체가 외국인들이 많은 거리지만 녹사평에서 해방촌 올라가는 거리가 서울에서 가장 이국적인 거리라는 생각이 든다. 보니스피자펍도 직원들이 외국인이라 영어로 주문을 하는 것 처럼, 인근 주위가게들도 외국인들이 운영하는 가게들이 많아 주문할 때 조금 조심스러워 지는 경향이 있다. 그래도 여기는 한국이니 개떡같이 말해도 찰떡같이 알아 들으신다. :) 보니스피자 외관. 테라스라기에는 조금 민망하지만 좁은 내부보다는 자리가 좋다. 생각해보니 갈때마다 운좋게 창가쪽에 앉아서 맛있게 먹을 수 있었다. 평일 낮 시간대가 아닌 이상 거의 웨이팅이 필수라고 .. 2021. 8. 4.
[JS] 크레인 인형뽑기 게임 크레인 인형뽑기 게임 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게.. 2021. 8. 2.
[여의도] 더 현대 폴트버거 폴트버거, 분점은 물음표? 여의도 더 현대를 방문했다가 수제버거가 먹고싶어서 어디를 갈까 고민했다. 수제버거 맛집으로 3-4곳이 들어와 있어 고민 중 결정한 곳이 폴트버거. 신사에 본점이 유명해 더 현대와 스타필드 하남점에 입점하게 됐다. 수제버거 맛집을 순회중에 있어 가봐야지 하던 찰나 더 현대에 있어 선택했다. FAULT : 1.잘못, 책임 2.결점, 단점 이라는 뜻인데 어떤 의미로 지은 걸까? 라는 생각이 무의식적으로 들면서 대표메뉴인 폴트버거와 더블버거를 시켰다. 내부 인테리어는 톤앤톤 색상으로 강렬하게 되어있지만, 테이블 간의 공간이 너무 좁다. 1차적인 큰 단점. 햄버거 먹으면서 옆 사람 얼굴을 보게 될 정도로 자리가 비좁다. 왼쪽이 더블버거, 오른쪽이 폴트버거이다. 버거의 크기 자체는 크지 .. 2021. 7. 31.
[판교] 정돈 정통 수제돈까스, 정돈 돈까스 맛집으로 유명한 정돈이 판교 9F에 입점했다. 정돈 메뉴판. 돈까스로 유명하기에 다른 메뉴는 취급하지 않고 오직 돈까스 및 서브메뉴만 제공하고 있다. 내부는 넓지 않아도 테이블 간격이 어느정도 있는 데다 칸막이로 나눠져있어 밥먹기에 좁아 불편하지는 않았다. 그리고 인기가 많기 때문에 웨이팅이 거의 필수인데 번호를 등록하면 순서를 확인할 수 있고, 내 차례가 됐을 때 카카오톡으로 알려주기 때문에 기다리는데 크게 힘들지는 않았다. 정돈의 대표메뉴 안심카츠를 시키고 카레단품을 추가했다. 등심카츠와 안심카츠 중 개인의 취향에 따라 선호도가 다르겠지만, 개인적으로는 안심카츠를 꼭 먹어보는 것을 추천한다. 대표메뉴인 만큼 그 만큼 육즙이 살아있어 한 입 베어먹었을 때 입안에 퍼지는 풍.. 2021. 7. 31.
[JS] 프로그래머스 숫자 문자열과 영단어 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7 s.. 2021. 7. 28.
[JS] 프로그래머스 k번째 수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a.. 2021. 7. 26.
[한강진] 패션파이브 디저트 보관소, 패션파이브 패션파이브, 이름만 들어보면 패션 아이템을 모아둔 편집샵이란 생각이 들지만, 실은 SPC에서 프리미엄 라인으로 만든 디저트 편집샵이다. Fashion이 아닌 Passion으로, 사전적인 의미는 1. 격정 2. 범죄 3. 열정이란 뜻이 담겨있다. 주소 : 서울 용산구 이태원로 272 이태원역과 한강진역 사이에 위치해있으면 근처에는 유명한 맥심플랜트, 사유등 제일기획 건물 라인에 위치해 있다. 다양한 빵, 케익, 디저트가 존재하지만 그 메뉴 중 하나를 선택해야 한다면 내 선택은 바로 이 것. 처음 봤을 때 드는 생각은 푸딩의 맛이 아닌 5월, 햇볕 아래 유후인 거리를 올라 먹을 수 있었던 미르히 푸딩. 푸딩이라는 제품이 한정적이지만 왜인지 모르게 그 순간이 떠올랐다. 미르히 푸딩을.. 2021. 7. 26.
[경주] 요석궁 경주 한식코스 요석궁 경주에 방문 한 뒤 밥을 어디서 먹을까 고민하던 찰나, 어머니가 방송에서 나온 맛집을 저장해 놓았다하여 방문하게 됐다. 코스요리집인 줄 모르고 간단히 먹으러 갔다가 배터지게 먹었다 :-) 평일 점심이라 예약없이 방문하여 먹을 수 있었지만, 원래는 예약제로 운영된다 한다. 가격은 55,000원부터 시작으로 88,000 / 122,000 / 155,000 으로 구성되어 있다. 우리는 55,000원 반월정식을 먹었다. 에피타이저로 나온 음식들. 전체적으로 간이 강하지 않아, 깔끔한 걸 좋아하는 나에게는 매우 만족스러웠다 메인으로 나온요리들은 전체적으로 간이 세서 조금 아쉬웠다. 하지만 개인적으로 싱겁게 먹는것을 좋아하다보니 강하게 느껴질 수 있다. 전체적으로는 의도하고 방문한 코스요리집은.. 2021. 7. 24.
[JS] 프로그래머스 폰켓몬 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫 번째(3번), 네.. 2021. 7. 24.
반응형