TIL

목차 React Node.js NPM yarn Javascript & React JSX emotion > # React? javascript를 쉽고, 효율적으로 사용할 수 있도록 facebook에서 만든 도구 * 대표 서비스 : 페이스북

[목차] React를 배워야 하는 이유 React Component 클래스형 컴포넌트 vs 함수형 컴포넌트 React-Hooks State useState state를 변수로 사용하는 이유 서버컴퓨터로 전송하기 위해 state에 담아두기 작성한 내용을

🏷️ [ 목차 ] HTTP 통신 HTTP 요청(Request)과 응답(Response) 요청(Request) 응답(Response) API API 종류 (rest-API vs graphql-API) rest-API와 graphql의 차이점 API 응답 데이터 J

🏷️ [목차] 동기 실행과 비동기 실행 VSCODE에서 비동기 REST-API에서 동기/비동기 실행 호이스팅(Hoisting) apollo-client 셋팅하기 _app.js의 작동 원리 apollo-client 로 graphql 뮤테이션

🏷️ [목차] 라우터 객체와 라우팅 정적라우팅과 동적라우팅 비동기 통신과 조건부렌더링 graphql 뮤테이션에 try ~ catch 적용 Apollo 디버깅 툴(Apollo-Client-Devtools) 🖇️ [출처 및 참조] 코드캠프 MDN https://med

🏷️ [목차] 다이나믹 라우팅 리뷰 폴더구조 Nullish-coalescing 실무용 폴더구조(container / presenter) probs props를 내려주기 _ 부모 컴포넌트 props 받아오기 export vs export default

🏷️ [목차] props drilling emotion에 props던지기 리액트가 리렌더 하는 방식 컴포넌트 안에서 router 사용시 주의점 주소를 설계하는 법 🖇️ [출처 및 참조] 코드캠프 💡 props drilling? > props가 자식에게 넘겨주는

🏷️ [목차] 실무전용반복문 map filter HTMl과 연결하기 refetchQueries map의 index를 key로 사용시 발생하는 문제점 React에서 Key가 필요한 이유 Index를 Key로 줘도 괜찮은 상황 🖇️ [출처 및

🏷️ [목차] library폴더의 utils 파일 관리 컴포넌트 재사용성 수정한 값만 바꿔주기 defaultValue와 state defaultValue를 넣어도 생기는 다음 문제점 defaultValue를 state의 초깃값으로 넣는다면 변경된 부분

🏷️ [목차] 타입스크립트란? 타입스크립트를 사용하는 이유 타입스크립트 사용방법 타입스크립트 파일 확장자와 실습 타입 추론 타입스크립트 배열, 객체 실습 엄격한 타입스크립트 strict 타입으로 뭘 받아오는 지 잘 모를 때 유틸리티 타입 API

router 경로 설정query, mutation 작성 및 불러오기조건부렌더링이전 TIL에서 회고록이 비어있는 이유,, 갱장히 다사다난 했다는 것,,,,앞 뒤 다 자르고 결론부터 정리하자면폴더 관리를 잘하자그리고 네이밍을 잘 하자,,ㅠㅠㅠㅠ아직 확실하게 이해하지 못한

✅ input value 초기화 > defaultValue: input tag에서 처음 보여줄 값 value: input tag에서 계속 보여줄 값 두 속성은 지정했을 시 처음 보여진다는 부분에서 비슷하지만 다르다. defaultValue를 지정해주고 input 창에

[실습 section13] >코드리팩토링 1단계 2단계 ->화살표함수에 리턴을 붙일 수 있다. 중괄호와 리턴생략가능하고 소괄호로 바꿀 수 있음. 하나밖에 없으니 소괄호도 생략가능 3단계 ![](https://velog.velcdn.com/images/zitto/p

✅ 코드린터 / 코드 포멧터 > -> 협업 시 우리끼리의 규칙을 정하는 것 그것을 도와주는 것이 eslint, prettier [eslint 설치방법] eslint 설치하기 (package.json이 있는 경로에서 입력) 질문창 뜨면 선택하기 VS code ex

✅ 라이브러리(Library) > 도서관에서 필요한 책(정보)를 꺼낼 수 있는 공간! 프로그래밍에서는 필요한 기능들이 모여있는 코드들의 집합으로 누가 만들어 놓은 도구를 가져다가 사용! 반복적인 코드작성을 줄이기 위해 클래스,함수,변수들을 만들어 필요할때마다 호출해

[실습 section13-01] 설치명령어 : yarn add @ant-design/icons antd ✔️ 아이콘 적용해보기 > 아이콘 클릭 시 콘솔에 문구가 출력되도록 하기 -> 하지만 콘솔에 값이 출력되지 않는 것을 확인할 수 있다. 이와 같은 현상이 발생하는

[실습 section13-03] 기존의 alert()를 사용해 경고창을 구현했다면 라이브러리의 Modal을 이용해보자! ✔️ 버튼 클릭시 모달창 구현하기 > ✔️ 모달로 비밀번호 창 구현하기 >![](https://velog.velcdn.com/images/zitt

[실습 section13-04] state란 리액트 컴포넌트에서 데이터를 담기 위한 상자! 이 상자에 담긴 내용들은 함수가 모두 끝나게 되면 화면에 반영이 된다. 버그 실행은 잘되나 이상한 현상 버그의 유발 요인 이방법보다 좋은 방법 실행할때마다 임시저장공간에 만

✅ 레이아웃(UI의 배치) > 레이아웃이란 프로젝트 전체의 UI 구조, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일이다. 레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 쉬워진다. ✔️ 기본레이아웃 구조설계 -> 나

🏷️ 페이지네이션 : 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법 >### ✔️ 일반적인 방식 [실습-1] [실습-2] 페이지네이션 next / prev 구현 > - index 활용하기 [실습-3] lastPage 설정 리팩토링 중복되는 부분

💡 객체 / 배열복사 > 객체 복사라는 것은 존재하지 않는다. 단지, 원본객체와 같은 값을 가진 객체를 새로 만들 수 있을 뿐이다! ✅ 얕은복사 원본 객체의 모든 값을 따로따로 가져오지 않고 마침표 세개를 통해 해당 객체 내의 모든 값을 개별 요소로 분리한다. 복사본

댓글의 수는 예상할 수 없음. 따라서 그 개수 만큼의 길이를 가진 배열로 state를 관리하는 것은 비효율적이다. 댓글 컴포넌트를 따로 분리한 뒤 각각의 컴포넌트에서 isEdit state를 관리하는 방식을 사용! 각 컴포넌트가 가지고 있는 isEdit은 이름만 같

▼ 링크 react infinite scroller react infinite scroll component ✅ 무한스크롤 방식 마직막으로 받아올 댓글이 없다면 리패치할것이 없다면 기존거ㅅ만 리턴해달라 typescript

[기존코드] > 객체의 특성을 이용해 묶어보자! 객체에서는 키 중복이 안된다. 만약 사용자가 강제로 중복된 키를 사용한다면? 어떻게 될까? 하단의 키가 상단의 키를 덮어 씌우므로 하단에 명시해놓은 키가 출력된다. 3개가 동일해짐! 이제 스프레드 연산자를 사용해서 수

리액트에서 타입스크립트로 넘어가면서 js파일들도 tsx와 ts로 바꾸고, 변수의 타입을 지정해주는 작업이 필요했다. 당일 배운 걸 당일 적용하고 싶었는데,, 해결하지 못한 기능들도 마저 구현을 해야 했기에 결국 강제로 밀리고 밀려 주말에 작업을 할 수 있었다. 한꺼번에

💡 Class란? : class는 객체이자 물건을 만드는 설명서 >대표적 클래스 사용예제) 여기서 데이트를 객체 또는 인스턴스라고 부른다. . 을 붙여서 함수나 변수를 넣을 수 있다. .을 붙여 사용해야 하는 함수들을 메소드라고 한다. 함수와 변수 사용 시 클래

💡 useEffect ❗️ useEffect 사용시 주의 사항 > useEffect 안에서 setState의 사용 →useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양하시는게 가장 좋습니다. > > > > 컴포넌트가 마운트된

프론트와 백엔드간의 소통을 위해 백엔드에 대한 것도 반드시 알아둬야 한다! 💡 서비스 전체 구조 >다양한 사이트가 있고 백엔드와의 소통을 통해 데이터베이스에서 정보를 저장하고 꺼내올 수 있다! 💡 백엔드와 데이터베이스구조 이해 > 데이터 베이스란 데이터를 담아두

Node.js에서 JS 실행하기 Node.js에서 TypeScript 실행하기 프로젝트와 데이터 베이스 연결실습 typeORM 설치 데이터베이스와 백엔드 연결해주기 entity 만들기 DBeaver 연동

- open-api >- 기존 : SOP -> 동일 출처(Same Origin)에서만 접근이 가능한 정책 두 URL의 Port(명시한 경우), Protocol, Host가 모두 같아야 Same Origin! >- 웹서비스가 활성화 된 이후, Cors -> 리소스

🏷️ 목차 >- @Decorator 데코레이터 ApolloServer 셋팅 서버프로그램 만들기 서버와 포트 이해 CPU/RAM/DISK API 만들기 💡 @Decorator 데코레이터 >[실습] -> aaa함수로 Board만들기 💡 ApolloServer 셋

mutation 작업 - API API_DOCs 로 타입만들기 string 실행했을 때 들어오는 타입 브라우저에서 데이터를 담아온다. writer ,title 이런것을 parent,args,context,info중에 보낸데이터를 args로 받게 된다. 이 받아온

Firebase란? 프론트엔드 개발자가 백엔드 없이 데이터를 직접 넣을 수 있는 프로그램 GA: 접속할 때마다 어떤아이피에서 접속했는지 통계적으로 분석해주는 서비스 firebaseApp조회해서 가져오는 방법 그 내용들은 설치명령어 : (sudo) yarn add

\-> 파일을 선택하여 uploadFile 이라는 api를 요청하게 되면, backend에서 storage(클라우드)로 파일을 전송(업로드)!다운로드한 url(https://강아지.png)을 백엔드에 건네주고 그걸 브라우저에 전달해줌.그 url주소를 가지고 등

여전히 진행 중인 나의 포트폴리오와할많하않이었던 알고리즘 테스트,,그리고 주어진 또 하나의 Interim Evaluation일단 알고리즘 테스트부터 말하자면리얼 폭망ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ매주 수요일마다 기부니가 째진다 즘말~!얏호!공부하면 된다

🏷️ 목차 검색 프로세스 이해 (ES, Redis 등) 검색버튼 없이 검색 시, 발생하는 문제 디바운싱 & 쓰로틀링 Lodash 디바운싱 구현 💡 검색 프로세스 이해 (ES, Redis 등) >Browser에서 검색을 요청하면 Back-end에서 DB 내부의 수

[review] > 3개의 이미지 첨부 버튼이 화면에 노출되도록 하려면, map을 실행하는 배열의 길이가 일정하게 3이어야 한다. 이를 위해 fileUrls라는 state의 초기값에 빈 문자열이 3개 들어가 있는 배열을 넣어준다. 빈문자열 3개를 props로 전달해줘

updateBoardInput 빈객체사용한 원리 zipcode랑 address랑 다름 상세주소는 비밀번호 입력할 때랑 같음 둘다 리드온리 값을 넣어줘야 되므로 value value /defaultvalue /placeholder 고정값(수정불가) / 초기값(나

✔️ props의 실체 >함수형 컴포넌트는 함수이기 때문에 를 과 같이 사용할 수 있다. Presenter함수를 해당 위치에서 실행시키겠다는 뜻! Presenter함수의 인자(argument)를 한번 보겠습니다. count가 함수의 인자 부분에 들어가 있네요! 그리고

💡 글로벌 스테이트 >: 전역에서 사용할 수 있는(여러 컴포넌트에 사용되는) state 하나만 만들어서 모든 컴포넌트에 사용가능! useQuery에서 받아온 데이터를 props drilling을 하지 않아도 되고 굉장히 편리해진다. > 전역상태관리(global s

우리는 기존에 회원가입이나 로그인시에 무언갈 포함하고 있는지 확인할 때 includes를 사용했었습니다. 정규표현식을 배우게 되면 조금 더 편하게 확인 할 수 있습니다. 정규표현식 사용하기 정규표현식 사용 방법 / 조건 /.test("검사하고 싶은 것") 정규

1️⃣ 첫번째 로그인 처리 방식 >### ✔️ 로그인 기본 처리과정 > 브라우저에서 특정 email과 password를 가지고 로그인하면 로그인 할 때 2가지의 요청이 이뤄짐. > 로그인하는 API가 있을 거고 프로필정보를 가져다주는 fetchuser 요청API도

✅ 단방향 암호화(해싱) 양방향 암호화 우리가 로그인을하고, 로그인 정보를 fetch해왔을 때 브라우저에 비밀번호를 fetch 할 수 없어야 합니다. 즉, 비밀번호를 알아내는게 불가능해야 합니다. DB에 있는 비밀번호를 알아낼 수 있게되면, 해킹을 잘하는 사람이

지금까지 로그인 기능을 구경했다면, 이제 직접 로그인 기능을 연결해보도록 하겠습니다. 기능을 구현해보기에 앞서 새로운 폴더를 생성해서 진행해주셔야 합니다. 우리가 구현할 기능은 로그인 후 로그인 성공 페이지까지 진행할 것 이므로, 로그인 폴더와 로그인 성공 폴더 두

이러한 이유로 한번에 html,css,js를 받아오는 것이 아닌 html먼저 받아온다. 그리고 html을 그리는 과정에서 css,js를 다운받아 온다. 해당하는 html파일을 만들어야 하는데 실행이 잘되는지 그려보고 만든다. 이 과정을 프리렌더링prerendering

accessToken을 변수에 넣어 두고 사용하는데, 왜 새로고침하면 사라질까? 로그인 정보가 모두 날아가서! > 왜 날아가냐? 새로고침은 브라우저에서 해당 주소로 다시 enter를 친것과 같음! > 주소창에 주소를 입력하는 순간 프론트엔드서버 컴퓨터에 접속해서 htm

💡 권한분기 >로그인 인증이후에는 로그인 한 사람과 안한 사람으로 권한 분기가 이뤄진다. 스택 상자쌓인 걸로 생각! 위에서부터 꺼내는 방법 First In Last Out FILO 필로! 큐 줄서는 것 앞에서부터 순서대로 First In First 피포!

검색 포폴 키워드를 검색하면 그만큼 페이지가 줄어든다. 페이지네이션에서 작업한 것은 아무것도 없음 키워드 검색해서 나온 토탈카운트를 프롭스로 넘겨줬을 뿐! 패치보드카운터로 1000개가 요청됬다면 거기에 맞는 페이지처리가 이뤄짐 키워드 검색하면 키워드에 대한 패치보드

브라우저 저장소를 이용해 비회원 전용 장바구니를 구현할 수 있다. > 각 브라우저 저장소의 특성을 고려해 기획 의도에 적합한 저장소를 선택하면 된다 > 그 중 가장 일반적인 로컬 스토리지를 이용해서 구현해보겠다. [실습] >1. 장바구니 버튼만들기 클릭함수만들어서

폼 라이브러리를 사용하면 더이상 노가다성 코딩을 하지 않아도 됨. 검증을 대신해주는 폼, state를 대신해주는 폼( react-form, redux-form, react-hook-form, formik) 등 종류가 다양하다 💡 react-hook-form 사용하

yup은 이렇게 까다로운 검증과정을 대신해주는 라이브러리 입니다. yup 사용하기 보통 form과 함께 사용합니다. 함께 사용하실땐 리액트 훅 폼의‘Schema Validation’을 잘 봐주시고 함께 사용해주시면 됩니다. 설치명령어 yarn add yup ya

src/components/commons/hooks/useAuth.tsxcustom hook은 컴포넌트가 아닌 함수이기 때문에 return 부분이 JSX가 아님!custom-hooks-use-auth 폴더의 index.tsx해당 페이지가 실행되면, 상단의 useAuth

✔️ 비구조화할당(구조분해할당) 이란? >: 변수를 한번에 모두 선언하고 할당 할 수 있도록 도와주는 것 ✔️ 객체의 구조분해 할당 >이름이 동일한 값만 구조분해할당 가능 대신, 순서는 크게 중요하지 않음(이름이 고유하기 때문!) ✔️ 배열의 구조분해 할당 >![]

✔️ any > ’어떠한 것이든지, 누구든지’ 라는 뜻으로, 어떠한 타입이 입력되더라도 전부 허용하는 타입입니다. 요소에 any 타입을 부여할 경우 사실상 타입스크립트가 아닌 자바스크립트를 사용하는 것이나 마찬가지가 됩니다. ✔️ unknown > ’알 수 없다, 모

💡 카카오 개발자 (Kakao Developers) > 사이트 : https://developers.kakao.com/ >### ✔️ 카카오 맵 구현 카카오 아이디를 이용해 로그인 내 애플리케이션(내 프로젝트만들기) 내앱 -> 플랫폼 -> 사이트도메인 등록하기 제품

다음에 또 요청할 수 있기 때문에 글로벌 스테이트에 저장한다. 바로 API 요청하지 않고 글로벌 스테이트에서 확인 후 가져온다.(요청 수 감소 목적) fetch-policy!! 디비에 추가됬는데 화면에 안보여서 리패치라는 걸 했고 조회된 목록을 다시 조회해서 변경

React-Quill: textarea의 단점들을 보완해 stylish 하게 내용을 작성할 수 있도록 도와주는 웹 에디터 라이브러리설치명령어yarn add react-quill실습ReactQuil의 onChange는 개발자가 만들어 놓은 커스텀 요소로,이름만 같을 뿐

각각의 카드사에게 승인을 받아 결제 시스템을 구축하는 방법신한카드, 하나카드, 농협카드 등등 현존하는 다양한 카드 회사들은 지원하는 결제 방법이 전부 다름.그렇기 때문에 모든 경우를 고려하여 결제 시스템을 개발하려면 인건비와 시간이 많이 소요된다.실제 비즈니스 환경에서

결제완료 후 백엔드로 createPointTransaction 등의 API 요청을 보낼 때결제가 이루어진 시점의 시간을 DB에 함께 저장하게 된다.이 때, 시간을 새로 생성하는 작업은 절대 프론트엔드 서버에서 하면 안된다.사용자가 PC의 시각을 실제와 다르게 조작해서

✔️ Callback 함수란 >#### 함수의 인자로 들어가는 함수 > callback 함수를 왜 사용하는 걸까? > 실행권한을 넘기기 위해! 끝나면 내거 보내줄테니 이거 실행시켜줘! ✔️ 비동기 실습( callback-> promise-> async/await)

[실습 section 29-03]

Promise로 실행하는 함수는 태스크 큐에 들어간다. 태스크 큐는 딱 하나만 있는 것이 아니라, 여러 개가 동시에 존재한다. ✔️ Task Queue 종류 > - 매크로 태스크 큐 (MacroTaskQueue) > setTimeout, setInterval 등이 들

💡 RefreshToken 이란? > 발급된 AccessToken의 유효 기간이 지나 만료 되는 시점에서 RefreshToken을 통해, 로그인 과정 없이 새로운 AccessToken을 받아올 수 있다. > RefreshToken은 2주~1개월 정도의 긴 만료 기한을

useQuery : 페이지에 접속하면 자동으로 바로 실행되어 data라는 변수에 fetch해온 데이터를 담아주며, 리렌더링 된다.useLazyQuery : useQuery를 원하는 시점에 실행(버튼 클릭시)후 fetch해온 데이터를 data변수에 담아준다.useApol

✅ 알아두면 유용한 개발자 도구 > 설치는 구글 웹스토어에서 진행 > 1. Apollo Client Devtools → 설치후 app.tsx에서 client 설정 부분에 connectToDevTools : true로 설정해야 한다. > 2. wappalyzer →

✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들

게시물의 좋아요를 누르게 되면 환경에 따라 좋아요의 수가 올라가는 속도가 다르다.왜?느린환경의 컴퓨터, 혹은 백엔드 컴퓨터가 굉장히 먼 곳에 있다면 해당과정이 굉장히 지연될 수 있음!옵티미스틱 UI란?요청이 서버에 도달하기도 전에 화면의 값을 미리 바꿔버리는 것!lik

✔️ 기존 이미지업로드방식의 문제점 > > 이미지 경로(주소)를 상대주소 ‘../../’와 같은 형식으로 사용하는데, 다른 사람 컴퓨터에 해당 이미지가 없을 경우에는 오류가 뜬다. 클라우드를 통해 주소를 전달받는 과정에서 미리보기가 느리다. 등록버튼을 눌러야 디비에 저

LazyLoad > 페이지를 읽어주는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술로, 스크롤을 내리면서 이미지가 보여져야 할 때마다 이미지를 로드한다면,* 데이터의 낭비를 방지*할 수 있다! > https://www.npmjs.com/package/react

scraping(스크래핑) > 특정 사이트를 스크래핑을 한다 => 특정 사이트의 한 페이지를 쭉 긁어와 1번 가져오는 것 > 라이브러리 : Chreerio crawling(크롤링) > 크롤링을 한다 => 특정 사이트에서 돌아다니며 버튼을 클릭해 여러 페이지를 가지고

✅ OG태그를 미리보기로 구현해주는 과정 >[실습 section32] opengraph-provider.tsx 사이트를 만들어 사이트 주소를 카카오, 슬랙, 디스코드 같은 곳에 보내게 되면 만들어 뒀던 OG태그가 보이게 된다. > OG태그가 보이는 이유는 카카오,슬랙

💡 테스트 코드 >마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 것 💡 테스트코드의 필요성 > 몇달간 개발한 사이트의 1차개발이 완료된 후, 2주 정도 버그여부를 확인 및 수정하여 테스트를 가진다. 버그를 열심히 잡은 결과 깔끔한 어플리케이션이

💡 AWS(Amazon Web Service) 배포 흐름 및 역할 >- S3 : Simple Storage Service (단위 : 1 Bucket) 무제한 용량을 제공하는 온라인 스토리지 서비스 >>데이터를 객체 형태로 저장하여 관리하며, 비용이 매우 저렴하다. 무

AWS 콘솔에 로그인상단의 검색창에 S3을 검색하거나, 서비스 메뉴에서 직접 찾아 접속버킷 만들기 클릭구매한 도메인을 입력하고, 2번 부분은 아시아 태평양(서울) 리전을 선택하기(버킷 이름에 http:// , www 등은 입력하지 않는다.)객체 소유권 블럭에서

트러블슈팅: 문제를 해결하는 과정 기능을 만들 때 중요시 되지 않고, 백엔드 💡 와이어샤크(SSL과 HTTPS) > 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나입니다. 💡 패킷이란? 네트워크상에서 주고받는 메시지 데이터 블록의 기본

스태틱 라우팅으로 제작한 페이지는 직접 주소를 입력하여 접근할 수 있어서 S3에 업로드하여 조회할 수 있으나, 다이나믹 라우팅으로 제작한 페이지는 실제 주소가 존재하지 않아 직접 접근이 불가능하다.그렇기 때문에 다이나믹 라우팅은 SSR 배포를 통해서 접근이 가능하도록

Docker Docker 란? 부팅 등 운영체제의 핵심 기능(커널)은 공유하는 가상머신 => 운영체제를 새로 설치하지 않아도 됨! node와 mysql등 프로그램이 이미 설치된 도커도 만들 수 있음/ 도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 저장