본문 바로가기

분류 전체보기

배포 재도전기 - ETRI 형태소 분석 API사용 배포해보려고 heroku에서도 시도해봤지만 역시나 같은 라이브러리 문제(라이브러리 자체 문제는 아니고 찾아보니 동적로드 라이브러리 관련한 문제인 것 같다.)로 실패했다. 어떻게 방법이 없을까 하다가 한국전자통신 연구원에서 제공하고 있는 형태소 분석을 API를 사용해보기로 했다. 하루에 5000건만 호출할 수 있으며, 1회 호출 시 입력이 1만 글자 미만까지만 요청이 가능하다. 사용방법은 홈페이지에 자세하게 가이드가 나와있다. 먼저 API key발급 요청을 하면 메일로 보내주시는데, API 요청할 때 request body에 json형태로 보내면 된다. 나 같은 경우에는 형태소 분석 서비스를 이용할 것이기 때문에 analysis_code에 morp를 넣어주었다. { "access_key": "YOUR_AP.. 더보기
자바스크립트 문자열, single or double quotes?... and backtick 내 경우에는 보통 문자열에 shift누르기 귀찮기도 하고 보기에도 깔끔해보여서 single quotes을 쓰는 편인데, 다른사람들은 어떻게 쓰는지 궁금해서 검색해보았다. 자바에서는 char타입은 ''로 감싸고 String타입은 ""로 감싸지만, 자바스크립트는 char타입이 없기 때문에 문자열을 표현할때 'ABC'와 "ABC"는 완전히 같다. 내가 single quotes를 쓰는 이유는 단순히 매번 shift랑 같이 누르는것이 귀찮기 때문이다. html 요소 코드에서 escape가 필요할 때는 아래처럼 single qoutes안에 double quotes을 써주는 편이다. const element = '...' postman에서 ajax요청할 때 json파일도 같이 보낼 때가 있는데, json은 doubl.. 더보기
Table of Content 컴포넌트 만들기 - useContext 원페이지 개념이라 스크롤이 좀 길어지다 보니 스크롤을 맨 위로 올리는 top 버튼이나 목차 컴포넌트가 필요했다. 처음에는 간단하게 top버튼을 만들까 했는데 그것보다는 목차 컴포넌트를 만드는 게 뭔가 더 포멀 한 느낌을 줄 것 같아 목차 컴포넌트를 만들기로 결정했다. 각 목차는 태그로 감싸고, 이동할 컴포넌트에는 id를 달아줘서 태그가 해당 id를 가진 섹션으로 이동할 수 있게 만들었다. 이동하는 것 까지는 완성했는데 문제는 스크롤이 머무는 해당 섹션의 스타일을 다르게 표현하고 싶었는데 도저히 어떻게 해야 할지 감이 안 왔다. 자주 보는 블로그 사이트 velog에도 ToC컴포넌트가 있어서 뜯어보려고 개발자 도구를 열어서 봤는데 그것만으로는 알 수가 없었다. 다행히도(?) 개발자이신 velopert님이 오.. 더보기
이미지 업로드시 미리보여주기 기능 유저가 프로필 사진을 바꾸거나 사진을 올릴 때 미리볼 수 있도록 하는 기능이 필요했다. 생각해본 로직은 바꿀 사진을 선택해서 input에 집어넣었을 때 바로 서버로 보낸 후 temp폴더 내에 저장한 다음, 이 저장된 이미지를 다시 가져와서 화면에 보여준다. 그리곤서 유저가 submit을 하면 temp폴더에 있던 이미지파일이 정식 img폴더로 이동하고, submit이 안되면 temp에서 삭제하려고 했다. 그런데 찾아보니 업로드 전에 이미지를 미리 보여줄 수 있게 HTML5에서 지원하는 기능이 있었다. 굿굿 그래서 아주 간편하게 submit 버튼을 누르기 전에 이미지를 확인할 수 있도록 작성할 수 있었다. 1. addPhoto요소가 클릭되면 photoInput요소의 클릭이벤트를 트리거시킨다. 2. 파일 선택.. 더보기
모든 컴포넌트에 React.memo를 사용해도 되나요? React.memo DOM을 업데이트할 때 리액트는 컴포넌트를 렌더링 한 후, 이전 렌더링의 결과와 비교한다. 그러고 나서 결과가 다르다면, 리액트는 DOM을 업데이트한다. 이 비교 과정은 속도가 굉장히 빠르긴 하지만 React.memo를 사용해서 좀 더 빠르게 진행시킬 수 있다. 컴포넌트가 React.memo로 래핑되어있다면 리액트는 컴포넌트를 렌더링 하고, 결과를 기억한다. 그다음 렌더링이 일어나기 전에 만약 컴포넌트의 props가 동일하다면 리액트는 기억된 내용을 다시 재사용한다. 즉, React.memo가 사용된 컴포넌트는 props가 변경되지 않으면 다시 리 렌더링되지 않기 때문에 불필요한 렌더링을 방지할 수 있다. React.memo를 사용해야 하는 경우 1. 순수 함수 컴포넌트 컴포넌트가 함.. 더보기
개인용 사진첩 만들기 여행을 가도 사진찍는 것 보다는 눈으로 보는 걸 좋아해서 거의 안찍는 편인데 요즘 부쩍 지나고보면 남는 건 사진이더라 하는 생각이 많이 들었다. 종종 큰맘 먹고 여행 다녀와서 추억을 기록하자는 취지에서 네이버 블로그에 몇 번 글을 써봤는데, 글 하나를 작성하는 것 만해도 시간이 너무 오래걸려 잘 안쓰게 된다. 인스타, 페북도 안하기 때문에 시간이 지나서 보는 사진이라고는 정리도 안되어있고 그마저도 따로 백업도 안해둬서 엉망인 앨범 뿐이다. 그래서 제목이나 간단한 내용을 집어넣을 수 있는 개인용 사진첩을 만들어보기로 했다. 이름은 너무 클리셰같긴하지만 말그대로 flashback으로 지었다. 기능은 얼마 없는 것 같긴하지만 그래도 만들다보면 분명히 엄청 오래걸릴 것 같다. 이번에는 꼭!!!! 굳이 치명적으로.. 더보기
VS Code에서 react code snippet 만들어 쓰기 매번 컴포넌트 만들때마다 동일하게 작성하는 코드가 있다. 예를 들어 LoginTemplate이라는 컴포넌트를 만든다면 아래와 같은 식으로 작성해주는데, 이 동일한 코드를 매번 컴포넌트 만들때마다 반복하다보니 snippet을 만들어 개발 효율성을 좀 더 높이고자 하였다. import React from 'react'; import styles from './LoginTemplate.scss'; import classNames from 'classnames/bind'; const cx = classNames.bind(styles); const LoginTemplate = () => { return( ) } export default LoginTemplate; VSCode에서 snippet을 설정하는 방법은 .. 더보기
[번역] 반복문안에서의 자바스크립트 async/await 이 글은 원 글 작성자의 번역 허락을 받고 진행되었습니다. 의역, 오역 있을 수 있으니 댓글로 알려주신다면 감사드리겠습니다! 원글 보기 👉 https://zellwk.com/blog/async-await-in-loops/ 시작하기 전에 이 글은 독자가 이미 async/await에 대해 기본적인 개념을 숙지하고 있다는 가정하에 진행되므로, async/await의 개념에 대해 숙지하고 글을 보는 것이 이해하는데 있어 도움이 될 것입니다. 예제 준비하기 먼저, 여러분이 과일바구니 안에 있는 과일의 수를 알고싶어한다고 가정해봅시다. const fruitBasket = { apple: 27, grape: 0, pear: 14 } 그리고 과일 바구니 안에 있는 각 과일의 수를 알고싶다면, getNumFruit이라는.. 더보기
SEO(Search Engine Optimization) 그리고 시맨틱 마크업 검색 엔진 최적화(Search Engine Optimization, SEO) 검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 웹 페이지와 관련된 검색으로 검색한 검색 결과 상위에 웹 페이지가 노출된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나라고 할 수 있다. 검색 엔진 최적화와 시멘틱 마크업 웹 페이지를 이루는 HTML요소들을 가지고 검색엔진에 노출 될 수 있도록 하기 위해 시멘틱한 마크업이 필요하다. 웹 페이지를 봤을 때 눈으로 보이는 모습은 같을 지언정, 어떤 HTML 태그가 쓰였느냐에 따라 다르게 해석된다. 또 웹 문서의 내용-구조를 파악하기 위해 중요하.. 더보기
자바스크립트 reduce 안에서 async/await 쓰기 프로젝트를 진행하며 배열에 대한 loop을 돌리면서 async/await문을 써야 할 상황이 있었는데, 일반 기본적인 함수를 async 선언해서 코딩을 해봤어도 reduce문 안에서 async/await을 쓰려고 하니 영 어색했다. 그래서 찾아보니 아주 정리가 잘 된 블로그 글이 있었다. reduce 이외도 자바스크립트 loop안에서 async/await을 쓰는 경우가 아주 잘 정리되어있어 이해하기가 쉬웠다. 굉장히 좋은 글이라 한글로 번역해보고 싶어 이메일로 문의해봤는데 답장은 아직 안왔다. 번역해도 괜찮다고 답장이 오면 제대로 번역한 글을 올리도록 해야겠다. 혹시 원래 포스트가 궁금한 사람은 아래 링크로 가서 읽어보면 된다. Zell Liew Zell is a designer, developer an.. 더보기

티스토리툴바