아래 이미지 처럼 하나의 컴포넌트로 총 3개의 개시물을 출력해야되는 상황이였고 data가 없는경우 아래 이미지처럼 출력이되고 data가 있는 경우 해당개시물의 썸내일이 출력이되게 되도록 구현하였다.우선 조건부 랜더링을 진행하기 위해서 삼항연산자를 사용해야될거라는 생각을

먼저 구글로그인기능에 대해서 어떠한 레퍼런스나 설명을 들어본적도 없고해서 일단 무작정 구글링을 통해 여러가지 레퍼런스를 찾아보고 하였는데 우선은 먼저 구글클라우드에서 프로젝트를 새로 생성해야하는 과정을 알게 되었다. 구글 새프로젝트 생성 페이지에서 생성 과정중 클라이언

조건부 렌더링(Conditional rendering)은 React나 Vue.js와 같은 프론트엔드 라이브러리에서 사용되는 용어로, 조건에 따라 특정 컴포넌트나 UI 요소를 렌더링할지 여부를 결정하는 것을 의미한다.예를 들어, 다음은 React에서 조건부 렌더링을 사용

타입스크립트에서 함수 작성시 함수의 return 타입과, 함수의 parameter 타입을 명시 할수 있다.그런데 여기서 호출된 함수에서 하나의 인자값만 전달해야 하는 경우가 있을수도 있을것이다. 이러한 경우에 하나의 인자값만 작성하게되면 에러를 발생시키게 된다. 이유는

이름에서 처럼 어떠한 값이 들어와도 에러없이 모두 사용 가능하게 만들어주는 타입이다.타입스크립트에서는 타입에 관한 정보를 명시 해 줄수록 코드의 유지보수가 더 좋다. 그렇기 때문에 되도록이면 any type은 지양해주는것이 좋다.제한된 타입들을 동시에 지정하고 싶을때

연관된 아이템들을 함께 묶어서 표현할 수 있는 수단이다.이렇게 숫자로 enum에 입력된 내용이 열거되는것을 숫자열거형(numeric enum)이라 한다.문자형 열거형으로 표한하고 싶다면 enum의 각 값에 내용 그대로 string으로 입력 해 주고 컴파일된 내용을 보게

1. Static typing이란? 타입을 선언하고 선언된 타입의 값만이 할당될 수 있다. 1-1. 타입 추론 (Type Inference)이란? 타입스크립트에서는 타입표기가 없는경우 타입 정보를 제공하기위해서 타입을 추론하게 되는데 아래 예시 코드에서 보면 >

string, number, boolean, null, undefined, \[], {} 등...만약 타입을 지정한 객체의 키값에 '?'옵션을 붙여준다면 name이라는 키값이 들어올수도 있고 아닐수도 있으니 에러를 내지말라는 옵션이다.type이라는 키워드 작성 후 변수

.ts파일로 이동하여 코드를 작성하면되는데 그러나 .ts파일은 브라우저에서는 인식을하지 못한다 그렇기 때문에 .js파일로 변환하는 작업을 거쳐야 하는데, 이 방법은 터미널창에 'tsc-w'를 입력하면 된다.위와같이 터미널에 입력하게 되면 .ts파일과 동일한 .js파일이

1. 프로젝트 안내 1-1. 개요 오늘의집을 모티브로 한 커뮤니티&커머스 웹 사이트 프로젝트로 단순히 인테리어 제품을 판매하는 것이 아닌 커뮤니티를 중심으로 기획 1-2. 담당페이지 집들이(커뮤니티)리스트 페이지, 집들이(커뮤니티)상세 페이지, 제품상세 페이지 1

1. git rebase란? Git rebase는 두 개의 공통 Base를 가진 Branch에서 한 Branch의 Base를 다른 Branch의 최신 커밋으로 branch의 base를 옮기는 작업이다. 용어 그대로 베이스를 다시 설정하는 작업이다. 2. git mer

1. 쿼리 스트링 이란? url의 한 부분 요청하고자 하는 url에 부가적인 정보를 포함하고 싶을때 사용 일반적으로 url을 통한 정보요청은 비교적 단순한 형태로 이루어짐 2. 쿼리 스트링의 필요성 예를 들어 상품이 수천개라고 가정했을때, 유저가 /list페이지로

1. 동적 라우팅이란? 특정 규칙을 정의한 후 규칙에 부합하는 URL이 있을경우 해당하는 element를 보여주게 설정 1-1. 동적 라우팅의 필요성 /post/ 로 시작하는 모든 url은 상세페이지로 연결되게 설정하는 방식으로 애플리케이션을 확정성 있게 만들 수

오설록 웹페이지를 기반으로한 이커머스 사이트 기능구현 및 디자인 구현login, signup, footer, payment 페이지React.js, sass, HTML, JavaScript협업 및 일정관리 : Git, GitHub, Slack, Trello, Notion

1. fetch 란? 먼저 fetch의 사전적 의미를 보게되면 가져옴, 쭉 뻗어 어딘가에 있는 것을 가져오기 라는 뜻이있는데 이 의미에서도 유추할 수 있듯이 fetch는 api에 요청(request)을 보내고, 정보를 응답(response) 받을 수있게 해주는게 fe

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 라고 MDN에서 설명하고 있는데 이렇게 이야기 해서는 바로 이해가 쉽지 않으니 바로 예시 코드를 보도록 하겠다.toDoListd의 값을 ma

JWT는 Json Web Token의 약자로 일반적으로 클라이언트와 서버 사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 웹 상에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 생성한 암호화된 토큰으로 복잡하고 읽을 수 없는 string 형태로 저장되어있다

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터가 있다. 아래 이미지를 참고하면 github footer부분인데 UI의 구성에는 필요하지만 고정적인 데이터이기 때문에 백엔드 API에서 가져올 필요가 없다. 이러한 변하

사용자가 댓글 입력후 댓글 입력 버튼 클릭시 댓글이 추가되도록 구현해 보았다. 이 과정에 있어서 state로 저장한 댓글을 배열과 map메서드를 이용하여 구현해 보았다. > 먼저 입력된 댓글들을 state에 담아주기 위해 input태그에 onChange 이벤트를 걸어

state를 활용하여 id, pw값을 받아온 내용으로 삼항연산자를 이용하여 조건에 때라 로그인 창을 활성시켜보는 작업을 하였고 아래 코드를 통해 확인 해 보도록 하겠다.