전체보기
# 211102 TIL
장기현장실습 PLSnote 이슈 #2731 대쉬보드 화면 추가 이슈 진행중 토글 버튼 애니메이션과 관련해 이슈 발생 관계 없는 토글에 애니메이션이 적용되는 문제 해결 애니메이션 클래스를 add하는 코드를 반복문 안에 넣어주어 해결 [...document.getElementsByClassName("open-content-icon")].forEach((el) => { if ((el !== event.target) && el.classList.contains("fa-angle-up")) { el.classList.replace("fa-angle-up", "fa-angle-down"); el.classList.add('animated', 'rotateIn'); } }); #2629 전략 네비게이션 개선 의견 이..
# 211101 TIL
장기현장실습 PLSnote 이슈 #2731 대쉬보드 화면 추가 이슈 진행중 버튼 UI 추가하는 파일이 총 16개 였는데 코드가 겹치는 부분이 많아 리팩토링 진행 Issues: team_issues, project_issues Plans: team_plans, project_plans 크게 4개의 파트로 코드를 작성했으며, map controller와 project controller를 각각 사용하여 총 8개의 파일로 축소 시킴, 부트스트랩 클래스 명을 적용시켜 전체적인 UI 모두 통일함 토글 버튼을 클릭해서 콘텐츠가 나온 상태에서, 다른 토글 버튼을 누르면 다른 부분의 콘텐츠가 나온다. 이때, 기존 콘텐츠가 닫히게 되는데 토글 버튼도 같이 바뀌도록 코드를 수정중이다. 모든 토글 버튼을 배열로 담아와서 ..
# 211029 TIL
장기현장실습 PLSnote 이슈 #2629 전략 네비게이션 개선 의견 이슈 진행중 세부 전략이나 프로젝트가 없을 경우에는 버튼이 나타나지 않도록 수정 중 Strategy, detailed-strategy.slim.html에서 class에 삼항연산자를 활용해서 하위 리스트가 있으면 버튼을 보여주기 위해 null 값을, 하위 리스트가 없으면 버튼이 안보이게 하기 위해서 d-none 값을 주도록 설정 단, 하위 리스트가 있는지 없는지에 대한 함수를 직접 ruby로 정의해야하는데 이 부분을 구현하지 못한 상태 현재 프로젝트 보기에만 해당 내용이 적용되어 있는데 팀별로 보기에도 적용시켜 주는 중 버튼 UI를 추가하고 토글 버튼의 기능까지 구현 완료 Head_quarter 하위에 team 명이 리스트로 나오기 위해..
# 211027 TIL
장기현장실습 PLSnote 이슈 #2629 전략 네비게이션 개선 의견 이슈 진행중 전략, 세부 전략 명을 클릭하지 않아도 메뉴바 리스트를 볼 수 있게 전략, 세부 전략 명 옆에 버튼을 추가함 menu_controller.js 파일에 버튼을 클릭했을 때 실행될 함수를 선언함 전략 버튼 클릭시, 세부 전략 리스트 나타나는 openDetailedStrategy 세부 전략 버튼 클릭시, 프로젝트 리스트 나타나는 openProject _strategy.html.slim, _detailed_strategy.html.slim에 각각 i.fa.fa-angle-down를 추가하고 data-action으로 함수를 연결 (button 태그를 사용하지 않았기 때문에 click-> 추가) Toggle 버튼 형식으로 구현 Ope..
# 211026 TIL
장기현장실습 PLSnote 이슈 #2629 전략 네비게이션 개선 의견 이슈 관련 개발자님과 미팅 _strategy.html.slim에서 render strategy.detailed_strategies.proper_order에 대한 질문 Strategy는 어디서 불려오는 건지? Strategy_list.html.slim 파일을 보면 render @map.strategies.proper_order라고 되어 있는데 proper_order는 리스트 정렬해주는 필터 같은 느낌이라 신경쓰지 말고, 이걸 풀어서 쓰면 다음과 같다. render partial: "strategy", collection: @map.strategies.proper_order, as: :strategy 여기서 as 뒤에 strategy라고 ..
[인프런] 프론트엔드 개발환경의 이해와 실습 (프리티어 Prettier)
ESLint와 유사한 Prettier에 대해 알아보고 적용해보자. 프리티어(Prettier) 프리티어는 ESLint의 역할 중 포맷팅과 비슷하다. 코드 품질과 관련된 기능은 하지 않고, ESLint 보다 조금 더 일관적인 스타일로 코드를 다듬는다. 프리티어 패키지를 설치해보자. npm install -D prettier 프리티어를 적용할 코드를 작성하자. app.js console.log('hi');;;;;; Prettier로 검사해보자. npx prettier app.js --write —write 옵션을 추가하면 자동으로 파일을 수정해준다. app.js console.log("hi"); prettier는 ESLint와 달리 규칙이 미리 세팅되어 있어 설정 없이도 바로 사용할 수 있다. 그러나, 여전히..
# 211025 TIL
장기현장실습 PLSnote 이슈 #2785 노트기록 저장 또는 대화방 대화 전송시 알림창 기능 반영 이슈 (완료) 노트 기록 시 (완료) ko.yml, en.yml: confirm_create_new_note 추가 저장 버튼 클릭 시에 연결된 "data-action": "activity#activitySubmit"이 있어서 해당 메서드를 수정하여 알림창이 뜨도록 구현 노트를 생성할 때 필수적으로 입력해야하는 필드가 있어서 필수 필드가 모두 작성된 후에, 저장과 관련된 알림창이 뜨도록 해야했음. 알림창에서 확인을 누르면 노트가 저장되고, 취소를 누르면 아무 액션이 없도록 구현 activitySubmit(event) { let confirm_result = confirm(this.data.get("confi..
[인프런] 프론트엔드 개발환경의 이해와 실습 (린트 Lint)
린트가 무엇인지 알아보고, 자주 사용하는 ESLint 사용법을 살펴보자. Lint 린트란? 오래된 스웨터의 보푸라기 같은 것을 의미하는데, 코드에도 이러한 보푸라기가 있다. 들여쓰기를 맞추지 않거나, 선언한 변수를 사용하지 않는 등의 경우이다. 보푸라기가 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 애플리케이션도 동작한다. 그러나 코드의 가독성이 떨어지고 유지보수하기 어려워질 수 있다. 따라서 코드의 오류나 버그, 스타일 등을 점검하는 것이 필요하며, 이를 린트(Lint) 혹은 린터(Linter)라고 부른다. 린트는 코드의 가독성을 높이는 것 뿐만 아니라 동적인 언어의 특성인 런타임 버그를 예방하는 역할도 한다. ESLint ESLint는 EMS 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린..