전체 글

책 선정 이유QA( 품질 보증 ) 을 위해 서비스의 출시 이전 단계에서 테스트를 한다는 그 개념만 알고 있지만, 그 상세한 내용과 원리에 대해서는 이해도가  없었습니다. 창업팀에서 우리의 첫번째 서비스를 출시하기 위해 2주간 QA기간을 진행할때도, 기능에 대한 테스트만 진행할 뿐 이이상 무엇을 덜해야하는지? 어떤 부분이 잘못되었는지 아예 몰랐습니다.이 책을 통해 테스트와 QA에 대한 기본 개념을 쌓기 좋다고 생각해서 읽게 되었습니다 후기QA, 품질보증을 위해 소프트웨어 테스트의 기본과 실무에 대해 소개하는 가이드같은 책입니다. 테스트의 정의와 기초 개념부터 시작해 API 테스트, 자동화 테스트 등 다양한 테스트 방법론을 체계적으로 설명해 주고, 테스트와 QA에 대해 기본 개념과 원리에 대한 지식을 습득할..

개요웹 프론트엔드 개발자 설탕시럽입니다.개발 기간이 예상보다 길어지고, 이래저래 수정사항이 많았지만 결국 QA 기간까지 왔습니다. QA 진행을 위해서는, 이제 로컬환경이 아닌 배포된 환경이 필요했고 AWS를 활용하여 배포하기로 했습니다. 어쩌다 보니 제가 aws를 활용하여 React 배포를 맡았지만, vercel, firebase hosting과 같이 쉽게 배포를 도와주는 툴이 아닌 aws를 통한 배포는 처음이었습니다. 처음 하는 김에 Docker를 활용해보고 싶은 호기심도 있어서, 우당탕탕 React + Vite + Nginx + Docker + AWS 환경에서 배포하는 과정에 대해 공유하려고 합니다 DockerDocker란 무엇일까요? aws에서는 다음과 같이 설명하고 있습니다Docker는 애플리케이..

문제프로그래머스 코딩테스트 연습 : [Level 1] 과일 장수  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n ** log n)소요 시간: 15분  코드function solution(k, m, score) { score = score.sort(); let result = 0; for(i = score.length - m; i >= 0; i = i - m) { result += score[i] * m; } return result;}  회고

개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..

문제프로그래머스 코딩테스트 연습 : [Level 1] 기사단원의 무기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n ** log n)소요 시간: 20분  코드function getDivisor(number) { if(number === 1) return 1; let min = 1; let max = Math.sqrt(number); let count = 0; while(min limit) { result += power; } else { result += weapon; } } return result;}  회고sqrt 함수명 기억..

문제프로그래머스 코딩테스트 연습 : [Level 1] 명예의 전당 (1)  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Array시간 복잡도: O(n ** 2)소요 시간: 30분  코드function solution(k, score) { let hallOfFamers = []; let result = []; for (index in score) { if(hallOfFamers.length cur - next); if(hallOfFamers[0] cur - next); result.push(hallOfFamers[0]) } return result;}  회고더 나은 풀이법에 대한 고민 중.. 배열에 넣고..

문제프로그래머스 코딩테스트 연습 : [Level 1] 문자열 나누기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 15분  코드function solution(s) { let flag = s[0]; let count = 0; let flagCount = 0; let otherCount = 0; for(index in s) { if(s[index] === flag) { flagCount = flagCount + 1; } else { otherCount = otherCount + 1; } if(flagCou..

23년 11월 24일 ~ 25일 무박 2일간 진행되는 부경대 해커톤에 멘토이자 심사위원으로 초대받아 기쁜 마음으로 참석하고 온 회고입니다. 이전까지 해커톤에 작품을 내기만 했지, 심사와 멘토링을 하는 경험은 처음이라 1박 2일간 그리고 초대를 제안받았을 때부터 들은 고민과 경험을 공유하고자 합니다. 멘토링은 어디까지..? 독특하다면 독특하게도, 심사 기준표는 받지 못한체 심사 전날 자유롭게 팀 멘토링을 진행했습니다. 제 분야인 웹 프론트엔드 뿐 아니라, 기획과 심지어 백엔드와 관련된 부분까지 질문이 들어오면 아는 선에서 도와줬고 피드백을 드렸습니다. 고민되던 부분은 어디까지 설명을 해드려야 되는가 였습니다. 다음날 심사해야 되는데 코드를 제가 다 고치거나 설명드릴 수 도 없는 노릇이고, 들어오는 질문에 ..

개요 지금까지, 몇 만개 가량의 수치 데이터를 표현하기 위한 화면을 설계하고 프로시저와 트리거를 이용해 통계 테이블을 만들었습니다. 이제 화면에 구현을 해보려고하고 그래프를 구현하기 위한 라이브러리로 Google Charts를 선택했습니다. 구글 차트를 선택한 이유 그래프를 그리기위해 우선 관련 라이브러리 리서치를 했습니다. 정말 다양한 라이브러리가 있었고 그 중 Chart.js 와 Google Chart 두가지 라이브러리 중에서 고민하고 Google Chart를 선택한 이유에 대해서 말씀 드리겠습니다. 우선 Chart.js 입니다. CANVAS 베이스로 빠른 렌더링 속도를 가지고 있습니다. 작은 라이브러리 용량과 공식문서 가이드만 봐도 쉽고 간단하게 그래프를 그릴 수 있다는 점이 가장 큰 메력이었습니다..

개요 이전 포스트에서 많은 수치 데이터를 담은 화면을 설계했었습니다. 5분 단위로 하루에만 288개의 데이터를 표시하기 위해, 그래프와 일일 평균, 최고, 최저 수치를 보여 가독성을 높이고 보다 구체적인 페이지를 확인할 수 있는 팝업창을 설계했습니다. 설계된 화면처럼 평균, 최고, 최저 수치를 화면에 표시하기 위해, 데이터베이스에서부터 통계테이블을 설계해 보기로 했습니다. 우선 프로젝트에서 고려하는 기온과 습도 데이터의 경우 실시간으로 1분 단위로 데이터가 전송됩니다. 전송되는 데이터는 각각의 테이블에 저장되고, 저장되는 데이터를 자동으로 처리해서 통계테이블을 만들기 위해 프로시저와 트리거를 계획했습니다. 통계 테이블? 특정 데이터를 기반으로 통계된 데이터를 추출하기 위해 서버에서 sql문을 통해 언제든..

개요 안녕하세요. 이제는 웹 개발자 설탕시럽입니다. 3개월 단기 인턴 과제를 수행하면서, 1분 단위로 들어오는 기온, 습도 측정값을 하루, 한 주, 한 달 등등 기간에 맞게 데이터를 보여야 하는 화면을 설계하게 되었습니다. 한 화면을 설계하기 위해 겪은 시행착오를 공유하려고 합니다. 화면 설명 개요에서 말했던것 처럼, 데이터의 종류는 기온과 습도였습니다. 해당 데이터는 1분 단위로 수집되고 있고 측정된 과거부터 지금까지의 값을 모니터링하는 화면을 설계해야 했습니다. 초기에 화면을 설계하기 위해 1차원적으로 테이블을 어떻게 구성할지 고민했습니다. 1분단위 데이터를 표시하기 위해 연도, 월, 일, 시, 분이라는 구분이 있고, 구분을 어떤 식으로 조합해도 한 페이지에 테이블로 담을 수 없었습니다. 년-월-일 ..

문제프로그래머스 코딩테스트 연습 : [Level 1] 조건에 부합하는 중고거래 댓글 조회하기 코드SELECT USED_GOODS_BOARD.TITLE, USED_GOODS_BOARD.BOARD_ID, USED_GOODS_REPLY.REPLY_ID, USED_GOODS_REPLY.WRITER_ID, USED_GOODS_REPLY.CONTENTS, DATE_FORMAT(USED_GOODS_REPLY.CREATED_DATE, "%Y-%m-%d") FROM USED_GOODS_BOARD INNER JOIN USED_GOODS_REPLY ON USED_GOODS_BOARD.BOARD_ID = USED_GOODS_REPLY.BOARD_ID WHERE USED_GOODS_BOARD..