Today I Learned

velog를 처음 사용해 TIL을 해본다 앞으로 열심히 작성하자!!

React(리액트)대표적인 프론트엔드 도구로는 React, Angular, Vue가 있다하지만 실무에서 React 쓰는이유는컴포넌트 : 컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것리액트에서 컴포넌트 작성 방법 2가지클래스형 : 예전 방식, 코드가 김

오늘은 통신과 API에 대해 조금 배웠다 아직 모르는게 많지만 하다 보면 이해 되는게 공부라고 생각한다!

라우터(router)객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다정적라우팅정적라우팅을 사용하는 방법을 배웠다!이동할 디렉토리를 직접 지정해야 한다동적라우팅동적라우팅을 사용하는 방법을 배웠다!이동할 디렉토리를 자동으로 지정할수 있다디렉토리 이름을 \[]로 감싸

오늘은 유지보수를 위해 폴더 구조를 나누는 방법중 컨테이너 / 프리젠테이셔널 패턴을 배웠다!다른사람이 봤을때 보기 쉬운 코드한개의 파일에 모든 코드가 전부 있다고 하면 코드의 길이가 너무 길고 읽기도 힘들기 때문에 파일을 나누어 사용해야한다폴더 구조는 여러가지 방법컨테

setState의 작동 방식을 배웠다!setState는 바로바로 변경이 안되고 임시저장소에 저장해서 함수가 끝나면 최종 변경값으로 변경후 리렌더링을 함map을 사용하여 html을 만들어 보았다실무에서는 for문 보다는 map을 많이 사용함성능은 for문이 조금 빠르지만

컴포넌트를 재사용하여 페이지를 만들어 보았다!게시판 제작시 작성창과 수정창은 디자인이 비슷하기 때문에 페이지를 2개나 만드는건 비효율적이다그렇기 때문에 컴포넌트 재사용 페이지를 만들어서 import 해서 사용하자컴포넌트 재사용 페이지를 만들때 프레그먼트(Fragment

게시글 작성 후 수정시 수정페이지에서 자동으로 등록한 값을 보여주게 했다값을 보여주기 위해 quert를 사용하여 defaultValue 값이 있으면 그 값을 보여주고 없으면 빈문자열로 지정하여 했다타입스크립트를 설칠하여 기본적인 문법을 배웠다

useQuery 사용했을때 data 중복일 경우 data: 원하는 이름으로 해결가능하다유틸리티 타입기존에 만들어둔 타입에서 조금만 수정해서 사용하는 것을 쉽게하기 위해 타입스크립트에서 제공하는 것이다GtaphQl codezenGtaphQl API의 타입들을 만들기는 너

길었던 설날이 끝이나고 오늘은 이벤트 버블링(Event Bubbling)을 배웠다이벤트 버블링(Event Bubbling)은 자식의 이벤트를 작동 했을시 부모의 이벤트까지 작동되는 현상을 말한다이를 해결해 주기 위해서는 event.currentTarget을 사용하여 이

props의 사용 방법중 props.children 방식을 배웠다기존에 사용하던 props는 이름을 지어서 보내는 방법이였다면위와 같이 작성 해서컴포넌트에게 children 이라는 이름으로 보낸다폰트 사용시 주의사항FOIT(Flash of Invisible Text)는

오늘은 게시글 목록에 페이지네이션을 만들어 보았다페이지네이션 : 페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법간단할줄 알았는데 생각보다 어려웠다Lifting state up / state끌어올리기부모에서 자식으론 props로 넘기면 되지만형제일 경우에는 어

얕은 복사, 깊은 복사얕은 복사: depth 1의 깊이를 가진 데이터까지는 복사할 수 있지만, depth 2 이상의 깊이를 가진 데이터는 복사하지 못함 (스프레드 연산자 사용)깊은 복사: depth 2 이상의 깊이를 가진 데이터를 복사가능 (JSON.stringify와

Class Componentclass는 객체이자 물건을 만드는 설명서이다위와 같이 사용하며 const, function() 같은걸 붙이지 않고 this가 생략되어져 있으며 자기자신을 의미한다Pokemon : 객체 또는 인스턴스라고 부른다Pokemon.power, Pok

API에서의 CORS는 요청한 브라우저가 API쪽에서 지정한 브라우저가 아니라면 브라우저측에서 요청을 막는다Proxy server를 이용하거나 모바일앱에서 해당 API에 우회해서 요청을 보내 사용가능하다데이터베이스에는 2종류가 있다SQL : 표에 정리해두는 방식다른 표

오늘은 어제 데이처베이스와 연결한 백엔드서버를 24시간 계속해서 켜두기 위해 ApolloServer를 설치하여 셋팅후 간단한 CRUD API를 만들어 보았다실무에서는 데이터를 삭제시 돌이킬수 없기 때문에 추후 상황을 대비하여 실제로 데이터를 삭제 하지는 않는다이러한 방

보통 우리가 이미지, 동영상등 사이즈가 큰 파일들을 저장할때에는 다른 데이터베이스에 저장을 한다그럼 이미지용 서버를 하나 더 파던가 아니면 클라우드 서비스를 제공해주는 곳에서 저장소(storage)를 빌려서 저장해야 한다해당 저장소에 저장하면 이미지를 다운로드 할 수

오늘은 데이터 검색에 대해 배웠다데이터 검색의 기본적인 방식해당 검색어를 가지고 데이터베이스의 데이터를 전체를 확인하여 찾은 데이터들을 반환데이터가 많을시 느리고 비효율적역인덱스 방식특정 키워드로 전부 쪼개서 서로 일차하는 키워드가 있는 데이터들의 특정ID값을 해당 키

rest-api의 오버페칭, 언더페칭오버페칭: 필요없는 모든 데이터를 전부 받아오는 과정언더페칭: 여러종류의 api를 한개씩 여러번 받아오는 것GraphQl은 사실 rest-api의 post 방식에서 data를 넣을 수 있음을 이용해 만들어낸 방식이로인해 언더페칭과 오

오늘은 로그인의 역사에 대해 배웠다!첫번째로그인 요청시 백엔드 컴퓨터에서 데이터를 받고, 데이터베이스에 회원가입한 유저가 맞는지 찾는다.그 후 맞다면 로그인 여부 및 유저 정보ID를 백엔드의 메모리 세션에 저장 후 브라우저 쿠키에 정보ID를 저장한다조회 요청시 쿠키를

로컬스토리지를 이용하여 로그인 권한분기를 배웠다로컬스토리지에 로그인 토큰을 저장을 시킨후에 해당 토큰을 사용하려 하면 not defind라는 에러가 발행한다 이 이유는 next.js렌더링 방식을 알아야 한다next.js는 주소창에 주소를 입력하고 엔터를 입력시프론트엔드

웹에디터 react-quill의 사용법과 주의할점을 배웠다quill사용시 아무것도 입력하지 않으면 기본값으로 들어가기 때문에 해당 값으로 분기처리를 해주고 데이터를 보내자이런 웹에디터 사용후 불러올때에는 보통 dangerouslySetInnerHTML을 사용하게 된다그

포트원을 사용하여 결제를 구현해 보았다결재의 큰 순서는브라우저에서 결제요청포트원의 Rest-API를 이용해 결제 요청결제 성공시 해당 결제의 imp_uid 및 다른 데이터를 받음성공한 데이터를 백엔드 서버로 mutationdb에 업데이트웹훅노티피케이션무통장 입금 같은

태스크큐에는 마이크로큐와 매크로큐가 있다마이크로큐: await, Promise같은 것들이 담김매크로큐: setTimeout,setInterval 같은 것들이 담김매크로큐보다 마이크로큐가 우선순위가 높아 마이크로큐가 비워질때까지 매크로큐는 진행하지 않는다위 코드에서 ca

오늘은 RefreshToken에 관해 배웠다RefreshToken: AccessToken의 만료 기한이 지나면 새로운 AccessToken을 받아와야 하는데 이러한 과정에 사용되는 토큰이다AccessToken은 보통 (1시간)RefreshToken은 (2주) 정도 이지

observable(옵저버블) 이란 연속적인 비동기 작업을 도와주는 도구이다a ,b 라는 버튼이 있다 각각의 버튼을 누르면 데이터를 요청하여 받고 그걸 화면에 뿌리는 코드가 작성되어 있다여기서 a버튼은 데이터가 많아서 받아오는데 오래 걸리고b버튼은 반대로 데이터가 적어

메모이제이션(Memoization): 리렌더링이 많아질수록 성능이 저하되기 때문에 리렌더링이 필요 없는 것들은 리렌더링을 막을때 사용 (useCallback(),useMemo(),memo())useCallback(),useMemo()불필요한 값들이 지속적으로 다시 만들

기존 이미지 업로드 문재점미리보기가 너무 느림: 클라우드 서비스에 저장한후 다운로드 url을 받고 그걸 띄우다 보니 느림이미지 찌꺼기가 남음: 이미지를 클라우드서비스에 저장후 게시글 등록 안하고 그냥 나가버리면 해당 클라우드에는 계속 다운로드 url이 남아있음해결방법이

옵티미스틱UI중요한곳에 사용하면 안됨덜 중요하면서 실패해도 문제가 안되고, 성공확률 99%인 것들에 사용하자optimisticResponse을 사용하면 입력된 값으로 응답을 받았다고 생각을 하고 data에 적용시킨다 그후에 진짜 데이터가 들어왔을때 값이 다르면 바꾸고

오늘은 테스트 코드 작성 하는 방법을 배웠다테스트코드는 내가 만든 기능들이 정상적으로 작동하는지 테스트를 해주는 코드이다이걸 굳이 코드로 작성 하지 않고 그냥 직접 테스트를 해보면 되지 라는 생각을 할수 있지만 그건 좋지 않다만약 나의 서비스의 기능이 30개 정도 있다

배포란 여태 우릭가 만들었던 홈페이지를 세상에 공개하는것을 의미한다배포를 이해하기 전에 클라우드 서비스를 알아보자클라우드 서비스란 간단하게 원격으로 컴퓨터를 대여해서 해당 컴퓨터에 접속할 권한을 주는것크게 AWS, GCP, AZure가 있다우리의 웹파일을 html파일로

와이어샤크: 실시간 패킷 교환 과정을 확인하는 도구 중 하나이걸 사용하여 보면 https통신은 데이터가 암호화 되어 있지만 http는 암호화 되어 있지 않고 그냥 보인다3-way-handshake-연결프론트엔드 컴퓨터에서 백엔드 컴퓨터로 요청을 보내는 것을 ‘SYN’백

오늘은 Docker에 대해 배웠다Docker내 컴퓨터 안에 컴퓨터 1대를 더 설치하자옛날에는컴퓨터 안에 가상머신(ex: vmware)을 설치하여 전부 같은 운영체제를 쓰게 한다단점으로 컴퓨터 안에 컴퓨터를 설치하다 보니 느렸음해결책으로 나온게 Docker운영체제의 핵심

주제 정하기 및 와이어 프레임 제작중

팀프로젝트 유저플로우 제작완료 및 와이어프레임 제작완료피그마 제작중

팀프로젝트 피그마제작중!!

피그마 1찰 제작 90% 완료내일 기본적인 UI제작

Scene : 오브젝트들이 있는 공간 (카메라, 빛, 메쉬 등등)Mesh : 웹에서 직접 보여줄 요소, Geometry(모양)과 Material(재질)로 구성되어 있음Camera : 사용자가 볼 화면을 찍고 있는 카메라Renderer : 카메라가 찍은 화면을 사용자 화

ambientLight : 은은하게 전체적으로 빛을 비춤axesHelper : 3차원 축을 화면에 그려 기준을 잡기 편하게 함gridHelper : 바닥에 격자를 화면에 그려 기준을 잡기 편하게 함stats.js : FPS를 띄어서 초당 프레임 체크가 가능하게 해주는

TextureLoader : 3d texture이미지를 material에 적용가능CubeTextureLoader : 외부에서 받아온 이미지 파일을 Material의 적용하여 마치 mesh가 받아온 이미지들에 둘러싸여 있는듯한 느낌을 줌처리해야할 속성이 많을수록 처리할