전체 글

Code/React - Node
[React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)
개발자 스타일마다 다를 순 있지만 개인적으로는 하드코딩을 피하기 위해 정말 노력하는 편이다. 데이터가 변경될 가능성 + 추후 유지보수 + 확장 가능성 등등을 고려하며 추후 데이터의 변경이 있을 때에도 간단하게 변경할 수 있는 구조를 생각하며 구현하는 편인데 처음엔 조금 공수가 드는 것 처럼 보여도 결국 조금만 지나도 큰 효용을 느낄 수 있다고 생각하기 때문이다. 문제 서비스 릴리즈를 앞두고 있던 때에 다양한 이용약관이 추가되어야 하는 상황이었는데 이용약관들은 법적 검토 등의 과정을 통해 다소 여러가지 형태의 각기 다른 레이아웃을 가진 채 노션 (notion)에 정의되어 있었고, 약관을 보여주는 공통 모달 컴포넌트 디자인은 타이틀, 소제목, 본문, bullet, numbering, 여백 등등이 따로 커스텀..
→2023.09.10
Code/React - Node
[React/node] 한글 욕설 필터링 기능 구현하기 (node csv 파일 변환)
결과물 미리보기 자체 로그인 기능을 위한 기획 회의에 참여해 한창 얘기를 나누던 도중 나 : 닉네임에 욕설 필터링이 필요하지 않을까요? PM : 오!!!!!!! 아~~~~~ 예 그래야겠네요 나 : 어느정도까지 커버할 수 있는지 감이 잘 안 와서..리서치 후에 내용 공유 드리겠습니다 여러 정보를 찾아 보았을 때 욕설 필터링은 자체적으로 자연어 처리를 이용해 고도화된 엔진을 사용하여 검수하는 방법과 기타 라이브러리를 사용하는 방법이 있었는데 우선 자연어 처리를 하는 것은 현 상황에 적절하지 않은 방안이었기에, 라이브러리를 찾아보기 시작했다. bad-words (support only english) https://github.com/web-mech/badwords GitHub - web-mech/badwor..
→2023.09.09
Code/React - Node
[React] svg 에셋을 컴포넌트로 변환하여 사용하기 - SVGR
현재 서비스의 클라이언트 프로젝트는 에셋은 거의 모든 것을 svg 파일을 사용하고 있는데, svg를 프로젝트에 유연하게 적용시키기 위해 여러가지 도전을 해봤던 것 같다. svg 파일을 Img 태그에 그대로 넣어 사용하기거나 svg를 임포트 해서 컴포넌트로 만들어 보기도 했었다. 컴포넌트화 시킨 svg 를 또 잘 활용할 수는 없을까 해서 current value 를 이용해 svg 프롭에 직접 접근하여 관리하는 방식도 고민했었는데 이건 디자인 쪽에서 넘어오는 에셋들이 current 를 사용해 관리하기 힘든 구조였기 때문에 사용하지는 못했다 (svg 스타일의 통일성 부족) vscode를 통해 코드 작성을 하는데, 에셋은 자동 임포트가 또 작동되지 않아서 파일 위치 찾아서 하나하나 경로 보고 import 문 작..
→2023.09.07
Code/React - Node
[React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리
문제 : 반응형 웹 서비스 구현 중 IOS의 사파리 브라우저 환경에서 상단바가 페이지 배경색과 일치하지 않음을 확인 브라우저의 상단바 색상을 해당 페이지의 배경색과 동일하게 변경을 해야 했고, 페이지 별 상이한 배경을 갖고 있는 경우가 있기에 이를 핸들링할 수 있어야 했다. 1. 상태바 색상 변경 (change safari status bar color) - index.html html 파일 내부에 meta 태그를 위와 같이 작성할 경우 content의 색상을 고정으로 가지고 있을 수 있다. 나는 페이지 별로 다른 색상의 상태바를 보여주길 원했기에 커스텀 훅을 생성했다. 2. Custom hook 커스텀 훅 추후 유지 보수를 생각했을 때, 기본으로 설정된 흰색이 아닌 다른 색상이 필요한 경우만을 예외로 ..
→2022.12.09
Today I Learned
[TIL- 22_07_15] 스택 오버 플로우 첫 질문글 작성
구글과 스택 오버플로우는 개발자와 뗄레야 뗄 수가 없는 관계인 것을 모두가 알 것이다. 그 동안은 문제가 발생하면 구글링을 열심히 하면서 제발 나와 같은 케이스의 오류를 질문하거나 해결한 사람의 포스팅이 걸리길 골백번 기도하며 넘쳐나는 정보의 바다 속에서 무사히 내가 원하는 글이 나오기를 기도했었는데 작업을 하다가 궁금한 게 생겨 검색을 했는데 너무 특정한 케이스인지라 내가 원하는 정보는 나오지 않고, 꽤나 오랫동안 간간히 보였던 컴파일 에러가 갑자기 눈엣가시처럼 거슬려서 고민을 하다가 용기를 내 스택 오버플로우의 회원가입 버튼을 누르고... 첫 글을 작성했다. 질문의 예시로는 lodash 라이브러리의 isNull 함수와 React-native의 ScrollView 컴포넌트의 타입이 사용되었다. reac..
→2022.07.28
Code/React-Native
[React native] FlatList 자동 스크롤 슬라이더 / 캐러셀 구현하기
오늘의 결과물 회사 앱이 런칭되고 나서 react native에서 캐러셀을 활용한 디자인을 구현해야 하는 상황이 자주 발생했다. 참으로 다양한 캐러셀과 슬라이더를 만들었는데 이번에 메인 페이지 개편 작업을 하며 5가지 종류의 새로운 캐러셀을 추가로 작업했다. 가만히 생각해보니 리액트 네이티브를 만진 지 얼마 되지 않았을 때.. 잡힐 듯 잡히지 않는 듯한 FlatList로 캐러셀과 슬라이더를 구현하느라 상당히 진땀을 뺐던 기억이 났다. 캐러셀 자체를 만드는 것은 어렵지 않았으나 추가로 들어가는 로직이라던가 슬라이더의 전체 스타일을 잡는 과정에서 마음대로 되지 않았던 문제가 있었다. 그 당시에는 pm과 기획의 부재로 구두상으로 계속 디자이너님께 물어보며 재량껏 구현을 해야 했던 상황이라 더 고되었던 것으로 ..
→2022.03.27
Algorithm/Algorithm Study
[프로그래머스] 해시 _ 베스트 앨범 Lv3, javascript
2021_12_20 알고리즘 스터디 문제 풀이 문제 URL 코딩테스트 연습 - 베스트앨범 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 programmers.co.kr 문제 수도코드 result 배열 선언 1. 속한 노래가 많이 재생된 장르를 먼저 수록 (플레이 순위가 높은 장르명을 배열로 추출) countedGenres 상수 선언, genres 배열에 reduce를 사용하여 객체에 저장 만약 acc[cur.genre]가 존재한다면, 기존 값에 cur.plays를 더한다 그렇지 않다면, 키를 갖고, cur.plays를 할당 sortedGenres 배열을 선언 (객체를..
→2021.12.20
Algorithm/Algorithm Study
[프로그래머스] DFS _ 타켓 넘버
2021_11_21 알고리즘 스터디 문제 풀이 문제 URL 코딩테스트 연습 - 타겟 넘버 n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+ programmers.co.kr 문제 수도코드 dfs 재귀함수를 만든다. 인덱스와 sum을 인자로 받음 탈출 조건 인덱스가 numbers.length와 같은 경우 sum과 target이 같아진 경우 경우의 수를 1 증가시킨다 양수 조건으로 인덱스 1씩 증가시키며 재귀함수 호출 음수 조건으로 인덱스 1씩 증가시키며 재귀함수 호출 최종 result 리턴한다 풀이 function solu..
→2021.11.21
Algorithm/Algorithm Study
[프로그래머스] 해쉬 - 위장
2021_11_14 알고리즘 스터디 문제 풀이 문제 URL 코딩테스트 연습 - 위장 programmers.co.kr 문제 수도코드 clothes[i][1] > 의상의 종류 clothes[i][0] > 의상의 이름 obj 빈객체 선언 포문으로 clothes를 순회 obj[el[1]] 가 이미 있다면 기존 값 + 1 obj[el[1]] 가 없다면 값은 0; obj를 순회, 경우의 수를 구한다 result 변수에 *= (obj[key] + 1) // 1은 해당 부위 파츠를 착용하지 않는 경우 최종 result - 1 리턴 // 1은 모두 착용하지 않는 경우 풀이 function solution(clothes) { let result = 1; let obj = {}; for (let el of clothes) ..
→2021.11.14
Algorithm/Algorithm Study
[프로그래머스] 해시 - 완주하지 못한 선수
2021_11_14 알고리즘 스터디 문제 풀이 문제 URL 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 programmers.co.kr 문제 마라톤에 참가했지만 완주는 못한 1인의 이름을 출력하는 문제이며, 이 문제에서 신경써야할 부분은 동명이인이 있을 수 있다는 점이다. 문제를 보자마자 두 가지의 문제 풀이가 떠올랐다. completion을 순회하면서 그 요소로 participant에서 해당되는 인덱스를 찾고, slice한 값을 participant에 계속 재할당, 최종적으로 남은 참가자를 리턴하는 방법 (O(n^2..
→2021.11.14
카테고리 없음
[leet-code] Palindrome Number
문제 URL : https://leetcode.com/problems/palindrome-number/ Palindrome Number - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 요소를 반대로 reverse 했을 때도 동일한 생김새를 가지고 있는 지 확인하는 문제 var isPalindrome = function(x) { const originalStr = String(x); const reversedStr = String(x).split("").reve..
→2021.11.07
Algorithm/Algorithm Study
[leet-code] Two Sum
2021_11_07 알고리즘 스터디 문제 URL :https://leetcode.com/problems/two-sum/ Two Sum - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제 nums 배열에서 두 개의 인자를 더했을 때 target이 되는 인덱스를 배열에 담아 리턴한다 /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = function(n..
→2021.11.07
Algorithm/Algorithm Study
[프로그래머스] 완전 탐색 - 소수 찾기
2021_11_07 알고리즘 스터디 문제 URL : https://programmers.co.kr/learn/courses/30/lessons/42839?language=javascript 코딩테스트 연습 - 소수 찾기 한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 programmers.co.kr 문제 풀이 function solution(numbers) { const result = []; const validMaxNum = numbers.split("").sort((a, b) => parseInt(b) - parseInt(a)).map((num) =>..
→2021.11.07
Algorithm/Algorithm Study
[프로그래머스] 완전탐색 _ 카펫 (javascript)
2021_10_10 알고리즘 스터디 문제 풀이 문제 URL 코딩테스트 연습 - 카펫 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 programmers.co.kr 문제 문제를 보고 가장 중요한 부분을 먼저 확인했다. x >= y의 조건을 성립하고, brown은 직사각형이 테두리 한 줄을 차지하며 yellow는 brown을 제외한 공간을 차지한다. 어차피 x의 길이는 y와 같거나 길어야한다는 조건이 있기때문에 제곱근을 먼저 구해 초기 x값을 디폴트로 지정하는 방법을 생각했다. 수도코드 상수 blocks 선언, brown + yellow 값, 전체 블록의 개수를 ..
→2021.10.10
Algorithm/Algorithm Study
[프로그래머스] 완전 탐색 _ 모의고사 (javascript)
2021_10_12_ 알고리즘 스터디 문제 풀이 모의고사 -> 문제 URL 코딩테스트 연습 - 모의고사 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 programmers.co.kr 문제 문제를 보자마자 반복되는 패턴을 먼저 확인했다. dropper1 은 [1, 2, 3, 4, 5], dropper2는 [2, 1, 2, 3, 2, 4, 1, 5], dropper3은 [3, 3, 1, 1, 2, 2, 4, 4, 5, 5] 반복적으로 나와 이것을 이용해 answers의 길이만큼 각 수포자가 제출한 답안을 만든 뒤, 그 값으로 answers의 인자(답)과 비교하여 알맞은 ..
→2021.10.03

• 이전
• 1
• 2
• 3
• 4
• 5
• 6
• 다음