프론트엔드 공부한 거 정리하기

문자열에서 중복된 값을 제거할 때 new Set()과 스프레드 연산자 활용 가능 const str = "hello"; const arr = [...new Set(str)]; // ["h", "e", "l", "o"]; const result = arr.join(""); // "helo" 주어진 두 문자열이 애너그램으로 동일한 지 확인하려면 그냥 정렬해버리고 같은 문자인지 체크 const str1 = "hello"; const str2 = "oelhl"; str1.split("").sort().join("") === str2.split("").sort().join("") ? true : false; // true // 문자열을 배열로 변환 후 정렬하고 다시 문자열로 변환해서 같은 문자인지 체크. 팩토리얼 ..

취업 준비하면서 공부할 겸 프로그래머스에서 코딩 테스트를 풀고 있다. 문제를 풀면 다른 사람 풀이를 볼 수 있는데, 정말 간단한 식으로 푸는 고수들이 존재했다. 그 중에 제대로 배운 적 없는 정규표현식을 사용해서 깔끔하게 코드를 쓰는 걸 보고 정리해보기로 했다. 자바스크립트 정규표현식(RegExp)은 아래와 같은 상황에서 사용하면 유용하다. 문자열에서 특정 패턴 검색 특정 문자열 대체 or 추출 정규표현식 생성 정규표현식은 리터럴(literal)과 생성자(constructor) 두 가지 방법으로 생성할 수 있다. 리터럴 리터럴 방법은 슬래시(/)로 감싸서 생성한다. const pattern = /apple/; RegExp 객체 생성 생성자에는 두 개의 매개변수를 전달할 수 있다. 첫 번째 매개변수는 정규..

GunhoKim Portfolio 안녕하십니까, 할 수 있다에 만족하지 않고 꾸준히 발전하는 프론트엔드 개발자가 되겠습니다. frdytheme.github.io 이 프로젝트를 통해 얻고자 하는 게 무엇인가? 배운 것 최대한 활용하기 약 6개월의 기간 동안 프론트엔드에 필요한 많은 것들을 배웠지만 직접 기획하고 디자인한 웹페이지를 만드는 건 처음인 만큼 그동안 배운 것을 최대한 활용하기 오류와 타협하지 않기 작업 과정에서 발생하는 오류와 타협하지 않고 “ 무엇으로 어떻게 해결하는가? ” 보다 ” 왜 해결이 되었는가? ”에 집중해서 문제 해결하기 페이지 구성 All useMediaQuery를 이용한 PC / 모바일 반응형 웹페이지 Header / Navigation 상단 고정 내비게이션 타이틀 스와이프, b..

http-proxy-middleware 패키지 다운 npm install http-proxy-middleware --save yarn add http-proxy-middleware react > src폴더 내에 setupProxy.js 파일 추가 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { // 원하는 proxy 설정 }; 아래 내용 작성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMi..

1. 프로젝트 폴더 생성 2. react, node 폴더 생성 node Express 서버 설정 (node 폴더) // package.json 생성 npm init -y // express설치 npm i express --save node > index.js 웹서버 구동을 5000번 포트로 응답받도록 설정 (맥은 5500으로 지정) const express = require('express'); const app = express(); const port = 5000; // localhost:5000으로 출력 app.get('/', (req, res) => { res.send('Hello World2'); // 출력되는 내용 }) app.listen(port, () => { console.log(`Ser..

공식 문서를 보면 아래와 같이 나온다. '자바스크립트 앱을 위한 예측 가능한 상태 컨테이너' Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. ....... 학원 수업을 집중해서 들으면서 따라 적긴 했는데 이해할 순 없었다. 일단 대체 왜 Redux를 쓰는가부터 차근차근 짚어보자. Redux는 무엇이고 왜 쓰는가? 결론부터 말하면 sta..

리액트는 부모에서 자식으로 데이터가 흐르며 props를 이용해 넘겨줘야 하지만 context를 이용하면 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 전역적으로 데이터를 관리하는 기능. function Counter() { return ( 카운터 : increment()}>증가 decrement()}>감소 ); } export default Counter; increment와 decrement 함수를 context로 만들어 전달해보자 import { createContext, useState } from "react"; // 1. 관리자 만들기 (전역 데이터 저장 공간) export const CounterContext = createContext(); // 2. ui 디자인 가져오기(컴포넌트) con..

gh-pages 인스톨하기 (터미널에 입력) npm i gh-pages package.js 파일 내 정보 수정 1. homepage에 github 레파지토리 주소 작성. 2. "scripts" 객체에 deploy 키워드 옵션 추가. 원격 git과 로컬 git 연결. 1. 해당 폴더에서 git 초기화 git init 2. git로컬과 레파지토리 주소 연결 git remote add origin https://github레파지토리주소 3. git add, commit, push하기 (build 폴더가 아닌 개발용 폴더 업로드) git branch -M main git push -u origin main 4. 배포용 build폴더 만들고 deploy키워드를 작성해 gh-pages 브랜치로 업로드 npm run..

react는 src폴더 내에 위치한 이미지와 public 폴더 내에 위치한 이미지의 경로 설정이 다르다. src 폴더 내에 있으면 변수로 지정해서 사용 import img1 from './images/img1.jpg'; import img2 from './images/img2.jpg'; import img3 from './images/img3.jpg'; const Images = () => { return ( ); }; export default Images; public 폴더 내에 있으면 폴더에 접근하기 위해 PUBLIC_URL을 사용. const Images = () => { // src폴더 안쪽에서 public폴더까지의 경로를 구하는 구문 const path = process.env.PUBLIC_U..

const [state, setState] = useState(초기값); const [상태데이터(변수), 상태값을 변경하는 함수] = useState(초기값); 초기값: 원시형 데이터, 참조형 데이터 등