티스토리

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

블로그 홈

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

frdytheme.tistory.com/m

노트처럼 쓰는 블로그라 정리 안 된 내용이 많습니다.

구독자
0
방명록 방문하기
공지 공부한 거 정리하는 블로그입니다. 모두보기

주요 글 목록

  • 쿠키와 세션의 특징 쿠키와 세션은 HTTP 프로토콜의 약점을 보완하기 위해서 사용된다. HTTP 프로토콜은 요청에 대한 응답이 완료되면 연결이 끊어지기 때문에 상태의 정보가 유지되지 않는다. 고속도로에서 하이패스를 이용해봤다면 얘기가 조금 쉽다. 하이패스 카드가 있으면 알아서 인식하고 결제가 되므로 별도의 동작 없이 지나가면 되지만 없으면 멈춰서 지갑을 꺼내 맞는 금액을 직접 지불해야하는 동작이 필요하다. HTTP 요청은 후자를 말한다. 톨게이트를 만날 때마다 멈춰서 일련의 동작을 해야한다. 쿠키와 세션은 하이패스 카드와 비슷하다. 뺏기면 안되기 때문에 보안 또한 더욱 중요하다. 쿠키(Cookie) 쿠키는 클라이언트에 저장되며 키와 값이 들어있는 작은 데이터 파일 유효 기간을 명시할 수 있으며, 유효 기간 내에서는 사용이 .. 공감수 0 댓글수 1 2023. 10. 31.
  • attribute와 property의 차이 어트리뷰트(attribute)는 HTML의 속성으로 Element의 id, class, type 등의 추가적인 정보를 일컫는다. 프로퍼티(property)는 DOM의 속성으로 html의 어트리뷰트를 부르는 이름이다. 즉, 같은 속성을 불러오는 이름만 다른 것. // 여기서 class와 color는 attribute document.querySelector(".box").className; // box document.querySelector(".box").style.color; // #000 // 여기서 className과 style.color는 Property 자바스크립트를 통해 DOM의 프로퍼티 속성으로 HTML의 어트리뷰트 속성에 접근할 수 있으며 동적으로 값을 변경하는 것이 가능하다. 공감수 0 댓글수 0 2023. 10. 31.
  • CSR과 SSR의 차이점과 특징 각 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)으로 웹 애플리케이션을 구축하는 두 가지 주요한 방식. CSR의 특징 1. 클라이언트 중심 렌더링: HTML 및 JavaScript 파일을 클라이언트(브라우저)로 다운로드한 후, 브라우저에서 JavaScript를 사용하여 페이지의 렌더링을 처리한다. 2. 초기 로딩 시간: 페이지 초기 로딩 시간이 느릴 수 있지만 로딩 이후 반응이 빠르기 때문에, 사용자 경험을 향상시킬 수 있다. 3. 빠른 네비게이션: 페이지가 로드된 후, 클라이언트에서 페이지 전환 또는 라우팅이 빠르다, 비동기 요청을 통해 데이터를 가져오는 방식을 사용할 수 있다. 4. SEO 어려움: 검색 엔진 최적화에 어려움이 있을 수 있으며, 추가.. 공감수 0 댓글수 0 2023. 10. 31.
  • CORS? Cross-Origin-Resource-Sharing에 대해 웹 브라우저는 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등을 이용해 개인정보를 탈취하는 상황을 막기 위해 동일 출처 정책 (Same-Origin Policy) 을 통해 다른 출처의 스크립트나 요청이 실행되는 걸 막는다. 출처(Origin) : url의 프로토콜, 호스트, 포트를 합친 것 ( - http://localhost:3000 ) 이 SOP에 의해 서버 요청이 차단될 때 CORS 에러가 발생하는데 사실 에러는 아니고 CORS를 이용하면 다른 출처의 리소스를 가져올 수 있는 해결책이다. 그럼 웹 문서에 모든 출처 정책은 Same-Origin인가?그렇지 않다. HTML태그 중 Cross-Origin을 지원하는 태그가 있다. 의 h.. 공감수 0 댓글수 0 2023. 10. 31.
  • 브라우저의 동작 원리 브라우저에 "www.google.com" 주소를 입력하면 1. 웹 브라우저는 DNS서버에 해당 도메인의 IP주소를 요청하게 된다. 2. DNS 해석기는 해당 요청을 일정 기간 캐싱하여 동일한 요청에 대한 빠른 응답을 대비하기 때문에 (Time to live, TTL) 캐싱된 데이터가 있다면 DNS서버에 요청하지 않고 바로 IP주소를 반환한다. 3. DNS서버로부터 받은 IP주소를 이용하여 HTML, CSS, JS 문서 등을 다운로드 받는다. 4. 브라우저의 렌더링 엔진이 HTML문서를 파싱해 DOM트리를 구축하고 CSS문서를 파싱해 CSSOM트리를 구축한다. 5. DOM트리와 CSSOM트리를 합쳐 렌더 트리를 구축하고 레이아웃을 통해 요소의 위치와 크기를 계산한 후에 페인팅을 통해 브라우저에 나타나게 된.. 공감수 0 댓글수 0 2023. 10. 31.
  • [Python] 기본 자료형 - 1. 숫자형 파이썬의 자료형 정리 1. 숫자형 숫자로 이루어진 자료형, 정수(123) / 실수(12.34) / 8진수(0o34) / 16진수(0x2A) 등 정수형(integer) 양의 정수와 음의 정수 a = 123 a = -486 a = 0 실수형(Floating-point) 파이썬에서 실수형은 소수점이 포함된 숫자. b = 1.5 b = -5.25 8진수와 16진수 8진수는 숫자가 0o 혹은 0O로 시작 c = 0o486 16진수는 숫자가 0x로 시작 d = 0x6df 숫자형 연산자 1. 더하기(+), 빼기(-), 나누기(/), 곱하기(*) a = 3 b = 4 a + b # 7 b - a # 1 a * b # 12 a / b # 0.75 2. 거듭제곱 ** 연산자 a = 2 b = 5 a ** b # 32 3... 공감수 0 댓글수 0 2023. 4. 21.
  • [JavaScript] 생성자 함수와 클래스 생성자 함수는 객체를 생성하기 위한 템플릿 역할을 하는 함수다. 붕어빵 틀이나 거푸집이라고 생각하면 될 듯. function Person(name, age) { // 거푸집 this.name = name; this.age = age; } const person1 = new Person('John', 30); // 팥 붕어빵 const person2 = new Person('Jane', 25); // 슈크림 붕어빵 이 생성자 함수를 통해 생성된 객체는 각자 다른 메모리에 저장되어 참조된다. 즉, 키나 값을 바꿔도 되는 고유한 객체가 됨 특징 생성자 함수는 첫 글자를 대문자로 쓰는 게 관례라고 한다. 생성자 함수를 통해 생성된 객체는 생성자 함수의 프로토타입을 상속받는데, 인스턴스 메서드를 프로토타입에 추가.. 공감수 0 댓글수 1 2023. 4. 10.
  • [JavaScript] Map 객체 / new Map 생성자 Map객체 Map 객체는 '키'와 '값'으로 이루어진 컬렉션으로 자바스크립트의 기본 객체인 Object와 달리 키가 반드시 문자열이 아니어도 되며, 다양한 데이터 타입을 키와 값으로 활용할 수 있다. Map객체 생성 // 빈 Map 객체 생성하기 const map = new Map(); // 이터러블 객체를 전달하여 Map 객체 생성하기 const arr = [['name', 'John'], ['age', 30]]; const map2 = new Map(arr); Map객체의 기본 동작 set(key, value) : 키-값 쌍을 추가한다. 기존에 동일한 키가 존재하면 값 대체. const map = new Map(); map.set('name', 'John'); // 요소 추가 map.set('name.. 공감수 0 댓글수 1 2023. 4. 9.
  • [JavaScript] 소수점 오류? 0.30000000000000004 팩토리얼을 사용해서 경우의 수를 구하는 문제를 풀다가 nCm = n! / n-m! * m! 공식으로 수를 구하다보면 소수점으로 떨어지는 경우가 있을 것 같아 Math.trunc()를 사용했는데 실패해서 찾다가 알게된 글 정리. 컴퓨터는 2진법으로 계산을 하기 때문에 계산을 위해 10진법인 수를 2진법으로 변환하는 과정에서 무한소수가 생길 수 있다. 다만, 컴퓨터 메모리에는 용량 제한이 있기 때문에 컴퓨터가 알아서 무한 소수를 유한 소수로 바꿔서 저장하는데 이 과정에서 미세한 오류가 발생한다고 한다. 수포자라 자세히는 모르겠는데 여튼 소수를 계산하다보면 의도치 않은 수가 발생할 수 있으니 아래 메서드를 사용하자. toFixed() toFixed()는 입력받은 숫자를, 매개변수만큼 자리수를 반올림해 Stri.. 공감수 0 댓글수 0 2023. 4. 8.
  • [JavaScript] 옵셔널 체이닝 / nullish연산자(??) 옵셔널 체이닝(optional chaining)은 자바스크립트에서 속성이나 메서드를 참조할 때 해당 속성이나 메서드가 존재하지 않으면 에러를 발생시키지 않고 그냥 undefined를 반환하도록 하는 연산자입니다. 기존에는 속성이나 메서드를 참조할 때 해당 객체가 null이나 undefined일 경우 에러가 발생했기 때문에 이를 위해 null 체크를 작성하거나, 조건문으로 처리했지만, 옵셔널 체이닝을 사용하면 간단하게 처리 가능. 옵셔널 체이닝은 "?"으로 표시하며 해당 속성이나 메서드가 존재하지 않으면 undefined를 반환. const person = { name: 'John', address: { city: 'Seoul', street: '123 Main St' } } // person 객체의 ad.. 공감수 0 댓글수 0 2023. 4. 7.
  • [프로그래머스] 코딩 테스트 중 얻게 된 Tip 정리. 문자열에서 중복된 값을 제거할 때 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 // 문자열을 배열로 변환 후 정렬하고 다시 문자열로 변환해서 같은 문자인지 체크. 팩토리얼 .. 공감수 0 댓글수 0 2023. 4. 7.
  • [JavaScript]정규표현식 정리 취업 준비하면서 공부할 겸 프로그래머스에서 코딩 테스트를 풀고 있다. 문제를 풀면 다른 사람 풀이를 볼 수 있는데, 정말 간단한 식으로 푸는 고수들이 존재했다. 그 중에 제대로 배운 적 없는 정규표현식을 사용해서 깔끔하게 코드를 쓰는 걸 보고 정리해보기로 했다. 자바스크립트 정규표현식(RegExp)은 아래와 같은 상황에서 사용하면 유용하다. 문자열에서 특정 패턴 검색 특정 문자열 대체 or 추출 정규표현식 생성 정규표현식은 리터럴(literal)과 생성자(constructor) 두 가지 방법으로 생성할 수 있다. 리터럴 리터럴 방법은 슬래시(/)로 감싸서 생성한다. const pattern = /apple/; RegExp 객체 생성 생성자에는 두 개의 매개변수를 전달할 수 있다. 첫 번째 매개변수는 정규.. 공감수 0 댓글수 0 2023. 4. 6.
  • [포트폴리오] 포트폴리오 작업 일지 GunhoKim Portfolio 안녕하십니까, 할 수 있다에 만족하지 않고 꾸준히 발전하는 프론트엔드 개발자가 되겠습니다. frdytheme.github.io 이 프로젝트를 통해 얻고자 하는 게 무엇인가? 배운 것 최대한 활용하기 약 6개월의 기간 동안 프론트엔드에 필요한 많은 것들을 배웠지만 직접 기획하고 디자인한 웹페이지를 만드는 건 처음인 만큼 그동안 배운 것을 최대한 활용하기 오류와 타협하지 않기 작업 과정에서 발생하는 오류와 타협하지 않고 “ 무엇으로 어떻게 해결하는가? ” 보다 ” 왜 해결이 되었는가? ”에 집중해서 문제 해결하기 페이지 구성 All useMediaQuery를 이용한 PC / 모바일 반응형 웹페이지 Header / Navigation 상단 고정 내비게이션 타이틀 스와이프, b.. 공감수 0 댓글수 0 2023. 2. 20.
  • [Node.js] React 프록시(proxy)설정 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.. 공감수 0 댓글수 0 2023. 1. 27.
  • [Node.js] React를 Node 웹 서버를 통해 출력하기 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.. 공감수 0 댓글수 0 2023. 1. 27.
  • [React] Redux 상태 관리 공식 문서를 보면 아래와 같이 나온다. '자바스크립트 앱을 위한 예측 가능한 상태 컨테이너' Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. ....... 학원 수업을 집중해서 들으면서 따라 적긴 했는데 이해할 순 없었다. 일단 대체 왜 Redux를 쓰는가부터 차근차근 짚어보자. Redux는 무엇이고 왜 쓰는가? 결론부터 말하면 sta.. 공감수 0 댓글수 0 2023. 1. 26.
  • [React] Context 상태 관리 리액트는 부모에서 자식으로 데이터가 흐르며 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.. 공감수 0 댓글수 0 2023. 1. 25.
  • [React] gh-pages로 깃허브에 퍼블리싱 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.. 공감수 0 댓글수 0 2023. 1. 9.
  • [React] react 이미지 경로 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.. 공감수 0 댓글수 0 2023. 1. 3.
  • [React] state 상태 const [state, setState] = useState(초기값); const [상태데이터(변수), 상태값을 변경하는 함수] = useState(초기값); 초기값: 원시형 데이터, 참조형 데이터 등 공감수 0 댓글수 0 2022. 12. 30.
  • [React] React에서의 map 특징 .map() 사용시 key값을 요소에 부여해야 함. key: 고유성을 유지해야 하기 때문에 중복된 번호 사용 불가. index의 경우 단순 출력이 필요한 경우에만 사용하며 삭제, 수정, 호출 등에서는 index가 아닌 key 사용. 대부분 안정적인 고유성을 부여하기 위해 배열 내부 프로퍼티로 id값을 작성해서 key로 사용한다. 공감수 0 댓글수 0 2022. 12. 30.
  • [React] React 이벤트 React 이벤트 on-접두어 + 첫글자 대문자 이벤트명으로 작성 클릭 function Ex3_event(props) { const handleClick1 = () => { console.log("handleClick1"); }; const handleClick2 = () => { console.log("handleClick2") } const num = (param) => { console.log(param + param) } return ( event 'on-접두어 + 첫글자 대문자 이벤트명 {/* js: onclick / react: onClick*/} 클릭 클릭 console.log("직접작성")}>버튼 num(100)}>숫자 출력 ); } export default Ex3_event; 공감수 0 댓글수 0 2022. 12. 30.
  • [React] React 기초 컴포넌트 생성 rsf: 함수선언문 컴포넌트 rsc: 함수표현식 컴포넌트 컴포넌트명의 첫 글자는 반드시 대문자로 작성해야 컴포넌트로 인식한다. // 함수표현식 컴포넌트 const 컴포넌트명 = () => { return ( // fragment /* 여기 작성되는 내용은 JSX로 화면에 보이는 영역 개발을 쉽게 하기 위해 태그 형식으로 사용하나 html과 달리 태그가 아님 */ ) } export default 컴포넌트명; // --------------------------------------------------- //함수선언문 컴포넌트 function 컴포넌트명(props) { return ( ); } export default 컴포넌트명; import 파일 연결 컴포넌트 포함 .js, .jsx, .. 공감수 0 댓글수 0 2022. 12. 29.
  • [React] JSX 규칙 JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법 HTML과 비슷하나 자바스크립트 객체. ​ JSX 규칙 1. 태그는 반드시 닫아줘야 한다. 빈요소인 경우 xml 방식으로 처리 ​ 2. 최상단에서는 반드시 div 혹은 Fragment() 로 작성 hello react! ​ 3. JSX 안에서 자바스크립트 값을 사용하고 싶을때는 { }를 사용 hello {name} ​ 4. 조건부 렌더링을 하고싶으면 &&연산자나 삼항 연산자를 사용 권장 { true ? console.log('참') : console.log('거짓') } ​ 5. 인라인 스타일링은 항상 객체 형식으로 작성 react 6. 별도의 스타일파일을 만들었으면 class 대신 className 을 사용 react 7. JSX의 .. 공감수 0 댓글수 0 2022. 12. 29.
  • [JavaScript] async_await 프로미스를 쉽게 사용할 수 있게 만든 비동기 함수로 일반 함수 앞에 async를 붙이면 해당 함수를 프로미스로 반환한다. async function isAsync() { return "프로미스로 반환됩니다" } isAsync().then(alert); // "프로미스로 반환됩니다" await await는 async 함수 내에서만 작동하며 Promise가 처리될 때까지 기다렸다가 구문을 실행한다. async function isAsync() { const isPromise = new Promise((res, rej) => // new Promise로 promise 함수 호출 setTimeout(() => { // 3초 딜레이 후 resolve 값 반환. res("3초 기다렸다가 출력."); }, 3000).. 공감수 0 댓글수 0 2022. 12. 28.
  • [JavaScript] fetch_more 공감수 0 댓글수 0 2022. 12. 28.
  • [JavaScript] 프라미스(promise) 객체 비동기 작업을 위한 패턴으로 이행에 성공했을 때와 실패했을 때의 동작을 미리 약속하는 것. 이 때 동작은 콜백함수로 이루어지며 성공했을 시 resolve, 실패했을 시 reject로 실행된다. new Promise() 생성자 함수로 프라미스 객체를 생성하면 그와 동시에 콜백함수가 호출되는데 이 때 전달되는 함수는 executor(실행자, 실행 함수)라고 한다. resolve, reject는 자바스크립트가 제공하는 자체 콜백 함수로 함수의 이행 결과에 따라 resolve 혹은 reject 중 하나의 값은 무조건 호출된다. new Promise가 생성하는 promise 객체의 내부 프로퍼티. state 기본값 'pending(대기 상태)' resolve 호출 시 fulfilled(이행 상태) reject 호.. 공감수 0 댓글수 0 2022. 12. 28.
  • [JavaScript] try...catch 에러 핸들링 스크립트에 에러가 있을 경우 에러 발생 구문을 실행한 후 스크립트를 중단 없이 진행하는 구문. 스크립트는 에러가 있을 경우 그 즉시 실행을 멈추고 죽어버리는데 try..catch문을 사용하면 스크립트가 죽는 걸 방지할 수 있고 코드를 디버깅하기도 유용함. 단, 런타임 에러에만 동작하며 중괄호 짝이 안맞는 등 작성 방식이 잘못된 경우에는 동작하지 않음. 또 setTimeOut처럼 스케쥴 된 코드는 엔진이 try...catch 구문을 떠난 후에 실행되므로 작성한다면 setTimeOut 코드 내부에 try...catch문을 작성해야 한다. 자바스크립트는 에러가 발생하면 에러 객체를 생성한다. 그 후 catch블록에 에러를 인수로 전달한다. try { // } catch(err) { // 에러 객체로 err 대.. 공감수 0 댓글수 0 2022. 12. 28.
  • [TeamProject] 야놀자 홈페이지 팀프로젝트 작업 일기 처음 야놀자 홈페이지를 봤을 때 솔직히 이 정도로 오래 걸릴 거라고 생각하지 못했다. 이 모션에는 이런 코드를 쓰고 저 모션에는 저런 코드를 쓰면 되겠다고 쉽게 생각했는데 바디의 높이나, 콘텐츠의 레이아웃을 유지하면서 스크롤 이벤트를 적용하는 일은 HTML구조를 여러 번 수정하게 만들었고 overflow와 transition으로 만들면 되겠다고 생각한 페이지 전환 효과는 거의 이틀의 시간을 잡아먹었다. 단순한 화살표 애니메이션조차 디테일하게 구현하는 데에 애를 먹었기에 패스로 일일이 작업된 애니메이션들은 사실상 포기했었다. 하지만 시작이 어려웠던만큼 하나씩 차근차근 해나가는 과정에서 전혀 몰랐던 기능들도 알게 됐고 결국 해냈을 때는 약간의 쾌감도 느꼈던 것 같다. 또 팀원들과 공유하고 고민하며 완성도를 .. 공감수 0 댓글수 0 2022. 12. 27.
  • [JavaScript] wheel_가로 스크롤 WheelEvent.deltaY : 세로 스크롤 시 값 반환. (읽기 전용) 공감수 0 댓글수 0 2022. 12. 19.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.