티스토리

rinrin-dev

검색하기

블로그 홈

rinrin-dev

rinrin-dev.tistory.com/m

rindev 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

프론트엔드인 내가 새벽2시에 출근해서 서버교체를? 네 그게 실제로 일어났습니다. ✅ 우리는 왜 서버교체를 하게 되었는가? 현재 재직중인 회사는 트래픽이 일정하지 않다. 특정 이벤트가 있을 때에만 확 몰리고, 그 외 시간에는 잠잠한 편이다. 2022년 초까지는 고정인스턴스를 사용하고있었다. 그러다가 이렇게 사람이 몰리게 되면... 완전 죽어버려서 아~무것도 못하는 대형이슈가 발생한다. 그래서 오토스케일링이 되는 serverless v1으로 변경을 했었다. (그 때에도 점검중 화면을 만들었었지) 그런데도! 이벤트가 있을 때 RDS의 커넥션풀이 꽉차고, CPU가 터진다. serverless v2는 RDS Proxy도 적용 가능하고, Reader/Writer도 나눌 수 있기 때문에 우리는 v2로 변경을 하기로 결심하게 된다... ✅ 어떻게 변경을 했는가? (0.. 공감수 7 댓글수 4 2022. 10. 1.
[JavaScript] JS의 반복문 그동안 배운 것들이 있었다... 그냥 for문을 써도 되는 상황에 굳이굳이 map을 사용한 나는 바보다 그래서 예전에 정리해둔 반복문을 가져왔다... 😎 두줄 요약 객체 순회 할 때 → Object.keys, Object.values, Object.entries 배열 순회 할 때 → forEach, map, filter, reduce 등등 ✔ for for (let i = 0; i < 10; i++) { console.log(i); } 너도알고 나도알고 모두가 아는 그 for문 ✔ for in const obj = { name: '김점프', age: '4' } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } // name : 김점프 // .. 공감수 0 댓글수 0 2021. 11. 21.
[React] 리액트에서 왜 useState를 쓰라고 할까 코드리뷰를 받았는데, 엄청 상세해서 놀랐다! 역시 해봐야 아는 것들이 아주 많다는 것을 깨닫는 요즘이다😎 🤔 그냥 변수 말고 state를 쓰는 가장 큰 이유 state가 변경 될 때 관련된 DOM을 다시 렌더링 되게 해야 한다면, state를 써야 한다! → SPA를 사용하고싶으면 state를 써야한다 왜냐하면 리액트는 state에 수정이 일어나면 state가 포함된 DOM을 재렌더링 해주기 때문인데.... 그걸 알기 위해서는 리액트의 Life cycle을 알아야 한다🤯 #가보자고 🤔 setState말고 state를 직접 변경해주면 왜 화면 갱신이 안될까? 리액트의 컴포넌트는 Mount 상태에서 한번 render() 를 실행하고, 후에는 Update 상태에 진입하여 shouldComponentUpdate.. 공감수 1 댓글수 0 2021. 10. 26.
[JavaScript] 디바운스(Debounce) vs 스로틀(Throttle) ✅ 공통점 짧은 시간에 여러번 발생하는 이벤트를 그룹화해서, 과도한 이벤트 호출을 방지 엄청나게 빠른속도로 클릭을 여러번 하기 검색창에 키보드로 입력하기 스크롤바를 위아래로 쭉쭉 움직이기 창을 리사이징하기 등등... ✅ 디바운스 (Debounce) 요청이 들어오면 일정시간을 기다린 후 요청을 수행하는데, 기다리는 동안 같은 요청이 추가로 들어오면 이전 요청은 취소됨 연이어서 호출되는 함수 중 가장 마지막(또는 가장 처음)만 호출 되도록 함 쉼없이 계~~~속 클릭하면 클릭이 멈출때까지 기다렸다가 멈추면 실행함 그래서 만약 무한 입력을 하면 무한 기다림을 함 toggle 버튼 이벤트 등에 주면 좋음 function debounce(callback, limit = 100) { let timeout return.. 공감수 0 댓글수 0 2021. 10. 12.
[JavaScript] var과 호이스팅 ✅ 호이스팅이란? catName("클로이"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } /* 결과: "제 고양이의 이름은 클로이입니다" */ 함수 안에 있는 선언들을 모두 끌어올려서, 해당 함수 유효 범위의 최상단에 선언하는 것 함수 선언만! 끌어올려짐 (할당은❌) //변수의 호이스팅 예시 console.log(name); // undefined var name = "김점프"; //------------------------------- var name; // name변수가 호이스팅 되어 상단으로 이동 console.log(name); name = "김점프"; //함수의 호이스팅 예시 foo(); foo2(); funct.. 공감수 0 댓글수 0 2021. 10. 11.
HTTP STATUS CODE 너도 알고 나도 아는 404...! 그런 애들을 Status code라고 하고, 친숙한 200 400번대말고 쫌 낯선 애들도 정리해볼까 한다😎 근데 진짜 많다.. ✅ 1xx (정보) 요청을 받았으며, 프로세스를 계속 진행하겠다 100 Continue 진행 중, 현재까지 문제 없음, 클라이언트가 계속 요청하거나 이미 요청이 끝난 경우에는 무시해도 됨 101 Switching Protocol 클라이언트가 보낸 Upgrade 요청 헤더에 대한 응답, 서버에서 프로토콜을 변경할 거라는 뜻 102 Processing(WebDAV) 요청을 수신 했고 처리중인데, 아직 제대로 된 응답은 모르겠으니 기다려보라는 뜻 ✅ 2xx (성공) 클라이언트의 요청을 성공적으로 처리했다 200 OK 요청한 작업이 성공함 201 Cr.. 공감수 0 댓글수 0 2021. 10. 11.
[JavaScript] Callback vs Promise vs async-await promise는 이제 진짜 알 때도 되었다. #가보자고... ✅ Callback 콜백 지옥 = 콜백이 너무 길어지면 읽기 힘들고, 이해하기도 힘듬 에러처리하기도 힘듬 유지보수도 힘듬 그리고 실패했는지/성공했는지/대기중인지 알려주지 않음 (에러가 나야만 아 뭔가 잘못됐구나 라고 알수있음😰) → 그래서 promise가 등장 ✅ Promise promise는 객체임 new Promise()로 프로미스를 생성하고 종료할 때 까지 프로미스는 3가지 상태를 가짐 pending(대기) : 비동기처리 미완료 (생성 직후 === 기본상태) fulfilled(이행) : 비동기 처리 성공 → resolve 호출 rejected(실패) : 비동기 처리 실패 → reject 호출 Promise 후속 처리 메서드 then : 인.. 공감수 0 댓글수 0 2021. 10. 10.
[JavaScript] 화살표함수 vs 일반함수 ✅ 일반 함수 this는 마지막으로 자신을 품고있는 scope로 항상 변함 (❌어디서 선언했느냐❌ ⭕어디서 호출했느냐⭕) const example = { name: "world", speak: function() { function getName() { return `${this.name}`; } return `Hello ${getName()}`; } }; example.speak(); // Hello //이를 해결하려면.. const example = { name: "world", speak: function() { //여기까지는 this에 객체 example이 bind돼있음 const self = this; // self를 선언해서 결합시킴 function getName() { return `${se.. 공감수 0 댓글수 0 2021. 10. 9.
쿠키 vs 세션저장소 vs 로컬저장소 사람의 뇌는 램이다 왜냐면 휘발성이기 때문이다... #그래도 #다시 #가보자고 ✅ 쿠키🍪 웹사이트에 의해 유저의 정보를 저장하는 것 서버와 데이터를 공유하는 용도로 사용됨 데이터의 유효 기간 지정이 가능함(ex : 1시간 뒤, 하루 뒤 등등) 대부분의 브라우저가 지원을 함 저장 사이즈가 매우매우 작음(4kb) 서버에 매번 HTTP요청을 해서 데이터 전달 낭비가 발생함 근데 쿠키는 애초에 서버-클라이언트 간의 지속적인 데이터 교환을 위해 만들어진거라.. 매번 전달 할 수 밖에.. 주로 팝업창 다시 보지 않음 기능에 많이 사용됨 ✅ 세션 스토리지 (Session Storage, 임시저장소) 만료기간이 있어서 브라우저를 종료하거나, 새로 창을 열면 초기화 됨 자동 임시 저장 용도로 쓰임 주로 입력폼 정보 저장.. 공감수 0 댓글수 0 2021. 10. 9.
REST API? 그래 이 중요한걸 정리를 안해놨을리가 없는데.......!^^!!!! 기억하지 못한 스스로가 밉다.. 헷갈리면 뭐다? #다시 #가보자고 #레고 🤔 REST? ✅ REST(Representational State Transfer) ✅ REST의 특징 🤔 REST API? ✅ REST API의 구성 요소 🤔 REST? ✅ REST(Representational State Transfer) 자원(이미지, 동영상, DB....)을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미 JSON이나 XML을 통해 주고받는 것이 일반적 URI를 통해 자원을 명시하고 HTTP method(GET, POST, PUT, PATCH, DELETE)를 통해 해당 자원에 대한 CRUD를 적용 웹의 장점을 최대한.. 공감수 0 댓글수 0 2021. 10. 8.
[JavaScript] window.requestAnimationFrame() 세상은 넓고 아직 갈길이 멀~~~~~~다는 것을^^,, #하지만 #가보자고 🤔 requestAnimationFrame? 자바스크립트의 webAPI에 있는 비동기 함수 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트가 진행되기 전 해당 애니메이션을 업데이트하는 함수를 호출하게 함. 리페인트 이전에 실행할 콜백을 인자로 받음. 리턴값은 콜백 리스트의 항목을 정의하는 고유한 요청 id인 long 정수 값. (MDN 참고) 이걸 왜 쓰는거지? 애니메이션을 위해 만들어진 ""비동기""함수 성능 최적화 (백그라운드 동작 및 비활성화 시 중지) 최대 1ms로 제한되며, 1초에 60번 동작 다수의 애니메이션도 각각 타이머값을 생성 및 참조하지 않고, 내부의 동일한 타이머를 참조함 requesetAni.. 공감수 0 댓글수 0 2021. 10. 7.
부하 테스트, 스트레스 테스트 몽글 라이트 프로젝트에 대한 피드백을 받았다! 부하테스트를 했을 때, 일정 글자? 일정 갯수? 이상 입력하면 터진다고 말씀해주셔서 깜짝놀랐다. (이런게 바로 테스트의 필요성인가!) 생각해보면 정해진 맵을 달리라고 만들어둔 카트라이더에서도 역주행 하는 사람도 있고 맵을 뛰어넘는 사람도 있고 사각지대를 찾아서 숨바꼭질을 하는 사람도 있고... 창의적인 방법으로 서비스를 이용하는 사람들이 많은데, 이는 웹 또한 마찬가지라는 생각이 들었다. 나의 짧은 견식으로는 아직 커버하지 못한 케이스가 많다는 것을 다시 느꼈다......... 그래서 부하테스트, 스트레스테스트가 뭔지 알아보는 시간! 🤔 부하테스트?? 어느정도 성능이 완성이 되면, 해당 서비스가 얼마나 많은 동시 사용자를 견디는지 테스트 하는 것. 이 서비스.. 공감수 0 댓글수 0 2021. 10. 5.
[백준] 1647번 : 도시 분할 계획 https://www.acmicpc.net/problem/1647 1647번: 도시 분할 계획 첫째 줄에 집의 개수 N, 길의 개수 M이 주어진다. N은 2이상 100,000이하인 정수이고, M은 1이상 1,000,000이하인 정수이다. 그 다음 줄부터 M줄에 걸쳐 길의 정보가 A B C 세 개의 정수로 주어지는데 A번 www.acmicpc.net 전체 그래프를 2개로 나누는데 그 나눠진 그래프 안에서는 서로 다 연결이 돼 있어야 한다는 얘기..... (근데 대체 원숭이🙊 얘기는 왜 나온거지???) 📖접근 방법 크루스칼 알고리즘을 이용해서 최소신장 트리를 하나 만듬 그 중에서 가장 비싼 간선을 하나 없앤다 (그래야 최소 비용이 되니까!) 그러면 자연스럽게 그래프가 2개로 분리된다! 그리고! import .. 공감수 1 댓글수 0 2021. 9. 25.
[JavaScript] Babel 🤔 Babel?? 바벨 = 자바스크립트 컴파일러 (바벨 공홈에 그렇게 써있다!) ES6+ 이상의 최신 ECMAScript문법을 이전 문법(~ES5)으로 변환 🤔 그래서 그걸 왜 쓰는데? 우리의 영원한 친구(^^) IE와... IE 말고도 최신 문법을 지원하지않는 브라우저가 있을 수 있기 때문에! 모든 실행환경에서 js가 돌아가도록 하는 느낌이다. // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 😎 바벨을 써보자 yarn add -D @babel/core @babel/cli \ @babel/regist.. 공감수 0 댓글수 0 2021. 9. 25.
[JavaScript] 이벤트 위임(Event delegation) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation )← Now ! 🤔 이벤트 위임이란? 하위 요소에 각각 이벤트를 붙이지 않고, 상위요소에서 하위 요소의 이벤트를 컨트롤 하는 방식 컨테이너에 (아래 예시에서는 ul) 하나의 핸들러를 할당함 핸들러의 e.target 을 사용해서 이벤트가 발생한 요소가 어디인지 알아냄 원하는 요소에서 이벤트가 발생한 것이 확인되면 이벤트를 핸들링함 (아래 예시에서는 tagName으로 확인함) li 1 li 2 li 3 const ul = document.querySelector("ul"); ul.addEv.. 공감수 0 댓글수 0 2021. 9. 23.
[JavaScript] 이벤트 캡쳐링(Event Capturing) 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) ← Now ! 이벤트 위임(Event delegation) 🤔 캡쳐링이란? 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 상위요소 → 하위요소 이벤트 전달이 진행 됨 (propagate down) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); b.. 공감수 0 댓글수 0 2021. 9. 23.
[JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation() 📃 이어지는 글 이벤트 플로우(Event Flow) 이벤트 버블링(Event Bubbling) + e.stopPropagation() ← Now ! 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation) 🤔 버블링이란? 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성 (propagate up) 클릭 const html = document.documentElement; const body = document.body; const div = document.querySelector("div"); div.addEventListener("click", function () { console.log("div"); }); body.a.. 공감수 0 댓글수 0 2021. 9. 17.
[JavaScript] 이벤트 플로우(Event Flow) 📃 이어지는 글 이벤트 플로우(Event Flow) ← Now ! 이벤트 버블링(Event Bubbling) + e.stopPropagation() 이벤트 캡쳐링(Event Capturing) 이벤트 위임(Event delegation) 😎 들어가기 전에?! 이벤트 핸들러 = 이벤트 리스터 = 이벤트 콜백함수 (모두 같은 말!) elementDiv.addEventListener('click', function(){ // 클릭을 했을 때 console.log('click했습니다') // 할 일 }, false); // 옵션 // [이벤트가 일어날 애].addEventListener( [어떤 행동을 했을 때], // [할 일], // [옵션, useCapture Boolean으로 넣어주기, 디폴트=false.. 공감수 0 댓글수 0 2021. 9. 16.
[JavaScript] IIFE(Immediately Invoked Function Expression) 😎 IIFE(Immediately Invoked Function Expression)란? 즉시 실행 함수, 함수 선언과 동시에 실행시킴 (function() {})(); 의 형태를 가짐 ( function() { ... } )(); 함수선언식이 아니고 함수를 실행시키는 괄호 함수 표현식임을 js에게 알려줌 실행 컨텍스트 내에서 모든 변수, 함수등이 선언되므로 모든 데이터는 IIFE의 로컬스코프 안에만 저장된다. 이는 전역스코프를 오염시키지 않고, 외부에서 멋대로 IIFE 내부의 값에 접근할 수 없기 때문에 값을 안전하게 보관할 수 있다. var example1 = (function() { function a() { return 5; } return { a : a // {호출할때 쓰는 이름 : 실제 데이터.. 공감수 0 댓글수 0 2021. 9. 15.
quick sort (+ til에 대한 주저리...) 주저리 먼저😋 일단 지금 진행중인 킹갓엠페러마제스티골져스 💗스터디💗 정말 당신들 없었으면 어쩔뻔했어.. 다같이 으쌰으쌰 해서 뭐든 척척해내는 이 스터디 진짜 최고야........... 아무튼 5월부터(!!!) 다같이 노션에 정리한 til이 꽤 쌓여서 복습이 필요하다는 결론이 나왔고, 그냥 슥 읽으면 뇌가 지식을 거부할 것이므로 결국 티스토리에 한번 다시 정리하기로 결심😎 #가보자고 Quick sort 📊 분할정복 알고리즘 중 하나 평균적으로 매우 빠른 수행 속도를 가짐 O(N*logN) 하지만 최악의 경우 O(n^2)가 될 수도 있으므로 피벗(pivot) 선택에 신중해야 함 → List를 정렬 한 다음에 딱 가운데 값을 선택하면 좋겠지만.. 그러면 굳이 퀵정렬을 쓸 필요가....😰 → List의 길이가 .. 공감수 0 댓글수 0 2021. 9. 14.
[프리온보딩코스] 6주차 - 과제9 ✍알게된 것과 느낀점 redux-saga....... 어렵다! json-server window hosts파일 수정 🔥그래서 해보는 정리 1. redux-saga....... 어렵다! 하지만 redux-saga를 하기전에 넘어야하는 큰 산이 하나 있는데..... #가보자고 ✅ Generator function weirdFunction() { return 1; // 보통 함수는 return을 여러 번 할 수 없다! return 2; // 이 함수는 호출할 때 마다 1만 반환할 것이다. return 3; return 4; return 5; } 위의 예시와 달리, 제너레이터 함수를 사용하면 값을 순차적으로 반환할 수 있게 된다. 제너레이터 함수를 만들 때에는 function* 이라는 키워드를 사용한다. 제너레.. 공감수 0 댓글수 0 2021. 9. 12.
[프리온보딩코스] 3주차 -과제5 드디어 쓰는 과제5!! 자음 모음을 나누는 것은 자동완성 등의 기능을 구현할 때에도 유용할 것 같아서 하면서도 재밌었다. ✍알게된 것과 느낀점 유니코드란? js에서 유니코드 써보기 한글 분해하기 🔥그래서 해보는 정리 1. 유니코드란? 전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식. 해당 글자의 코드를 표기할 때 U+ (16진수 숫자)로 작성함 → 가 == U+AC00 (10진수 44032) 한글은 한자(88,884자) 다음으로 갯수가 많다 (가, 각, 갂, 갃, ... 힠, 힡, 힢, 힣 이렇게 모든 조합이 다 들어가있음) 2. js에서 유니코드 써보기 // 문자열 → 유니코드 str.charCodeAt(index) // 유니코드 → 문자열 String.fromCharCode(num1.. 공감수 0 댓글수 0 2021. 9. 6.
[프리온보딩코스] 5주차 -과제8 ✍알게된 것과 느낀점 global style로 reset.css 사용하기 StyeldComponent에 변수 사용하여 애니메이션 주기 Drag and Drop 사용하기 ContextAPI + 상태관리의 어려움 TypeScript와 친해질 수 있을까? 🔥그래서 해보는 정리 1. global style로 reset.css 사용하기 src/styles/GlobalStyle.ts 를 생성하여 최상단에서 import한다. GlobalStyle을 작성할 때에는 아래와같이 import하여 적어야 한다. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` * { box-sizing: border-box;.. 공감수 0 댓글수 0 2021. 8. 30.
[프리온보딩코스] 4주차 - 과제7 🙋‍♀️잠깐만요! 왜 과제5 글이 없냐면.. 순서를 착각해서 잘못 썼기 때문에..!😭😭😭😭 일단 지금을 기준으로 (=수정된 이후) 5번째 과제 : 개인 - 한글 자음 카운트 6번째 과제 : 팀플 - 정렬과제 7번째 과제 : 개인 - 투두리스트 입니당.. 5번째 과제 얘기도 추후 올릴 예정..! (5번째 과제 추가하고 갑니다🥰 바로 보기) ✍알게된 것과 느낀점 컴포넌트 설계 헷갈리지 말자 편리한 antd filter 메서드 typescript와 친해지고 싶다 🔥그래서 해보는 정리 1. 컴포넌트 설계 헷갈리지 말자 components 폴더 안에는 재사용할 컴포넌트를 주로 모아야 한다. (레이아웃 기반x) routes.js에서 import 하는 컴포넌트는 웬만하면 components 안에 있으면 안됨 데이터가.. 공감수 0 댓글수 0 2021. 8. 23.
[프리온보딩코스] 4주차 - 과제6 ✍알게된 것과 느낀점 toLocaleDateString js의 split, 그리고 map 정렬.. .prettierrc 빼먹지마요 ES7을 몰랐던 과거의 나야 🔥그래서 해보는 정리 1. toLocaleDateString MDN 참고 과제에서 "ko-KR", "en-US" 형식에 맞게 날짜를 출력하는 부분이 있었는데, Locale 저거를 몰라서 하나하나 getFullYear....해서 설정하고 있었다. 요일은 심지어 한글과 영어 2가지로 나타내야 하니 배열도 두개! 코드 양도 두배! 저런게 있다고 알려주셔가지구 부모컴포넌트에서 type를 넘겨서 자식에서 확인 후 적용해줬다. // 부모 컴포넌트 // 코드 생략 return ( // 코드 생략 // 자식 컴포넌트 function DateTime({ type .. 공감수 1 댓글수 0 2021. 8. 18.
[JavaScript] 이벤트 루프 🙋‍♀️목차 JavaScript는 싱글 스레드로 동작?! 브라우저 환경 비동기 코드는 어떻게 작동하는가? 헷갈리기 쉬운 예제 (0초 후에 실행?) 💻Javascript는 싱글 스레드로 동작?! ✅싱글스레드 = 한 번에 하나의 작업만 수행 그런데 어떻게 비동기로 일을 처리할 수 있는거지?🤔?? → 자바스크립트가 구동되는 환경(브라우저, Node.js 등)에서는 주로 여러개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 바로 이벤트루프!! 💻브라우저 환경 위 그림은 브라우저 환경을 간단하게 그림으로 표현한 것이다. 자바스크립트 엔진 (자바스크립트 코드를 해석하고 실행하는 인터프리터) Heap : 메모리 할당이 일어나는 부분 Cal.. 공감수 0 댓글수 0 2021. 8. 14.
브라우저의 작동 원리 🙋‍♀️목차 브라우저에 관하여 브라우저 브라우저의 구성 렌더링 엔진 브라우저마다 다른 렌더링 엔진을 사용 렌더링 엔진의 목표 렌더링 엔진의 동작 과정 UI가 업데이트 되는 상황 UI 업데이트 프로세스 UI 업데이트 처리 방법에 따른 분류 💻브라우저에 관하여 ✅브라우저 웹 서버에서 쌍방향 통신하는 HTML문서나 파일과 연동하고 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 웹서버에 웹페이지 요청 → 웹 서버로부터 응답을 받음 → 응답(HTML문서 등)을 읽어서 해석 → 사용자에게 보여줌 구글 크롬, 인터넷 익스플로러, 모질라 파이어폭스 등이 대표적인 예 ✅브라우저의 구성 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 (요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.. 공감수 1 댓글수 0 2021. 8. 13.
[프리온보딩코스] 3주차 - 과제4 ✍알게된 것과 느낀점 데이터 구조에도 설계가 필요하다 CSS에서 할 수 있는 건 CSS에서 (일정 글자 수 이상이면 자르고 ... 붙이기 = ellipsis) 컴포넌트 내 변수 위치 조건부 렌더링, 삼항연산자 그만 사랑하자 lodash의 uniqBy 리덕스 툴킷 Redux DevTools 잊지말자 프론트엔드 클린코드 🔥그래서 해보는 정리 1. 데이터 구조에도 설계가 필요하다 생각해보면 자바로 프로젝트 할 때도 설계가 거의 개발이랑 맞먹게 걸렸었는데 크게 다를리가 없겠지..! 예를들면 저번 과제 리뷰인데, 사용자 등급이 있어서 각 등급별로 접근할 수 있는 게시판이 다른 경우에 위와 같이 access(접근할 수 있는 페이지)를 하나하나 적어주지 않고 해당 유저의 권한 level만 전달한 후 그에 따른 접근 .. 공감수 0 댓글수 0 2021. 8. 11.
[React] Intersection Observer로 무한스크롤 만들어본 후기 이 글에서 써보고 후기를 남기겠다고 했기에 까먹기전에 적기! Intersection Observer이란? let observer = new IntersectionObserver(callback(entries, observer) [, option]); target을 정하고 그 target이 기기 뷰포트나 특정 요소와 교차할 때 콜백을 생성한다. callback : target에 교차가 일어났을 때 호출되는 함수 entries : IntersectionObserverEntry 객체 리스트를 배열 형식으로 반환 그래서 작성한 코드 (1) intersecting이 일어날 시, IncreasePage를 호출 + 로딩중 문구를 보이도록 true로 설정 (2) IncreasePage가 불려서 Page가 +1 됐기 때.. 공감수 0 댓글수 0 2021. 8. 8.
[프리온보딩코스] 2주차 -과제3(2) ✍알게된 것과 느낀점 forwardRef styled component를 import할 때 내가 한 실수 - Circular dependency 상수를 관리한다는 것은 - const와 Object.freeze 나무말고 숲을보는 코드를 짜고싶다 netlify에서 배포하기 (treat warning as errors) - CI=false npm run build 🔥그래서 해보는 정리 1. forwardRef 하위 컴포넌트에 있는 엘리먼트에 접근하고 싶을 때 사용한다. 이번에 회원가입을 구현하면서, 제대로 입력 되지 않은 경우에 toast를 띄우면서 해당 input에 focus를 주는 작업을 하는데, 주소 입력하는 칸이 컴포넌트로 들어와있어서... focus를 어떻게 주죠? ~고민의 시작~ (1) 상위 컴포넌.. 공감수 0 댓글수 0 2021. 8. 8.

문의안내

티스토리
로그인
고객센터

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