대충 만든 자판 #160586 https://school.programmers.co.kr/learn/courses/30/lessons/160586 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "..

React에서 페이지네이션과 sorting(최신순 / 별점높은순) 을 구현하고자 한다. 현재 리뷰리스트를 뿌려주는 페이지를 구현 중이다. 백엔드에서 sortType과 pageNum에 따라 데이터를 뿌려주며, 전체 데이터 수도 전달받는 다는 가정 하에 진행한다. URL 주소의 파라미터 http://localhost:3000/review?sort=latest&page=1 위와 같은 방식으로 sort 방식과 page를 파라미터로부터 받아와서 맞는 데이터를 뿌려줄 것이다. // src/pages/ReviewListPage/ReviewListPage.jsx /* 리뷰페이지 url로부터 params 값 가져오기 */ const location = useLocation(); const sort = new URLSea..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 ..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 변수의 생명 주기 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖고, 언젠가 소멸한다. 즉, 변수에는 생명 주기가 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 변수는 자신이 선언된 위치에서 생성되고 소명한다. 전역 변수의 생명 주기는 애플리케이션의 생명..

결과물 미리보기 모바일 버전에서는 모든 메뉴를 나열하기에 너비가 부족하므로 메뉴 버튼을 클릭했을 때만 메뉴가 보이고, 닫을 수 있도록 반응형으로 구현하고자 한다. 반응형 너비 기준 반응형 너비 나누는 기준은 아래와 같이 적용했다. 테블릿 버전일경우 달라지는 것은 폰트 사이즈 변경뿐이기에 자세한 설명들은 생략하고 모바일 버전일 때를 주로 다루겠다. /* 노트북 & PC (해상도 1024px)*/ @media screen and (min-width:1024px) { 스타일 입력 } /* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ @media screen and (min-width:768px) and (max-width:1023px) { 스타일 입력 } /* 모바일 가로, 모바일 세로..

리엑트 네이티브 껍데기에 알맹이는 리엑트 웹사이트인 웹뷰를 제작한다. Expo 프로젝트 시작하기 npx create-expo-app app-name Ok to proceed? (y) y EAS CLI 설치 npm install -g eas-cli react-native-webview 라이브러리 설치 npx expo install react-native-webview WebView 컴포넌트 불러오기 import * as React from "react"; import { WebView } from "react-native-webview"; import { StyleSheet } from "react-native"; import Constants from "expo-constants"; export defa..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 스코프란? 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 더욱이 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const키워드로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다..

도서 리액트를 다루는 기술 | 김민준 을 읽고 작성한 게시글입니다. 리액트를 다루는 기술(개정판) 개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요 books.google.co.kr 리액트 프로젝트에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동..