[bearl]주변에 불편한 것은 무엇일까? → br태그를 자동 추가하자!

Heewon Seo·2024년 2월 18일

bearl

목록 보기

1/2

(미리보기)여기서 사이트를 확인 하실 수 있습니다.
https://bearl.vercel.app/

문장끼리 개행 하나만 해도 두 번개행되는 문제,

공백만 있는 문장도 문장으로 인식하는 문제,

텍스트 붙인 후 바로 결괏값이 나타나지 않는 문제가 있었습니다.

이 문제는 2월 18일 오늘 저녁에 고쳤으니 안심하고 사용 부탁드립니다. 🙇‍♂️

추가 공지
현재 brbr은 이미 누가 사용 중이라 bearl이라는 이름으로 운영 중입니다.
많은 사용 부탁드립니다~

몇 달 전, 주변에 불편한 무언가를 찾아 토이 프로젝트를 만들어보라는 글을 본 적이 있었다.

이 글을 보고 당시 토이 프로젝트를 만들고 싶다는 생각에 토이 프로젝트를 위한 아이디어들을 며칠간 생각했지만,
결국 생각해낸 아이디어는 그냥 커뮤니티 사이트였다.

그래서 내 깃허브 readmd에는 계륵과도 같은 무언가라고 작성되어 있다.
(그 프로젝트는 너무 억텐아닌가.. 싶다.)

아무튼 이번 글에는 주변에 불편한 무언가를 찾아 토이프로젝트로 만든 경험에 대해 작성해 보려고 한다.
(물론 내가 만든 사이트에 대해 홍보도 할 예정이다.)

문제 발견

커뮤니티 사이트를 만들고 몇 달 후, 계속 벨로그에 글을 작성하다 보니 한 가지 불편한 문제를 마주치게 된다.
그 문제는 바로 개행 수를 엔터로 정할 수 없다는 것이다.

그래서 보통 br 태그를 복사 붙이기 해서 작성하게 되는데,

필자는 br 태그를 붙이는 이 과정이 불편하다고 생각했다.
하지만 이 불편함을 다른 분들도 느끼지는 않는 것 같아 감수하고 작성하려 했지만,
다른 분들도 이 br 태그를 붙여야 하는 것에 대해 불편함을 느낀다고 듣게 되어 사이트를 만들게 되었다.

제작

기술 선정

먼저 SEO측면에서 유리한 Next.js를 선택했다.

그리고 더 많은 기능을 추가하기 전에 간단하게 무료 호스팅하고 싶어서 일단 Vercel로 호스팅했다.

아직 사이트의 크기는 매우 작기 때문에 따로 빌드나 CSS 프레임워크와 관련한 기술은 적용하지 않았다.

이슈 해결

이 사이트를 만들며 나온 이슈들을 제거한 경험을 작성해 보면 다음과 같다.

useState 두 번 실행

이 문제 때문에 연산을 두 번 하여 br 태그가 한 번 나와야 하는데, 두 번 나오는 일이 발생했다.

그래서 이 문제는 useEffect를 통해 입력된 텍스트의 값이 바뀌면 연산하게끔 바꿨다.

useEffect 무한 루프

const [state, setState] = useState('')

const inputChange = (event) => {
	setState(event.target.value)
}

useEffect(() => {
	const abc = state + 'fds'
	setState(abc)	
}
, [state])

useEffect 내부에서 위의 예시와 같은 코드를 작성할 경우 무한 루프에 걸려버린다.

const [state, setState] = useState('')
const [newState, setNewState] = useState('')

const inputChange = (event) => {
	setState(event.target.value)
}

useEffect(() => {
	const abc = state + 'fds'
	setNewState(abc)	
}
, [state])

그래서 아예 해당 종속성과 다른 setState를 useEffect에 넣어서 무한 루프에서 탈출했다.

텍스트 붙인 후 결괏값 나오지 않음

이 사이트를 배포한 후, 추가로 다른 값을 입력해야 결괏값을 주는 문제를 찾게 되었다.
그래서 해당 textarea태그의 onChange를 onInput으로 바꿨다.

onChange - 해당 태그의 포커스를 잃으면 적용
onInput - 값 입력 시 바로 적용

제작 설명

사이트에 접속하면 다음과 같은 모습이 나온다.

여기서 왼쪽 네모를 통해 텍스트를 붙이거나, 입력하면
오른쪽 네모에서 br 태그를 추가한 텍스트로 변형해 준다.

그래서 실제 변환 모습을 살펴보면 다음 사진과 같다.

2월 18일 오후까지 위의 사진처럼 나오지 않고

문장끼리 개행 하나만 해도 두 번개행되는 문제,

공백만 있는 문장도 문장으로 인식하는 문제,

텍스트 붙인 후 바로 결괏값이 나타나지 않는 문제가 있었습니다.

이 문제는 2월 18일 오늘 저녁에 고쳤으니 안심하고 사용 부탁드립니다. 🙇‍♂️

이제 오른쪽 텍스트를 복사해서 마크다운 페이지에 붙여서 넣으면 된다!

마무리

평소 불편함을 느낀 것에 집중하여 개발한 것은 거의 처음이라 그런지 조금 더 개발의 방향과 본질에 대해 이해하는 기분이 들었다.

사이트를 만들고 한번 바이럴 겸 글또 내부에 필자가 만든 사이트를 공유했는데, 생각보다 많은 분들께서 반응해주셔서 놀라웠다.(감사합니다 ㅎㅎ)

그리고 Vercel에서 제공하는 Analytics 기능으로 사이트에 얼마나 많은 사람들이 접속했는지 확인할 수 있는데, 생각보다 많은 분들께서 접속해 주셔서 다시 한번 감사할 따름이다.