react

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

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

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

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

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

삼항연산자는 JavaScript에서 세 개의 피연산자를 받는 유일한 연산자이다. 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 경우 실행할 표현식, 콜론(:), 조건문이 거짓(falsy)일 경우 실행할 표현식이 배치된다. 해당 연산자는 if...else

먼저 virtual dom을 설명하기 전에 dom에 대해서 알아보자. DOM Document Object Model의 약자이며, 한글로는 "문서 객체 모델"이라고 부른다. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식이다.우선 브라우저가 랜더링되기까지의 과

로그인을 하기 위해서 여러가지 조건들이 필요하다. 예를 들어서 이메일의 경우 '@'가 반드시 필요하고 비밀번호는 몇자이상이여하고 기타등등 아마 여러가지 조건들을 봐온 경험이 있을것이다. 이러한 입력데이터를 확인하여 로그인을 진행하기 위해서는 입력데이터를 저장해줘야한다.

리액트 라이브러리를 html파일에 직접 작성해서 설치할수도 있으나, 과정도 복잡하고 시간이 오래 걸린다. 그래서 create react app 라이브러리를 통해 설치하는것이 일반적이다. 이것을 쓰려면 npm이 필요한데 npm은 라이브러리를 모아놓은 플랫폼이라 생각하

사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.리액트를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해준다.이로 인해 우리는 데이터 기반의 선언적 개발이 가능해지며, 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상 돔) 

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