꾸준하게 거북이처럼

프론트엔드 개발 관련 공부를 하다가 webpack, transpile등 단어는 들어봤지만 Bundler는 무엇일까? 모두 관련된 단어이다. 머릿속을 정리해보자. 🔍 Bundler가 등장하게된 배경 인터넷이 발달하고 웹 서비스의 규모가 커지게 되면서 방대한 양의 파일을 관리하기 어려워지는 문제가 발생했다. 예를 들어, 💡 중복된 이름 에러 두 개의 JS 파일에서 변수의 이름이 같은 부분이 있고, 이를 html에서 해당 변수를 반영한다면 어떻게 될까? 개발자는 둘 중 어느 파일의 변수를 사용해야하는지 구별하기 힘들다. 또한 이를 수정했다가 수정하면 안되는 변수라면? 큰 에러 문제가 될 것. 같은 함수명인 경우도 큰 에러를 발생 시킬 수 있다. 💡 파일 전송 문제 방대한 양의 파일 때문에 서버 요청에 대한 응..

프론트에서는 API 요청을 할 때가 많다. 하지만 CORS에러가 나기 때문에 조치를 해줘야한다. 만약 API를 요청할 링크가 https://www.xxxxx.com/post/xxxx/xxxxx 와 같은 형식이라면, 1. pakage.json에 사이트 도메인 링크를 proxy에 추가해주기. pakage.json에 변경사항이 있다면 서버 껐다가 다시 켜야한다. { "proxy": "https://~ com" } 2. API 요청하는 부분 형식 const URI = "/post/xxxxxx/xx" const API_KEY = "1213ERASEDFTxxxx"; const get = async () => { try { const data = await axios.get(URI, { headers: { Autho..

숫자 배열 정렬하기 sort() 함수는 파라미터(compareFunction)가 입력되지 않으면, 유니코드 순서에 따라서 값을 정렬한다. 따라서 숫자를 오름차순 정렬할 때는 예를들어 다음과 같이 정렬가능하다. let arr= [1,10,5,6]; arr.sort((a, b) => a - b);// 1, 5, 6, 10 오름차순 arr.sort((a,b) => b - a);//10, 6, 5, 1 내림차순 console.log(arr); 파이썬의 sort와 다르니 조심하자. 다중조건으로 정렬하기 객체를 담은 배열이 있을 때, 나이 순으로 오름차순 및 나이가 같은 때 이름 순으로 오름차순에 맞게 정렬한다고 하자. const data = [ { age: 19, name: '김씨' }, { age: 25, na..

config 파일에 key 관리하려다 조건문으로 export하는데 아래와 같은 오류가 났음. 알아보니 ES6는 조건부 import 를 지원하지 않는 것 같았다. 이는 export 할 때, let 변수 써서 해결할 수 있다. CommonJS 문법 if (process.env.NODE_ENV === 'production') { // 배포환경 module.exports = require('./production'); } else { // 개발환경 module.exports = require('./development'); } ES6 모듈방식 import production from "./production.js"; import dev from "./dev.js"; let moduleToExport; if (p..

1. 준비물은 수험표(QR 체크, 싸인해서 걷어감), 신분증(운전면허, 민증, 여권), 볼펜입니다. 2. SWEA 처럼 input파일 넣고 output 나오는 형식임. output 출력형식은 print("#{} {}".format(a, b)) 위와 같다. 이렇게 써야함!! 3. 파이썬 언어를 쓴다면 IDE 파이참 쓸 수 있음. 처음에는 글자가 작아서 불편하다. 이럴 때는 prefercence 들어가서 editor- color theme- console font 17로 바꾸자.

let body = { postNum: params.postNum, }; // 형식 지키기 axios.delete("/api/post/delete", { data: body, }) .then((res) => { if (res.data.success) { alert("게시글이 삭제되었습니다."); navigate("/"); } }) .catch((err) => { alert("게시글 삭제에 실패했습니다."); console.log(err); }); 1. 주의: axios delete는 post 메소드와는 달리 body부분이 비어있다. 2. 방법: query나 params가 많아질 때, 위와 같이 두번째 인자에 data를 추가해서 전달할 수 있다. 여기서 중요한 것은 꼭 두번째 인자 형태는 {data: {x..

forEach arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 배열의 각 요소에 대해 callback을 실행. 중간에 break 사용X const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); map arr.map(callback(currentValue[, index[, array]])[, thisArg]) 배열의 각 요소에 대해 callback을 실행. 중간에 break 사용X. 실행결과를 모든 새 배열을 리턴 const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.ma..

동기 일할 때 비구조화 할당 문법이 많이 보여서, 비구조화 할당에서 대해서 알아보고자 한다. 비구조화 할당이란 배열이나 JSON 객체의 프로퍼티를 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 자바스크립트 표현식 이전 처럼 user.name 과 같이 '.'을 사용하지 않고 바로 변수를 사용할 수 있어서 편리해진 것 같다. 예시 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있다. 아래 처럼 함수에서도 가능 하다. const object = { a: 1, b: 2 ..

export 사용할 때, 자꾸 lint가 에러를 내거나 import가 제대로 안될 때가 있어서 export default와 export의 차이점이 무엇이고 사용방법을 알아보았다. export default default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다. export default를 import 할 때는 아무 이름으로나 import 가능하다. ⇒ import Verification from '../VerificationPage 일반 export 한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능하다. 다만, import 시 {} 안에다가 export 된 이름과 동일하게 설정해야 한다. (아래 예시) import { MyFirs..

overflow-wrap: break-word;// 보통 안바꿔지는 단어들을 바꿀만한 지점이 없을 시 임의의 지점에서 줄을 바꾼다. overflow-wrap: normal; // 줄이 오직 줄바꿈 지점에서만 줄을 바꾼다. * 주의사항. overflow-wrap을 사용할 때 적용이 안된다면? 아래코드가 혹시 포함 되어있는지 확인해야한다. white-space: no-wrap no-wrap이 있으면 overflow-wrap이 적용이 안됨. ㅠ