전체 글

[CSS] 생소한 글자 관련 속성 모음

text-transform 글자를 소문자 또는 대문자로 바꿔주는 속성 uppercase: 모든 글자를 대문자로 lowercase: 모든 글자를 소문자로 capitalize: 단어의 첫 글자만 대문자로 letter-spacing 자간(글자간 간격) 조정 letter-spacing: 1px letter-spacing: -2rem word-spacing 단어간 간격(띄어쓰기 간격) 조정 word-spacing: 15px

[React 컴포넌트] 댓글 기능 구현하기

구상 댓글과 관련된 구역을 Comments 컴포넌트를 만들어서 관리할 것이다. 댓글 기능이 필요한 모든 페이지에 Comments 컴포넌트를 넣으면 된다. Comments.js의 하위 컴포넌트 구성은 다음과 같다. Comments.js 댓글 입력창 (textarea, submit 버튼), 그 아래에는 map()으로 SingleComment + ReplyComment의 묶음을 렌더링한다. SingleComment는 댓글 아이템 (프로필, 이름, 내용, 좋아요 버튼 등을 가짐)에 해당하고 토글하면 답글 입력창이 나온다. ReplyComment는 댓글 아이템 (SingleComment)과 ReplyComment를 하위 구성요소로 갖는다. 일종의 재귀적 구성으로 그 아래에 계속 ReplyComment가 달릴 수 ..

[React 컴포넌트] Like, Dislike (좋아요, 싫어요) 기능 만드는 법

React (LikeDislikes.js) Like, Dislike를 누를 때 발생하는 3가지 경우의 수를 생각해보자. 좋아요, 싫어요 둘다 눌리지 않은 상태 -> 둘 중 하나를 누르면 좋아요/싫어요 등록 좋아요가 이미 눌려 있는 상태에서 싫어요를 누른다면 -> 좋아요 삭제 후 싫어요 등록 싫어요가 이미 눌려 있는 상태에서 좋아요를 누른다면 -> 싫어요 삭제 후 좋아요 등록 과정 Like, Dislike (좋아요, 싫어요 숫자 개수를 저장)와 LIkeAction, DislikeAction(좋아요, 싫어요가 눌렸는지 여부)를 저장하는 state를 준비한다. API 호출을 할 때 정보를 전달할 변수 variables를 준비한다. Like, Dislike를 포스팅과 댓글 모두에 사용할 수 있게 설계했기 때문에..

[React 컴포넌트] Favorite(찜, 좋아요) 버튼 만드는 법

API model 생성 (models/Favorite.js) 좋아요라는 것은 '어떤 게시글'에 대해 '특정 유저'가 누르는 것이다. 그러므로 좋아요 테이블은 postId, userId 컬럼을 가져야 한다. userId, postId가 이미 생성해 둔 'User', 'Post' 모델을 참조하도록 해서, 데이터를 조회하는 로직에서 필요하다면 populate() 메소드로 JOIN을 할 수 있다. timestamps 속성을 주면 데이터가 기록될 때 자동으로 시간도 기록된다. const mongoose = require('mongoose'); const favoriteSchema = mongoose.Schema({ userFrom: { type: mongoose.Schema.Types.ObjectId, ref: ..

[React 컴포넌트] 더 보기(Load More) 버튼 만드는 법

우리가 더 보기 버튼을 만들어줄 페이지는 useEffect()로 초기 데이터를 불러와 데이터를 state에 저장하고, map()으로 해당 데이터들을 화면에 보여주고 있는 페이지이다. 더 보기 버튼을 만들려면 JSX로 더 보기 버튼을 만든다. 현재 페이지 수를 저장할 state를 준비한다. API에 (현재 페이지 + 1) 에 해당하는 데이터를 요청할 때 사용할 것이다. loadMore 함수를 작성해서 onClick으로 등록한다. 버튼을 클릭할 때마다 (페이지 + 1)의 데이터를 fetch하고 기존 데이터가 저장된 state에 새 데이터들을 덧붙인다. (destrcturing 문법 혹은 concat() 이용) 그러면 state가 변경되면서 자동으로 loadMore로 불러온 데이터들도 화면에 덧붙여서 보이게 ..

[JS 컴포넌트] 캐러셀 이미지 슬라이드 만들기

잘 설명한 분들이 많으므로 원리는 아래의 블로그, 코드는 유튜브 영상을 참고하길. 근데 이 유튜브 영상을 그대로 따라해도 문제가 발생할 것이다. 그 때 이 글을 참고하라고 이렇게 적어본다. 결과물과 코드는 github에 올려뒀다. https://github.com/bluepebble25/vanillaJS-UI/tree/main/carousel-slider 여길 참고해서 만들기 코드 - https://www.youtube.com/watch?v=KcdBOoK3Pfw&t=941s 원리1 - https://velog.io/@soyeon9819/React%EC%BA%90%EB%9F%AC%EC%85%80-%EB%A7%8C%EB%93%A4%EA%B8%B01-%EB%AC%B4%ED%95%9C-%EC%BA%90%EB%9..

[Project]Vanilla JS - Todo 리스트 만들기

보러가기 - https://github.com/bluepebble25/TodoList 1. 구현할 기능 1. 할 일을 입력하고 + 버튼 혹은 엔터키로 할 일을 추가한다. 2. 항목 앞의 체크박스를 클릭해 완료 여부를 toggle한다. 3. 휴지통 버튼을 눌러 항목을 삭제한다. 4. 항목을 더블클릭해서 수정할 수 있다. 5. 상단에 남은 할 일의 개수를 표시한다. 6. delete Checked items 버튼을 클릭해 체크된 항목들을 한꺼번에 삭제할 수 있다. 7. 새로고침해도 목록이 유지된다. (Local Storage) 2. 다 만들고 느낀 점 디자인 시스템 필요! :root { /* Color */ --skyblue-color: #DEEBF7; /* Size */ --base-space: 14px;..

[JS] onInput 이벤트 - 입력한 글자 실시간으로 화면에 출력하기

결과: const input = document.getElementById('input'); const result = document.getElementById('result'); input.oninput = function() { result.innerHTML = input.value; }; 1. document.getElementById('id')로 엘리먼트를 선택하고, 2. oninput 이벤트를 할당해준다. 3. result.innerHTML = input.value - input.value 값을 id="result"인 엘리먼트에 설정해준다. body의 끝 부분에 를 위치시키거나 js 파일을 로드한다면 defer를 붙여 불러야 엘리먼트를 가져올 때 null이 되지 않을 수 있다.