전체 글 (57) 썸네일형 리스트형 SCSS 중첩 벗어나기 - @at-root 어떤 스타일을 중첩 안에서 정의하되, 중첩 밖에 있는 요소에서도 사용해야하는 경우에 쓸 수 있는 문법. See the Pen rNyMJLY by KimDovi (@ddonni0426) on CodePen. 위의 예시를 보면 .box 는 .test-list의 밖에 존재하는 별개의 요소이다. 하지만, test-list 안에서 정의된 변수의 값을 사용했고, .test-list의 유효 범위 안에서 스타일을 정의했다. 이와같이 특정 요소의 자식 요소가 아니더라도 그 안에서 정의된 변수의 값을 사용해야하는 경우에는 @at-root를 사용하여 특정 스타일을 공유 받을 수 있다. Nuxt.js - npm run build 시 에러 (Node 버전 변경으로 인한 오류) 오랜만에 포트폴리오 사이트 만들어 놓은 것 보다가 여기저기 수정해야 할 것들이 눈에 들어와서 프로젝트를 열었는데, 수정한 내용이 화면에 반영이 안되서 build 명령어를 쳤다가 에러가 났다. node sass could not find a binding for your current environment window 64-bit with node.js 14.x 라는 문구가 뜨고 그 아래 This usually happens because your environment has changed since running 'npm install' Run `npm rebuild node-sass` to download the binding for your current environment. 라고 친절하게 해결 방.. npm run start가 안된다면..!! ( 리액트 웹팩 버전 안 맞을 때 ) "Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree " 프로젝트를 생성하고, npm run start를 하자마자 오류가 났다. 일단 이 에러가 난 이유는, 내 리액트 프로젝트는 4.44.2 버전의 웹팩이 필요한데, 디펜던시 트리 상위 레벨에서 4.43.0버전 웹팩이 발견됐다(?) 는 것이다. 이게 문제가 되니 이 4.43.0 webpack을 포함하는 node_module 삭제해라. (즉, user\node_modules를 삭제해야 함.) ※ 해결 방법1 ※ 위의 내용을 알고있는 상태에.. 2019 카카오 개발자 겨울 인턴십) 크레인 인형뽑기 게임 1) 프로그래머스에 제출한 답. function solution(board, moves) { let answer = 0; let bucket = []; for(let pos of moves){ for(let x = 0; x 0 && bucket[bucket.length-1] === board[x][pos-1] ){ answer += 2 bucket.pop(); }else{ bucket.push(board[x][pos-1]); } board[x][pos-1] = 0; break; } } } return answer } reduce로 객체 인덱싱하는 것처럼 어떻게 해보면 행,열 바.. webpack과 친해지기 step_2 ( webpack.config.js 파일 ) 작성중. webpack.config.js 파일에 설정들을 추가 해 볼건데, 설정의 큰 흐름은 entry -> module -> output 이다. "entry( 압축할 파일들 )에 module( 규칙들 )을 적용시켜 output( 결과 파일을 어디에 어떻게 저장할 지) 으로 출력한다"의 흐름으로 이해하면 된다. 1. 기본 설정 name - 설정 파일 이름을 지어주면되는데 이 설정에 대한 목적을 간단하게 적어주면 된다. mode - 개발모드냐 배포모드냐를 말하는데, 개발 중엔 'development' , 배포 시엔 'production'으로 설정해주면 된다. 배포 모드로 변경 후 빌드를 하면 소스코드 압축 및 최적화가 진행된다. devtool - 소스맵을 생성할 지 말지 그리고 어떻게 생성할 것인지를 설정한다. 여.. webpack과 친해지기 step_1 (설치 및 설정 파일 생성) 1. webpack은 왜 쓰는 걸까. 개발을 하다보면, 하나의 파일 안에 코드가 너무 길어 질 경우 여러 파일로 나눠 import 해서 쓰기도 하고, 그러다 보면 자연스레 컴포넌트나 js파일 css파일 등--이 굉장히 많이 생겨나는 걸 볼 수 있다. 또 그 중 몇몇 파일은 안 쓰이게 되는 경우도 있고, 코드 내에 console.log 처럼 개발할 때만 사용하는 서비스에 불필요한 코드도 생기기 마련인데, 그런 것들을 미처 신경쓰지 못하는 경우가 부지기수이다. 웹팩은 이런 문제들을, 불필요한 코드는 제거하고 많아진 파일들 중 내가 원하는 파일들만 모아서 하나의 js파일로 병합해 줌으로써 해결한다. 그리고 이 합쳐진 파일은 index.html 파일에서 아래와 같은 코드 한 줄로 로딩 되어 화면에 뿌려진다. 뭐.. Node.js ) bcrypt를 이용해 패스워드 암호화하기 - 1 1. 설치 npm i bcrypt --save // 일단 설치한다. 아래의 링크를 타고가면 bcrypt 사용하는 방법에 대해 나오는데, www.npmjs.com/package/bcrypt#usage bcrypt A bcrypt library for NodeJS. www.npmjs.com 2. 설정 다음은 bcrypt 사용에 기본적으로 필요한 코드이고, 위 페이지에서 가져왔다. const bcrypt = require('bcrypt'); const saltRounds = 10; const myPlaintextPassword = 's0/\/\P4$$w0rD'; const someOtherPlaintextPassword = 'not_bacon'; 먼저 우리가 만든 User모델에 위의 코드를 붙혀넣기 하고, 우.. Node.js(express.js) 회원가입 회원가입을 하려면, 사용자가 보낸 요청에서 사용자 입력한 정보를 꺼내올 수 있어야 한다. 그래야 그 정보로 유효성 검사를 하고 DB에 등록을 하기 때문. 이 과정에서 필요한게 body-parser이다. body-parser를 이용하면 사용자가 보낸 요청에서 쉽게 데이터를 꺼낼 수 있다. 1. body-parser 설치 먼저, body-parser를 백엔드에 설치한다. npm i body-parser --save 명령어 입력 설치가 완료되면 백엔드의 시작점인 index.js에 body-parser을 가져와서 등록한다. const express = require('express'); const app = express(); const bodyParser = require('body-parser'); expr.. 이전 1 2 3 4 5 ··· 8 다음
