All Article

공부한 내용을 정리합니다
Software Engineering/SDLC

소프트웨어 설계 - 요구사항 확인 및 분석

정보처리기사 필기 준비하며 정리한 내용입니다. 소프트웨어 설계 소프트웨어 개발 단계 계획 요구사항 확인 분석 모델링 분석 명세 설계 모델링한 것을 가지고 꼼꼼히 그림 그리는 단계 스토리보드 등 구현 (개발) 테스트 유지운영 요구사항 확인 1. 도출 요구사항 도출 기법 ⭐ 인터뷰 관찰 (고객사의 업무 프로세스 관찰) 또는 문화기술적 연구 사용자 스토리 (여러 사람의 업무에 관한 얘기를 하나씩 받는다) 시나리오 (요구사항 절차적으로, 이야기식으로 나열) 설문조사 브레인 스토밍 포커스 그룹 (이해관계자들이 모여서 회의) 워크샵 2. 분석 성능 특성 분석 측정 항목 이후에 나올 운영체제 등 모든 측정은 이것과 동일하다. 반환시간 Turnaround Time 요청 전달→응답→처리완료까지 걸린 시간 응답시간 Res..

Programming/Front-end

Div 영역 자체에 링크 걸기

DIV 영역 자체에 링크 거는 방법 DIV 영역을 클릭 시, 지정된 주소(URL)로 이동한다. onclick="location.href='이동할 링크주소 입력'" 이렇게 하는 경우에는 ctrl 키를 누른 상태로 클릭해도 새 탭으로 열리지 않는다는 점에 주의. 기본적으로 새 창에서 열기 onclick="window.open('이동할 링크 주소 입력')" 마우스 커서 모양 바꾸기 div 영역 부분에 마우스 커서를 올리면 손가락 표시로 바꾸게 하려면 style에 cursor : pointer 를 추가해야 한다. HTML 삽입 미리보기할 수 없는 소스 https://hajoung56.tistory.com/53 HTML 삽입 미리보기할 수 없는 소스

Programming/Front-end

CSS / Shadow 활용하기

Shadow 빛 방향 통일. 수평에 비해 수직이 2배가 되도록 설정하기. 항상 같은 비율로. 그림 그릴 때의 기본 이론과 동일. 겹겹이 쌓는 게 더 자연스럽다 .traditional.box { box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3); } 위의 예제보다 아래의 예제가 훨씬 결과값이 자연스럽다. 단, 오래된 디바이스에서는 렌더링이 느려지는 문제가 생길 수 있으므로 테스트 필수. .layered.box { box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075)..

Programming/Git

git push 취소 방법

reset `reset` 명령어로 특정 커밋 지점으로 되돌아가고, 이력을 정리하며 원격 저장소에 변경사항을 반영할 수 있다.참고글 :  git reset HEAD~1 / 가장 최근의 로컬 커밋 제거 방법가장 최근의 로컬 커밋을 제거하려면 git reset HEAD~1 명령어를 실행하면 된다.구체적으로는 커밋을 취소하고 수정된 파일을 다시 스테이징 영역으로 가져와 이전 상태로 되돌리고 싶을 때 사용할energneer.tistory.com1. 커밋 이력 조회git log --oneline위와 같이 한 줄로 로그를 조회하라는 명령어를 입력하면 아래와 같이 터미널에 각 커밋에 대한 일곱자리 해시값과 커밋 메시지가 표시된다.abcd123 (HEAD -> main, origin/main, origin/HEAD) ..

Programming/Git

git 빠뜨린 파일, 오타가 있을 때 수정하기

amend : 빠뜨린 파일, 오타가 있을 때 수정하기 git commit --amend 명령은 현재 브랜치의 가장 최근 커밋을 수정하거나 확장하는 데 사용됩니다. 스테이지에 파일을 올린 후 git commit --amend를 실행하면 현재 스테이징 영역에 있는 파일들을 이전 커밋에 포함시킬 수 있습니다. 즉, 이미 실행한 커밋을 수정할 수 있습니다. 파일을 스테이징 영역에 추가합니다. git add filename 등의 명령을 사용하여 파일을 스테이징합니다. 스테이징 영역에 파일이 추가된 후 git commit --amend를 실행합니다. 텍스트 편집기가 열리면 커밋 메시지를 수정할 수 있습니다. 메시지를 원하는대로 수정하고 저장합니다. 저장하면 Git은 이전 커밋을 수정하고 스테이징 영역에 있는 파일들..

Project Record/Customize Tistory

티스토리 hELLO 스킨 첫번째 카테고리만 펼치기 / load

소소한 기능 커스텀하는 게 너무 재밌어! 1. 스킨 편집에서 카테고리 접기/펼치기 옵션을 아래와 같이 설정 2. HTML 바로 윗부분에 아래의 스크립트 삽입 [0] 을 다른 숫자로 바꿔주는 방법으로 해당 순번의 카테고리가 펼쳐지도록 설정할 수 있다. (0이 1번째 카테고리) 처음에는 DOMContentLoaded로 하면 반응이 없어서 load로 바꿨는데, 다시 실험해보니 문제없이 작동한다. DOMContentLoaded가 안 되는 경우에는 load를 사용하면 될 것 같다. 처음에는 카테고리를 설정하는 js 파일의 forEach문에서 어떻게 한 인덱스만 제외하고 돌아가게 할 수 없을까 방법을 찾아보았다. 그러나 검색해서 나온 방법들은 '인덱스'를 기준으로 제외하는 게 없었다. (array 내부 내용을 정확..

Programming/Front-end

JS / Searching For Elements

getElementById getElementById : Id를 가져올 수 있다. document.getElementById("id"); getElementsByClassName : array로 가져다준다 getElementsByName : array로 가져다준다 querySelector querySelector css selector를 명시해줘야한다. id를 가져오는 경우에는 ("#id") 라고 입력한다. 단 하나의 element만 return 해준다. querySelectorAll 여러 element를 array로 가져오는 방법. document.querySelector(“.hello h1:first-child”) document.getElementsByClassName(”hello”)

Programming/Front-end

JS / Array 다루기

array 안에 있는 항목 받아오기 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek[5]); //sat 결과가 sat인 이유 컴퓨터는 숫자를 0부터 센다. array에 element 추가 해주기 : push 맨 끝에 item을 추가 해준다. const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // Get Item from Array console.log(daysOfWeek); // Add one more day to the array daysOfWeek.push("sun"); // push는 항목 하..

Programming/Front-end

CSS / backdrop-filter, filter

주로 메뉴 상단에 자주 주게 되는 백드롭 필터 효과에 대해 메모해둔다. backdrop-filter: blur(2px); /* 가우시안 블러같은 효과 */ backdrop-filter: brightness(60%); /* 명도 */ backdrop-filter: contrast(40%);/* 대비 */ backdrop-filter: drop-shadow(4px 4px 10px blue);/* 그림자 */ backdrop-filter: grayscale(30%);/* 그레이스케일 */ backdrop-filter: hue-rotate(120deg);/* 포토샵에서 색 레이어 깔고 색상 효과 준 느낌 */ backdrop-filter: invert(70%);/* 색반전 */ backdrop-filter: o..