전체 글
-
객체javascript 2023. 4. 22. 05:28
객체 객체란 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는 것을 말한다. 함수형 프로그래밍 언어로 시작했지만, 객제 지향의 특징을 가지고 있는 언어인 자바스크립트에서 객체는 정말 빼놓을 수 없는 개념이다. 객치지향 프로그래밍을 공부하다 보면 객체는 이 세상 모든 것을 의미할 수 있다고 하는데, 코드로 생각하면 파이썬의 딕셔너리 형태 정도로 생각해볼 수 있을 것 같다. 모던 자바스크립트 튜토리얼에서는 객체를 서랍장으로 비유한다. 이름을 붙인 파일에 자료를 넣고 서랍장에 저장을 하는 것이다. 빈 서랍장, 즉 빈 객체는 아래와 같이 만든다. let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터..
-
프리티어 오류 해결하기web 2023. 4. 16. 19:49
근 몇 달간 프리티어가 동작하지 않기 시작했다. vscode를 아무리 삭제하고 재설치하고, 리로드를 해도 똑같은 오류가 났다. 결국 해결해내어 이 글을 쓴다! 시도했던 모든 방법을 작성해보았다. 만일, 웬만한 구글링으로도 해결하지 못했었다면 맨 아래의 방법을 참고하길 바란다! 필자 역시 웬만한 구글링으로는 프리티어 오류가 해결되지 않아 몇 달동안 에러를 달고 작업을 했었는데, 가장 마지막 방법으로 오류를 해결했다. 내가 겪었던 오류는 아래와 같다. (1) Default Formatter 변경하기 단축키 control + , 를 눌러서 설정에 접속한다. default formatter를 Prettier - Code formatter로 설정을 변경한다. (2) Format on Save 변경하기 단축키 co..
-
자바스크립트 기본javascript 2023. 4. 9. 07:24
if와 '?'를 사용한 조건 처리 if는 말그대로 '만약'이라는 뜻이다. 그래서 괄호 안의 값이 true면 코드블럭이 실행된다. let isStudy=true; if(isStudy){ console.log("공부중"); } 위와 같이 isStudy가 true인 경우, "공부중"이라는 콘솔이 뜬다. 여기서 만약 코드블럭이 단 한줄이라면 중괄호{} 없이 사용해도 되지만, 가독성을 위해 한 줄이더라도 중괄호를 사용하는 것이 좋다고 한다. truthy vs falsy 위의 isStudy처럼 불린값이 되었을 때, true가 되는 값을 참같은 값, truthy라고 하고 그 반대로 false가 되는 값을 거짓같은 값, falsy라고 한다. 숫자 0, 빈 문자열"", null, undefined, NaN 모두 fals..
-
💻 웹 최적화에 대하여think 2023. 4. 8. 15:13
Track 1의 릴리즈를 코앞에 두고 QA를 거듭하면서, 항상 동일하게 나오는 이슈가 하나 있다. 바로 로딩문제다. 기획자들은 항상 달려와서 '이거 업로드가 안돼요!', '이거 왜 두 번 세 번씩 업로드되어요?'라고 말하는데, 그 때마다 우리는 항상 같은 말을 반복해왔다. '제발 3초만 기다려줘요...두 번 세 번 클릭하지 말고 제발 딱 3초만 기다리면 잘 업로드되어요...' 그리고 반문한다. '어떻게 하면 최적화를 할 수 있을까?' 그 전에 웹 최적화가 무엇인지에 대해 먼저 알아보자. 1️⃣ 웹 최적화는 무엇일까? 웹 최적화란 '브라우저가 네트워크와 통신하는 과정은 물론 브라우저에서 페이지를 표시하는 과정에서의 응답 속도를 개선하는 것'이라고 한다. 쉽게 말해서 '로딩 시간이 짧도록 개선하는 것'이라 ..
-
[리액트/자바스크립트] S3파일 다운로드web 2023. 4. 2. 21:00
음악 관련 프로젝트를 진행하면서 파일을 다운로드해야하는 기능을 구현해야하는 상황, 음악 파일을 다운받아서 재가공할 수 있는 점이 가장 큰 기능 중 하나였기 때문에 반드시 파일 다운로드 기능을 구현해야했다. 하.지.만. 정말 몇 날 며칠을 해보아도 해결하지 못했다. 구글링해서 나오는 코드들을 그대로 따라쳐보아도 성공한 적이 없었다. 다운로드를 해도 빈 껍데기 파일만 다운되거나 하는 식이었다. 결국 그대로 따라치는 코드들은 소용이 없었고, 검색해서 나온 모든 글을 다 섭렵하며 이해를 하고 나서야 코드를 짤 수 있었다... 우선 전체 코드는 다음과 같다. 버튼이 위치한 컴포넌트 const { data: fileLink } = useQuery(["beatId", download], () => getFileLin..
-
비동기 작업의 이해web 2023. 3. 26. 17:10
리액트를 공부하다보면 동기, 비동기에 대한 이야기를 정말 많이 접할 수 있지요, 특히 데이터 패칭을 시작하면 자바스크립트 비동기 작업에 대해 반드시 짚고 넘어가야하더라고요 그래서 오늘은 비동기 작업에 대한 이야기를 해보려고 합니다. 사실 비동기는 그렇게 어려운 내용이 아닙니다. 비동기란? 예를 들어, 과제가 1부터 10까지 있는데, 과제 1을 하는데에는 막 3시간이 걸리고, 과제10을 하는데에는 10분이 걸린다고 칩시다. 그럼 우리 생각에는 과제 10을 먼저 할 수도 있는 거잖아요, 그런데 동기는 그런 거 없이 정직하게 하는 거에요. 과제1시작해요, 끝나면 과제2시작하고요 끝나면 과제3하고 이런식입니다. 그런데 비동기는 이렇게 순서대로 하지 않아요. 앞에 작업이 끝났든 안 끝났든 다음 테스크를 할 수 있..
-
API 통신 한 방에 이해하기!web 2023. 3. 19. 17:56
DB에 대하여 먼저 본격적인 이야기에 앞서, DB가 무엇인지에 대해서 짚고 넘어가려고 합니다. DB란 '컴퓨터 시스템에 전자적으로 구조화된 정보 또는 데이터의 조직화된 모음'이라는 정의를 가지고 있는데요, 또어려운정의를갖다 썼어요.(왜 모든 정의는 항상 어렵게 꼬아져있는가...) DB는 쉽게 말해서 데이터를 모아둔 '표'라고 생각하시면 될 것 같아요. 위와 같이 멤버들의 데이터를 표 형식으로 정리하면 다음과 같은 모양이 됩니다. 각 사람들을 구분할 수 있도록 각각 다르게 부여되는 memId이 있고, role, name, description과 같이 각 멤버에 대한 정보들이 정리되어있어요. 자 멤버를 구분할 수 있는 id, 그리고 멤버에 대한 정보 중에서도 역할, 이름, 설명에 대한 정보를 딱딱 정리하고 ..
-
자바스크립트에서 객체지향 프로그래밍을 해야할까?web 2023. 3. 8. 21:55
들어가며 CS스터디에서 프로그래밍 패러다임을 공부하며 절차형 프로그래밍과 객체지향 프로그래밍의 차이에 대해 공부해보았다. 절차형 프로그래밍은 어떤 일을 진행할 구체적인 절차를 함수로 만들어 호출하는 방식의 프로그래밍이다. 예를 들어, '글을 쓴다'고 하면, 블로그 앱을 다운받는 절차, 블로그 앱에 들어가 카테고리를 선택하는 절차, 글을 쓰는 절차, 글을 업로드하는 절차로 나누어 해당 절차를 순서에 맞게 호출하는 것이다. 그렇다면 객체지향 프로그래밍이라고 무언가 다를까? 절차지향 프로그래밍과 다르게 객체지향 프로그래밍은 기능을 하는 '객체'를 만들어 재사용하는데에 집중한다. 하지만 그렇다고 해서 객체지향 프로그래밍에 절차가 없는 것이 아니다. 똑같이 '글을 쓴다'는 프로그래밍을 객체지향적으로 한다면, 글쓴..