개발자 되는 중/TIL&WIL 105

내배캠 TIL 2023.02.10

div에 백그라운드로 이미지를 넣으면 된다 ㅠㅠㅠ https://redpixelthemes.com/blog/tailwindcss-background-image/ How to work with background images in Tailwind CSS There are multiple ways to work with background images using Tailwind but I’ll show you the 3 most common (and recommended) ways to do it on your project. Via the tailwind config: Let’s start the old-fashioned way, by adding it to the tailwind config. redpi..

내배캠 TIL 2023.02.09

스크럼마스터 : 선형 오늘 팀원들 상태 희현 : 잘 못 잤다. 피곤하지만 눈 뜨고 앉아있으니까 괜찮아지고 있다. 서연 : 잘 잔 줄 알았으나, 막상 일어나니 피곤하다. 하지만 프로젝트를 진행할 정도는 된다. 하다보면 괜찮아질 것 같다. 선형 : UI 만들다가 늦게 잤고, 엄청 피곤하다고 생각했는데, 깨서 앉아 있다보니까 잠이 깬다. 시윤 : 아침이라 좀 맹한 상태지만, 잠을 잘 자고 일어났다. 어제 한 일 UI 만들기 프로젝트 디테일에 대한 회의 및 스크럼 디자이너 개발자 소통 특강 오늘 할 일 오늘 오후 스크럼 17시에 진행 UI 브랜치 pull request UI 마저 구현 UI 구현 끝난 사람은 기능 구현 시작 11시 디자이너님과 회의 6시까지 기술 멘토링 사전노트 제출 진행상황 시윤: 드래그 드롭..

내배캠 TIL 2023.02.07

https://velog.io/@swanious/TIL-.d.ts%ED%8C%8C%EC%9D%BC%EC%97%90%EC%84%9C-reference-typesreact-scripts%EC%9D%B4-%EB%AD%98%EA%B9%8C [TIL] react-app-env.d.ts파일 속 /// ? 프로젝트에서 .env파일에 있는 변수를 사용하려면 보통 아래처럼 사용할 수 있다. 근데 이렇게만 사용하면 typescript 프로젝트 상에서는 변수가 undefined 이라면서 오류가 발생한다. 타입지정을 안 velog.io https://velog.io/@nana1005/React-TypeScript-Tailwind-%EC%84%A4%EC%A0%95 React + TypeScript + Tailwind 설정 Ta..

[level 0] 문자열 뒤집기 - 120822

[level 0] 문자열 뒤집기 - 120822 문제 링크 성능 요약 메모리: 33.5 MB, 시간: 0.06 ms 구분 코딩테스트 연습 > 코딩테스트 입문 채점결과 정확성: 100.0 합계: 100.0 / 100.0 문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 입출력 예 my_stringreturn "jaron" "noraj" "bread" "daerb" 입출력 예 설명 입출력 예 #1 my_string이 "jaron"이므로 거꾸로 뒤집은 "noraj"를 return합니다. 입출력 예 #2 my_string이 "bread"이므로 거꾸로..

내배캠 TIL 2023.02.03

팀원들과의 아침 조회시간에 알게된 것 @media라고 나오고 lg, md, sm로 나누어서 설정해주는것은 반응성있게 만들 때 넣어주는 것이다. 그래서 최소 ~px 까지라는 내용을 볼 수 있었다. 당근마켓 클론 코딩 좋아보인다. 다음에 나도 한번 도전...? 깊은 복사를 해주는 내장함수의 등장! 멋지다 이제는 고민 말고 그냥 이걸 써주면 된다. https://developer.mozilla.org/en-US/docs/Web/API/structuredClone structuredClone() - Web APIs | MDN The global structuredClone() method creates a deep clone of a given value using the structured clone algo..

내배캠 TIL 2023.02.02

팀원들과 아침 조회시간에 알게된 것 스타일 컴포넌트에서 글로벌 css가 그때 그때 반영이 되지 않는 문제 해결하는 법 cssf를 이용해서 감싸주면 된다. tailwind styling 코드가 한정되어있다고 생각했는데 커스텀 할 수도 있다고 한다. group과 peer이라는 개념이 이용된다. git commit 컨벤션 템플릿을 만들어서 쓸 수 있다. txt 파일로 설정해서 불러올 수 있다? 근데 앞에 넣어놓은 내용을 다 지우고 해야하나? 예시는 뭘 많이 넣어놓은 것 같던데 jest로 test role 넣어주는 코드를 구경했다. 아주 큰 프로젝트일 때 안정성을 위해 쓰면 좋을 것 같다. 매번 테스트 롤 코드 써주고 테스트 돌리고 하면 개발 시간이 엄청 많이 걸릴 듯 하다. 오늘의 목표 next.js 포트폴리..

내배캠 TIL 2023.02.01

팀원들과 아침 조회시간에 알게된 것 개발자 도구 => 도구 더보기 => css 개요 여기에 들어가면 폰트, 색상에 대한 정보들이 상세히 나와 있고, 정보를 클릭하면 어떤 요소에서 쓰이고 있는지도 보여준다. image 컴포넌트를 써줘라 (next에서 import 해온 것) 공통 레이아웃을 주었어도 getlayout 메서드?로 보여주고 싶지 않은 컴포넌트 가려줄 수가 있다. next.js에서 어떻게 하면서 로딩 없이 바로 불러올 수가 있다고? html을 다 그린 다음에 가져와서? 공부하다보면 이 내용도 나오겠지. 벌써 2월이네 ㅎㄷㄷㄷ 오늘 목표 스파르타 next.js 강의 다 듣고 정리 (다 듣긴했는데 정리는 안 함) throttling, debouncing 코드 따라치기 (코드 따라칠 시간은 없었다) 렌..

내배캠 TIL 2023.01.31

throttiling, debouncing throttiling, debouncing: 유저가 짧은 시간 안에 많은 이벤트를 발생시켰을 경우 매번 서버에 전달하면 서버에 무리가 되기때문에, 한번에 모아서 서버에 보내주는 것 throttling: 지정해준 delay 시간 안에 일어난 요청은 한번만 해주기 leading: 요청 보내고, delay trailing: delay하고 요청 leading& trailling: 요청 보내고 delay하고 또 요청 delay 시간 기준 앞뒤로 한번 씩 요청 보내준다. debouncing: 마지막 이벤트 발생 기준으로 일정시간이 지나면 요청을 보낸다. == 일정 시간이 지나지 않았는데 계속 이벤트를 발생시키면 서버에 보내지지 않는다. 리액트 lifecycle 마운트=> ..

KPT 리액트 심화 프로젝트 A반 4조 코生코死 (23.01.20~23.01.30)

Keep 특별한 기능이 필요하지 않는 이상 Supabase로 파이어 베이스를 대신합니다. 버그를 조기에 모두에게 공유하도록 합니다. github 프로젝트를 적극적으로 활용하는 것을 유지합니다. Review 컬럼을 추가하고 PR 올라간 상태도 확인합니다. Tailwind 사용으로 불필요한 시간을 줄입니다. 깃의 이슈, 프로젝트, 피그마, 노션, 슬랙 등의 협업에 유용한 프로그램을 사용합니다. Problem 브랜치는 항상 연결상태를 유지합니다. 중간에 다른 사람의 브랜치를 확인하는 시간도 있습니다. import 할 때 컴포넌트가 여러 줄로 작성되었습니다. 1번만 사용하는 컴포넌트가 export로 접근가능할 수 있었습니다. 서로의 코드를 충분히 숙지하지 못 했습니다. 배포 할 때 오류가 같이 올라갔습니다. 발..