Web (11) 썸네일형 리스트형 [Node.js] package.json에서 dependencies와 devDependencies package.json을 보면 아래와 같이 dependencies 영역이 있고, devDependencies 영역이 있다. devDependencies에는 개발 환경에서만 사용하는 패키지들을 명시한다.{ "dependencies": { "express": "^4.17.1" }, "devDependencies": { "webpack": "^5.0.0", "webpack-cli": "^4.0.0" }} npm install을 하면 dependencies와 devDependencies 영역에 명시된 모든 패키지가 설치된다.프로덕션에서 devDependencies 영역에 해당하는 패키지들을 설치하지 않으려면 아래 두 명령어 중에 하나를 선택해서 패키지를 설치하면 된다.npm install.. [CSS] CSS로 삼각형 그리기 CSS에서 삼각형을 만들기 위해서는 사각형을 활용한다. 단계를 거쳐 살펴보자.위에 있는 이미지가 아래에 첨부되어있는 코드에 대한 결과 화면이다.1. 가로 100px, 세로 100px인 사각형이 있다. 각 테두리의 색상을 다르게 해놨는데, 각 모서리를 잘 보면 하나의 테두리의 범위가 대각선 모양으로 끝나는 것을 확인할 수 있다. 이 점을 이용해서 삼각형을 만드는 것이다.2. 우선 높이를 0으로 만들어서 사각형의 밑면만 남긴다. 그리고 아래쪽 테두리를 제외한 나머지 테두리의 색상을 투명색으로 지정한다. 그럼 1번에서 봤던 사각형의 4가지 테두리 중에 아래쪽 테두리만 남은 것을 확인할 수 있다. 역시 테두리의 양 끝은 대각선으로 잘려있는 모습니다.3. 이제 2번에서 가로 길이를 0으로 줄인다. 그러면 2번의 .. [CSS] shadow로 후광 효과 주기 1. box-shadow객체에 그림자 효과를 줄 때 box-shadow 속성을 사용한다.다음 코드를 실행시키면 주황색 정사각형 뒤로 흰색 그림자가 생긴 것을 볼 수 있다. 그림자 효과를 주는 box-shadow 속성 부분을 보면 이렇게 되어있는데, 각 위치에 있는 값의 역할은 다음과 같다.첫번째 값: 그림자의 가로 위치(사각형 정 가운데가 0)두번째 값: 그림자의 세로 위치(사각형 정 가운데가 0)세번째 값: 그림자의 블러 크기네번째 값: 그림자 색상그럼 아래 코드가 의미하는 것은 "사각형 정 가운데로부터 30px 반경을 가진 흰색 그림자를 만들어 달라"가 된다.box-shadow: 0 0 30px white; 각 값을 조절해서 다양한 형태의 그림자 효과를 줄 수 있다. 2. text-.. [Node.js] npm run start 와 npm start package.json의 scripts가 아래 이미지에서와 같이 있다고 할 때, start 명령어를 실행하는 방법에는 두가지가 있다. 1. npm run start 2. npm start npm run start 라고 해도 동작이 되고, npm start라고 해도 동작이 되는 것을 확인할 수 있다. 두 명령어에는 차이가 없으며 npm start는 단순히 npm run start를 짧게 쓰는 방법일 뿐이다. "scripts": { "start": "node dist/bin/www.js", "test": "jest" }, test 명령어를 실행시키는 방법도 마찬가지로 아래처럼 두 가지 방법이 있으며, 두 방법은 완전히 동일하다. 1. npm run test 2. npm test [React] Context 란? [Context의 배경] 일반적으로 리액트에서 컴포넌트 간 데이터 공유가 필요할 때는 state를 통해서 값을 자식 노드가 부모 노드로 올리고 props를 통해서 값을 부모 노드에서 자식 노드로 전달된다. 아래의 그림의 경우에는 1번 노드에서 5번 노드까지 값을 전달하기 위해서 1,2,3,4,5번 노드를 차례로 거치면서 값을 props를 통해서 전달해야한다. 그런데 만약 로그인된 사용자의 정보와 같이 여러 컴포넌트들에 전달해줘야 하는 props의 경우 이 과정이 꽤나 번거로울 것이다. (prop drilling) 이때 사용할 수 있는 것이 context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 이렇게 되면 불필요한 re-r.. [React] useState와 useReducer useState와 useReducer 모두 리액트 상태 관리 방법이다. 그렇다면 왜 굳이 useState를 두고 useReducer를 추가로 사용하는 것일까? [useReducer의 장점] - 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있다. -> 여러 컴포넌트에서 재사용이 가능하다. -> 컴포넌트와 상태 관리를 분리해서 관리가 가능하다. -> 한 번 작성하고 여러 군데서 가져다가 쓸 수 있기 때문에 useState를 여러번 쓰지 않아도 된다. -> 데이터 상태 관리 포인트가 한군데라 유지 보수가 용이하다. 그렇다면 무조건 useReducer를 쓰는게 이득일까? 아니다. 하나의 컴포넌트에서만 쓰는 값이 있다면 useState가 적절하며, 여러군데에서 쓰이는 값이라면 useReducer가 적절하다. .. [React] 불변성(Immutability) 불변성: 변하지 아니하는 성질 리액트를 얕은 비교를 수행하기 때문에 객체 속에 있는 데이터를 하나하나 다 비교하지 않는다. 다만 값의 참조값만 비교할 뿐니다. 예시를 통해 알아보자. 아래와 같이 person이라는 객체가 있다고 하자. const person = { name: 'John', age: 32, address: 'Seoul' }; person의 age를 변경하고 싶을 때 왜 아래 1번이 아닌 2번을 이용해서 굳이 state를 변경해줘야 하는 것일까? 1) person.age = 42; 2) setPerson({...person, age: 42}); 1번과 같이 진행한다면 화면 상에서 값의 변화가 일어나지 않을 것이고, 2번과 같이 진행한다면 예상대로 화면 상에서 값의 변화가 보일 것이다. 그 이.. [React] React JS 란? 공식 페이지: https://react.dev/ React The library for web and native user interfaces react.dev [React] - UI를 만들기 위한 자바스크립트 라이브러리 - 컴포넌트들로 구성된 그룹 - 컴포넌트를 만들 시에 각 컴포넌트는 독립적이며, 재사용성이 높게 설계해야함 - 값의 상태가 변경될 때 화면이 re-rendering 됨 -> state: 컴포넌트 내부에서 수정 및 사용되는 값 -> props: 컴포넌트 외부에서 주입되어 사용되는 값 - re-rendering 시에는 실제로 변경이 필요한 부분만 업데이트 됨 - Virtual DOM Tree를 사용하기 때문에 전체 트리가 아닌 실제로 변경이 필요한 노드만 업데이트 됨 - Virtual DO.. 이전 1 2 다음
