꼬리 질문 포함 30 문 정도 받은 듯 하다.

SSR(Server Side Rendering)서버에서 필요한 데이터가 결합된 HTML 파일 만들어서 동적인 제어가 가능한 JS 코드와 함께 클라이언트로 보내는 방식 쉽게 말하면 "서버에서 페이지 그려서 넘겨줄게~" 인 듯 하다.CSR(Client Side Render

구축 방법 : 반응형웹, 적응형웹반응형웹 : PC, 테블릿, 모바일 기기 별 화면 크기(분기점)를 측정해서 기기별로 반응해서 달라지는 것적응형웹 : 모바일 웹, PC 웹 별도로 제작. 단순히 기기별 화면에 반응하는 것이 아니라 모바일 화면에 최적화된 화면을 만들기 위함

✈🛫AirBnB✈🛬 세계 최대의 숙박 공유 서비스 AirBnB를 모티브로한 프로젝트를 진행했다. 팀 구성은 프론트엔드 4명, 백엔드 3명이었다. > 개발 기간 2022년 08월 29일 ~ 2022년 09월 08일 (11일) 개발 인원 FE : 김진혁, 이빛나, 임

이미지를 업로드 하면 이미지 View가 보이는 기능을 구현했다.input type="file"URL.createObjectURL()useState()ref는 업로드 button을 따로 두어 input 핸들링을 하기위해 써주었다.우선 input태그의 type을 file로

리액트에서 간단하게 쓸 수 있는 React DayPicker를 써봤다.생각보다 사용하기 쉬워서 프로젝트 시간을 많이 아꼈기에 소개해보려 한다.설치가 끝났다면 Selecting Days탭을 들어가 원하는 달력을 찾아보면 된다.많은 달력 모드 중 mode=range 달력을

보통 side effect(부작용)가 있다라는건 부정적인 의미로 사용된다.프로그래밍에서 side effect(부작용)은 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있다.이 말이 무슨 말이냐...좀 더 풀어서 이해해 보자면 부작용은 "부수 효과" 라고도 할 수

2차 클론 프로젝트에서 쓸 styled components를 연습해볼겸 블로깅 해보려 한다.CSS in JS?CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.기존에 HTML과 CSS 그리고 Ja

WiselyWisely 클론 프로젝트를 하면서 Sass의 장점을 활용하지 못했다. 개인적으로는 아쉬움이 많이 남아서 간단한 예제를 통해 extend와 mixin문법을 정리해보려 한다.찍어낼게~사용법@mixin {이름} 으로 공통으로 쓸 속성들을 묶는다.@include

생활용품 정기구독 및 구매 사이트 WiselyFE 측면 : 반응형 사이트, carousel, 아코디언, 데이터 가공 (평점별 별개수 핸들링,평점 반올림, 가격 쉼표추가 ) , 쿼리파라미터(페이지네이션, 오더링) 구현 가능 BE 측면 : 일반구매 및 정기구독 조건 구분,

프론트에서 modal은 정말 많이 쓰인다고 생각한다. 언제 쓰이는지를 생각해보면 보통 어떤 버튼을 클릭했을 때 modal이 생성된다.오늘은 내가 구현한 방식을 소개하려 한다.useState를 불린값으로 저장한다.useState 기본값을 true로 설정한다.부모 컴포넌트

백엔드와 프론트의 작업속도가 달라서 보통 프론트엔드가 UI를 그리면서 개발에 들어갔을 때에는 백엔드 api가 만들어지기 전일 가능성이 있다. 그렇다면 프론트에서는 데이터없이 상상으로 개발을 한다? 는 아니다 우리는 백엔드 api가 없어도 백엔드가 있는 것처럼 목데이터

리액트에서 화면이동을 위해서는 두가지 방법이 있다.Link와 useNavigate가 있는데 오늘은 useNavigate를 이용해 스테이트를 넘기는 걸 해보려한다.npm install react-router-dom --savenavigate("/이동할주소",{replac

그동안 해보고 싶었던 기능중 하나는 바로 pagination기능이다. 보통 구현을 하기전에 "어떻게"를 먼저 생각해보곤 하는데, 실제로 구현에 들어가기 전에 고민했던 시간이 비교적 많았다.1\. fetch()로 데이터를 다 받아오고 useState에 저장.1\. 1,2

지난 블로그에서 monsters 리스트를 Card컴포넌트를 재사용해서 구현했다면 이번에는 검색 필터링 기능을 구현해 보겠다.SearchBox에 onChange 이벤트가 일어나면 실행될handleChange함수는 현재 input의 값을 userInput에 저장한다.inp

리액트를 처음 접하고 State와 Props를 이용해서 무언가를 구현하려니 헷갈리고 이해안되는 개념이 있었다.도대체 어떻게 랜더링이 이루어지는지 모르고 있었다는 것...비슷한 문제를 겪고 있는 사람들은 이번 블로그가 아마 도움이 될 것 같다.일단 같이 따라해보는걸 적극

🎫 구현 목표 > login input 값을 state에 저장한다. 저장된 값을 삼항연산자를 이용해 유효성 검사를 실행해준다. 👆 Login 사용자 입력 데이터 state에 저장 >> > ID, PW input에 savedUserAccount함수를 실행하는 o

???: 이미지 불러올때 왜 public폴더에 저장하고 불러오는거죠?나 : 아 그거...잘 모른다.public directory\-리액트 특성상 가상의 DOM을 사용하는데 사실상 실제 DOM이 필요하다. 그러기 위해서 가상의 DOM이 들어갈 빈 껍데기의 html파일이

차근차근 구조를 분해해서 할당 해보자. > 구조분해할당이란? > 나는 처음 이 문법을 접했을 때, 수학에서 쓰이는 "대입" 이라는 단어가 생각났다. 그래서 이게 뭐냐면.. 배열!! 혹은 객체!! 에서 각각 값(value)이나 프로퍼티(property) 를 분해 하여