코딩의숲

sass 공식문서 훑어보기 At-Rules https://sass-lang.com/documentation/at-rules Sass: At-Rules Much of Sass’s extra functionality comes in the form of new at-rules it adds on top of CSS: @use loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. @forward loads a Sass stylesheet a sass-lang.com @debug @debug는 js 에서 console.log 찍는것과 똑같다고 보면 된..

sass 공식문서 훑어보기 At-Rules https://sass-lang.com/documentation/at-rules Sass: At-Rules Much of Sass’s extra functionality comes in the form of new at-rules it adds on top of CSS: @use loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. @forward loads a Sass stylesheet a sass-lang.com @use - 다른 파일 전체를 해당 파일의 상단에 가져다 붙여줌. @use '파일 u..

1. npm으로 설치 및 실행하기 1.1 설치 npm install -g sass 설치가 왼료 되어도 node_moduls 폴더가 생기거나 package.json 파일이 생성되지는 않는다. 따라서 잘 설치 되었는지 확인 하려면 sass --version 명령어를 입력해서 sass 버전이 출력되면 설치 성공!! 1.2 Compile 및 watch 브라우저는 scss, sass를 읽지 못한다. 따라서 브라우저가 읽을 수 있는 css 문서로 변환을 해주어야 하는데, 이것을 컴파일 이라고 한다. 컴파일은 .scss 문서를 변경 할 때마다 되어야 하므로 watch 라는 명령어를 사용해서 파일의 변화를 항상 '감시' 하도록 해줘야 한다. /* 개별파일을 컴파일 하고 싶을 때 */ sass --watch 파일이름.s..

1. 변수사용하기 - 자주 쓰는 색상, 사이즈 등을 변수에 저장해서 불러오는 방법 /* 변수 지정하기 */ $mainColor: pink; $subColor: skyblue; $basicSize: 16px; /* 변수 불러오기 */ #header {background-color: $mainColor; font-size: $basicSize + 6px;} 지정한 변수는 연산도 가능하다. 단, 연산하려는 단위가 같아야 한다. px는 px와, %는 %와.... em은 em 과 연산 가능. css로 컴파일 된 모습 #header { background-color: pink; font-size: 22px; } 2. Nesting 문법 - 자식 요소를 부모요소의 중괄호 안에 넣어서 표기하는 방식 /* ul과 ul ..

1. 값을 저장 하기 store.js 파일 내에서 state() 함수 안에 데이터를 객체 형식으로 저장을 한다. state(){ return { name : 'kim', age: 20, } }, 이 데이터를 App.vue 파일 안에서 '불러' 오도록 할것이다. 2. 값을 불러오기 vuex name : {{ $store.state.name }} 값을 불러와 출력할 때에는 $store 안에 있는 state 안에 있는 name 을 출력해달라고 정중하게 부탁하도록 한다. {{ 이중괄호 }} 를 써야 완성이다. 객체의 형식이므로 객체를 불러다 쓰는 방식을 그대로 사용한다. 출력 화면은 아래와 같다. 2. 값을 수정하기(or) 값을 변경해서 다시 출력하기 그런데 언제까지나 store 에 저장한 초기값만 불러다 출력..

vue를 사용하는데 데이터가 너무 많거나, 컴포넌트간에 데이터를 주고받는 것이 props 만으로 해결되지 않을 때 사용하는 라이브러리 이다. store.js 파일 하나에 데이터를 다 때려넣은 뒤에 하나씩 꺼내먹기.. 꺼내쓰기 때문에 간편하기도 하다. 아니 이럴거면 나는 mitt를 왜 배운거야.... 그러나 그것은 그렇지 않다는 것이 코딩애플 스앵님의 말씀. 프로젝트 규모가 크지 않은 이상 vuex를 사용하는 것은 배보다 배꼽이 더 클 수도 있다고 한다. 기술적인 효율성을 중시하도록 하자. 배움의 효율성을 중시하는 것 보다...(이제 학생의 입장에서 벗어날 때도 되었다.) 1. 설치하기 npm install vuex@next 혹은 yarn add vuex@next 2. 셋팅하기 2-1. src 폴더 안에 ..

vue 에서 데이터를 활용 할 때, 부모 -> 자식컴포넌트로 데이터를 이동 하고 싶을 때에는 props 기능을 사용 한다. 그런데, 하위 -> 상위 -> 상위 컴포넌트로 이동하고 싶거나 형제간에 데이터를 이동시키고 싶을 때에는 props 기능을 사용 하지 못한다. 이렇게, 데이터를 부모-자식 관계에 종속되지 않고 보낼 수 있게 해주는 라이브러리가 mitt 이다. mitt 는 emitter와 같음 1. mitt 설치하기 npm install mitt 혹은 yarn add mitt 2. 셋팅하기 - main.js 파일에 작성 import mitt from 'mitt'; //mitt라이브러리를 import 함 const emitter = mitt(); const app = createApp(App); app...

컨테이너삭제 -> 이미지삭제 순서로 하는 것이 좋음 1. 컨테이너 삭제 //동작중인 컨테이너 확인 $docker ps //정지된 컨테이너 확인 $docker ps -a //컨테이너 정지시키기(정지시킨 후에 삭제해야함) $docker stop containerId //컨테이너 삭제 $docker rm containerId //삭제된 내용 확인 $docker ps -a 2. 이미지 삭제 //이미지 확인 $docker images //이미지 삭제 $docker rmi imageId //다시 이미지 확인 해서 삭제여부 확인 $docker images **결과 화면

** 파일질라같은 ftp 클라이언트를 활용해서 sftp로 로그인 한 뒤에 .tar 파일 다운로드 받은 후 진행 세팅하기 1. load ubuntu apm ** tar 파일 있는 디렉토리 접근 dir //디렉토리 내용 확인 docker load -i //tar 파일 로드 (ex. docker load -i ubuntu_in_apm2_0.91.tar) **결과 화면** 2. docker images 세팅 docker images //이미지 확인 docker run -it -d -p 80:80 -p 9285:8085 -p 9286:8086 --privileged=true --name ubuntu_in_apm2 ubuntu_in_apm2:0.91 /sbin/init //이미지를 생성 및 포느 추가하여 컨테이너 ..

1. 도커(docker)란? - 여러 파일들을 패키지화 해서 보내주기 위해서 컨테이너를 만드는데, 이 컨테이너를 구축, 배포할 수 있게 해주는 툴 2. 설치 https://www.docker.com/ Docker: Accelerated, Containerized Application Development Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code. www.docker.com 3. 오류 3.1. 도커 실행시 알림창에 'hardware assisted virtualization and ..