Memo - 공부하며 적는 메모장

동기적(synchronous)blocking을 통해 다음 작업의 시작 시점과 이전 작업의 완료 시점이 같은 상황비동기적(asynchronous)non-blocking을 통해, 다음 작업을 미리 받아 놓고, 여유가 있을 경우 다음 작업을 미리 진행하여, 이전 작업보다 다

비동기 호출비동기 자바스크립트===(working)/---(waiting)(Synchronous)-Total working time, if 3Client=========(request)----------(restart)=========(pause while waitin

resolve의 의미: 주어진 값이 이행된 promise.then 객체를 반환실행이 잘 되었을 시에 이행된 값을 반환https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Pr

클라이언트-서버 아키텍처리소스를 서버에 저장 및 관리, 앱과 분리시켜 관리, 2티어 아키텍쳐앱이 클라이언트, 리소스를 제공하는 서버앱이 리소스를 요청, 서버는 요청을 받아, 창고인 데이터베이스에서 찾아, 제공, 3티어 아키텍쳐프론트엔드는 클라이언트처럼 사용자가 직접 눈

Stateless는 말 그대로 상태를 가지지 않는다는 뜻입니다. HTTP로 클라이언트와 서버가 통신을 주고 받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않습니다. 사용자는 쇼핑몰에 로그인하거나 상품을 클릭해서 상세 화면으로 이동하고, 상품을 카트에 담

GET: 특정 리소스의 표시를 요청, 데이터를 가져올 때만 사용, GET /index.htmlHEAD: GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않음, 있더라도 무시함, Content-Length처럼 본문 설명의 개체 헤더는 포함할 수 있

REST API에 대해 이해할 수 있다.REST API 문서를 읽을 수 있다.REST API에 맞춰 디자인할 수 있다.Open API와 API Key에 대해 이해할 수 있다.Postman이 무엇인지 이해하고 사용할 수 있다.HTTP API 테스팅이 무엇인지 알 수 있다

테스트를 위해 매번 코드를 작성하는 건 상당히 번거로운 작업HTTP 요청을 테스트할 수 있는 다양한 도구, API 테스트 도구HTTP API 테스트 도구 (CLI): curl, wuzzHTTP API 테스트 도구 (GUI): Postman, InsomniaPostman

React 데이터 흐름단방향 데이터 흐름(one-way data flow) : 부모에서 자식으로, 데이터 흐름이 하향식(top-down), 컴포넌트는 props를 통해 전달받은 데이터의 출처를 알 수 없음데이터는 변하는 값과, 변하지 않는 값으로 분류,변하는 값인 상태

node.js를 이용하여 백엔드를 구축API Server를 직접 구현하면서 Express, 라우팅, 그리고 Server-side를 디버깅하는 방법을 학습JavaScript를 사용하지만 node.js 환경에서 사용되는 코드에는, CommonJS나 모듈 등 브라우저에서 찾

JSX 문법의 개념에 대해 이해하고 활용할 수 있다.Component의 개념에 대해 이해하고 작성할 수 있다.State & Props의 개념과 차이에 대해 이해하고 상황에 맞게 적용할 수 있다.React Effect Hook에 대해 이해하고 활용할 수 있다.Liftin

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다

Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.Presentational 컴포넌트와 Contain

정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다빌드가 무엇인지 이해할 수 있다정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다정적 웹사이트를 배포할 수 있다정적 웹사이트 배포시 발생하는 문제를 이해하고 해결할 수

객체 지향 프로그래밍(Object Oriented Programming)하나의 모델이 되는 청사진을 만들고(Class)청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴(instance)모델의 청사진을 만들 때 쓰는 원형 객체(prototype)인스턴트가 초기화될 때

JavaScript Object Notation, 데이터 교환을 위한 객체 형태의 포맷조건: 수/발신자가 같은 프로그램을 사용하거나, 범용적으로 읽을 수 있는 형태객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다JSON.stringif

계층적 구조, 부분 집합으로 나누면, Sub Tree로 볼 수 있음부모와 자식 노드로 구성됨, 같은 부모를 가진 형제 노드도 존재기본형은 객체로 되어 있음, 데이터만 가진게 아님, 키와 벨류로 이루어진 데이터와 메소드를 가짐Tree 자료구조 중 하나, 빠른 탐색에 특화

.bind()MDN .bind methodPromise.prototype.thenPromise.prototype.catch프로미스의 세 가지 상태대기(pending): 비동기 처리의 결과를 기다리는 중이행(fulfilled): 비동기 처리가 정상적으로 끝났고 결과값을

인터넷과 연결 없이, 앱을 구동하였을 때에 실행이 안되는 이유상품 정보를 서버에서 받아오기 때문 (인터넷 x, server가 죽었다)if, 상품 정보가 앱에 전부 저장된 경우, 위의 경우에도 앱은 가동but, 상품이 추가 또는 정보가 변경 될 때마다 앱을 업데이트 해야

URL, URI

웹 페이지 표현을 위한 HTML, CSS데이터에 접근하거나, 화면 구성을 동적으로 조작하는 DOM데이터 교환에 사용되는 JSON 이나 XML웹 서버와 비동기적 통신을 위한 XMLHttpRequest 객체JavaScript

Representational State Transfer API웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식REST 성숙도 모델: 0~3단계로 이루어짐, 보통 2단계까지만 적용0단계:

React는 단방향 데이터 흐름(One-way data flow)개발은 상향식으로, 컴포넌트를 개발하고 페이지를 조립한다데이터는 하향식으로, 부모에서 자식 컴포넌트로 props를 이용해 인자나 속성처럼 전달한다state: (상태) data가 컴포넌트 안에서 변화하는 경

UI 컴포넌트들의 모음을 구조화 하는 방법 UI 컴포넌트는 사용자 인터페이스를 이루는 조각들의 시각적이고 기능적인 속성을 캡슐화 함 컴포넌트에 적용된 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정을 체계적으로 정리한 시스템 불필요한 커뮤니케이션을 없애 효율성과 편의

class 관련 용어 간략 정리 및 예시 코드

CSS 단위 간단 정리

React Official- React로 사고하기

멱집합 코드 비교

3Tier Architecture Client(Presentation layer) - Server - Database The OSI model: 7 layer Application Presentation Session Transport Network Data link Physical Relational DataBase CRUD ...

const, var, let

controller 작성migration, models의 초기값(defaultValue)을 스켈레톤에 추가해줘야 한다

git 명령어 단순 나열

axios 개념 정리, 나중에 정리 할 것

MVC-ama

포인터 개념

냉장고기본적인 내 냉장고 관리 어플내 냉장고를 공개(오늘의 냉장고)레시피 추천, 관련 댓글내 냉장고 - (공개/비공개/(친구만공개))게시판 - 레시피? 친목?

유저 CRUD회원 가입Oauth 기능이메일/비밀번호로 회원 가입로그인OAuth 로그인이메일/비밀번호로 로그인로그아웃, 회원정보 조회, 회원정보 수정, 회원 탈퇴냉장고아이템 등록아이템 유형별 등록(완전식품,반조리식품,재료,과일,음료)아이템의 유통기한(자동으로 등록 또는

와이어프레임(프론트엔드)냉장고 내 아이콘의 색상 변경(녹-황-적)체력바처럼 게이지가 줄어드는 방식아이콘 전체의 색상이 변경되게끔 하는 방식냉장고 내부 아이템추가 방식(킥)왼쪽이 냉동 구간, 오른쪽이 냉장 구간냉장고 밖에 미리 아이콘이 준비아이콘을 클릭하면 이름,유통기한

내 기준 중요도별 구분

open apiuseQueryjson/xml

invalid hook call. hooks can only be called inside of the body of a function componenthttps://ko.reactjs.org/warnings/invalid-hook-call-warning.h

data.map is not a function서버요청을 목업으로 데이터 받아와서 map으로 데이터를 하위 컴포넌트에 전달하는 테스트를 진행하였음위와 같은 에러를 만나, 구글링을 하였더니 데이터의 형태가 문제일 것이라는 글을 확인data의 형태가 obj, 즉 객체여서

상위 컴포에서 하위 컴포로, 하위 컴포에서 상위 컴포로 인자 전달하단 코드는 하위 컴포handleDeleteComment(id, postId)의 id와 postId를 상위 컴포로 잘 전달함

\-react 리랜더링 안되는 문제https://db2dev.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%95%EC%A0%9C-Re-render%ED%95%98%EA%B8%B0-re-

발표 준비 관련문제점: SRGitHub 태스크카드와 마일스톤을 구체적으로 작성하지 못하였고, 그 부분을 제대로 활용하지 못하여 상황 공유가 대부분 구두로 이루어졌음처음에 구상했던 기획이 실제 구현을 하면서 더 많은 시간과 추가적인 기술 스택이 필요한 걸 깨닫고 점차 축

주제 선정: 오늘의 할일(todo list)주요 기능: 날짜별 할일/하는중/완료 리스트 작성 및 포스트 작성 기능어드밴스드: 차후 작업물 완료 후 todo리스트 r-b-dnd로 리팩토링css 테마 : magazine, 검은색 폰트, 극히 옅은 아이보리 배경색, 회색 라

주제: 오늘의 할일(경험치까지는 괜춘, 아이디의 계급을 상승시켜주고 괜춘, 아바타 모탐)(확정)아이템 이름 선정(대윤) My Todo(현욱) Everyday Do, Daily Do, Something todo(의빈) TodoTodo, one's duty, A Thing

Redux 구조 잡기

새 주제 선정

actions에서 action의 타입들에 대한 정리해 두고가져다가 쓰고reducer에는 state을 만들어서index의 reducer에서 합쳐서 사용그걸 전부 app.tsx에서 가져와서 쓰면 됨redux는 thunk같은 middleware를 쓰기 위해 사용state를

클릭 시 색상 변경되는 버튼을 만들기로 했음

프로필 페이지<CSS 1차 완료><Oauth 유저 이슈>어떻게 표시할건지, 정보는 어떻게 할건지oauth와 일반유저를 구분하고oauth는 정보변경페이지가 다른걸로 보이게끔 수정할건지 생각oauth의 스택은 어떻게 할건지oauth 유저의 정보이메일(oauth이

axios 요청 후 리랜더링 문제데이터는 잘 받아져오나 이미 뿌려둔 데이터가 리랜더링이 안됨초기 useEffect로 setState해준 후에나 재적용됨

react에서 label 태그에 for를 이용한 링크를 구현하려면 for 대신 htmlFor를 사용해야 함

flex-wrap: nowrap/wrap/wrap-reverse;

markdown editortoast ui editor/viewer

toast ui 적용 문제, useCallback의 사이드이펙트 처리(사실상 잘못된 사용법 이 맞겠지만...), 반응형 CSS적용 에러

컴포넌트 랜더 이미지 화질 개선전체적인 이미지의 화질이 낮음, 올려야 함전체적인 색상 테마 설정대표 색상을 통한 색상 테마를 설정해보자개발환경, 배포환경 설정의 문제도메인의 설정만 보아도 알 수 있다환경변수로 분리해서 설정해야 한다개발환경의 localhost(devel

서비스 발표(팀 발표영상)와 기술 발표(7분 내외) 2가지를 준비해야 함팀 발표영상은 발표(8~10분) + 질의응답(7~5분) = 총 15분 정도로 구성프로젝트에 적용했던 기술 설명 및 선택 이유프로젝트를 진행하면서 만났던 에러나 핸들링 내용이미지와 텍스트를 적절하게

코딩 면접주어진 코딩 문제를 시간제한 내에 풀이하는 면접코딩테스트는 2단계는 수월하게 푸는 수준을 갖춰야 함면접관과 화면 공유, 특정 시간에 주어진 링크를 받아 제공된 문제를 풀고 제출다 보지는 않는다기술 면접프로그래밍 언어나 관련 기술에 대한 면접, 1-n차 진행추상

이력서, 코딩테스트, 기술면접 3가지가 꾸준하게 같이 진행되야 함매일 3가지를 전체적으로 준비하면서 회사 지원을 꾸준하게 해야 하고회사 취업 과정 합격 후 인성 면접 때 그때 집중적으로 인성 면접을 준비하면 됨

정규식 정리 - inpa님 블로그

repo에 올라간 node_modules를 제거해보자

React로 일반계산기 만들기

Next.js 배우기

postgreSQL(ORDBMS)

원문: Guide for frontEnd multitenant application?

React Query의 기본 개념과 도입 사례

indexedDB

Next.js에서 JWT 사용

React Query를 간단히 정리

utility types

mutateAsync

!isUserSuccess || auth === undefined || user === undefined ? () : ()삼항연산자를 사용해서 undefined일때 홀더를 보여주고, 존재할때만 사용하게 하면 처리할 수 있음

e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단

let foo = 'text';console.log(foo)// .eslintrc.js 피일의// "env": {// "browser": true,// "es2021": true,// },// 에 아래줄을 추가한다// "node": true,

currentTarget, target

protected route

차후 페이지의 에러 핸들링시 참고

merge와 관련된 용어: resolve, draft

타입 단언의 경우 안하는 방향으로 진행해야 함부득이하게 외부 라이브러리나 서버의 응답 등으로 unknown등이 넘어올 경우타입 단언으로 데이터를 처리한 후, 이후에 다시 타입을 체크하는 로직을 만들어 검사해야 함

keys, values, 둘다 불러올 수 있는 entries

컴파일, 빌드, dev의 차이 공부

React Hydration Error 발생 및 해결

객체와 데이터베이스의 관계를 매핑하는 도구

array function 관련 정리

props-type : React에 내장 타입 검사 기능

SemVer : Version을 관리하는 형식

react18의 기능 - 자동 배치와 flushSync

CJS, AMD, UMD, ESM 이란? / 사용법 - EVEYTHING

React.memo() 현명하게 사용하기

마이크로서비스 아키텍처(MSA) 개념 소개

대표적으로 Atomic을 들 수 있지만, 어떤 것이든 공부해 볼 것협업에 있어서 하나의 패턴을 가지고 하는 것이 서로간의 공통된 단위를 가지고 작업할 수 있어서 에러를 줄이고, 통일성을 가져갈 수 있다6 React Design Patterns

가볍고 기능은 다양하다고 하여 사용해봄(tanstack/react-table로 변경된 듯 함, 기존 react-table도 사용 가능함)

잘 모르는 용어 정리하면서 공부하자

기획서 작업을 해보았다