스타일드 컴포넌트를 이용하여 탭메뉴를 구현하는중url의 변경사항을 감지하여 하위 컴포넌트를 렌더링해주는 방법을 적용해 보았다.탭 리스트가 map함수를 통과하며 스타일링된 Link컴포넌트의 to 속성으로 url 키값이 전달된다. 그 결과 아래와 같은 DOM 형태로 렌더링

업로드중..자바스크립트 파일 안에서 css를 작성할 수 있는 방법(CSS-in-JS)중 대표적인 방법이 styled-components이다.styeld-components 를 사용하면 하나의 컴포넌트 안에서 태그설정, 스타일 변경, attribute 설정을 함께 할 수

현재 로그인 / 회원가입 페이지의 경우 <User /> 라는 컴포넌트 하나로 관리되고 있고라우팅에 따라 다른 화면이 나타나도록 구현되어 있었다.그리고 크게 3개의 기능으로 이루어져 있는데인풋값 핸들링유효성 검사 서버와의 통신이다. 위의 기능을 포함한채 <Us

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너상태의 변화를 특정 함수(Dispatch)에 의해서만 변할 수 있게 통제해 상태변화를 예측 할 수 있게 만듬데이터가 단방향으로 흐르도록 설계한 Flux 디자인 패턴에서 영감을 받아 자바스크립트로 구현한 구현체어플리케이션(

note) searchParams.remove 메서드의 경우 키값에 해당하는 모든 value가 삭제되므로 체크 토글기능 구현의 어려움이 있음.따라서 위와같이 커스텀 로직으로 해당 기능을 구현하게 됨.//gif

URL의 한 부분으로 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶은 경우 사용http://myhomepage.com/products?sort=popular&sort=newurl에서 ?를 통해 쿼리스트링이 시작된다는 표현을 할 수 있다 쿼리스트링은 ke

일반 자바스크립트에서 url 정보를 가져오고 싶은 경우 location 인터페이스를 사용합니다.(참조) Location - Web API | MDNreact-router-dom 에서 제공하는 여러가지 Hook들은 이러한 작업을 편하게 할 수 있도록 도와줍니다. 우리가

1차 프로젝트를 진행하며 로그인페이지를 맡게 되었는데 같이 맡게 된 회원가입 페이지와 레이아웃 및 기능이 비슷하여 `` 라는 컴포넌트를 만들어 재사용하게 되었습니다. 로그인, 회원가입 페이지의 기본 구조 타이틀 (회원가입) 이름 이메일 패스워드 (회원가입) 휴대폰 번

\*Javascript로 만들었던 인스타그램 프로젝트를 React로 포팅하며 구현한 기능을 정리한 내용입니다.상태관리 라이브러리를 사용하지 않고 작업을 진행하였습니다.Input창에 댓글을 입력하고 Enter Press or 게시버튼을 클릭하면commentList에 새

useEffect를 사용하는 경우 React에서는 Functional Component에서 sideEffect를 효과적으로 관리하기 위해 useEffect 라는 Hook을 제공합니다. 함수형 컴포넌트의 경우 아래와 같은 기본 구조를 가지기에, return문이 실행되

원래 주된 목적에서 벗어나 다른 결과가 나타나는 현상을 말합니다.웹 프로그래밍 작업을 하며 우리는 필요한 기능을 함수단위로 작성하게 되는데, 이러한 함수의 원작용은 Input을 받아서 output을 산출하는 것입니다.따라서, 프로그래밍 언어에서 Side Effect가

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.프론트엔드 개발에서 컴포넌트란 재활용 가능한 UI 구성 단위를 의미합니다. 하나의 컴포넌트로 여러 페이지에서 사용함으로써 페이지 구성이 간결해지며,유지보수하기 용이해집니다