Dev Diary 💻

Intro 안녕하세요. 이번시간에는 코틀린에서 특정 문자열을 기준으로 자르는 방법에 대해 알아보겠습니다. How to solve the problem 코틀린에서 특정 문자열을 기준으로 자르는 방법은 다양한데요, 저는 split 함수를 사용해봤습니다. 아래와 같은 스트링이 있다고 가정해봅시다. 해당 스트링에서 split 함수를 사용하여 '-' 문자열 기준으로 잘라줍니다. fun main() { val string = "kotlin-typescript-javascript" val result = string.split('-'); println(result) println(result[0]) println(result[1]) println(result[2]) } 위 코드 실행 결과는 다음과 같습니다. [kot..

Intro 안녕하세요. 이번 시간에는 자바스크립트로 특정 문자열 수까지 표시하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 긴 문자열을 자르는 방법은 다양한데요, 보통 생략 (...)처리를 사용하여 줄바꿈을 방지하곤 합니다. 저의 케이스의 경우 특정 문자열 수까지만 표시하고 싶었기 때문에 다른 방법을 이용했습니다. 다음과 같이 긴 문자열이 있다고 합시다. let str = 'Some very long string'; 특정 문자열 수보다 클 경우 substring을 이용하여 해당 문자열 수까지 문자열을 잘라줍니다. if(str.length > 10) str = str.substring(0,10); https://stackoverflow.com/questions/3414..

Intro 안녕하세요. 이번 시간에는 react 리액트에서 토글 버튼을 구현하는 방법에 대해 알아보겠습니다. How to solve the problem 저는 토글 버튼을 구현하기 위해서 useState hook을 사용하였습니다. useState hook is used to initialize with initial value and function which changes its value on click event handler. 우선 처음 토글버튼의 on/off 상태를 나타내는 state를 만들어줍니다. const [isOff, setIsOff] = useState(true); 이후 버튼을 클릭할 때마다, 해당 state를 사용해줍니다. on/off 상태에 따라 css class도 다르게 적용해줄 ..

Intro 안녕하세요. 이번 시간에는 IP주소가 무엇인지에 대해 알아보도록 하겠습니다. IP주소 모든 컴퓨터는 IP주소를 갖고 있습니다. IP주소는 IPv4, IPv6 2가지가 존재합니다. 일반적으로 IP주소라고 하면 IPv4주소를 뜻합니다. 즉 IP 주소는 인터넷 또는 로컬 네트워크에서 장치를 식별하는 고유한 주소입니다. IP구성 IP 주소는 마침표로 구분된 일련의 숫자입니다. IP 주소는 4개의 숫자 집합으로 표현됩니다. 예시 주소는 196.157.8.23입니다. 집합의 각 숫자 범위는 0에서 255까지입니다. 따라서 전체 IP 주소 지정 범위는 0.0.0.0에서 255.255.255.255까지입니다. IP 주소는 무작위가 아니며, ICANN( Internet Corporation for Assign..

Work 리뉴얼 서비스 개발 홈, 발전현황, 소식, 마이페이지 UI 및 API 개발을 완료했습니다. 데이터 정보들을 화면에 표시하는 게 중요해서 어떤 차트 라이브러리를 사용할까 고민했는데요, 기존 사용하던 Apexchart가 UI도 괜찮고, 예시도 많아서 그대로 사용하기로 했습니다. 또한 이번에는 zustand 상태관리 라이브러리를 처음 도입했습니다. 특히 API 를 개발하면서 처음으로 컬렉션 DB 추가해보는 작업도 진행했습니다. 사용자가 기존에 읽은 소식일 경우 mark 표시처리를 추가했어야 했는데요, 기존 컬렉션에서는 사용할 수 있는 지표가 없더라고요. 여러 고민을 해보고 베스트 방법을 적용해봤습니다. 해당 내용은 게시글 읽음(read)/안읽음(unread) 표시 상태 처리하는 방법 포스팅에서 확인할..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 legend(범례) padding을 조절하는 방법에 대해 알아보겠습니다. 제 경우 아래의 차트 legend 범례가 기준 좌표에 비해 너무 왼쪽으로 치우쳐져 있어서 left-padding으로 해결하고 싶었습니다. First try 우선 저는apexchart lengend 의 속성에 padding 속성 유무가 있는지 검색해봤습니다. apexChart 내 legend 속성은 아래와 같습니다. padding 관련 속성이 없는 것 같았습니다. legend: { show: true, showForSingleSeries: false, showForNullSeries: true, showForZeroSeries: true, position: 'bottom'..

Intro 안녕하세요. AWS ElasticBeanstalk 빈스톡을 삭제하던 도중 아래와 같은 오류 메시지가 발생했습니다. Stack deletion failed: The following resource(s) failed to delete: [AWSEBSecurityGroup] Why? AWSEBSecurityGroup 이 삭제가 안되어 발생한 문제입니다. 저는 Security Group 에서 빈스톡에서 생성된 보안그룹을 수정한 적이 있는데요, 수정한 보안그룹이 존재하기 때문에 다음과 같은 에러가 발생한 것 같습니다. How to solve the problem 보안그룹에서 수정한 내역을 삭제후, 다시 Beanstalk 환경 종료를 실행하니, 오류 없이 환경 삭제가 진행되었습니다. 다음의 에러가 발생..

Intro 안녕하세요. 이번 시간에는 React scroll 스크롤을 컨트롤하는 방법에 대해 알아보겠습니다. My case 저의 경우 컴포넌트 화면이 다음과 같이 구성되어 있었습니다. 게시글 리스트가 있고, 특정 게시글을 클릭하는 순간 특정 게시글에 대한 내용이 보이고, 아래로 다른 게시글로 이동할 수 있는 최신 게시글 목록이 있습니다. 최신 게시글 목록 중 하나를 클릭하면, 본문 내용이 변하는 형식입니다. How to solve the problem 1. 대상 div에 ref를 활용하기 위해 아래의 코드를 추가합니다. const postDetailRef = useRef(null); 2. 정의한 ref 값을 div tag에 할당해줍니다. {postDetail && ( {postDetail.title} {..

Intro 안녕하세요. 이번 3년만에 개최된 DEVIEW 2023년 컨퍼런스를 다녀왔습니다. 저는 27일 Day 1, 28일 Day2 신청을 모두 도전해봤는데요, Day2는 실패했습니다. 정말 빠르게 예약이 끝나더라고요. (day 신청 후기가 궁금하시면 이 글 참고 부탁드려요) Register 9:00 - 9:50 아침 9:00 - 9:50 사이에 등록 시간이여서 저는 시간에 맞춰서 9:30분쯤에 봉은사역에 도착했습니다. 사람이 매우 많더라고요. 그래도 네이버 예약하는 줄은 짧아서 바로 등록할 수 있었어요! 등록 후에는 받은 기념품입니다. 네이버 스티커와 키캡, 초콜렛, 물이 들어 있었습니다. 강의 들을 때 물이 있어서 다행이였어요. 발표도 안했는데, 왜 이렇게 목이 마르던지... 시간이 살짝 남아서 이..

Intro 안녕하세요. TypeScript 타입스크립트에서 ref를 사용하여 scrollTop 위치를 변경하던 도중 아래와 같은 에러가 발생하였습니다 someRef?.current?.scrollTop = 0; TS2779: The left-hand side of an assignment expression may not be an optional property access Why? 스펙 상에서 옵셔널 체이닝과 할당을 같이 사용할 수 없다고 합니다. The following is not supported, although it has some use cases; see Issue #18 for discussion: optional property assignment: a?.b = c How to solv..