profile
Develop System, Develop Life, Develop Myself
post-thumbnail

SENTENCE U | Day 22

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 17

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 16

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 15

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 14

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 13

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

4일 전
·
0개의 댓글
·
post-thumbnail

SENTENCE U | Day 12

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

4일 전
·
0개의 댓글
·
post-thumbnail

Library | React Query

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

2023년 1월 6일
·
0개의 댓글
·
post-thumbnail

Library | Axios

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

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

API | RestAPI

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

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

Node | Express

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

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

Node | NVM, NPM

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

2023년 1월 5일
·
0개의 댓글
·
post-thumbnail

React | useDeferredValue, useTransition

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

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

React | useLayoutEffect Hook

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

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

React | ContextAPI

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

2022년 12월 30일
·
0개의 댓글
·
post-thumbnail

React | useReducer

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

2022년 12월 29일
·
0개의 댓글
·
post-thumbnail

React | Hooks Tip

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

2022년 12월 29일
·
0개의 댓글
·
post-thumbnail

JavaScript | async & await

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

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

Web | 이벤트루프 & 태스크 큐

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

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

JavaScript | 프로미스(Promise)

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

2022년 12월 27일
·
0개의 댓글
·