전체 글
# 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 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린..
# 211022 TIL
장기현장실습 PLSnote 이슈 (진행중) plsnote의 새로 올라온 개선공유를 깃랩 이슈로 등록 #2861 노드인쇄기능 추가 개선 이슈 오픈 Plsnote 대화방 오픈 후, 메세지 남김 에러 및 개선요청 건 엑셀 파일에도 추가할 것..! #2785 노트기록 저장 또는 대화방 대화 전송시 알림창 기능 반영 이슈 진행중 개발자님께 질문하여 confirm 사용법에 대해 알게 됨 confirm은 사용자에게 true / fasle 값을 리턴받을 수 있는 팝업창을 띄워주는 함수 (확인/취소에 따라) 이 함수를 사용하여 버튼 클릭시 팝업이 뜨도록 구현하기 이슈 설명에 나와 있는 댓글이 이중적인 의미여서 개발자님과 상의 후, 총 3가지 경우를 구현하기로 결정 노트 기록시 대화방에 메세지 전송시 (완료) ko.yml..
[인프런] 프론트엔드 개발환경의 이해와 실습 (사스 Sass)
사스를 사용하는 방법에 대해 알아보자. 사스(Sass) 바벨을 설정하는 것과 거의 유사하다. 바벨이 ES6를 ES5로 변환해주듯이, 사스는 sass, scss(sass+css)를 css로 바꿔주는 전처리를 한다. 먼저 두가지를 설치해주어야 한다. $ npm install -D sass-loader node-sass node-sass : sass코드를 css로 컴파일해줌 sass-loader: 웹팩에서 sass를 만나면 node-sass를 내부적으로 실행시켜줌 webpack.config.js ... module: { rules: [ { test: /\.(scss|css)$/, use: [ process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loade..