전체 글 썸네일형 리스트형 Input 태그 테두리 없애보리깅~ (focus, outline) 오늘 개인 프로젝트를 진행하다가 input 태그의 테두리 부분을 없애는 부분에 대해서 한번 정리해두면 나중에 또 쓸일이 있을것 같아 정리해본당 우선 html css 를 조금 만져봤다면 border 속성을 이용해 웬만한 블록의 테두리들은 다 관리해 줄 수 있다. 이 상태에서 테두리를 없애보릴라믄 border:none 을 해주면 된다링 .writeInput{ font-size:30px; padding: 20px; width: 70vw; border:none; } 테두리를 없애는데 벌써 성공해 버렸지만 input 태그에 focus 가 되는 순간 바로 테두리가 생겨버린당 ㄷㄷ.. 요때는 hover 와 마찬가지루 .writeInput{ font-size:30px; padding: 20px; width: 70vw;.. 더보기 Nodejs nodemon nodejs 를 이용해서 서버쪽 작업을 진행 할 때 파일을 추가하거나 기능을 추가하는 등 서버쪽 환경에 변화가 일어났을 때 잘 적용 혹은 반영되었는지 확인 하려면 서버를 껏다가 다시 켜야 되는 불편함이 있다. 단순히 1~2줄 추가 하는 간단한 작업이어도 다시 껏다 키는 불편함이 동반 될 수 있는데 그것을 해결 해주는 패키지가 nodemon 이다. 사용법을 간단히 알아보면 npm install nodemon // 이렇게 해도 상관없 npm install --save-dev nodemon // 애플리케이션을 배포한다고 생각했을 때사용자가 서버를 // 건드릴 일이 없기 때문에 개발용 목적으로만 쓰기 위해 // devDependencies 에 설치 설치해준뒤에 package.json 파일 안의 script 부분.. 더보기 Nodejs body-parser 패키지 노드를 이용해서 rest api 연습하는 중에 body-parser 라는 패키지가 있는 것을 알았다. 간단히 말하면 body-parser 를 통해 가공되지 않은 파일형식을 json 형식으로 변환시켜주어 우리가 쓸 수 있게 해주는 것이다. 위의 경로는 미들웨어로 posts로 설정해주었기 때문에 경로 에러는 없고 body 부분에 json형식으로 제대로 입력헀지만 undefined 가 뜨는걸 볼수 있다리. npm install body-parser 패키지를 설치해준 뒤에 const bodyParser = require('body-parser'); // import const app = express(); app.use(bodyParser.json()); // 미들웨어루 설정 어떤 리퀘스트에도 발동되게 설정 제.. 더보기 Nodejs MongoDb Cluster 생성 및 연결하기 요즘 MERN Stack에 대해 공부하면서 MongoDb를 이용해서 간단히 프로젝트를 하나 만들려고 한다. 이전에 오라클이나 MySql은 써본 경험이 있었지만 MongoDb는 처음이기에 nodejs로 MongoDb를 내 어플리케이션에 연결하는 과정을 정리해보자. 우선 파일구조를 프론트(client), 백(server) 폴더로 나누어서 진행해보자. 아무것도 없는 빈 폴더에 각각 client, server 폴더를 만들어 준 뒤 필요한 필요한 패키지들을 각각의 폴더에 설치해준다. client 폴더에는 우선 npx create-react-app // 우선 리액트 앱 환경 설치 npm install axios react-filebase64 redux redux-thunk + ... // 본인이 필요한 패키지 설치.. 더보기 MERN STACK 이란 MERN STACK 은 4가지 요소로 구성되어 있다. 각각 M : MongoDb : 데이터베이스를 담당 E : Express.js : 서버를 담당 R : React.js : 프론트엔드를 담당 N : Node.js : 백, 네트워크를 담당 MERN Stack의 한가지 다른 흥미로운 점은 프론트, 백 다른 언어를 사용할 필요 없이 '자바스크립트'만으로 풀스택 개발이 가능하다는 점이다. 더보기 e.target 과 e.currentTarget 차이점과 쓰는 방식 오늘 상태값 수정하는 데 에러가 있어서 정확한 값을 넘겨줘야 하는데 시간을 잡아먹어서 한번 정리해보려 한다. 이벤트 발생시에 함수 처리하면서 값을 가져와야 했었는데 파일 구조가 image video_library 이런 식의 탭에서 나는 a태그를 눌렀을 때와 icon태그를 눌렀을 때 각각 같은 값을 넘겨주는 작업을 하고있었다. const changeCategory = (e) => { const target = e.target.name; console.log(target, "cate target"); setContents({ ...contents, category: target, // images, videos, pdfs 문자열 값이 넘어가야 했다. }); }; const iconChangeCategory .. 더보기 Reactjs Redux란? 리액트 프로젝트에서 상태관리에는 여러가지 방법이 있다 props로 넘겨줘도 되고 context api 를 이용해서 관리해줘도 되고 redux를 사용해도 된다. redux가 필수는 아니지만 스케일이 큰 프로젝트 진행시에 상태관리에만 좀더 집중하게 해줄 수 있기 때문에 한번 알아봐두기로 했다. 영화를 찾는 애플리를 만든다치면 최상위에 App 컴포 찾기 컴포 영화목록 컴포 로그인 컴포 영화아이템 컴포등 여러 컴포가 있을텐데 App에 영화데이터를 전부 박아두고 관리해줄 수 있지만 껍데기 밖에 없는 앱 컴포에 영화데이터'만' 두는것 보다 아예 다른 공간(store)을 만들어서 그곳에서 데이터와 로직에 관한것들을 전부 다 관리 하는것 그 개념이 리덕스라고 보면 되겠다. 한 번 처음부터 순서를 밟아보면서 간단히 진행.. 더보기 React Router란 Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리다. 즉 하나의 페이지(SPA)안에서 필요시 각각의 데이터(페이지X)만 새로 렌더링 할 때 쓰이는 것이다. 새로운 페이지를 불러오지 않고 효율적으로 데이터를 가져다 쓸 수 있으니 쓰는 방법도 어렵지 않으니 한 번 같이 어떻게 쓰는지 알아보자. 우선 라이브러리를 먼저 설치해주어야 한다. npm install react-router-dom yarn add react-router-dom // yarn이 깔린 분들은 요걸룽 설치를 해주었다면 다음은 당연히 임포트를 해주어야 되겠다. 임포트 해줄때 위의 세개를 같이 임포트 해주길 바란다. 저 BrowserRouter는 html5의 hi.. 더보기 이전 1 ··· 12 13 14 15 16 17 18 ··· 24 다음
