나만의 ESLint 규칙 만들기결과물 eslint-config-ham-javascript개인프로젝트를 위한 커스텀 javascript eslint 설정입니다.. Latest version: 0.0.11, last published: 7 days ago. Start using eslint-config-ham-javascript in your project by running `npm i eslint-config-ham-javascript`. There are no other projwww.npmjs.com 배경ESLint는 문법적인 오류나 안티 패턴을 찾아주기 때문에, 코드의 품질을 향상시킬 수 있다.그러나 매번 작성하는 것은 번거롭다.그렇다고 eslint-config-airbnb 만을 도입하기엔 너무 규..
이번 학기는 편할 줄 알았는데... ㅎㅎ. CS 보완도 할 겸 하반기 취준을 위해서 다들 따는 자격증을 호다닥 준비했다!1. 정처기 필기기본 지식과 준비 기간컴퓨터공학과 복수전공을 하면서, 선택 과목이었던 DB, 4-2로 미룬 운체를 듣지 않았다. 들었다면 도움이 되었을 것 같다. 수강한 과목 중에는 객체+자구+컴네 정도가 준비에 도움이 되었다. 그리고 확실히 SQLD를 같이 준비하다 보니 3과목은 거의 투자를 안했음에도 괜찮은 점수를 받을 수 있었다. 시험 날짜를 잘못 잡아서 금-토 이어서 시험 두개를 몰아서 봤는데, 나쁘지 않은 선택이었다. 주변 전공자들한테 공부 기간을 물어보자 엄청난 기만이 돌아왔다 ㅠ 3일컷이다x2, 일주일컷이다, 너 그거 일주일 안에 못따면 바보야 등등........딱 평균 6..
리액트에서 "children"이란 무엇일까? children은 prop일 뿐이다. const Parent = ({ children }) => { return {children}; }; 즉 아래의 코드 (1), (2)는 같다. // (1) // (2) 그렇다면 Element를 prop으로 넘긴다는 것은 어떤 뜻일까? 아래의 두 코드는 같은 뜻이다. 모두 리액트 element를 생성, 할당하고 있다. const children = const children = React.createElement(Child, null, null); element가 변경되면 위와 같은 재생성 및 재할당과정이 일어난다. 그렇다면 리액트 element란 무엇인가? 바로 아래와 같은 객체일 뿐이다. { type: Child, pro..
3주차 주제 스터디를 진행하다가 이런 논란(?)이 있었다. 아래와 같은 코드에서, context가 바뀔 때 자식 컴포넌트가 모두 리렌더링 되는 것이 아니라, context가 쓰이는 컴포넌트만 리렌더링 되는 것이었다...! 그리고 정말 이상하게도 리렌더링 여부를 확인하기 위한 console.log()는 동작하지 않았지만, React devtools의 하이라이팅은 동작해서 혼란이 가중되었다. (리렌더링 된거다 vs 아니다) 스터디가 끝나고 이러한 현상(context가 쓰이는 컴포넌트만 리렌더링, but 하이라이팅은 모든 자식 컴포넌트)이 일어나는 이유를 이해하기 위해 아래 내용들을 다시 공부해 봐야겠다고 생각했다. 1. useContext 2. children Props 3. React devtools 이번..
문제 https://www.acmicpc.net/problem/1918 1918번: 후위 표기식 첫째 줄에 중위 표기식이 주어진다. 단 이 수식의 피연산자는 알파벳 대문자로 이루어지며 수식에서 한 번씩만 등장한다. 그리고 -A+B와 같이 -가 가장 앞에 오거나 AB와 같이 *가 생략되는 등의 www.acmicpc.net 풀이과정 💡 아이디어 ✅ 먼저 계산되어야 하는 부호가 앞에 나와야 한다. A*(B+C) ➡️ ABC+* ✅ 즉, 부호를 스택에 순서대로 담았다가, ✅ 스택의 가장 위 부호보다 나중에 계산되어야 하는 부호가 나오면 스택에 담긴 부호들을 처리한다. ✅ 이때 연산의 우선순위는, 괄호 > * / > + - > 앞에 온 부호 ✅ 앞에 온 부호가 항상 스택의 밑에 깔리므로(FILO), 우선순위를 무..
성능 최적화를 위해 리렌더링을 줄이자! 라고 하면서, React.memo()나 useMemo()를 남발하고 있지는 않았나 되돌아보자. 리액트에서 "렌더링"이란 무엇인지 정확히 알고, 최적화를 어떻게 시킬 수 있는지 알아보자! 리액트의 렌더링이란? 아래 과정 중 Render phase를 리액트에서 렌더링이라고 부른다. Trigger phase 0️⃣ 최초 진입 시 0️⃣ state, 부모의 state 의 변경 각 컴포넌트에서 state의 변경 시 dirty check ➡️ batch 추가 Render phase 1️⃣ render() 호출 (클래스형 컴포넌트) 또는 함수 컴포넌트 호출 (함수형 컴포넌트) 2️⃣ 가상 DOM 재조정 이전 가상 DOM과 현재 가상 DOM을 비교 (Diffing Algorith..
가상화란? 하나의 하드웨어를 여러 개인 것처럼 가상으로 쪼개서 사용하거나, 여러 개의 하드웨어를 묶어서 하나의 자원인 것처럼 사용하는 것 가상화의 등장 배경 1960~70년대의 하드웨어, 소프트웨어 기술 상황은 어땠을까? 무어의 법칙에 의해 하드웨어의 발전은 가속화되고 있었다. 소프트웨어는 이러한 하드웨어의 발전을 따라가지 못했다. 남는 하드웨어 성능 아까운데 어떡하지... 가상화 개념으로 한 대의 서버를 나눠쓰자! 나만의 서비스를 만들었다. 이제 배포를 해야 하는데, 내 컴퓨터를 서버컴으로 계속 돌릴 수는 없다. 다른 환경을 빌려서 사용해야겠다. 그런데 새로운 환경에서 코드를 실행시키자니, 환경이 내 컴퓨터랑은 달라서 안되네... 가상화 개념으로 다양한 하나의 환경(Host OS)에서 여러 서비스들이 ..
사실 SSH 프로토콜은 여러 곳에서 접해 보았다. 이렇게 깃허브에서도 쓰고 있고, AWS 인스턴스를 만들 때도 쓰고 있다. 암호화해주는 기술이라는 건 어렴풋이 알고 있었지만, 한번도 어떤 프로토콜인지 자세히 알아보지 않았다 ... SSH 프로토콜에 대해 알아보자. SSH 프로토콜의 쓰임 데이터 전송 (깃허브 push pull 등) 원격 제어 (AWS 가상머신에 명령 내리기) SSH 프로토콜의 기능 SSH 프로토콜은 안전한 네트워크 서비스를 제공하기 위해 암호화를 사용한다. 암호화를 통해 클라이언트와 서버간의 연결을 네트워크 공격으로부터 보호할 수 있다. SSH 프로토콜이 사용하는 기술 대칭 암호화(Symmetric Encryption) 동일한 키로 암호화, 복호화 가능 클라이언트-서버 간 전체 연결을 암..
