FE Dev

코드를 더 간결하게 작성할 수 있는 방법 ✨추상화(Abstraction) 복잡한 것들을 목적에 맞게 단순화하는 것 추상: 여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 구체적인 정보들은 숨기고, 꼭 필요한 핵심만 뽑아내서 표현하는 방식 (원활한 소통을 위한 표현 방식들 중 하나) 👩‍💻프로그래밍에서 추상화 프로그래밍을 통해 어떤 프로그램을 만든다는 것은 1) 코드를 작성하는 자신과의 소통이 될 수도 있고, 2) 작성한 코드를 실행하는 컴퓨터와의 소통이 될 수도 있고, 3) 함께 코드를 작성하는 동료와의 소통이 될 수도 있고, 4) 내가 만든 프로그램을 사용하는 사용자와의 소통이 될 수도 있음 => 프로그래밍을 할 때 추상화를 통한 코드를 작성하면 더 좋은 소통&표현이 될..

데이터를 어떤 형태로 저장하고 활용하는지 이해하기 숫자형 자바스크립트 숫자형은 소수와 정수를 따로 구분하지 않기 때문에 1과 1.0 모두 number // 거듭제곱 console.log(2 ** 3); // 2의 3제곱 2*2*2 출력 // 나머지 console.log(7 % 3); // 7을 3으로 나눈 나머지 (몫이 2고, 나머지 1 출력) 템플릿 문자열 문자열 안에 ' " 둘다 사용할 경우 -> 역슬래시 사용 (문자열 안에 기호라고 이해함) (but, 역슬래시를 사용하면 문자열 안의 내용을 읽기가 불편해짐, 가독성↓) => 양 끝을 백틱(``)으로 감싸주기(ES6 이후) 불린형 console.log(!true); // false console.log(!false); // true // 중복해서 쓰는..

기존처럼 routes.js에 :id추가 index.js에서 하나 만들어줌 상품디테일 페이지에서 import 해 주기 import {f7route} from "framework7-react"; api에서 만들어준 getItemDetail import 해 주기 import { getItemDetail } from "../common/api"; f7route를 받아서 const ItemDetail = (f7route) => { const [items, setItems] = useState([]); useEffect(() => { async function itemList() { const resultItems = await getItemDetail(f7route.id); setItems(resultItems...

index.js에 만들어져있는 getItems export const getItems = (params) => API.get("/items", params); 해당 상품 리스트 페이지에서 import해서 가져다 쓰기 import { getItems } from "../common/api"; async await 사용 const WholeCake = () => { const [items, setItems] = useState([]); useEffect(() => { async function itemList() { const resultItems = await getItems(); setItems(resultItems.data); } itemList(); }, []); map으로 뿌려서 아이템 뿌려주기(앞..

Window10에 설치한 WSL2로 Ubuntu 앱에 연결된 vscode를 열어 작업하려고 하는데, 갑자기 vscode에서 이런 에러가 뜨면서 폴더에 있는 파일들이 뜨지 않고 localhost 서버도 계속 로딩되면서 연결되지 않았다. Failed to connect to the remote extension host server (Error: webSocket close with status code 1006). 원격 확장 호스트 서버에 연결하지 못했습니다(오류: WebSocket close with status code 1006). 해결 windows PowerShell을 열어 wsl --shutdown 명령을 통해 wsl 재부팅으로 해결! 참고 stackoverflow.com/questions/641..

1. 동기와 비동기 1) Synchronous(동기적, 자바스크립트는 동기적 언어) : 호이스팅 된 이후부터 코드가 작성한 순서대로 동기적으로 실행되는 것 - 호이스팅? var변수, function함수같은 선언들이 제일 위로 올라가는 것 2) Asynchronous(비동기적): 언제 코드가 실행될지 예측할 수 없는 것 비동기적 실행 방법 ex) setTimeout(): 브라우저에서 제공되는 웹 API로 지정한 시간이 지나면 전달한 콜백 함수 호출 => 1, 3, 2 출력 ('2'는 1초 뒤 콘솔 출력) 2. 콜백 함수 callback - 지금 당장 실행하지는 않고 나중에 불러달라, 함수를 실행해달라는 함수 - () => 으로 일일이 함수를 선언하지 않고, 간단하게 전달할 수 있음 콜백 2가지 경우 1) ..

rails s 레일즈 서버 시작 로컬 서버 실행하고 있다가 껐다 켰을 경우, 다시 rails s로 서버 작동시키려고 하면 A server is already running. Check .../tmp/pids/server.pid. Exiting 서버가 이미 실행 중입니다. .../tmp/pids/server.pid.를 확인하십시오. 종료 오류 메세지가 나올 때가 있음 터미널 재시작 하면 될 수도 있고~ 안될 경우 아래 메세지로 프로세스 종료 후, kill -9 $(lsof -i tcp:3000 -t) rails s 재시작 localhost:3000 서버 실행~ redis 서버 오류 redis-cli ping 핑퐁 확인 ps -ef |grep redis 1346 사용 중인 포트를 확인 후 kill -9로 해..

JWT이란? json형태로 만들어진 웹 토큰을 좀 더 쉽게 만들 수 있도록 도와주는 라이브러리 registrations_controller에서 JWT세션을 이용해서 토큰 정보를 저장해서 그 정보를 이용해서 api를 사용한다까지 알고 있으면 됨 (쓰는 방법만 정확하게 알면 됨) 사용 => jwt_session을 이용해서 토큰 정보를 저장하고 그 정보를 이용해 api 사용 Gemfile/ gem 'jwt_sessions' 라이브러리 사용 githup jwt_sessions document 참고 github.com/tuwukee/jwt_sessions tuwukee/jwt_sessions XSS/CSRF safe JWT auth designed for SPA. Contribute to tuwukee/jwt_s..