개발자 되는 중/TIL&WIL 105

내배캠 TIL 2023.01.30

랜딩 페이지 입장하기 13단계 단계 선택 skeleton ui 단계 이동 (헤더, 드롭다운, 로드맵으로, 스티키, 내림 스크롤 안보임, 올림 스크롤 보임, 스티키) 영상 링크로 실행 댓글 달기 댓글 비번 틀리면 수정 삭제 안됌 댓글 비번 맞추면 수정 삭제 가능 넘어가기 전에 검증 리스트에 체크하기 (모달, 로컬 스토리지를 이용해서 데이터 관리) 발표 시간 나중에 확인해보니까 15분 ㅎㄷㄷ 두배를 더 넘겨버림 ㅠ 담에 시간 관리 확실하게 하기 배포 전에 오류잡기 무조건 모달로 알러트창 쓰지마라 슬랙이랑 깃헙이랑 연동해서 풀리퀘스트 올라가면 슬랙으로 메세지가 날아오는 기능이 있나는데? 풀리퀘스트 리뷰를 꼼꼼하게 남기는거 해보고 싶다. 아울렛 컴포넌트는 칠드런 대신 넣는거다 최신 버전 넣어야해요

내배캠 TIL 2023.01.27

스냅샷 단축키! 윈도우 + shift + s "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PL1BztTYDF-QNrtkvjkT6Wjc8es7QB4Gty&maxResults=50&key=AIzaSyCHT-JZ1WdmBmyKJEecK8jpQumVDvuVtxI" supabase에서 데이터 베이스에서 새로운 테이블을 만들었다. 그런데 값이 배열인 경우에 어디에 넣어야할지 몰라서 헤메다가, ㄷㅇ 님과 ㅅㅎ님한테 물어봐서 배열값을 넣을 수 있었다. https://supabase.com/docs/guides/database/arrays https://supabase.com/docs/guides/database/arrays T..

내배캠 TIL 2023.01.19

팀원들과 공부한 내용 공유 파일명을 이름.d.ts로 하고 안에 declare로 정의해주면 import export를 해주지 않아도 바로 가져다 쓸 수 있다.! 꿀팁~~ declare interface Itodo { id: number; title: string; body: string; isDone: Boolean; } redux에서 action creator를 문자형 enum으로 만들어주고 타입으로 가져다가 쓴다. 반드시 인터페이스를 밖에다가 만들 필요없이 컴포넌트 매개변수 자리에다가 바로 써주어도 가능하다. 근데 뭔가 잘못했는데 혼자 써보니까 오류가 난다. 컴포넌트를 프롭스로 넘겨줄 수 있고 타입이 Propstype이던가? 여튼 그게 있고, 컴포넌트 안에 들어갈 타입도 안에 넣어준 것을 봤다. ㅅㅎ님..

내배캠 TIL 2023.01.18

타입스크립트로 리팩토링 타임어택 스파르타 강의를 다 들었지만 활용예시는 부족해서 유튜브와 유데미 강의를 참고해서 리팩토링을 했다. 처음부터 다시 깔아서 한게 아니라, 파일명을 바꿔주고 npm install typescript npx tsc --init (tsconfig.json 생성) 명령어를 넣어주었다. 새로 알게 된 내용 그래서 그런지 tsconfig.json에 주석이 많고 기본 설정이 이상하게 되어있는 것 처럼 보였다. 유데미 강의에서 tsconfig.json을 쓰는 법도 알려주는 것 같던데 강의를 봐야겠다. 제천 튜터님이 주석 처리 되어있던 jsx를 주석 풀고 react-jsx로 값을 넣어줘야 오류들을 막을 수 있다고 하셨다. // "jsx": "preserve" "jsx": "react-jsx"..

내배캠 TIL 2023.01.17

| => 파이프 연산자 or의 뜻을 가지고 있다. Union 타입의 장점 type.ts 라는 파일을 만들어서 거기다가 custom type들을 몰아넣어놓고 export 해서 쓴다. slice와 splice 메소드에 대해 https://www.daleseo.com/js-array-slice-splice/ 자바스크립트 배열의 slice()와 splice() 함수 Engineering Blog by Dale Seo www.daleseo.com 배열 구조분해 할당은 const [a,b] = arr 객체 구조분해 할당은 const {a,b} = obj 스파르타 강의는 다 들었는데, 유데미 강의 들으면서 리액트랑 어떻게 연결하는지 써봐야지 npx 명령어를 쓰니까 뭐를 더 깔아라고 한다. npm install -g ..

내배캠 TIL 2023.01.16

npm init -y (package.json 생성) npm install typescript (node.modules, package.lock.json 생성) npx tsc --init (npx == tsc 모듈을 한번만 사용하고 버리겠다) (tsconfig.json 생성) npm install -g ts-node (ts-node 명령어를 쓰기위해 깔아줘야하는 것) 기술면접 대비 MPA: 클라이언트 사이드에서 브라우저에 무언가를 요청할 때 마다 HTML 파일 전체를 서버에서 받아와서 화면에 뿌려준다. 껌뻑거리는 것을 볼 수 있다. SPA: 클라이언트 사이드에서 브라우저에 무언가를 요청하면 처음 한번은 HTML 전체를 서버에서 받아오지만 그 이후 부분적으로 변경하거나, 페이지 이동을 할 때 서버에서 받아..

내배캠 WIL 2023.01 2주차

목표 달성 여부 진도 밀리지 않고 따라가기 X 오전시간에 졸지 않기 O TIL 문시해알 잘 넣기 X 알고리즘 문제 매일 풀기 X 오전에 졸지 않았다. 역시 프로젝트하면 안 졸려 근데 아파서 앓아누웠던... 프로젝트 4차 마무리 했다 https://www.notion.so/ff5dd72d033644d4850ee23d8c70dc60 프로젝트 www.notion.so 이번 주에 배운 것 리액트 네이티브의 특징 안드로이드 와 IOS 플랫폼에 따라 다르게 screen area, box Shadow 적용하기 (...platform.select 사용, 기본 컴포넌트에 inline style 사용) display 값은 flex or none 삼항연산자 중복 이용 switch 문에 범위 조건 적용할 때 매개변수에는 tr..

내배캠 TIL 2023.01.13

ㅅㅎ님의 가르침 내가 작업하던 내용을 잠시 저장하고 브랜치를 바꾸서 다시 불러오려면 git stash git checkout 원하는 브랜치 git stash pop adpyke.codesnap라고 extention에 검색하여 install ctrl shift p 위의 설정 검색창? 이 열린다 거기서 code snap 클릭 내가 넣을 코드 드래그 조리개 클릭 발표에서 눈에 띄는 것 임무를 나눌 때 기능뿐만 아니라 그 외 역할도 나눠누는 것이 좋다. 발표할 때 KPT를 같이 넣는 것도 좋네 코드는 복붙해서 넣는게 낫네 리팩토링 희망 사항 회원가입시 재확인 인풋 글자 여러번 바뀌는거 오류 수정 로그인 시 로그인 아닐시 구별 명확하게 12시에 리셋 유튜브 영상 첨부 로딩 중 화면 설명보고 따라하기 화면 들어오기..

내배캠 TIL 2023.01.12

개꿀팁 그림자 넣는 법 리액트 네이티브에 ios, android 그림자 비교하고 코드 만들어주는 사이트 React Native Shadow Generator (ethercreative.github.io) React Native Shadow Generator ethercreative.github.io 플랫폼 별로 다르게 코드 넣어주는데, styleSheet를 이용하거나, inline styling을 이용해야한다. git remote prune origin prune 은 remote 의 것을 지우는 것이 아닌, local 에서 remote 를 ref 하는 것 중 유효하지 않은 것을 제거하는 작업이다. 반복되는 코드 컴포넌트화 두 개 해보았다. 신난다!