Javascript (10) 썸네일형 리스트형 [Javascript] 프로그래머스: 진수로 변환(toString, parseInt) 프로그래머스 내가 작성한 해결 방법이다. 1. 10진법 수를 3진법의 문자열로 바꾼다.2. 문자열을 나누어 반대로 적용된 열로 바꾼다.3.3진법 문자열을 3진법 문자열로 바꾼다. 공식문서의 주의사항.소수점 아래를 없애기 위해 parseInt값을 사용하는 것은 적절하지 않으며 Math.floor()을 사용하는 것을 권장한다.parseInt는 부호를 인식할 수 있다. 부호를 제거한 뒤 문자열에 대해 숫자 파싱을 진행한다.문자열을 입력할 때 0으로 시작한다면 8진수로 해석하는 오류를 발생할 수 있다.정규표현식을 이용하여 이같은 오류를 방지할 수 있다. 추천 수가 가장 많은 해결 방법이다. 공식문서https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/G.. [Javascript] falsy한 값 거짓 같은 값 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 Boolean 문맥에서 false로 평가되는 값입니다.developer.mozilla.org [Javascript] Switch문 사용하기 Switch문 사용하기break를 넣어서 해당하는 경우만 실행할 수 있도록 해야 한다.default를 넣어서 해당하지 않는 경우에 내보내는 경우를 작성한다. [Javascript] 타입의 변환(명시적 형 변환, 암시적 형 변환) undefined: 값을 할당하지 않았다.null: 값이 존재하지 않는다. 개발자가 의도적으로 존재하지 않다고 표시했다. 타입의 변환명시적 형 변환변환하겠다고 선언한다. false ---------true 암시적 형 변환자동으로 타입이 변한다.문자열+숫자 => 문자열문자열+boolean => 문자열문자열+null => 문자열문자열+undefined => 문자열 더하기 연산자는 문자 타입에, 빼기와 곱하기 나누기는 숫자 타입에 우선권이 있다. [Javascript] 자바스크립트의 특성 1. 객체지향 언어다.객체라는 단위로 실행한다.절차지향(순서대로 작동)과 대비되는 개념이다.재사용 할 수 있다. 2. 동적 타이핑 언어다.변수를 저장할 때 타입이 선언되지 않고 런타임에서 선언된다.Typescript는 정적 언어에 해당된다. 3. 함수형 프로그램을 지원한다. 4. 비동기 처리가 가능한 언어다. 5. 클라이언트 측, 서버 측 모두 사용 가능하다. [Javascript] 객체 자바스크립트에서는 다음과 같이 추가, 수정, 삭제를 할 수 있다.React에서는 이 방법은 불변성을 유지하지 않기 때문에 사용하지 않는다. Object.keys(객체) : 객체의 키 값을 배열로 나타낸다.Object.values(객체) : 객체의 값을 배열로 나타낸다.Object.entries(객체) : 객체를 배열로 나타낸다.Object.assign(객체1, 객체2) : 객체1에 객체2를 추가하여 추가된 객체1로 나타낸다.*객체1은 대상객체, 객체2는 출처객체라 한다. 객체의 공통부분 제거하기 객체 사이의 서로 공통점이 있을 때 그 공통점을 비교해서 공통 부분을 제외한 리스트를 다시 얻고 싶을 때가 있다. 내가 참여한 방의 리스트를 제외한 미팅룸 리스트를 얻고 싶었다. 처음에 생각한 것은 이중 필터링 처리였다. meetingroom.filter((room) => myRoom.filter((myroom) => myroom.room_id !== room.room_id)) 그러나 작동하지 않았다. 이후에는 for문을 사용해서 작성해 보았지만.. 역시 작동하지 않았다. useEffect에서 해당 값이 모두 할당된 뒤에 실행되게 해야 하는데, 이 부분이 어려웠다. 결국 한번씩 걸러내야 해서 filter를 사용하는건 맞았다. some을 제안받은 것처럼 find로 같은 로직으로 작동하게 할 수 있었다. 동.. Javascript: 라이브러리, 프레임워크 라이브러리 - 프로그래밍에 사용할 수 있게 미리 만들어져 있는 함수나 변수들의 묶음이다. - 기능의 모듈화로 이루어진 프로그램의 집합이다. - 여러 곳에 가져다 쓸 수 있다. - 라우팅 관련 설정 등을 개발자가 해야 한다. - 빌드시 발생하는 링킹(Linking)에 따라 정적 라이브러리와 동적 라이브러리로 나뉜다. - 정적 라이브러리란 코드를 복사해서 사용하는 방식이다. - 동적 라이브러리란 코드의 주소를 복사해서 사용하는 방식이다. 프레임워크 - IOC(Inversion of Control)가 발생한다. - 라우팅 방법은 정해져 있고 코드만 적재적소에 넣으면 된다. 동적 라이브러리와 정적 라이브러리에 대한 자세한 내용을 참고한 블로그다. 라이브러리(Library)에 대한 이해 서론 개발하다 보면 라이브.. Javascript: HashRouter, Module bundler 라우팅: 사용자가 URL로 접근할 때 해당 조건에 맞는 서로 다른 컴포넌트를 보여주는 기능이다. HashRouter - 주소에서 # 이후의 값에 따라 페이지가 변화되는 방법이다. - hash 값은 클라이언트 전용이며, 서버에게 넘겨지지 않는다. - 결과적으로 서버로부터 새로운 페이지를 요청하지 않고 이동하는 것이 가능하다. - UX가 매우 빠르고 부드럽다. - SEO에 취약하다. - 새로고침을 해도 index.html 파일만 항상 클라이언트에게 줄 수 있어 SPA를 보장할 수 있다. 모듈 번들러 - 자바스크립트의 파일 의존성을 해결하고, 하나의 자바스크립트 파일로 만든다. - HPPT 요청의 수를 줄여 네트워크 성능을 개선한다. - CRA는 내부적으로 Wevpack을 사용하여 만들어진 React Appl.. Javascript: MPA, SPA MPA(Multiple Page Application) - 2개 이상의 HTML으로 구성되어 있다. - 페이지 이동/새로고침/변경시 정적 리소스 (HTML, CSS, JS)를 다운받아 교체한다. - 서버에서 만들어서 보내기 때문에 SSR(Server Side Rendering이라고 한다. - 서버에서 만들어지기 때문에 JS가 가동되지 않는 상황에서도 사용할 수 있다. 장점 - SEO에 유리하다. 단점 - 페이지 이동 시 깜빡거림이 발생한다. - 변화가 없는 부분도 랜더링된다. - 느리다. - 서버의 부하가 발생할 수 있다. SPA(Single Page Application) - 1개의 HTML으로 구성되어 있다. - 페이지 이동/새로고침/변경시 json 파일을 다운받은 것을 클라이언트 쪽에서 JS로 바꾸.. 이전 1 다음
