오늘 한 일
오늘, 내일은 개발자 친구를 위한 포트폴리오 웹사이트 개발 계획을 짜기로 했다. 4월 내로 만들어야 하는데, 평소와 달리 백엔드 기능 없이 프론트만 만들어주면 되기 때문에 평소 못 써봤던 효과들도 써 보고 싶다. 오늘은 다른 포트폴리오 사이트들을 찾아보고 안에 들어갈 내용 및 구성을 어느정도 고민한 후 대략적인 목업 화면을 ovenapp으로 만들었다. 내일까지 계획을 구체화하고 다음주부터 코딩을 시작할 것이다.
오후에는 정보처리기사 실기 데이터 입출력 구현 파트를 공부했다.
그 후 시간이 남아서 리액트에서 배운 끝말잇기에 적용하기 위해 한글 입력단어에 따라 조사를 바꿔주는 js모듈을 만들어보았다.
포트폴리오 웹사이트 구성
들어갈 내용
- 포트폴리오 사이트니까 about(자기소개), projects 만 넣고 나머지 경력, 교육 등은 자소서 사이트 링크로 하기
- 추후 데이터는 하드코딩으로 입력할 듯
- 깃허브, 벨로그, 링크드인 등 링크 추가
- 프로젝트 내용 길게 쓸 수 있도록 할 것인지?
디자인
- 사이트 메인: python class 형식으로 소개하는 부분 짧게 만들면 재밌지 않을까?
- 대상의 취향과 맞게 키덜트 느낌으로 꾸미고 싶은데 좋은 소스가 없을까?
- 모바일 화면도 고려해서 반응형으로 만들기
동작
- 싱글페이지 스크롤 내리는 형식으로 하기
- 스크롤 내리면 헤더 색상 바뀌게
- 화면 길이만큼 내려가게 해 보기
기타 개발할 것들
- 가능하면 영어/한글 지원하면 좋을듯?
한글 종성에 따라 조사 바꾸는 js 모듈
며칠 전 리액트 공부할 때 만들었던 끝말잇기를 보완해보았다. (정처기 하기 싫어서 딴짓했다..) 원래 내 맘대로 ㅇㅇ으로 끝나는 말은?이라는 텍스트를 추가했었는데, 입력하는 단어에 따라 ~으로/~로 조사가 다른게 거슬려서 입력단어에 따라 조사를 바꿔주는 로직을 js모듈로 만들어보았다.
처음에는 단순히 마지막 글자의 종성 유무로 조사가 바뀔 거라고 생각했다. 검색하다가 한글 받침 구별 함수를 javascript로 구현하신 분이 있어서 해당 코드를 가져와보았다.
주요 포인트는 한글의 유니코드 숫자를 이용한다는 것이었다. 한글은 자음, 모음의 조합으로 각 글자를 만들어내야해서 각 조합마다 유니코드 숫자가 하나씩 부여되어 있다고 한다. 따라서 유니코드 숫자가 부여되는 규칙을 이용하면 특정 글자가 종성이 있는지 없는지를 구분할 수 있었다. charCodeAt() 함수를 이용해 문자열의 유니코드 숫자를 가져온다.
// 기존 코드: 단어 입력 시 마지막 글자 받침 유무 boolean으로 반환
const checkKorean = (word) => {
if (typeof word !== 'string') return null; // 문자열 여부 확인
var lastLetter = word[word.length-1]; // 마지막 글자
var uni = lastLetter.charCodeAt(0); // 마지막 글자의 유니코드
const UNICODE_GA = 44032; // '가'의 유니코드
if (uni < UNICODE_GA || uni > 55203) return null; // 한글 여부
// '가'부터 숫자 28마다 받침 없는 글자 돌아옴
// 받침 없음 = true, 받침 없음 = false
return ((uni - UNICODE_GA) % 28 === 0 );
}막연히 받침이 없는 경우 ~로, 받침이 있는 경우 ~으로를 사용한다고 생각해서 만들었는데, 막상 해보니 받침이 있는데도 ~로를 사용하는 경우가 있었다. 그제서야 찾아보니 ㄹ받침의 경우 ~로가 된다는 것을 알았다. 사실 진작에 찾아보고 시작했어야 했는데 안일했다..
그렇다면 받침이 ㄹ인 글자들의 유니코드 숫자를 알아내야 했다. 한글 유니코드 보여주는 블로그가 있어서 참고했다. 받침 중 ㄹ이 단독으로 사용된 경우와 ㄹ이 포함된 겹자음 받침이 있는데 예외는 ㄹ단독 받침에만 해당되는 것 같았다. 그래서 아래와 같이 코드를 수정했다. 그리고 js모듈로 export해서 끝말잇기 jsx파일에서 사용하도록 했다.
// checkKorean.js
const checkKorean = (word) => {
if (typeof word !== 'string') return null; // 문자열
var lastLetter = word[word.length-1]; // 마지막 글자
var uni = lastLetter.charCodeAt(0);
const UNICODE_GA = 44032; // '가'의 유니코드
if (uni < UNICODE_GA || uni > 55203) return null; // 한글 여부
// '가'부터 숫자 28마다 받침 없는 글자 돌아옴 & '갈'은 '가'와 8만큼 차이가 난다
// 받침 없음 or ㄹ 받침 = true (로), ㄹ아닌 받침 = false (으로)
return ((uni - UNICODE_GA) % 28 === 0 || (uni - UNICODE_GA) % 28 === 8);
}
module.exports = checkKorean;// WordRelay.jsx
const checkKorean = require('./checkKorean');
const onSubmit = (e) => {
e.preventDefault();
if(word[word.length-1] === value[0]) {
setWord(value);
// checkKorean() 인수로 새로운 입력값 value를 줬어야 했는데 기존값 word를 줘서 이상했음
setPostposition(checkKorean(value)?'로':'으로');
setValue('');
setResult('맞음');
} else {
setValue('');
setResult('틀림');
}
inputRef.current.focus();
}