본문 바로가기
반응형

분류 전체보기202

[SidePJ] 깃허브 Issue Cracker 2부 - Material UI 와 style-components의 대결 + 오류 해결 행복한 2주차 시작 📌 uuid 사용하기 React에 유일한 key 값을 제공하는 패키지 React에서의 유일한 key prop 값은 리액트가 리스트 아이템을 구분할 수 있게 한다. 그 전에는 배열의 key값에 인덱스를 넣었는데, 배열의 인덱스는 0,1,2,3.. 이므로 고유한 값이 아니므로 React가 렌더링을 잘못할 수 있기 때문에 고유한 값을 넣어야 한다. -> 배열에 data 추가 수정 시 전체 배열을 다 수정해야 하기 때문에 위 코드에서 uuid 패키지를 사용해 key값으로 사용할 유일한 UUID를 만들수 있고 이처럼 유일한 ID는 충돌할 염려가 거의 없습니다. uuid 같은 패키지를 사용함으로써 ID는 유일하고 예측가능해지고, 우리는 각 아이템에 대해 새로운 ID를 생성할 방법을 고민할 필요도.. 2021. 6. 29.
[SidePJ] 깃허브 Issue Cracker 1부 - 프로젝트 시작 마지막 프로젝트를 시작했다! 벌써부터 끝이 너무 아쉽지만 그래도 이번 프로젝트도 더더더 열심히 해보고자 한다. Issue Tracker Issue Cracker 🍪 시작! 이번 프로젝트는 Raccon , pyro, 노을, Neo와 함께하는 5인 대가족!!!!!! ( 다같이 밥도 못먹음!@ ) 우리의 목표는 이것! 1) 타입스크립트와 친해지기 2) Recoil 이랑도 친해지기 3) 에러처리와 최적화까지 4) CSS 강박에서 벗어나자!!!! ( 과연 될까 ) 단순히 깃허브 이슈 크래커 완성을 넘어서 리코일 라이브러리를 찐하게 이해하고 직접 구현해보는 시간을 가질 예정이다. 그러기 위해서는 첫주부터 달려야 하는데 면접이 하나 있어서 마음이 급하긴 하지만 열심히 해봐야지! 게시글을 쓰던 중에 타입에러인 경우가 .. 2021. 6. 29.
[codility] Lv2- OddOccurrencesInArray,Lv3-TapeEquilibrium ,TapeEquilibrium 프로그래머스 문제에만 의존하던터라, coldility 라는 새로운 코드풀이 플랫폼을 알게 되었고, 문제를 열심히 풀어보기로 결심했다. 문제를 풀이하면서 처음으로 놀란 것은 코드의 효율성을 신경써야 하는 것 그동안은 그렇게 효율성에 대해서 깊게 생각해보지 못했지만, 효율성이 좋지않거나 지나친 반복문이 계속되는 코드는.... score에서 깎이게 된다... 문제를 풀며 배운 점 1. 예외처리를 해야한다. 2. 입력값의 범위 크기를 알아야 한다. 3. 시작복잡도에 대한 고민을 하자 (https://rrecoder.tistory.com/63) 📌 2- OddOccurrencesInArray 배열에서 자신과 중복한 값의 개수가 홀수인 값을 return 하는 문제 첫 풀이 def solution(A): cntDic.. 2021. 6. 21.
[Typescript] export 오류 - because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208 cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208 상황 export default function CustomizedSelect () {} 선언 시 export를 바로 하면 에러가 생긴다 스택오버플로에서 찾아보니 모듈이 아닌건 스크립트로 판단해 export 를 먼저 선언하지 않고 나중에 해야 한다는점이다. 해결 //1 function CustomizedSelect () {} export default CustomizedSelect //2 fu.. 2021. 6. 11.
[백준] 파이썬/ 그리디 11047_동전0 , 1541_잃어버린 괄호 📌11047 동전0 https://www.acmicpc.net/problem/11047 11047번: 동전 0 첫째 줄에 N과 K가 주어진다. (1 ≤ N ≤ 10, 1 ≤ K ≤ 100,000,000) 둘째 줄부터 N개의 줄에 동전의 가치 Ai가 오름차순으로 주어진다. (1 ≤ Ai ≤ 1,000,000, A1 = 1, i ≥ 2인 경우에 Ai는 Ai-1의 배수) www.acmicpc.net 내 풀이 import sys input= sys.stdin.readline coins=[] coinCnt=0 n,k = map(int,input().split()) for i in range(n): coins.append(int(input())) left=0 for j in range(len(coins),0,-1).. 2021. 6. 8.
[SidePJ] airdnd 3부 - 회고와 마무리 주말동안 코드리뷰 받은걸 고치며 월요일 한주 시작 ! 📌 연속클릭 방지하기 현재 airdnd의 달력 화살표를 누르면 다른 달로 넘어가는데, 여기서 사용자가 연속으로 클릭을 하게 되면 이벤트가 꼬일 수 있어 preventClick이라는 함수로 방지를 해놓았다. 변경 전 const preventClick = () => { setTimeout(() => { setDisabled(false); }, 200); const handleClick = () => { if (disabled) return; setDisabled(true); preventClick(); 클릭을 누르면 disabled를 true로 바꿔 preventClick이 다 동작하는 2초동안 클릭이 불가했다가 2초 후에는 disabled = false.. 2021. 6. 6.
[React] OAuth Github 로그인 구현하기 전부터 너무나도 해보고 싶었던 깃허브 OAuth 로그인을 성공적으로 구현했다. 구현단계와 방법을 설명해볼 예정! 📌 프로젝트 구성 * React 함수형 컴포넌트 (jsx) 방식으로 구현한 프로젝트입니다! * BE와 함께한 프로젝트로 BE 단에서는 access-token 발급과 정보 요청을 맡아 처리했습니다. * FE단에서는 code요청한후에 Github 계정 정보를 바로 요청했습니다. 깃허브 로그인 구현을 검색해보면 구현하는 여러가지 방법이 있지만 크게 두가지로 나뉘는 느낌을 받았고, 2번 방법으로 처리했다 . 1) FE단에서 code 요청한 후 POST 로 jwt 요청 : 참고 (https://devhyun.com/blog/post/15) 2) ✅ FE단에서 code 요청한 후 GET으로 jwt 요청 .. 2021. 6. 5.
[Side PJ] airdnd 2부 - 상태에 따른 CSS 변화 (상태지옥 State) 이번에는 왜 안찾아오나 싶었던 상태관리의 혼란이 다시금 찾아왔다.😵 📌 날짜 data state를 이용한 CSS 변화 ❖ 상황 체크인과 체크아웃 된날짜와 그 사이를 CSS 로 표시하기 캘린더를 만들고 클릭을 누르면 해당 dataset을 받아 ContextAPI로 관리하는 CheckIn, CheckOut 에 반영시켰다. click 이벤트가 발생했을 때 그 가능성을 조건문으로 비교하여 CheckIn, CheckOut 에 반영하는 방식으로 data흐름을 짰는데 여기서 문제는 클릭된 날짜의 상태관리다. CheckIn, CheckOut data는 전역관리가 되고 있는데 clickedData는 click이벤트 (handleTdBtnClick )안에서만 관리되고 있기 때문에 rendering시에 해당 값을 가져올 수.. 2021. 6. 5.
[SidePJ] React 모달 영역 밖 클릭시 닫기 📌 전체 구조 PayModalWrapper 가 RoomPayModal을 감싸고 있는 상태 동작 : 숙소를 누르면 모달창이 뜨고 모달창 외의 영역 클릭 시 모달창이 닫힌다. 📌 코드 handlePayModalOff 함수로 모달 외 영역 클릭 시 닫히는 클릭이벤트를 제어할 예정 return 부분 return ( {isPayModalClicked && ( handlePayModalOff(e)} > )} ); handlePayModalOff const ReservationMain = () => { const [isPayModalClicked, setIsPayModalClicked] = useState(false); const handlePayModalOff = (e) => { const clicked = e.t.. 2021. 6. 3.
반응형

티스토리툴바