본문 바로가기

분류 전체보기

리액트 이벤트 핸들러 네이밍 항상 리액트 이벤트 핸들러 네이밍에 대한 고민이 있었다. 작성하면서도 이렇게 작성하는게 맞나...?하는 의문이 있었는데, 찾아보니 좋은 블로그 글이 있어 이를 중심으로 간단하게 핵심만 정리해보고자 한다. props on* 접두사를 붙여서 작성한다. 예시) onClick 기본으로 제공되는 이벤트핸들러 네이밍 규칙과 일치하며, on*는 어떤 이벤트가 연결될지 의미한다. function handle*로 작성한다. 예시) handleClick handle*는 어떤 이벤트가 발생했을 때 어떤 것이 호출 될지를 의미한다. 위의 두 네이밍을 예시로 컴포넌트를 만든다면 아래와 같다. 좀 더 복잡한 경우 접두사 + 명사 + 동사의 순서로 작성한다. handleClickBock, handleClickList, handle.. 더보기
프로젝트 후기 ✨ 동기 본격적인 취준하기 전 마지막으로 만들어볼 프로젝트를 정하고 있었다. 처음에는 간.단.한 사진첩 사이트를 만들어보려고 했는데 또 생각보다 일이 커지면서...프로젝트가 영영 끝나지 않을 것 같은 느낌이 들기 시작했다. 그래서 다시 밤새 뭐만들어보지 고민하다가 다 엎고 특수문자 이모티콘 사이트를 만들어보기로 했다. 웹 이모지나 깨톡 이모티콘이 주로 많이 쓰이긴 하지만 그래도 종종 특수문자 이모티콘의 수요가 있는것을 보아왔기 때문에 만들어 보는 것도 좋을 것 같다고 생각했다. 검색해보면 블로그에 특수문자 이모티콘 모음이라는 제목으로 글이 올라온 것도 봤지만 이 경우에는 복사하기가 영 귀찮다. 그래서 사이트를 만들어서 클릭 한 번이면 자동으로 복사되는 기능을 넣고, 태그로 이모티콘을 검색하는 기능을 넣기.. 더보기
Programmers - 완주하지 못한 선수 / Javascript 🔍 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return [leo, kiki, e.. 더보기
Programmers - 프린터 / Javascript 🔍 문제 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되는지 알.. 더보기
Programmers - K번째 수 / Javascript 🔍 문제 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. ar.. 더보기
Programmers - 기능개발 / Javascript 🔍 문제 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자연.. 더보기
자바스크립트 클립보드 복사기능 - 크로스브라우징 이슈 프로젝트를 얼추 완성하고 배포한 뒤, 친구들한테 테스트를 부탁했는데 한 친구가 복사 기능이 안된다고 했다. 그 친구는 아이폰 safari에서 사용을 했는데, 찾아보니 기존 사용했던 자바스크립트 코드가 iOS safari에서는 지원이 안되는 것으로 보였다. 찾아보니 iOS = 10 부터는 가능하긴 하다고 한다. iOS < 10 미만의 버전에서 OS clipboard 읽기/쓰기는 'shorcut keys'가 아닌 document.execCommand()로는 실행할 수 없다. 여기서 'shortcut keys'는 copy/paste 액션 메뉴나 커스텀 iOS 단축키, 아니면 블루투스 키보드의 단축키 등을.. 더보기
redux-saga의 주요함수(delay, call, put, all, takeEvery, takeLatest) 새 프로젝트에서 redux-saga를 써보려고하는데 헷갈려서 주로 쓰는 함수를 정리해보았다. redux-saga docs 링크(한글번역) 읽어주세요 · GitBook No results matching "" mskims.github.io delay 설정된 시간 이후에 resolve하는 Promise객체를 리턴한다. 예시: delay(1000) → 1초 기다리기 put 특정 액션을 dispatch하도록 한다. 예시: put({type: 'INCREMENT]}) →INCREAMENT action을 dispatch한다. takeEvery 들어오는 모든 액션에 대해 특정 작업을 처리해 준다. 예시: takeEvery(INCREASE_ASYNC, increaseSaga) →들어오는 모든 INCREASE_ASYNC.. 더보기
자바스크립트 클립보드 복사 기능 구현 자바스크립트로 클립보드 복사 기능을 구현하는 방법은 아래와 같다. 들어가기에 앞서, select()함수는 과 태그에서 상요할 수있는 함수로, 모든 문자열을 선택하게 해준다. execCommand()함수는 문서의 편집 가능한 영역을 변경할 수 있게 해주는 여러가지 기능을 제공한다. const onCopy = str => { const el = document.createElement('textarea'); el.value = str; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; 요소의 value값에 복사하고자 하는 string값을 넣어준다. 를 현재HTML d.. 더보기
프로젝트 변경 원래는 사진첩 사이트를 만들어보려고 했는데 회원가입/로그인 기능까지 구현하려다 보니까 프로필관리 등등 해야할게 너~무 많아졌다. 다시 루미서울처럼 프로젝트가 커져가는 것을 발견...^^ㅎ... 그래서 며칠동안 작성한 코드는 다 엎고 다시 간단한 프로젝트로 다시 만들기로했다. 회원가입 같은 기능은 싹 빼고 간단하게 자동 복사 기능, 태그로 이모티콘 검색하는 기능, 유저가 이모티콘을 추가할 수 있는 기능만 넣으려고 한다. 기술스택은 원래 사용하던대로 프론트는 React, 백엔드는 express, DB는 mysql을 사용할 것이다. 프로젝트하면서 느끼는건데 이제 원하는 기능 구현은 구글링, trial&error을 통해 어렵지 않게 구현 할 수 있게 된 것 같다. 물론 기능 구현도 중요하지만 이제는 다른사람과 .. 더보기

티스토리툴바