dmscks3126 님의 블로그

POST 요청하는 법axios.post('URL', {name : 'kim'}) 이렇게 실행하면 서버로 { name : 'kim' } 자료가 전송된다.완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 된다.  동시에 AJAX 요청 여러개 날리려면Promise.all( [axios.get('URL1'), axios.get('URL2')] ) 이러면 URL1, URL2로 GET요청을 동시에 해준다.둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.  원래는 서버와 문자 자료만 주고받을 수 있다object / array 이런거 못주고받는다.근데 전에 array를 받아온 것 같은데, 어떻게 한거냐면object/array 자료에 따옴표를 쳐놓으면 된다. "{ "n..

문제 설명영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요.제한사항1 ≤ str의 길이 ≤ 20str은 알파벳으로 이루어진 문자열입니다.입출력 예입력 #1aBcDeFg출력 #1AbCdEfG  소스코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0]..

서버란?유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램. EX) - 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램- 유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램  "누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝이다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 1. 어떤 데이터인지 (URL 형식으로)2. 어떤 방법으로 요청할지 (GET or POST)잘 기재해야 데이터를 보내준다. 예를 들어서 독립일기라는 네이버웹툰을 보고싶으면https://comic.naver.com/webtoon/list?titleId=748105 여기 URL로 GET요청하면 보내준다.URL을 어떻게 알았냐면,네이버 웹툰 서버개발자에게 ..

useEffect에 넣을 수 있는 실행조건useEffect(()=>{ 실행할코드 }, [count])useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데변수나 state 같은 것들을 넣을 수 있다그렇게 하면 [ ] 에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해준다.그래서 위의 코드는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다.(참고) [ ] 안에 state 여러개 넣을 수 있음 useEffect(()=>{ 실행할코드 }, [])아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않는다.  clean up functionuseEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 ..

컴포넌트의 인생컴포넌트는 Lifecycle이라는 개념이 있다. 컴포넌트도 인생이 있는 것 컴포넌트는1. 생성이 될 수도 있고 (페이지에 장착)  (mount)2. 재렌더링이 될 수도 있고 (update)3. 삭제가 될 수도 있다. (unmount) 컴포넌트의 인생을 배우는 이유는 컴포넌트 인생 중간중간에 간섭할 수 있기 때문이다.간섭이란? 그냥 코드실행인데컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고컴포넌트가 업데이트될 때 코드를 실행할 수도 있다는 것이다. 그럼 재밌는 기능들을 개발할 수 있다.  인생에 간섭하는 방법"Detail 컴포넌트 등장 전에 이것좀 해줘""Detail 컴포넌트 사라지기 전에 이것좀 해줘""Detail 컴포넌트 업데이트 되고나서 이것좀 해줘"이렇게 코드좀 실행해달라고 간..

문제 설명정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요. 제한사항-100,000 ≤ a, b ≤ 100,000 입출력 예입력 #14 5출력 #1a = 4b = 5 코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = line.split(' ');}).on('close', function () { console.log(`a = ${Number(input[0])}`) ..

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/181952 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  문제 문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요.   제한사항1 ≤ str의 길이 ≤ 1,000,000str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다 예제 입력 1HelloWorld! 예제 출력 1HelloWorld!  코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin..

Tailwind CSS는 유틸리티 우선(utility-first) 방식의 CSS 프레임 워크로,클래스명을 조합하여 스타일을 적용하는 방식을 제공한다. 일반적인 CSS나 Bootstrap 같은 프레임워크와 다르게컴포넌트 스타일을 미리 정의하지 않고, 원하는 스타일을 직접 조합하여 적용하는 방식이 특징이다.1. Tailwind CSS의 핵심 개념✅ 유틸리티 클래스 기반 스타일링Tailwind는 미리 만들어진 작은 유틸리티 클래스를 조합하여 스타일을 적용한다.예를 들어, 일반적인 CSS로 아래처럼 스타일을 작성한다고 하면:.button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px;} Tailwind 에서는 ..

node.js가 설치되어있어야 함 React + vite 프로젝트 생성하는 명령어npm create vite@latest Project name 입력Package name 입력프레임워크 선택 (react)variant 선택 : TypeScript

styled-components 라는 라이브러리는 언제 쓸까?컴포넌트가 많은 경우  스타일링을 하다보면 불편함이 생기는데1. class 만들어놓은걸 까먹고 중복해서 또 만들거나2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나3. CSS 파일이 너무 길어져서 수정이 어렵거나이런 경우들이 있다. 그래서 styled-components 라는 라이브러리를 설치해서 스타일을 바로 입히는 방법이 있다.  설치하는법npm install styled-components 명령어로 설치가능import styled from 'styled-components'그리고 사용하고 싶은 컴포넌트 위에 import  styled-components 기본적인 사용법 이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 ..