왜? 이제와서?기존의 Life Is a Sentence, 즉 LIS 는 독특하고 기억에 남기 때문에 좋은 옵션이지만, 웹이 무엇을 하는지 처음에는 사용자에게 명확하지 않을 수 있다고 생각했다.제작 하면서도 더 좋은 제목을 생각했고 SentenceU는 문장 공유 서비스에

최신글 처럼 날짜별로 보이면 좋을 것 같은 리스트는 섹션별로 나눠서 보여주는 것이 좋을 것 같았다.dayjs를 사용해서 postList라는 매개변수를 받아 그 글의 createdAt을 최신순으로 MM월 DD일 ddd요일 형태로 새로운 배열에 추가한다.사용하려는 컴포넌트

홈페이지와 개인 프로필 페이지의 UI는 완성했다.다이어리 페이지에는 캘린더와 유저 본인만 볼수있는 다이어리 리스트를 추가할 것이고, 요청페이지에는 관리자에게 보낼수있는 요청사항을 담은 Form을 추가할 것이다.기존에 서버에서 res.data를 가지고와 useQuery의

일단 수정/삭제 기능을 추가하기 위해서 post카드를 클릭했을 때 수정버튼과 삭제버튼이 나오도록 구현했다.post카드를 눌렀을때 높이를 조절하는 것은 ref와 css를 사용해서 적용했다.처음에는 state를 사용해서 emotion props로 보냈는데, state가 바

일단 완성본부터layout은 아래와 같이 나눴다.상단에는 NavBar와 네이버 명언에서 크롤링해온 데이터가나오는 롤링배너를 위치시켰다.메뉴의 구성은 아래와 같이 나눴다.Write : 글쓰기Collection : 좋아요 누른 글만 모아보는 페이지Diary : 한줄일기를

NavBar의 프로필 부분을 모달창의 컴포넌트는 만들어놨지만 작동을 안해서 수정할 경 스타일을 적용했다.약간 어두운 흰색을 배경으로 채도가 조금 빠진 검정색을 이용했다.유저프로필쪽에 호버를 하면 메뉴가 내려오도록 꾸몄다.로그인 하지 않은 상태의 기본 모습로그인 한 상태

UI는 아래와 같이 스타일을 적용했다.Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다.Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야 하고, 이미 눌렀다면 다시 뺀 값이 업데이트 되어야한다.api는 게시물 번호

UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어

신규 프로젝트를 진행하기 위해 서버와 데이터를 주고받기 위해 HTTP 통신을 해야하는법을 알아야 했다. 그 중 Axios를 통해 HTTP 통신하는 방법에 대해 알고 싶어서 찾아봤다. 주요 HTTP 통신방법 왜 React에서 주로 Axios를 이용해 통신하는

REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그

1Express란 Node.js의 프레임워크이다. 자바스크립트 프레임워크로 React, 자바 프레임워크로 Spring 등등이 있는 것처럼 Express는 Node.js를 빠르고 간결하게 사용할 수 있게 해준다. 2. Express의 특징E

Node.js는 Javascript의 runtime 이다.runtime이란? 프로그램이 실행될 때, 그 프로그램이 동작하는 곳이다.기존의 Javascript 런타임은 크롬, 사파리 같은 웹 브라우저였다. 그런데 Node.js의 등장으로 웹 브

자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다.대표적인 예가 바로 자동완성이다. 구글에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트하면서 추천 검색어를 띄워줘

리액트 공식문서방향성은 useEffect와 동일하지만, 모든 DOM요소의 변경 후에 동기적으로 발생한다.(useEffect는 비동기)DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용해야한다.useLayoutEffect의 내부에 예약된 코드들은 브라우저가 화

react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다.일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다.즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, funct

useState의 대체할 수 있는 함수다. useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 

공부하면서 얻은 Hooks Tip!두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다.첫 렌더링 때 실행된다고 생각하면 된다.첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidU

async & await 은 기존의 비동기처리 방식의 문제점들을 보완하면서도 사용법이 훨씬 간단하다.이처럼 async 를 사용하면 promise 코드를 훨씬 직관적으로 나타낼 수 있다.함수에 async만 붙이면 자동으로 promise 객체로 인식되고, return값은 

자바스크립트는 싱글 스레드 기반의 언어 이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다.이는 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리할 수 있음 을 의미한다.만약 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면 네트워

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다.ES6에서는 비동기 처리를 위