티스토리

my study life

검색하기

블로그 홈

my study life

okcoder.tistory.com/m

ksh21 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[새싹 프론트엔드] scss 반복문 사용해보기 🧡 INTRO 새싹에서 SCSS를 배우고 실습 문제를 진행했는데 SCSS의 중첩 기능만 주로 사용하다가 다양한 기능들이 있다는 것을 알게 되어 기록합니다 📃 문제 처음 작성한 코드 처음에 코드를 작성했을 때 이렇게 하면 굳이 scss를 사용할 필요가 있나? 싶을 정도로 코드가 길었습니다😂 @mixin box($size, $color) { width: $size; height: $size; background-color: $color; } .container { display: flex; .box1 { @include box(50px, red); } .box2 { @include box(100px, orange); } .box3 { @include box(150px, yellow); } .box4 { @i.. 공감수 0 댓글수 0 2022. 12. 5.
[새싹 프론트엔드] Styled-Components 기초 배우기 💻 INTRO 오늘은 React에 css를 적용하는 여러 방법 중 가장 많이 쓰인다는 Styled-Components에 대해 알아보려고 합니다 Styled-Components는 컴포넌트 단위로 스타일을 지정해주는 방식이기 때문에 리액트의 특성에 가장 알맞은 css 작성 방식이라고 할 수 있습니다. 최근 리액트 프로젝트를 진행하며 Sass를 사용해봤는데 기존 css에 비해 매우 편리했지만 mixins 파일들을 제외하고도 아래와 같이 엄청 많은 scss 파일을 만들어야 했습니다. 그래서 찾아본 게 Styled-Components 인데요!! Styled-Components는 CSS-in-JS 라이브러리이기 때문에 CSS를 JS 파일에 바로 넣는 방식을 사용합니다. 실제 간단하게 사용해보니 스타일을 바꾸기 위해.. 공감수 0 댓글수 0 2022. 11. 28.
[새싹 프론트엔드] React Router INTRO. 리액트에는 페이지 이동 기능을 처리해주는 '리액트 라우터'가 있습니다. 여러 페이지를 가지고 있는 웹 어플리케이션을 만드려면 필수로 알고 있어야 하는 내용이고 생각보다 어렵지 않아서 쉽게 배우실 수 있을 거라고 생각합니다 :) SPA란? SPA는 Single Page Application의 약자로 페이지가 한 개인 어플리케이션이란 뜻을 가집니다. 원래 어플리케이션은 여러 페이지로 구성되어 있고 페이지를 이동할 때마다 페이지가 새로고침되며 리소스를 전달받아 렌더링을 진행합니다. 이렇게 되면 속도적인 측면에서 큰 문제가 발생하겠죠? SPA는 웹 앱에 필요한 모든 리소스를 처음에 모두 다운로드합니다. 그 후 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체 페.. 공감수 1 댓글수 0 2022. 11. 22.
[새싹 프론트엔드] 자바스크립트로 계산기 만들기 구현할 기능 - 숫자와 연산자를 클릭하면 input 창에 나오게 하기 - '='을 클릭하면 계산하기 - 'CE"와 'C'를 클릭하면 전체 지우기 - 'BACK'을 클릭하면 끝에서 마지막 한 글자만 지우기 HTML 처음 계획은 각 연산자마다 함수를 만들어서 기능을 구현하는 것이었습니다. 따라서 연산자마다 다른 class를 지정했었는데 다시 생각해보니 eval() 함수를 사용하면 생각보다 쉽게 만들 수 있을 것 같아 숫자와 연산자에 동일한 'input' class를 적용해주고 한 번에 불러올 수 있도록 만들었습니다. BACK CE C = 7 8 9 / 4 5 6 * 1 2 3 - 0 NONE NONE + CSS 디자인은 '자바스크립트 계산기'라는 키워드로 검색하여 가장 심플해 보이는 것을 참고하여 간단히 만.. 공감수 1 댓글수 1 2022. 11. 14.
[새싹 프론트엔드] for문과 while문은 언제 사용해야 할까? 위 문제에서 남은 커피의 개수를 구할 때 for문을 쓰는 게 적합할까요, while문을 쓰는 게 적합할까요? 저는 반복문을 써야할 때 for문만 사용하는 습관이 있었는데 자바스크립트 과제를 진행하며 for문보다 while문을 쓰는게 더 적합한 상황이 있다는 것을 알게 되었습니다. 이번 기회에 어떤 상황에서 for문을 쓰는 게 좋고, 어떤 상황에서 while문을 쓰는 게 좋은지 정리해보려 합니다!!! for문과 while문의 사용법 for문 먼저 for문은 아래와 같이 사용합니다 for (begin; condition; step) { // ... 반복문 본문 ... } //조건 i < 3을 만족할 동안 i를 출력 for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다. ale.. 공감수 1 댓글수 0 2022. 11. 7.
[코테] 프로그래머스 Lv.1 정수 내림차순으로 배치하기 [문제] 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. [제한사항] n은 1이상 8000000000 이하인 자연수입니다. [입출력 예] n return 118372 873211 [Solution] function solution(n) { return parseInt( n .toString() .split("") .sort((a, b) => b - a) .join("") ); } (+) sort() 함수로 숫자 정렬하기 const score = [4, 11, 2, 10, 3, 1]; score.sort(function(a, b) { // 오름차순 return .. 공감수 0 댓글수 0 2022. 11. 6.
[새싹 프론트엔드] HTML, CSS로 회원가입 창 만들어 보기 새싹 교육 과정을 통해 2주간 HTML, CSS를 배우고 배운 내용을 토대로 회원가입 창을 만들어 보려고 합니다. table 태그와 input 태그를 복습할 수 있고 나중에 미니 프로젝트에서 회원가입 창을 만들때 활용해볼 수 있을 것 같아 만들어 보았습니다 :) 1. 먼저 form, table, input 태그를 활용해서 html을 작성해 보았습니다 JOIN USER ID PASSWORD RE PASSWORD GENDER MALE FEMALE E-MAIL 2. 테이블 모양을 잡아주기 위해 간단하게 css를 추가해 보았습니다. table { width: 70%; border-top: 2px solid #999; border-bottom: 2px solid #999; } th { width: 20%; tex.. 공감수 1 댓글수 0 2022. 10. 30.
[코테] 프로그래머스 Lv.1 나머지가 1이 되는 수 찾기 [문제] 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. [제한사항] 3 ≤ n ≤ 1,000,000 [입출력 예] n result 10 3 12 11 [Solution] function solution(n) { var answer = 0; for (let i=1; i 공감수 0 댓글수 0 2022. 10. 30.
[코테] 프로그래머스 Lv.1 x만큼 간격이 있는 n개의 숫자 [문제] 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. [제한사항] x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. [입출력 예] x n answer 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4,-8] [Solution] function solution(x, n) { var answer = []; let add = x; // n번 반복 for (let i = 0; i < n; i++) { answer.push(x); // 처음 배열에 넣을 x x += add_g.. 공감수 0 댓글수 0 2022. 10. 30.
[코테] 프로그래머스 Lv.1 하샤드 수 [문제] 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. [제한사항] x는 1 이상, 10000 이하인 정수입니다. [입출력 예] arr return 10 true 12 true 11 false 13 false [Solution] function solution(s) { const y = s.toString().split("").map((x)=>parseInt(x)).reduce((acc,curr)=>acc+curr,0) return s%y===0 } 앞에 풀었던 문제들과 겹치는.. 공감수 0 댓글수 0 2022. 10. 21.
[코테] 프로그래머스 Lv.1 문자열 내 p와 y의 개수 [문제] 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. [제한사항] 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. [입출력 예] s answer "pPoooyY" true "Pyy" false [Solution] function solution(s){ const ss = s.toLowerCase(.. 공감수 0 댓글수 1 2022. 10. 18.
[코테] 프로그래머스 Lv.1 정수 제곱근 판별 [문제] 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. [제한사항] n은 1이상, 50000000000000 이하인 양의 정수입니다. [입출력 예] n return 121 144 3 -1 [Solution] function solution(n) { return Number.isInteger(Math.sqrt(n))?(Math.sqrt(n)+1)**2:-1; } Number.isInteger -전달된 값이 정수인지 확인 Math.sqrt() -숫자의 제곱근 반환 [다른 Solution] function nextSquare(n){ v.. 공감수 0 댓글수 0 2022. 10. 17.
[코테] 프로그래머스 Lv.1 자연수 뒤집어 배열로 만들기 [문제] 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. [제한사항] n은 10,000,000,000이하인 자연수입니다. [입출력 예] n return 12345 [5,4,3,2,1] [Solution] function solution(n) { return n.toString().split("").reverse().map((x)=>parseInt(x)) } reverse() -배열을 거꾸로 뒤집는 매서드 (+) 다른 사람들이 작성한 풀이를 보다가 진짜 신박한 풀이를 발견했다 function solution(n) { var arr = []; do { arr.push(n%10); n = Math.floor(n/10).. 공감수 0 댓글수 0 2022. 10. 17.
[새싹 프론트엔드] 브라우저 동작 방법 "브라우저가 어떻게 동작하는지 아세요?" 새싹 프론트엔드 과정 첫 수업 시간에 web에 대한 기초 강의를 듣고 '브라우저의 동작 방법'에 대해 정리해보려 합니다 면접 단골 질문이기도 하니 이번 기회에 꼼꼼히 익혀 보겠습니다! 브라우저 먼저 브라우저가 무엇인지 알아보겠습니다. 브라우저는 흔히 우리가 인터넷 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말합니다. 브라우저는 유저가 선택한 자원들을 렌더링 과정을 통해 유저에게 보여주게 됩니다. 브라우저 렌더링 동작 과정 브라우저 렌더링 동작 과정은 크게 다섯 가지입니다. 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다 (Parsing) 2. 두 Tree를 결합하여 Rendering T.. 공감수 1 댓글수 0 2022. 10. 17.
[코테] 프로그래머스 Lv.1 자릿수 더하기 [문제] 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. [제한사항] N의 범위: 100,000,000 이하의 자연수 [입출력 예] N answer 123 6 987 24 [Solution] function solution(n) { return n .toString() .split("") .map((x)=>parseInt(x)) .reduce((acc,curr)=>acc+curr,0) } 1. toString()으로 숫자 타입을 문자 타입으로 변경 2. split() 함수로 문자열을 배열로 변환 , split("")의 경우 한 글자씩 배열에 저장 3. map()과.. 공감수 0 댓글수 0 2022. 10. 10.
[코테] 프로그래머스 Lv.1 약수의 합 [문제] 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. [제한 사항] n은 0이상 3000이하인 정수입니다. [입출력 예] n return 12 28 5 6 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. [내가 쓴 코드] function solution(n) { var answer = 0; for(let i=1;i 공감수 0 댓글수 0 2022. 10. 10.
[코테] 프로그래머스 Lv.1 평균구하기 [문제] 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. [제한사항] - arr은 길이 1 이상, 100 이하인 배열입니다. -arr의 원소는 -10,000이상 10,000 이하인 정수입니다. [입출력 예] arr return [1,2,3,4] 2.5 [5,5] 5 [내가 적은 답] function solution(arr) { var answer = 0; arr.map(n=>answer+=n); return answer/arr.length; } [다른 사람 답] function average(array){ return array.reduce((a, b) => a + b) / array.length; } 다른 분들의 풀이를 보다가 더 간단한 코드가 있어서 정.. 공감수 0 댓글수 0 2022. 10. 10.
[Git&Github] Git의 기초 git init과 git status git init : 명령어를 실행하는 터미널에서 새로운 깃 저장소를 생성함 git status : git 프로젝트의 상태를 확인할 수 있는 명령어 위 사진처럼 git init을 하기 전에 git status를 하면 ‘not a git repository’라는 문구가 뜬다 ※ Git 초심자가 흔히 저지르는 실수 Do not init a repo inside of a repo before running git init, use git status to verify that you are not currently inside of a repo 만약 존재하는 저장소 안에 새 저장소를 초기화하고 싶다면 상응하는 .git 폴더를 지워서 저장소를 삭제 git add와 git co.. 공감수 0 댓글수 0 2022. 5. 31.
[Git&Github] Git과 Github은 무엇일까? 개발 공부를 시작하고 git과 github을 간단히 사용만 해봤지 제대로 공부해본 적은 없는 것 같아서 아래 강의를 듣고 필요한 내용들을 정리해 보려고 한다. git과 github에 대해 제대로 알고 있는 것 자체가 협엽 능력을 보여주는 거라고 생각해서 꼼꼼히 공부하고 곧 하게 될 팀 프로젝트에 적용해 봐야지! https://www.udemy.com/course/best-git-github/ 【한글자막】 Git & Github 실무 활용 완벽 가이드 Git 필수 명령어와 함께 Rebase, Squash, Stash, Reflog, Blob, Tree와 같은 고급 기능까지 한번에 마스터! www.udemy.com Git 이란 무엇인가? git은 한 마디로 vcs(version control system) .. 공감수 0 댓글수 0 2022. 5. 31.
[JS] for 반복문: for..in 과 for..of의 차이 udemy에서 리액트 강의를 들으면서 미니 프로젝트를 만드는 중에 위 같은 오류가 발생했다 ExpenseChart 컴포넌트에 무슨 문제가 있다고 하는 거 같은데 전혀 모르겠어서 결국 강의를 켰고 for문을 사용하는 데 문제가 있다는 걸 알게 되었다 //ExpensesChart.js import Chart from "../Chart/Chart"; function ExpensesChart(props) { const chartDataPoints = [ { label: "Jan", value: 0 }, { label: "Feb", value: 0 }, { label: "Mar", value: 0 }, { label: "Apr", value: 0 }, { label: "May", value: 0 }, { labe.. 공감수 0 댓글수 0 2022. 5. 28.
[JS] 클린코드 자바스크립트 - 변수 다루기 Udemy의 '클린코드 자바스크립트'를 듣고 쓴 글입니다 클린 코드에 대해 고민하기 -타인이 정의한 답 의심하기 -클린 코드가 무엇인지 자바스크립트를 통해 학습 -자바스크립트 코드 스타일에 대해 탐구 var를 지양해야 하는 이유 var :함수스코프 let, const :블록스코프 TDZ(temporal dead zone) --> 안전하게 코드 작성 가능 1. var는 변수 재선언, 재할당 가능하다는 큰 위험성 있음 2. var는 함수 스코프 var let, const let보다도 const를 쓰는 게 좋다!! const는 재할당만 금지되고 본연의 객체, 배열 같은 레퍼런스 객체들을 조작할 때는 이상 없음 공감수 0 댓글수 0 2022. 5. 17.
화살표 함수 오류 해결 간단한 리액트 프로젝트를 만들면서 map 함수를 사용했는데 코드가 작동하지 않는 문제 발생했다 //내가 작성한 기존 코드 {cards.map((card) => { ; })} 에러 메세지는 뜨지 않았는데 코드가 동작하지 않아서 한참을 고민하다가 map 함수와 화살표 함수에 대해서 다시 찾아봤는데 범인은 화살표 함수였다 https://ko.javascript.info/arrow-functions-basics 화살표 함수 기본 ko.javascript.info 화살표 함수를 중괄호랑 함께 작성하려면 반드시 retrun을 사용해 주어야 한다!! // 중괄호 사용할 경우 {cards.map((card) => { return ; })} // 중괄호 사용 안 할 경우 {cards.map((card) => ( ))} .. 공감수 0 댓글수 0 2022. 4. 21.
[JS-Array-Challenge] (1) everyArray 최근에 자바스크립트랑 리액트로 미니 프로젝트를 하면서 나의 약점을 발견했다 바로 배열 함수!! 생각보다 많이 쓰이고 분명 이해도 하고 있는데 막상 쓰려면 어떻게 해야 될지 모르겠는... 그래서 우연히 알게 된 배열 함수 챌린지를 진행해 보려 한다 https://github.com/pkiop/JS-Array-Challenge GitHub - pkiop/JS-Array-Challenge Contribute to pkiop/JS-Array-Challenge development by creating an account on GitHub. github.com 위 레포를 클론해서 시작하면 된다!!! everyArray 문제 every를 이용해서 모든 원소가 짝수인지 아닌지를 판별하세요 Expected Output.. 공감수 0 댓글수 0 2022. 4. 18.
[HTML] 데이터 속성 사용하기 웹사이트를 만들다가 탭 메뉴를 구현하는데 data- 라는 처음보는 속성을 이용해서 간단하게 작업할 수 있다는 것을 알게 되었다. 처음 사용해 보았는데 매우 유용한 것 같아서 정리해보려 합니다. 먼저 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적입니다. 화면에 보이지 않지만 일정한 정보를 엘리먼트에 담아두기 위해서 사용한다고 이해하면 좋습니다. HTML에서 사용하기 HTML에 아래와 같이 입력하면 데이터가 저장됩니다 JavaScript에서 데이터에 접근하기 아주 간단하게 dataset 속성을 이용해서 가져오면 됩니다 const article = document.querySelector("car") article.dataset.columns // "3" article.datase.. 공감수 0 댓글수 0 2022. 4. 6.
[REACT] react router 사용해보기 리액트 라우터를 처음 사용해보고 간단히 정리한 내용입니다 참고로 리액트 라우터 v6를 사용했습니다 1. 라우팅이란? 간단히 설명하면 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것을 말합니다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트 관리하기 위해 필요한 것이 라우팅 시스템입니다. 2. react router 사용해보기 리액트에서 라우트 시스템을 구축하기 위한 방법은 여러가지가 있지만 가장 인기있고 라우팅 기능만을 익히는데 적합한 react router를 사용해보겠습니다. 2.1. 설치 yarn add react-router-dom 2.1. 프로젝트에 라우터 적용해보기 프로젝트에 리액트 라우터를 적용할 때는 BrowserRouter라는 컴포넌.. 공감수 0 댓글수 0 2022. 3. 29.
[JS] 함수 헷갈리는 부분 : 값을 넘기는 것과 참조값을 넘기는 것의 차이 리액트를 공부하며 유튜브를 클론 코딩하던 중 혼자 해결하지 못하고 있던 부분이 있어서 강사님 코드와 비교해보니 //내 코드 onClick = {onVideoClick(video)} //강사님 코드 onClick = {()=> onVideoClick(video)} 위 코드처럼 강사님은 화살표 함수를 사용하셨다 이해가 잘 안가서 Q&A 게시판을 살펴보니 나와 같은 고민을 하는 사람이 많아서 신기했다ㅎㅎ 결론적으로 위 두 코드의 차이점은 ↓ //onVideoClick을 호출하고 리턴되는 값 자체를 value1에 할당하는 것 const value1 = onVideoClick(video) //onVideoClick을 호출할 함수를 value2에 할당하는 것, 참조값을 전달하는 것 const value2 = () .. 공감수 0 댓글수 0 2022. 3. 7.
[JS] callback 오늘은 자바스크립트 공부하면서 지겹게 들었던 콜백에 대해 정리해 보려고 합니다. (1) 콜백함수에 대해 아주 간단하게 설명하면 콜백함수란? 정의: 함수 안에 파라미터로 들어가는 함수 용도: 순차적으로 실행하고 싶을 때 씀 특징: 콜백함수가 필요한 함수들에만 콜백함수 사용 가능 (addEventlListener, setTimeOut,,,) (2) 콜백함수 예시 document.querySelector(".button").addEventListener("click", function(){ }) //addEventListener 안에 들어있는 함수가 콜백함수 //click 이벤트 발생 후 순차적으로 실행 (3) 콜백함수 만들어 보기 //순차적으로 1, 2 나오도록 하고 싶다면? function first(파라.. 공감수 0 댓글수 0 2022. 3. 7.
[면접] react와 vue의 차이 오늘 정말 가고 싶었던 스타트업의 인턴 면접을 보았다. 공부한지 6개월도 안되었는데 이렇게 첫 면접을 보게 되어서 너무 기쁘고 첫 면접이 가장 가고 싶었던 곳이라 정말 감사했다. 그치만 기술 질문을 딱 하나 주셨는데 그걸 대답못했다…바로 react와 vue의 차이!!!!!!! 아쉬운 마음에 집가는 길에 간단하게 정리해본다 리액트와 뷰의 차이점을 가장 간단하게 설명하면 리액트는 만들때 자유도가 높고 뷰는 이미 기능이 다 정해져있는 느낌이라는거..? 기본적으로 리액트는 라이브러리고 뷰는 프레임워크이다. 라이브러리는 필요할때 불러서 쓰거나 뺄 수 있는데 프레임워크는 부분적으로 사용이 불가능하고 프레임워크가 제공하는 문법에 따라서 작동해야 한다 그리고 리액트는 자바스크립트에 더 가깝고 뷰는 html, css ,.. 공감수 0 댓글수 0 2022. 3. 3.
[React] HOOK 맛보기 (State hook, Effect hook) react hook은 기존 Class 코드를 작성할 필요 없이 함수 컴포넌트에서 state와 life cycle method를 이용할 수 있도록 도와줍니다. 굳이 기존의 Class 컴포넌트들을 함수형으로 다 바꿀 필요는 없지만 코드의 유지보수성과 가독성을 위해서 상황에 따라 Hooks를 사용하는 게 더 좋을때도 있다고 하니 배워보려 합니다!! 오늘은 useState와 useEffect에 대해서 알아보도록 하겠습니다. 1. useState -함수형 컴포넌트에서 상태를 관리해야 할 때 사용 -실제의 state 값과 업데이트 할 수 있는 함수 두 개를 리턴 (아래 예시에서는 count와 setCount 두 가지 호출) ※ hooks에서는 this 사용하지 않음 2. useEffect -리액트 컴포넌트가 렌더링.. 공감수 0 댓글수 0 2022. 2. 15.
[NodeJS] MongoDB Model & Schema 유저와 관련된 데이터를 저장하기 위해 Model과 Schema를 만들어 보겠습니다. model: 스키마를 감싸주는 역할 schema: 하나 하나의 정보를 지정해주는 것 Model과 Schema 만들어 보기 (1) modesl라는 폴더를 만들어 준 후, 'User.js'라는 이름의 파일을 만들어 주세요. (2) 순서는 mongoose 모듈을 가져온 후 Schema를 만들고 Model로 감싸준 후 export해주는 겁니다! //mongoose 모듈 가져오기 const mongoose = require("mongoose"); //Schema 생성하기 const userSchema = mongoose.Schema({ name: { type: String, maxlength: 50, }, email: { type.. 공감수 0 댓글수 0 2022. 2. 6.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.