TIL
1.[TIL] Git
일단 작업폴더에서 git을 이용하고 싶으면 git init 부터 입력git add 파일명 (. / 전체)git commit -m "message"이제 영구적으로 기록해놓은 상태git add .(파일명)git commit -m "수정했다"(버전생성이라고도 함)왜 add/
2.[TIL] API
클라이언트에 직접적으로 서버를 연결하면 자바스크립트 코드는 누구나 확인할 수 있기 때문에 인증 정보를 노출시키는 행위이며 보안에 취약해진다.HTTP 요청에 대한 API를 말할 때는 보통 REST 또는 GraphQL API를 말하며 이 두 개는 서버가 데이터를 노출하는
3.[TIL] JSX
표현식은 {}로 감싸서 나타내면 됩니다. 대부분의 javascript 표현식은 모두 구현이 가능합니다.Props를 이용하여 컴포넌트에 값을 넘길 수 있다.<Body>에서 title 과 desc의 속성을 넘기면 Body컴포넌트가 props로 받아서 사용할 수 있음p
4.[TIL] Emotion 1
@jsx jsx를 꼭 적어주어야 @emotion/react가 실행된다.단순히 주석이라고 생각하고 쓰지 않으면 안됨!!codesandboxemotionjs-intro-1ysvo?fontsize=14&hidenavigation=1&theme=light기본적인 스타일은 st
5.[TIL] 비구조화 할당 (구조분해할당)
결과물이 이렇게 나오는 함수가 있다위처럼 hero 내부의 값을 조회하기 위해서hero.을 사용하고 있는데, 아래처럼 객체비구조화할당을 이용하면 더 간단히 표현할 수 있다.
6.[TIL] AXIOS
브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리쉽게 말해, 백엔드와 프론트엔드가 효율적으로 통신을 하기 위해 Ajax와 더불어 사용하는 것이다get 은 서버에서 데이터를 불러오거나 보여줄 때 사용하는 용도이다.주소에 붙어있
7.[TIL] useLocation()
useLocation : '사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks'
8.[TIL] SweetAlert2
이번 메인 프로젝트에서 유용하게 쓴 sweetAlert!https://sweetalert2.github.io/등록이나 간단한 알림창은 그냥 나와있는 데에다가 글자만 바꾸면 되는데,수정도 그냥 수정하거나 바깥 눌러서 끄거나 둘중 하나였는데삭제는 조금 애를 먹었다
9.[TIL] Redux-Toolkit
Redux 를 예전에 복습했던 게시글이 있다. 심지어 이것도 상당히 오래된... 정확하게! 개념을 알아가야 툴킷이고 뭐고 더 쉽다고들 하는 zustand, recoil 등등 할
10.[TIL] Redux-Toolkit 2 - Main Project
Action → Dispatch → Reducer → Store 메인 프로젝트를 진행하면서 공부했던 리덕스 툴킷 / 내 블로그 링크 이번 메인 프로젝트 때 저장소로 이용했던 리덕스 툴킷에 대해서 프로젝트와 연결해서 자세하게 공부해 보았다. Redux-Toolki
11.[TIL] useReducer
상태 관리시 useState 말고 useReducer를 쓰게 되면..컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있다.다른 파일에 작성 후 불러와서 사용 할 수도 있다.
12.[TIL] default props
배운 적 있는 거 같은데 가물가물.. > defaultProps : props를 따로 지정해주지 않아도 기본값으로 전달 해주는 props 라고 하는데 뭐라는지는 알겠으나 왜 쓰는지 어떻게 쓰는지 자세히 알아보도록 하자 Hello.js 혹은 비구조화 할당을 이용해 좀 더 간단하게 표현할 수도 있다. App.js ``로 써도 문제없이 작동. 당연한 ...
13.[TIL] useRef
리액트를 사용할 때 DOM 을 직접 선택해야 하는 상황에서 useRef를 이용한다.예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있을 것임.https:
14.[TIL] Local Storage
로컬스토리지에 아이템을 저장하는데,key는 문자열 "key"value는 10으로 저장하라는 의미.여기서 확인해 볼 수 있다.이렇게 수정을 해보고 다시 브라우저를 열어 보면,방금 저장했던 key와 10은 그대로 남아있고, 지금 추가한 애들도 들어와있다.근데 객체는 \[o
15.[TIL] TypeScript 타입확정하기 <Narrowing>
이렇게 함수를 지정해주면 에러가 난다.타입스크립트는 여러 개의 타입을 이용할 때타입을 확정지어주지 않으면 까다로운 타입스크립트는 오류를 내기 때문에, narrowing을 꼭 해주어야 한다.이럴 때 해결하는 방법이 narrowing이나 assertion을 이용하는 건데,
16.[TIL] Class + TS
만들어 보고 싶은 것을 인터넷에서 발견했는데, 그게 class로 만들어졌다는 것도 보고... 또 타입스크립트를 공부하면서 class 알긴 알지만 너란 녀석 내 동료가 되기엔 아직 많이 친하진 않은 거 같아 오늘 본격적으로 알아가는 사이가 되어보려고 한다. 그리고 타입스
17.[TIL] TypeScript 로 다크모드 구현하기 🌙 / 이미지 삽입 🌠
다크모드는 꼭 프로젝트 시작시에 고려해주기로 하쟈타입스크립트 + 리액트 앱과 스타일 컴포넌트 설치하기npx create-react-app my-app --template typescriptnpm i @types/styled-components style-reset은 브
18.[TIL] postman + 공공 API 불러오기
19.[TIL] html2canvas
css 강의 하나를 듣다가, 화면을 캡처해서 저장하는 것을 원해서서버 없이도 가능한지 구글링 해보다가 html2canvas를 알게 되어서 정리해보려고 한다.npm install --save html2canvasimport html2canvas from "html2can
20.[TIL] 이미지 업로드 구현
업그레이드된 작업을 위해 이미지 업로드를 미리보기 / 삭제까지 구현하는 방법을 알아보도록 한다!이 모든 것은 나의 빌드업이 될 것이야... 🙄파일을 업로드할 input 버튼 / 올린 파일의 이미지 미리보기FileReader를 선언하여 업로드한 파일 객체를 변수에 담음
21.[TIL] MongoDB
알다시피 웹사이트 내 유저 이름, 글 등 유저의 데이터를 영구적으로 안전하게 저장하고 싶으면 Database에 저장한다Database에 종류는 여러가지가 있는데, 그 중 관계형, 비관계형 데이터베이스가 있다.관계형 데이터베이스는 데이터를 엑셀처럼 표에 저장한다.데이터