기억보다 기록

사실 이 글은 SCSS를 어떻게 사용하는 지보다 만약 SCSS를 처음 사용하는 것을 가정하고 SCSS가 무엇이고 어떻게 동작하기 때문에 어떤 것이 필요한지 적어보려고한다. 그리고 이 글은 이 블로그 를 보고 작성했다. Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog SCSS란? Sass는?? 프로젝트나 서비스의 규모가 작을 때 CSS를 사용할 때는 문제점이 없지만 작업이 고도화되고, 방대해지고 복잡해 질 때 CSS의 단점이 드러난다. 하지만 웹에서는 표준 CSS 만 작동할 수 있기 때문에 다른 방법이 없다. 그..

Material UI(이하 MUI)의 스타일 솔루션을 사용하기 위해 공식문서를 보았다. MUI는 다른 스타일 솔루션들과 상호 운용이 잘되고, 이와 더불어 CSS-in-JS 솔루션이 MUI의 이전 버전의 한계들을 극복할 수 있고 다른 멋진 기능들을 제공한다고 했다. 그렇기때문에 굳이 자체적 스타일 솔루션을 사용할 필요가 없다고 했다. In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. A CSS-in-JS solution overcomes many of those li..

현재 근무 중인 회사에서 데이터를 수정하거나 추가할때 서버와의 통신에서 콜백함수로 처리하는 부분이 상당히 많다. 옆자리의 사수이자 동료인 재훈님께서 물어볼때마다 친절하게 설명을 해주셨지만 정작 나는 볼때마다 정리가 다르게 되서 이번에 확실히 여쭈어보고 문서로 정리하기로 했다. 콜백 함수, Promise, async / await 등 비동기 처리 방식에 대한 정리는 나중에 자세하게 하고 우선 적어도 내가 오늘 본 코드에 안에서 콜백 함수란 것이 어떻게 작동하고 왜 작동하는지 나중에 잊지 않기 위해 적어볼 것이다. 회사 코드이기 때문에 그대로 가져다 쓰는 건 아닌 것 같아서, 비슷한 이름이지만 같은 로직으로 작성해보겠다. 내가 오늘 살펴본 코드는 제품의 정보를 수정하는 컴포넌트이다. 구조는 제품을 수정하는 ..

얼마전 vue 공부를 시작했다. Vue-CLI 를 설치하여 진행하던 와중 ~.vue 확장명인 파일에는 하이라이트 기능이나 에러 체킹 기능이 적용되지 않았다. 마치 코드들의 무덤에 있는 것 같았다. 따로 플러그인을 설치해야 될 것 같아서 찾아보던 중 공부를 진행중인 vs code에서 ~.vue 파일을 위해 extension을 설치하라는 알림이 떴다. 이게 내 문제를 해결해줄 수 있을 것같아서 설치를 했더니 해결이 되었다. 해결된 그 자체가 이 기능이다. Syntax-Highlighting, Erro Checking, Formatting, Debugging, Auto Completion 등 원활한 코딩을 위해 도움을 준다. 다른 플러그인들도 있지만 다운로드 수 가 많고 기능성이 좋다고 한다. 아래의 링크로 ..

노트북을 항시 켜두다가 오랜만에 껐다가 켜 음악 관리 프로그램의 MySql 서버를 열었는데 접속이 불가했다. 인터넷에 검색 해본 결과 작업관리자 -> 서비스 에서 MySQL80 항목의 상태가 중지됨으로 되었음을 알게 되었고 이를 실행중으로 바꾸었더니 서버가 정상적으로 작동되었다. 보고 해결한 곳 : m.blog.naver.com/leenuri7/221765825089

리액트를 다루는 기술 책을 공부하다가 16장에서 'Parcel로 프로젝트 만들기' 라는 챕터가 나왔고 Parcel이라는 것이 무엇인지 찾아보다가 그것이 '웹 어플리케이션 번들러(모듈 번들러)'의 일종이란 것을 알게 되었고 번들러라는 것에 대해 찾아 봤다. 우선 모듈(Module)이라는 것은 프로그래밍의 관점에서 보았을 때 '특정 기능을 갖는 작은 코드 단위'라고 할 수 있다. // math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { sum, substract, pi } 위의 math.js는 합을 구하는 sum 함수, 차를 구하는 substract 함수, ..

나동빈님의 React와 Node.js로 만드는 고객 관리 시스템 개발 강좌 를 사용해 음악 관리 웹 어플리케이션을 만들고 있다. 그런데 프로젝트 실행을 yarn dev 로 특이하게 해서 package.json을 살펴 봤는데 scripts 부분이 밑에 처럼 되어있었다. "scripts": { "music": "cd music && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn music\"" }, dev 는 concurrently --kill-others-on-fail \"yarn server\" \"yarn music\" 라는 명령어를 실행하기 위해 만든 ..