⚽️트러블슈팅

tailwind 를 사용하여, 애니메이션 위주의 홈페이지를 만들어 보려했다.cdn 링크 를 통해 tailwind 커스텀 설정을 찾아보고 있는데, tailwind play 를 제외한 다른 방법은 구글링을 통해서도 해답이 나오지 못했다.그래서 cdn 이 아닌, cli를 터

부모요소에 transform-origin 을 통해 중심축을 다른 곳으로 옮긴 후, 스핀 애니메이션을 부여하고, 자식에도 부모와 같은 중심축 이동 + 스핀 애니메이션을 부여하니, 소라게 모양으로 스핀하였다.우연히 소라게 모양으로 회전 했었다. 중심축을 여러 px 간격으로

원형이 추시계 운동을 쉽게 하는 방법과 여러 형제 도형을 생성후, 각도만 달리하여 여러 원형이 동일한 간격으로 나열되는 방안 간격.png큰 도형안에 작은 도형을 배치한다. ( 큰 도형은 부모 요소이며, 투명도를 주어 안보이게 한다. )그렇게 한 후, trans

Key 와 Value 를 뽑아낼때, 단순히 for문을 통해, 프로퍼티\[].\[] 과 같은 형식을 따로 따로 활용해 뽑아낼 생각 이였다.for in 사용❔ for of 사용 ⇒ 객체가 \[]와 같은 반복되는 속성을 가지고 있을 경우, Value 를 뽑아낼 방법for o

for in 으로만 key값과 value 값을 뽑아내는 줄 만 알고있었다.object.entries() 를 사용하여, for of 를 통해 순회하기다른 구조분해 할당에 대해 알아봐야겠다.

for in 만을 사용하여위의 데이터를 사용하여 중간고사 점수의 합을 도출해내려고 하였다.그러다 호출하는 여러 형식에 대해 혼란이 생겨, 여러 방면으로 시도를 해 보았다.배열 안에 배열배열 안에 객체객체 와 배열을 잘보고 각 목적에 맞는 자료를 추출할 수 있도록 한다.

2중 for 문으로 돌려서, 각 중복요소가 몇번 카운트가 되었는지를 체크할 생각이였다. ( Set 자체는 중복 요소를 제거 )filter 를 활용하여 간단하게 문제 해결이 가능하였다.필요한 메서드를 충분히 인지하고 있어야 겠다.

두가지 전부 같은 처리가 되는것 같은데, 굳이 따로 사용하는 이유를 몰랐다.textContent 는 따로 렌더링을 거치지않고 나타내고 , innerText는 한번 렌더링을 거쳐서 우리가 볼 수 있는 내용만을 표시해 줍니다. ( 조금 더 빠른 페이지 렌더링을 위해선 te

책집필을 진행하다 table 파트를 보고있었는데, summary 속성이 HTML Living Standard 로 넘어오면서 없어졌다는 것을 알았다. 개인적으로 테이블 태그가 어떤 용도로 쓰이는지 화면 낭독기에 읽히면 좋은 것 아닌가 생각이 들어 의아했다.summary

우테코 프리코스 문제 중, 3자리 숫자를 입력 받으면 각 자리수의 합이 큰지 곱이 큰지를 비교하여 큰값을 반환하는 것 이 있었다.나는 각 자리수의 합이 곱보다 큰경우를 먼저 if문을 통해 거른후, 나머지를 전부 곱셈으로 해결하려고 생각하였다.간단하게 하나의 변수를 선언

우테코 프리코스 문제 중, a~z 의 알파벳을 , a 를 받으면 z를 출력, b를 받으면 y를 출력하는 등, 으로 변환하는 문제가 나왔다.처음에는 아스키코드의 형 변환을 생각하지 못했다.아스키코드의 형 변환을 생각하여, 문자를 숫자로 바꾸고, 숫자를 변하여 문제의 요지

우테코 프리코스 문제 중, 각 배열의 값들의 곱을 나타냈어야 했기에 reduce() 함수를 사용하였다.초기값 설정하는 것을 놓쳐서, 오류가 생기는 이유에 대해 인지하지 못하였다.reduce() 메소드에서 초기값을 설정하는 것을 깜빡하고 있어서, 초기값을 설정하니 잘 돌

우테코 프리코스 문제 중, 한 함수에 모든 것을 다 구현을 해보았는데, 페어프로그래밍을 하는 것에 있어 상대방이 이해를 하는부분에 있어 어려움이 생겼다.각 변수 혹은 함수의 이름이 명확하지 않고, 파악하기 힘든 구조로 코드를 구현하였다.처음에는 한 함수에 최대한 빠르게

실습중에 파이썬의 zip함수와 유사한 역할을 하는 변수를 설정해보자.두 배열을 받아 각각의 같은 index 위치의 값끼리 의 짝을 지어주는 형식아래와 같은 코드를 활용하여 할 수 있다.

실습중에 전개구문을 활용해 보았다.우테코 프리코스 중에, 숫자 각 자리수를 나누어 생각해야하는 문제가 있는데, 이를 잘 활용하면 좋은 코드가 될것같았다.아래와 같이 짧은 코드로 나눌수 있어서 좋은것 같다.다양한 방법으로 접근해보는 노력을 해보자

우테코 숫자 야구 미션을 수행중, 예외처리의 경우는 throw문을 활용한다고 하여 알아보았다.throw 문 - 예외처리가 발생하면, 함수를 중지시킨다. 그후 catch 문이 있으면, catch 문으로 넘기고 그렇지 않다고 하면 종료시킨다.throw “문자열”throw

우테코 숫자 야구 미션을 수행중, git commit 컨벤션을 통하여 기능별 commit 을 했다.태그: 내용 의 형태이며, 태그: 이후에 한번 스페이스가 적용된다. feat : 새로운 기능 추가fix : 버그 수정docs : 문서수정refactor : 코드 포맷팅,

수업중에 require을 통하여 import 하는 형식과, from 을 통해 import 하는 경우를 보았다. 간단하게 require 이 from 을 통해 하는 것 보단 조금 오래된 문법이라고 하셨다.여기에 나는 조금 더 정확한 정보가 필요하였다.CommonJS ( m

알고리즘 문제를 푸는중이었다. 나는 아무런 생각없이 indexOf 메서드를 활용하여 if 문에 true 혹은 false를 반환받고 있었다. 그러다 문득 원인을 궁금해했고, 그에 대해 인터넷 서칭을 하여 해결했다.일단 먼저, indexOf 메서드를 활용하여 진리값을 반환

우아한 테크 코스 문제를 해결하는 중, 나도 모르게 Class 를 통하여, 여러 함수를 묶는중에 함수의 인자값을 constructor로 억지로 가져오려고 하였다. ( new ClassFunction(인자값,인자값….) )constructor를 활용하여 인자값을 불러와서

코드를 해석하거나, 방향성이 정해져있는경우에는 useState 사용이 자유로웠으나, 막상 무의 상태에서 useState를 사용하려니 머뭇한 나를 보았다.일단 그냥 아무거나 사용해보자.천천히 하나씩 직접 아무 코드가 없는 곳에서 작동시켜보자

문제를 해결하는중, 키값을 아무 의식없이 index로 넣어주고 있어서, 궁금하여 찾아보았다.순회를 돈다면 key 값을 지정해두는 것이 옳은 방향이고, 그중에서 만약 순서에 상관없는 리스트들이라면 그냥 key값에 index를 두어도 큰 상관이없다.무지성하게 index를

쇼핑몰 구현중, useEffect를 통하여 상태관리를 하였다. 이때, useEffect 는 마운트 될때, 단 한번만 실행하게 하도록 설정을 해두었다. 이미 렌더링 된 데이터를 다른 변수에 할당하여 사용할 생각이였다. 그러나, 자꾸 타입에러와 함께 할당되지 않았다는 에러

쇼핑몰 구현중, redux를 활용하여 상태관리를 해보다 생긴 생각이다. 처음에는 쇼핑카트에 담을 목록은 선택하고, 이 선택된 리스트를 다른 컴포넌트에서 map 함수를 돌려 데이터를 순회할 생각이였다. 그 과정에서 아무생각없이 key값에 각 목록들의 id 값을 지정했다.

( 일단 우리는, 각 컴포넌트 단위 파일안에 스타일드 컴포넌트를 만들어 사용하였다. )팀원들과 협업을 하다가, 과연 작은단위의 태그들도 스타일드 컴포넌트화 를 시키는 것이 맞는가에 대하여, 고민에 빠졌다. 나는 컴포넌트 자체가 하나의 기능단위로 생각을 하여서, 그 기능

팀 프로젝트 공통 UI 를 하는중에, 커밋 컨벤션과 다르게 커밋을 하였다. 이를 고치기 위하여 팀원들과 함께 구글링을 해보았다.amend 옵션을 사용하여 해결하였다.나 같은 경우는 마지막으로 커밋을 한 사항이기에, 마지막 commit 메시지를 수정하는 방향으로 하였다.

각 사이즈에 맞게, 버튼 스타일드 컴포넌트를 작성하고 있었다. 그러다 문득, 정말 작은 부분만 수정하는 경우가 생기면 따로 특이케이스를 생성하는게 맞는지, 아니면 오버라이딩 시켜서 단 한번만 사용하도록 할지 고민이 되었다. 만약 단 한번만 쓴다면, 오버라이딩 하여 스타

팀프로젝트 이미지 업로드를 구현중, 이미지 업로드 버튼의 스타일이 게시물 등록만 달라서 이를 해결하기 위해 전에 공부하였던 styled-component 오버라이드를 통해 해결해보고자 하였다.이미지 업로드 버튼의 스타일이 게시물 등록만 달라서, styled-compon

프로젝트를 진행하는 중에, 버튼을 사이즈 별로 받아오기 위해 props를 받아와 각 케이스에 맞게 스타일드 컴포넌트를 사용했다. 그러다 습관적으로 버튼에 받아오는 props 중 {…rest} 도 같이 받아왔다. 이를 사용했을때, 스타일드 컴포넌트 오버라이딩이 가능하였다

팀프로젝트 중 이미지를 import 하여 사용을 하다가, 많은 이미지를 사용할 경우 코드가 import 로 도배되는 것을 보게되었다. 이를 해결하기 위해 하나의 jsx 파일을 따로 만들어 이에 전부 다 import 를 받고, export 해주는 형태로 사용하는 것을 생

팀프로젝트 중 처음 Git&GitHub 를 본격적으로 다루다보니, 여러 오류상황에 처하였다.원격저장소 이름을 언급해주지 않아서, 이를 명시해달라는 에러 이렇게 뜬다면, 위에 나와있는 코드 ( git push origin HEAD… ) 를 사용하지 말고, git pus

팀프로젝트 중 img 태그를 활용하여, 작업을 하고 있었다. 그러다 내가 실수로 img 태그의 src 속성을 활용하지 않고, 스타일지정 할 때 background-image 속성을 통해 이미지를 입혔다. 그러다 실행 화면을 보는데, 내가 설정하지 않은 테두리가 조금 보

팀프로젝트 중 주어진 API 를 사용하여, POST 요청을 받아서 사용자가 작성한 이메일이 가입된 메일인지 확인해야하는 작업을 진행하여야했다. 처음이라 어렵게 느껴져서, 일단 무작정 포스트맨을 통해 POST 요청을 받아보았다. 또한 팀장님을 중심으로 다함께 실습해 보았

팀프로젝트 중 submit 태그를 사용하여, 회원가입창을 구현하고 있었다. 이 과정에서, 재렌더링이 되어지는 현상을 겪었다.a 태그 나 submit 태그는 고유한 동작이 있는데 ( href 혹은 창이 새로고침하여 실행되는것 ), 여기에서 button ,input 혹은

팀프로젝트 중 preventDefault 와 관련한 내용을 찾아보다가, stopPropagation의 차이를 알고싶어 찾게되었다.preventDefault Form 혹은 Submit 일때, 발생하는 재렌더링 오류stopPropagation 최상위 부모요소로 계속 전달하

팀프로젝트 중 검색어에 맞게 유저리스트를 나타나주는 역할을 진행하였다. 이 과정에서, 몇몇개가 이미지렌더가 안되어 alt 속성이 대체되어 나왔다.이를 수정하기 위해서, 이미지 태그안에 onError 속성을 추가해 주었다. 이러한 사항을 팀원들에게 알려 팀원들에게 에러

팀프로젝트 중 팀원분께서 분명 통신을 되는데, 다음 컴포넌트로 통신하여 받은 props 를 넘길때 될때가 있고, 안될때가 있다고 하셔서 함께 고민해 보았다.useState를 통하여, 렌더링 될때와 안될때를 관리해주는 것을 만든다. 그후, 렌더링이 된다면 페이지를 렌더할

팀프로젝트 중 게시물 작업을 하다, Uncaught TypeError: Cannot read property... 와 같은 에러가 계속 생성되었다. 어쩔때는 렌더링이 되고 어쩔때는 렌더링이 안되었다. 이를 곰곰히 생각해보다, 역시 렌더를 받는동안 기다리게 하여야겠다는

팀프로젝트 중 서버 관리자인 멘토로 부터, 너무 어마어마하게 많은 네트워크 통신이 이루어져있다고 말씀해주셨다. 처음에 어떠한 문제인지도 모르고, 처음 마주한 대형사고에 팀원 전부 패닉에 빠진 사건이었다.팀원 전부가 모여 화면 공유를 한 후, 가장 처음 홈화면 부터 들어

팀프로젝트 중 기본적인 기능 구현을 마친 후, node 창을 살펴보니 같은 내용의 warning 문구가 발생하는 것을 볼 수 있었다. (\*\*React Hook useEffect has a missing dependency)\*\* 이를 해결하고자, 여러 방면으로

팀프로젝트 중 게시물 작성 부분에서 To locate the bad setState() call inside… 이 node 환경에서 warning으로 발생하여 해결해 보고자 하였다.부모요소로 props를 전달하기 위해 받아온 setState 함수가 useEffect로

팀 프로젝트 도전과제 중에, 채팅을 맡아서 진행하게 되었다. 이에 대해 어떠한 방법으로 풀어나아 갈지 진지하게 고민을 하였다. 처음에는 구글링을 해보니, socket io 라이브러리를 활용하는 방안이 존재하였고, 또 교육프로그램중 경험해본 Firebase 로 구현해

자바스크립트 스터디를 하면서 부족했던 Closure에 대해 깨부하였다.정의 - 함수와 함수가 선언된 렉시컬 환경의 조합정의 - 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a 가 사라지지

기존 프로젝트를 타입스크립트로 마이그레이션 하기로 했다. 그러다 Api 인스턴스를 분리하고자 하였는데, 이때 나는 axios 를 사용하였다. axios의 요청 파라미터 옵션중 withCredentials 가 있었는데, 이를 사용하는 이유에대해 잘 모르고 사용을 하여서

불필요하게 baseUrl 부분과 Headers 부분 작성하는 것을 방지하고자 분리하였다.아래와 같은 형식으로 API 명세를 보고 코드를 작성하였다.위 와 같이 사전에 분리를 해두니, 여러번 작성할 필요가 없어졌다. 또한 오타로 인해 코드가 작동되지 않는 불상사를 피할수

커스텀한 Axios Instance 를 활용하여, API 기능을 모듈화 하기로 했다.커스텀한 Axios Instance 를 활용하니, baseUrl 뒷부분만 수정하면 되고 Headers 를 일일히 토큰을 넣어주지 않아도 되게 되었다.아래가 수정한 일부 코드이다.

오타방지 와 올바른 타입을 사용하기위해 Type 을 지정해 보기로 했다.컴포넌트 별로 type.ts 파일을 별도로 생성하여, 그 컴포넌트에 필요한 타입을 따로 분리해 두었다.아래가 type.ts 파일 일부 코드이다.interface 로 타입을 지정한 이유는, 같은 변수

원티드 온보딩 챌린지 과제에서 로그인 기능 구현 과제를 수행을 하였다. 그 과정에서, 타입스크립트를 사용하여 과제를 구현하는것에 어려움이 있었다.필요한 interface 를 정리하여 설정하였다.로그인시, 존재하는 계정을 판단하기 위해 임의로 더미 데이터를 설정하였다.위

원티드 온보딩 챌린지 과제에서 로그인 기능 구현 과제를 수행하면서 토큰 부분을 설정할때, stringify 함수를 통하여 JSON 형식의 문자열로 반환하는 과정이 있었다. 그 과정에서 JSON 함수로 자주 사용하는 stringify 함수와 parse 함수에 대해 명확히

코딩테스트 준비하기 앞서, DFS 에 대한 개념을 잡고자 테스트 해보았다.코드결과

이번에는 dfs 완전탐색을 통하여 다른문제를 풀어보았다.코드결과

fill 함수를 통하여 2차원 배열에 빈배열을 채워 넣어서 코딩테스트 문제를 풀어보았다. 그러나, 특정 2차원 배열에만 값을 추가하고 싶었으나, 전부다 추가가 되어 혹시 fill 함수를 할 경우에는 동일한 주소값을 참조하는것 같아 찾아보았다.fill 같은 경우는 동일한

코딩테스트 준비하는 과정에서 완전탐색에 관련하여 이론에 대해 공부하고, 그에 맞게 여러 코딩테스트 문제를 해결해 보았다.기본개념은 아래와 같다.정의 - 가능한 모든 경우를 전부 시도하여 정답을 찾아내는 방법. for & if 문을 활용하여 처음부터 끝까지 탐색하는 방법

코딩테스트 준비하는 과정에서 효율적으로 문제를 풀기위해, 투포인터를 사용하면서 시간복잡도를 O(n) 으로 줄이는 과정을 학습하였습니다.또한 슬라이딩 윈도우를 통하여, 연속된 수열을 동일한 크기의 인덱스에 두면서 비교해가는 탐색도 학습하였습니다.마지막으로, 해쉬맵을 통하

코딩테스트 문제 문항중 아나그램을 통하여 해결하는 문제가 있어, 아나그램에 대해 알아보고 해당 문제를 해결해보았습니다.아나그램은 비교하는 두 문자열의 알파벳 나열순서는 다르나, 구성하는 알파벳과 해당 알파벳의 개수까지 동일할때, 두단어는 아나그램이라고 합니다.각 해당

자료구조를 공부했을때, HashMap 같은 경우는 해시함수를 사용하여 키를 해시코드로 변환하고, 이 코드를 사용하여 값을 저장하고 검색하는것에 쓰는것으로 알고있습니다. 그렇다면 자바스크립트에서 사용되는 Map() 객체는 과연 이와 동일한지 알아보고싶어졌습니다.결과적으로

코딩테스트 문제에서 후위표기식을 통해 값을 도출해내는것이 있었는데, 일단 후위표기식을 알지못하여 문제해결에 어려움이 있었다. 이에 후위표기식에 대해 알아보았다.일반적으로 우리가 사용하는 사칙연산은 중위표기식 이라고 한다.후위표기식은 피연산자가 먼저쓰이고, 그다음 연산자

DFS 문제를 풀기위해 기본적으로 재귀함수에 대해 알아야한다. 이번기회를 통해 한번 더 재귀함수에 대해 알아보고자 한다.코드를 통해 알아보자.기본적인 재귀함수의 예를 들고와보았다.처음 callback(3) 가 실행되면서 스택에 callback(3) 이라는 프레임이 생기

nCr 과 같은 조합을 기존의 공식을 사용하지않고 구현하는 문제를 접하였다. 처음에는 감이 잡히지않아 먼저 nCr = (n-1)C(r-1) + (n-1)C(r) 이 되는 이유부터 살펴보면서 DFS 를 구현하였다.$nCr$ 의 예시로 $5C3$ 이라고 생각할때,1~5 까

순열 조합을 공식사용하지 않고 구현하기 을 해결하는 과정에서, n 과 r 이 커지게 되면 엄청난 시간이 걸리는 것을 알수있다. 조금 더 효율적인 방법을 고안하기 위해 메모이제이션 기법을 활용해 보았다.메모이제이션을 통해 문제에 나와있는 범위(n과r) 를 커버가능한 2차

1~N 까지의 수를 위 와 같은 형태로 그려나간다고 할때, 가장 아래의 숫자 F 와 1~N 의 N 을 주어질때 가장 첫단 (예시로는 1234) 을 예측하는 문제를 풀어보았다.처음에는 1~N까지의 순열을 저장하여, 각각 전부 파스칼 삼각형의 형태로 위와 같이 계산해 내려

참고테마 : https://jamstackthemes.dev/theme/notion-blog-nextjs-coral/노션 SDK 접근노션 API 를 설정하여 다뤄보기 ❓그렇다면, lib 와 pages/api 중 어느 디렉토리를 사용해야할까lib → 클라이언트

next.js 를 사용하여, 내 노션 데이터베이스와 연결시켜 보여주는 프로젝트를 진행하고 있었다. 기존의 lib 폴더안의 notion.js 의 API 에 살짝 손봐서 들여쓰기가 들어가있는 텍스트도 모두 뽑아내어 렌더하고자 하였다. 이때 yarn dev 를 사용할 경우,

우테코 프리코스 문제를 풀 때, find() 메소드를 사용하여 배열에 같은 값의 갯수를 파악하려고 하였다.메소드의 사용법에 대한 정확한 이해가 필요하다.

👨‍💻 사건 Football Manager 에 등록된 선수들의 데이터를 활용한 사이드프로젝트를 진행하고있다. 선수들의 데이터를 json 파일로 저장하여, 이 파일들을 MySql 을 통해, 데이터 베이스로 저장하고 활용하고자 MySql 을 설치하고자 하였다. 이때

Node.js 를 통하여, data.json 파일의 데이터를 MySQL에 접근시켜, 원하는 테이블에 삽입하는 것을 목표로 코드를 작성하다가 MySQL 관련 메서드에 대해 잘몰라 어려움이 있었다. 이에 따라 GPT 선생님 과 구글링을 통해 이를 해결하고자 하였다.해결한

👨‍💻 사건 지난글에서 작성한 개선사항을 해결해보고자 학습하였다. ( DATE 데이터 타입 문제 ) 링크텍스트 ✅ 해결 💭 개선

API를 설계할때는 데이터를 효율적으로 받아올수있도록 하는것이라고 알고있다.클라이언트측에 방대한 데이터를 보내게되면 효율성이 떨어질수있다고 판단하였다.그래서 페이징기능을 추가하여 특정 개수의 데이터만 받아오기 위해 api/data.js 파일을 일부 수정하기로 했다.한

End Page 에 도달하였을때를 어떻게 확인하는지, 또한 마지막 페이지에 도달했을때 페이지수가 올라가는것을 어떻게 처리하는지 구현해보기로 했다. 그러고 마지막 페이지에 도달하였을때는 더이상 데이터 패칭을 막도록 하였는데, 그러다보니 마지막 페이지에 도달하면 전 페이지

이와 같은 에러코드가 발생하여 알아보니, 서버의 최대 연결 수 제한에 도달했거나 초과했을때 발생하는 에러라고 나와있었다.max_connections 설정과 관련한 문제가 있을것으로 판단하여, 이를 확인하고 Value 값을 설정해 해결하였다.\-> show variab

이와 같은 에러코드가 발생하여 알아보니, 서버와 연결이 되지않는듯 하였다.그러나, SQL 쿼리문을 바꾸기전에 기존 쿼리문을 작성하였을때는 문제가없이 작동하여 쿼리 문에 문제가 없는지 살펴보았다.혹시나 SQL 에서 LIKE 문의 사용때문에 발생하나 싶어서, LIKE 를

Axios Instance 분리를 하지않아 겪지 않아도될 에러를 겪었기때문에, 인스턴스 분리를 통해 BaseURL 을 설정하지않는 기본적인 실수를 배제하고자 진행하였다.lib/api 경로에 index.js 에는 Axios를 생성하고, BaseURL 을 설정한다.lib/

MySQL 쿼리문을 통하여, filter 처리 ( 각 항목별 오름차순,내림차순 정리 ) 하려고 하였다.우선, 내가 필터를 적용시키기위해 한 생각이다.가장 첫페이지를 로드할때는 현재능력치(ca) 가 높은순으로 페이지 로드를 한다.항목을 클릭하면, filter를 적용할 필

보통 이전의 프로젝트 경우, 배포했을때 public 혹은 src 폴더안에 asset 폴더를 만들어 이미지를 함께 빌드했었다.해당 프로젝트는 lib 폴더만 패키지화를 할 예정이라, 이미지 파일을 어떻게 불러오는지 함께 고민하였다.이미지파일이 크게 없다고 판단되어서, gi

오랜만에 팀 프로젝트를 진행하다보니, 팀원의 PR 을 확인할때 브랜치를 땡기고자 하였으나 잘안땡겨와져서 다시 확인해보았다.아래의 방법대로 진행하여, 팀원들의 브랜치를 땡겨올수있었다.1\. git remote update 로 최신화2\. git branch -r 을 통하

이미지 파일을 어떤식으로 관리를 할까하다가, 관리자가 이미지 컨벤션에 맞게 이미지를 올리고, type 추가를 하여 관리하는 방안을 생각했다.그래서 서버하나를 생성하여, 서버에 Asset 이미지만 따로 올리도록 만들어 보고자 하였다.일단 크게 생각해둔것은 Cloudtyp

과연 이렇게 서버를 배포하고 나중에 재배포를 할경우 이미지를 어떻게 백업하고 관리하는지 고민에 빠졌다.Gpt 녀석은 아래와 같은 해결방안을 제시해주었다.클라우드 스토리지 서비스: AWS S3, Google Cloud Storage, Azure Blob Storage 등

Foundation 파트를 끝내서, 이 부분만 먼저 npm 에 패키지화해서 배포해보기로 했다.내가 생각한 단계는 다음과 같다.1\. 프로젝트를 build 한다.2\. 터미널에서 npm login 을 통해, npm 사이트에 로그인한다.3\. build 한 프로젝트를 np

처음에 주먹구구식으로 main,module,types 설정해두어서 원하는 결과를 도출하지 못하였다. npm pack 하여, 먼저 한번 사용해보았을때 import from 경로가 내가 원하는 경로가 아니였다.그리고 잘모르고 npm publish 를 냅다 먼저 해버렸었는데

서버에 이미지를 저장하고, 그 이미지의 명을 타입지정으로 한번 판단할수있게 기존에 설정을 해 두었다. 그러나, 추후에 이미지가 수정이 되는일이있으면 타입을 다시 수정하고 배포해야하는 번거로움이 있을것이라 판단하였다.그래서 사용한 것이, string 으로 타입을 지정해두

스타일드 컴포넌트를 생성하고, 해당 태그에 props 를 내려받아 속성에 해당하는 스타일을 처리해주기위해 사용했다.렌더하는것에는 문제가 없지만, 해당 button 태그에 필요없는 속성들이 붙었고, 아니나 다를까 warning 문구가 발생하였다.여러가지 방법이 있지만,

분명 컴포넌트를 만들때, 타입지정을 해주었다.그런데, app.tsx 파일에서 테스트를 위해 불러오는 과정에서 이상한 점을 느꼈다.props 로 size 와 state 를 지정해주어야 하지만, 안해줘도 IDE 에서 빨간 물결(에러표시)이 표시가 되지않았다.실제 렌더를 해

각 컴포넌트를 리팩토링 하는 과정에서,이벤트 핸들링 부분에서 많은 생각이 이루어졌다. 디자인 시스템 특성상 사용자가 편하게 이벤트를 핸들링 할수있도록 설정해주는것이 좋아보였다. props 드릴링해서 핸들링할 함수를 주는것 보다는, 컴포넌트를 세분화 하여 직접 컴포넌트를

기존에 Next.js 를 공부하면서, 프로젝트 구상을 하고 여러 시도를 하면서 진행해왔다.진행했던 프로젝트를 정리하고, 제대로 기획을 해서 프로젝트를 2주간 완성할 생각이다.기존의 데이터는 누군가가 생성해둔 json 형태의 선수데이터를 MySQL 에 데이터베이스를 생성

변환한 SQL 문 을 MySQL 에 넣어야하는데, 실제 배포시 유지되어야할 서버를 찾고자하였다.주로 추천하는 것이 AWS 의 EC2 를 추천하여서, 바로 사용해보기로 하였다.AWS EC2 사용기를 기록해보고자 한다.ubuntu 가 아무래도 레퍼런스가 많고, 초보자가 다

AWS S2 를 이용해, 서버에서 읽을수있도록 이미지를 업로드하고자 하였다.일단 AWS S2 의 버킷을 생성하여, test 해 보았다.❗ 생성할때, 아래의 이미지와 같이 체크박스를 해제하여, 퍼블릭으로 돌려서 테스트를 해보았다.그 후, 기본적인 정책설정을 해준다.\->

MySQL 데이터를 Prisma 로 마이그레이션을 하고, 해당 Prisma 에 접근을 하였다.접근까지는 성공적이였다. 그후, 나는 컬럼명을 누르면 해당 컬럼명의 오름차순으로 정렬하고싶었다.그러나, 공식문서에서의 Fetch 의 옵션은 데이터캐시처리 부분말고는 주어진것이

무한스크롤을 구현하기위해, React-Query 의 useInfiniteQuery 를 사용했다.처음 사용했을때는 굉장히 아무 문제 없이 잘 사용하였다.컴포넌트 분리를 하면서 , Redux 로 테이블 컴포넌트의 옵션과 Select 박스 컴포넌트의 옵션을 업데이트 하고 메

prisma client 로 접근하여 내가 원하는 데이터를 패칭해오고 있다.이때, 무한스크롤 구현을 위해 cursor 속성을 사용하였다.조건에 맞는 11개의 데이터를 가져온다고 가정한다.이때 마지막 데이터의 id 값 ( 나의 경우는 UID ) 를 prisma clien

Next Route Handler 를 할시, 나는 항상 Next에서 제공하는 NextApi 타입을 import 하여 타입지정 하였다.그래서 fetch 할때 넘겨주는 request 의 body 에 접근하기위해와 같은 식으로 넘겨 주었다.그다음 session validat

회원정보의 유무를 파악한후, Prisma 를 통해 user 데이터를 삽입하는 과정을 진행하고 있었다.그 과정에서 아래와 같은 에러가 지속적으로 발생하였다.{ clientVersion:"5.0.0"name:"PrismaClientValidationError" }Prism

Beautiful-dnd 를 통해, 드래그 앤 드랍을 구현하였다.Starting Memeber 의 공간을 각 포지션 별로 드랍 공간과 드래그 공간을 만들고, Sub Member 의 공간을 드랍 공간과 드래그 공간을 만들었다.각 공간에 위치한 선수는 UID 를 통해 구별

Squad 에 포함되지 않는 선수를 클릭하여, DetailPage 로 이동을 하면 정상적으로 렌더가 되는데, 상태관리 Squad 에 포함되거나, DB에 저장된 Squad 에 포함된 선수를 클릭하여 Detail Page 로 이동하면 아래와 같은 에러가 발생한다."Warn

포지션별 체크박스를 만들어, 해당 포지션을 클릭하면 그 포지션이 가능한 선수들의 리스트를 뽑아내기위해 고민하였다.체크박스를 선택했을때, 해당 옵션이 배열에 저장되고 그 배열을 request 로 보내도록 시도해보았다.다음과 같은 플로우를 거친다.1\. 체크박스를 클릭하면