- 전체보기(156)
- vscode(5)
- git(5)
- error(4)
- CSS(4)
- html(4)
- 단축키(4)
- WIL(4)
- input(4)
- react-query(3)
- React(3)
- 알고리즘(3)
- Read(3)
- JavaScript(3)
- push(3)
- TIL(2)
- radio(2)
- branch(2)
- Basic Pattern(2)
- Flex(2)
- 오타(2)
- merge(2)
- reset(2)
- react native(2)
- github(2)
- 내배캠(2)
- redux(2)
- virtual DOM(1)
- object(1)
- position(1)
- Fetching Data(1)
- import(1)
- CSP(1)
- 백엔드(1)
- checkout(1)
- 검사창(1)
- 부트스트랩(1)
- terminal(1)
- 테스트프레임워크오류(1)
- absolute(1)
- API(1)
- relative(1)
- prompt(1)
- vi E325(1)
- 프레임워크(1)
- 빠른수정(1)
- 비교연산자(1)
- Pull Request(1)
- for문(1)
- sourcetree(1)
- 플래그g(1)
- 인터프리터설치오류(1)
- operator(1)
- temp_html(1)
- 데이터분석(1)
- length(1)
- media queries(1)
- yarn(1)
- 브라우저(1)
- project(1)
- 시간복잡도(1)
- 연산자(1)
- 프론트엔드(1)
- Firebase(1)
- 피연산자(1)
- 공간복잡도(1)
- await(1)
- util(1)
- 빅-오(1)
- useEffect(1)
- 점근표기법(1)
- Message(1)
- 개발언어(1)
- img(1)
- react redux(1)
- 복합할당연산자(1)
- js(1)
- oh my zsh(1)
- async(1)
- return(1)
- export(1)
- &&(1)
- width(1)
- 인코딩(1)
- Handling Error(1)
- Content-Security-Policy(1)
- method(1)
- 할당연산자(1)
- 변수설정(1)
- 에러?오히려좋아(1)
- 유니코드(1)
- CREATE(1)
- modal window(1)
- template literals(1)
- Route(1)
- remote repository(1)
- repo(1)
- replace(1)
- 디코딩(1)
- 라이브서버(1)
- React LifeCycle(1)
- Math.floor(1)
- calc()(1)
- 기초꿀팁(1)
- commit(1)
- or(1)
- jquery(1)
- confirm(1)
- 증감연산자(1)
- media query(1)
- 함수(1)
- axios(1)
- charset(1)
- 컴파일러(1)
- styled components(1)
- alert(1)
- 기획(1)
- clone(1)
- 구조분해할당(1)
- extension(1)
- 미디어쿼리(1)
- useselector(1)
- @property(1)
- DevTools(1)
- reduce(1)
- localstorage(1)
- 빅 오메가(1)
- 오류(1)
- 화살표 함수(1)
- this binding(1)
- custom hook(1)
- 산술연산자(1)
- gitignore(1)
- for...of(1)
- 역추적(1)
- array(1)
- label(1)
- unsafe-inline(1)
- 저장은 필수(1)
- pull(1)
- node_modules(1)
- shortcut(1)
- 백준(1)
- space-between(1)
- react js(1)
- workspace settings(1)
- 메타태그(1)
- regexp(1)
- handleLocation(1)
- file(1)
- iterm2(1)
- Props(1)
- replit(1)
- approve(1)
- tip(1)
- utf 8(1)
- 꾸미기(1)
- set up(1)
- children(1)
- 이미지업로드(1)
- AsyncStorage(1)
- 통합개발환경(IDE)(1)
- 터미널(1)
- 루트 디레토리(1)
- typescript(1)
- argument(1)
- 정규표현식(1)
- 터미널 명령어(1)
- index signature(1)
- src(1)
- JSON Server(1)
Be my desk. _S.A.
🖥️ 데스크 셋업 공유 커뮤니티, Be my desk.’나다운 공간에서 나다움을 만들다.’나만의 데스크 셋업을 가지고 있거나, 가지고 싶은 사람들을 위한 공간 Be my desk.사용한 제품과 함께 나만의 데스크 셋업을 소개할 수 있습니다. 당신이 어떤 사람인지도요!
유용한 extension 모음집
크롬 브라우저리액트 개발툴 익스텐션Material Theme테마Material Icon Theme현재 사용하고 있는 아이콘들Auto Import자동으로 import 해줌Prettier - Code formatter코드를 이쁘게 포맷CSS Modules나중에 PostCS
크롬 CSS Overview
개발자도구에서 해당 페이지의 CSS의 개요를 보여주는 신기한 기능을 발견했다!개발자 도구에 들어간다.더보기 - 도구 더보기 - CSS 개요를 선택해 해당 기능을 추가한다.개발자 도구의 패널에서 CSS 개요를 선택한다.CSS 개요에서 캡처 개요를 클릭해 사용한다.참고 :
ComAround_KPT 회고
프로젝트 기획과정에서 git convention (commit, issue, PR, readme, git graph 등) 을 미리 공유하고 팀원 모두가 잘 지켰습니다.서로 질문하는 것에 대해 부끄러움이 없었고 같이 공부하여 해결하였습니다.팀 회의시에 엄숙한 분위기가 아
ComAround_ GitHub README 작성하기
참고 :깃허브 프로젝트에 리드미 파일을 잘 작성하는 방법GitHub README TemplatesMake a README3 Ways to Add an Image to GitHub README\[Github] README.md에 Image 넣기 & Image Size 조
ComAround_인덱스 시그니처(Index Signature) / 타입스크립트
인덱스 시그니처 방식의 타입지정을 통해 한번만 사용하는 객체의 타입지정을 간편하게 처리했다.인덱스 시그니처는 key와 value의 타입을 정확히 명시해야 하는 경우 사용할 수 있다.key : value 형식으로 사용한다.Ex. { \[Key: T]: U }\[key:
ComAround_ Template literals로 이미지 경로 동적으로 만들기
src 경로에 Template literals을 사용하여페이지를 이동할 때마다 동적으로 회사로고가 변경되게 만들었다.1\. 페이지 이동버튼의 state 에 회사이름을 내려준다.2\. 회사 이름을 가져와 urlReqCompanyName 라는 이름으로 변수선언한다.3\.
ComAround_ media queries / 반응형 만들기
media queries를 사용하면 반응형 웹사이트를 만들 수 있다.미디어 쿼리의 문법 구조는 아래와 같다.나는 스타일드 컴포넌트 내부에 미디어 쿼리를 적용해보았다.최대 너비가 768px인 좁은 화면에서는 flex-direction 을 row 에서 column 으로
메타태그와 CSP
메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그공격자가 주입한 스크립트를 차단하는 보안 메커니즘CSP는 모든 인라인 javascript를 허용하지 않음.또한 javascript를 로
ComAround_supabase fetching 에러 / 메타태그와 CSP > 해결
메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그공격자가 주입한 스크립트를 차단하는 보안 메커니즘CSP는 모든 인라인 javascript를 허용하지 않음.또한 javascript를 로
ComAround_ typescript narrowing / undefined > 해결
mapLocation에 들어가야하는 number 값들의 묶음인 객체 타입도 다 선언해주었는데,자꾸 해당 객체에서는 number 말고 undefined가 들어갈 수 없다고 나왔다.지금 이 setLocationState가 맵 data를 가져오는 비동기처리 이후에 일어나는데
ComAround_ Supabase 연결 / data null > 해결
Supabase 를 사용해보려고 했다.공식문서에 나오는대로 project URL, Project ANON keys를 다 세팅하고,fetching 공식도 그대로 사용했다.그랬는데 data가 null 로 나왔다.post는 401 Unauthorized 가 떠서 권한 문제가
WIL_배우는 속도가 점점 빨라져!
마지막 프로젝트를 앞두고 고민이 많았다.기간이 긴 만큼 좋은 팀원들을 만나고 싶은 욕심이 생긴다.적어도 소통이 잘 되는 사람들을 만날 수 있기를.이외에도 조금 충격적인 사실이 있었는데, 리액트 네이티브를 지나고 왔더니갑자기 리액트가 너무 낯설어졌다는 것이다. 첫날 리액
ComAround_커스텀 체크박스 인풋 만들기 / using styled component
위와 같은 커스텀 체크박스 인풋을 만들어보자.일단 내가 세운 구조는 다음과 같다.부모 : div (조정)자식1 : input : checkbox (터치영역)자식2 : label (스타일링)모든 스타일을 자식2인 label 에 주고,input 과 label을 감싼 div
빠른 수정 / workspace settings
내가 지정한 고유한 이름값이 카멜케이스에 맞지 않아 빨간줄이 뜬다면,아래와 같이 해당 이름값 위에 커서를 갖다대고, 빠른 수정을 누른다.여러가지 옵션 중에 workspace settings 에 해당 이름을 저장하는 옵션을 클릭하면,settings 에 해당 이름이 고유한