본문 바로가기

전체보기

(286)
맥에서 MongoDB 설치하는 방법 1. brew.sh에 들어가서 터미널에 다음을 입력해 brew를 설치한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 2. 다음을 입력한다. brew tap mongodb/brew 3. 다음을 입력한다. brew install mongodb-community@4.2 4. 다음을 입력해서 몽고디비를 실행한다. brew services start mongodb-community@4.2 끝내려면 다음을 입력한다. brew services stop mongodb-community@4.2 5. 몽고디비를 연결하려면 다음을 입력한다. mongo 참고 : https://docs.mong..
axios로 서버에 요청할 때 생기는 에러 처리 방법 axios.get은 프로미스를 리턴하고 await를 앞에 붙여주면일반적인 프로미스에서 .then을 한 것과 같이 요청이 끝날 때까지 기다렸다가 결과 값을 리턴한다. 만약 try 문 안의 서버 요청 과정에서 상태 코드가 200이 아닌 에러가 발생했을 경우 catch로 넘어가게 되는데catch가 받는 ex 객체에는 request와 response가 있고이를 이용해서 어떤 경우의 오류인지를 파악해각 오류에 대한 대처를 할 수 있다. try { const response = await axios.get("https://jsonplaceholder.typicodef.com/posts");} catch (ex) { // ex.request 서버에 성공적으로 요청했을 때 설정됨 // ex.response 서버에 성공..
코드스테이츠 이머시브 코스에서 느낀 것들 긴 시간이 지났다. 개발자라는 직업을 진지하게 준비하고 나서 6개월이라는 시간이 흘렀다. 인생 전체와 비교했을 때에는 짧은 시간이겠지만 한 가지를 집중해서 할 수 있었던 2020년 상반기는 결코 잊지 못할 것 같다. 오직 코드스테이츠에서의 배움에 집중했다. 가족 이외의 사람들과의 만남을 줄이고 자바스크립트라는 새로운 언어를 배움과 동시에 웹 개발자로서 기본기를 익힐 수 있는 소중한 시간이었다. 코드스테이츠는 분명 좋은 배움의 장임에 틀림없지만 처음은 공짜라는 생각에 충분히 고민하지 않고 어설프게 했다가는 어려울 수 있다. 지금의 정책이 어떻게 바뀌었는지는 모르겠지만 적성을 생각해본다면 프리 코스를 먼저 해보고 이머시브 코스라는 정식 코스에 지원하는 것도 방법이다. 필자도 프리 코스를 신청하고 주어지는 과..
리액트 라우터의 기본 url(/)이 렌더링 되지 않게 하는 간단한 방법 리액트 라우터는 path의 url에 해당하는 컴포넌트를 렌더링 해준다. 그러나 시작하는 부분만 일치하더라도 렌더링해주는 방식이기 때문에 위의 경우 "/admin" url로 접근해도 만 렌더링 되는게 아닌 도 같이 렌더링이 된다. 때문에 보통 라는 모듈을 함께 써서 라우팅을 해주지만 간단하게 url이 정확히 일치할 때만 렌더링 되게 하려면 속성에 exact를 넣어준다. 이제 은 url이 "/" 일 때만 렌더링이 된다.
사용자가 입력한 값의 유효성을 판단해주는 노드 모듈 - hapi/joi joi는 로그인이나 회원 가입 같은 경우 사용자가 잘못된 입력 값을 넣었을 때 경우에 따른 에러 메시지를 손쉽게 만들어주는 모듈이다. 현재 예전의 joi는 deprecated 되었고 아래의 링크에서 hapi/joi의 사용법을 확인할 수 있다. https://hapi.dev/module/joi/ 아래는 서버에 유효하지 않은 값이 들어 왔을 때 joi를 이용해서 처리하는 예제다. const Joi = require('joi'); app.post('/api/users', (req, res) => { const schema = { name: Joi.string().min(3).required() // name이 갖춰야할 값의 조건을 설정 } const result = Joi.validate(req.body, s..
리액트에서 돔 엘리먼트를 변수로 참조하는 방법 function App() { const name = React.createRef(); // 변수를 먼저 선언한다. return ( // 선언한 변수를 참조하고 싶은 엘리먼트에 대입한다. // name.current와 같은 방법으로 엘리먼트를 참조할 수 있다. console.log(name.current.value)}>클릭 ); } 위 방법은 어쩔 수 없이 사용해야할 때에만 쓴다.
다양한 입력 태그들 예제 - Form 안에 들어가는 태그들 다음의 부트스트랩 사이트에 들어가서 원하는 형태를 가져다 쓰자. 참고 : https://getbootstrap.com/docs/4.5/components/forms/?
쓸만한 Lodash 메소드들 Lodash의 메소드를 이용하면 배열이나 객체와 같은 데이터들을 손쉽게 원하는 대로 변경할 수 있다. 설치법 : https://lodash.com/ _.range(start, end, step); 오름차순이나 내림차순 숫자로 이뤄진 배열을 만들 때 쓴다. 게시판의 페이지를 넘길 수 있는 숫자를 표시할 때 쓴다. // 1부터 시작해서 5 이전의 숫자까지를 담는 배열을 생성한다. _.range(1, 5); // [1, 2, 3, 4] https://lodash.com/docs/4.17.15#range _.orderBy(array, propertys, orders); 게시판의 글들을 분류할 때 쓴다. var users = [ { 'user': 'fred', 'age': 48 }, { 'user': 'barne..