Yonyas 블로그

React에서 useRef를 사용하는 방법, 그 특징, 그리고 React에서 useRef의 동작 원리에 대해 알아보겠습니다. 기본 사용법 특징 Ref는 React가 추적하지 않는 비밀 주머니와 같다. React의 state처럼 ref 값도 리렌더 시 유지된다. 하지만 state 변경은 component를 리렌더하는 반면 ref 변경은 그렇지 않다. Sta…

React Router 라이브러리를 사용할 때 HashRouter나 BrowserRouter를 사용한다. 이 둘의 차이점은 뭘까? 배경지식 페이지 링크를 누르거나 새로고침 할 경우 브라우저는 현재 route로 서버에 데이터를 요청한다. HashRouter URL에  symbol을 사용한다. 그러면 # 뒤의 주소는 서버에 요청할 때 무시된다. 예를 들어  …

인프런에 함수형 프로그래밍 응용편(유인동님) 강의를 듣고 있다. 이 강의만으로 함수형 프로그래밍은 무엇인가에 대한 이해는 사실 잘 되지 않아서 다른 자료를 읽어봤는데, 이 글은 그 중 설명이 좋았던 Anjana Vakil 의 강의 내용이다. 함수형 프로그래밍의 특징은 무엇일까 우선 명령형 프로그래밍은 레시피대로 요리하면서 변화하는 느낌이다. 처음에 이걸 …

요즘 게더타운에서 온라인 모각코를 하고 있다. 춤추면서 공부하고 있었는데(z를 누르면 계속 춤춘다) 얼마 후 다시 보니 다들 춤추고 있길래 귀여워서 찰칵… 규칙은 월, 수 퇴근 후 들어와서 각자 원하는 공부를 하고, 불참하거나 공부시간이 한시간 미만인 경우 벌금 2천원. 모아서 방탈출 하고 싶다.

유인동님의 를 완강했다. 강의 초기 부분은 함수가 파라미터로 들어가고 또 함수가 함수를 리턴하는 등 일급함수에 대해 배웠고, iterable 에는 메서드가 있고 이를 이용해 iterable을 사용할 수 있다는 것을 알게 됐다. 다음 단계에선 reduce, map, filter 등과 기능은 같지만 모든 iterator를 처리할 수 있게끔 확장해서 구현하…

이펙티브 타입스크립트 아이템 21 부분을 읽으면서 정리한 내용입니다. 변수를 초기화할 때 타입이 명시되어 있지 않으면 타입스크립트의 타입체커는 타입을 명시해야 하는데 이 때 지정된 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다. 이 과정을 ‘타입 넓히기’라고 한다. 예제 1  3D 벡터를 다루는 라이브러리 코드를 살펴보자 위 라이브러리를 사용하는 …

이펙티브 타입스크립트 아이템 18 부분을 읽으면서 정리한 내용입니다. 불필요한 렌더링을 막기 위해 필요할 때만 차트를 다시 그릴 것이다. 아래 props중 onClick 이벤트를 제외하고만 다시 그리면 된다. 최적화를 두가지 방법으로 구현해 보겠다. (두가지 방법 모두 이상적이지 않은 방법이다) 1. 첫번째 방법 : 보수적 접근법, 실패에 닫힌 접근법 만…

이펙티브 타입스크립트 아이템 15 부분을 읽으면서 정리한 내용입니다. 인덱스 시그니처란? 객체 타입인데 키의 이름을 마땅히 모를 때 유용한 방법. 예시를 보자. 특징 3가지 위에 라는 키의 이름은 위치만 표시하는 용도이다. 원하는 대로 네이밍하면 된다. 키의 타입 : string | number | symbol 의 조합. 보통은 string을 쓴다. 값의…

이펙티브 타입스크립트 아이템 14 부분을 읽으면서 정리한 내용입니다. DRY (Don’t Repeat Yourself)  코드 칠 때만 주의하지 말고 타입에서도 이 규칙을 따르자. 만약 Person 에 middleName을 추가하면 PersonWithBirthDate 와는 다른 타입이 되어버린다.  중복의 법칙을 어길 뿐만 아니라 관리도 안 되는 타입인 …

handleClickButton 으로 할 지 handleButtonClick 으로 할 지 고민하다가 찾아보게 된 이벤트핸들러 네이밍에 관한 글입니다. Props   처럼 접두사   을 붙인다. 내장된 이벤트 핸들러 컨벤션도 이와 같은 컨벤션이다. 이렇게 컨벤션을 맞춤으로써 이 props가 내장된 이벤트 핸들러 기능을 포함하여 동작한다고 선언하는 의미도 있…

공식문서 읽다가 타입스크립트를 사용하면서 잘 안쓰던 것들, 주의할 점들 위주로 적어봅니다. Setting defaults xPos, yPos에 값이 할당되지 않으면 0으로 초기화된다. 아래와 같이 쓰고 싶은 욕구가 들 때가 있으나 안 된다. 타입지정과 초기값 할당을 한 번에 할 수 없다. JavaScript 는 객체프로퍼티에 다음과 같이 {property…

공식문서 읽다가 타입스크립트를 사용하면서 잘 안쓰던 것들, 주의할 점들 위주로 적어봅니다. Narrowing이란 ? 함수에서 인자가 string, number를 받을 때, 조건문으로 코드 윗부분에서  으로 만들어주면 아래 코드는 그 외의 타입인   으로 인식된다. 예시를 보자. 조건문으로 type 이 number일 경우를 걸어준다. 🚩 주의할 점   은 …

TypeScript는 기본적으로 리액트 컴포넌트를 JSX.Element로 타입추론을 한다. 컴포넌트 타입을 로 바꾸려면 따로 타입을 지정해주어야 한다. 현재는 FC로 지정해서 사용하고 있는데 굳이 를 계속 써야 하는지 JSX와 차이는 무엇인지 궁금해서 찾아보았다. 사용의 장단점을 알아보겠다. React.FC 의 장점 컴포넌트에 을 명시할 수 있다. di…

module이 해결한 문제 코딩은 거의 변수를 다루는 문제라고 할 수 있다. 변수에 변수를 더하거나 할당하거나 등등.. 이렇기 때문에 변수를 잘 체계화하는 것이 개발과 유지보수에 큰 영향을 미친다. 스코프 덕분에 작은 단위로 변수를 바라보는 것이 가능해졌다. 한 함수를 짤 때 다른 함수의 변수를 고려하지 않아도 된다. 하지만 함수들끼리 변수를 공유할 수 …

7장 중 코드가 나오는 장은 마지막 7장 밖에 없다. 1~6장까지는 객체지향을 코드 없이 설명한다. 그동안은 막연히 객체지향의 장점과 어떻게 객체지향 프로그래밍을 하는지만 대략 알고 있었다. 객체가 가진 역할과 책임 등에 대한 생각 없이 생각나는 대로 클래스를 묶는 수준이었다. 사실 객체지향 프로그래밍을 거의 해보지 않았다. 장점이 와닿지 않았고 절차지향…

에러 상황 , 등을 했을 때 아래와 같이 sharp module 설치에 문제가 생긴다는 문구가 뜬다. 구글링 해보면 https://github.com/lovell/sharp/issues/2460 이슈가 한창 진행됐었던게 보인다. 문제는 여기서 말해주는대로 해도 해결이 안 됐다. 혹시 도움이 될 수 있으니 내 맥북에서 해결된 방법을 써 본다. 해결방법 n…

Hooks은 React16.8버전에 등장했다. 훅을 사용하여 class 없이도 state와 React의 다른 기능들을 사용할 수 있다. 1. 훅은 Top Level에서만 호출하자 훅을 loops, conditions, nested functions 안에서 호출하면 안 된다. early return 전에 호출하자. 이렇게 하면 컴포넌트가 렌더될 때마다 매번…

먼저 bind 를 살펴보자. 전역변수를 지정하고 시작 1 - 기본적인 bind 2 - man 프로퍼티에 지정 3 - man.foo를 다른 변수에 지정 4 - 가 화살표 함수라면? 이유 : arrow function 에 rebind할 수 없다. 화살표함수의 this는 정의된 컨텍스트와 함께 호출된다. 호출할 때 this 를 잃어버리는 개념이 React co…

SWR은 data fetching React hook이다. 막강한 캐싱 기능이 있다. {data, error} 로 data와 error를 받아온다. swrConfig 로 기본옵션 설정 기본 사용 조건부 fetch 가능 의존성 가져오기 user 데이터가 두번째 코드줄에 반영 인자 다중인자 캐슁 만약 두개의 컴포넌트에서 아래 코드를 중복되게 작성했다고 하자.…

NextJS 특징 직관적인 page-based 라우팅 시스템 SSG 및 SSR 지원 자동 code spliting Route pages 폴더 안의 구조에 따라 라우팅이 된다. 이 구조라면 index.js 는 localhost:3000/ 주소. first.js 는 localhost:3000/posts/first 주소이다. Link 페이지끼리 이동하려면 Li…

plugins @typesript-eslint : TS를 ESLint에서 사용할 수 있도록 ESTree-compatible form으로 변환한다. jsdoc/check-alignment : /** */ 의 블록주석을 정렬을 맞게 수정한다. no-null : null 대신 undefined를 사용한다. import : package.json에 선언되지 않은…

그동안 애자일이란 말을 들으면서도 명확한 정의를 모르고 있었다. 귀납적으로 추측해봤을 때 ‘일단 되는대로 해봅시다~’ 라는 말 대신 애자일을 쓰는게 아닌가 싶었다. 책을 다 읽고 난 지금 생각해보면 ‘일단 되는대로’라는 부분도 어느정도 맞는 말이다. 애자일이란 것 자체가 한 문장으로 정의내리기엔 어려움이 있지만 완벽한 사전설계보다 시도하면서 수정하자는 것…

Promise는 인자가 두개(resolve, reject)인 콜백함수를 인자로 받는다. async await을 promise로 바꿔보자

실행컨텍스트란? js코드가 평가되고 실행되는 환경이다. 실행 컨텍스트에는 전역실행컨텍스트와 함수실행컨텍스트가 있다. 전역컨텍스트 프로그램당 하나밖에 없다. window 전역객체를 만들고 this를 전역객체와 동일하게 설정한다. 생성 시점은 자바스크립트 엔진이 스크립트를 만날 때이다. var 등 선언문을 만나면 저장해둔다. 함수 실행 컨텍스트 함수가 될 때…

“매 선택에서 지금 이 순간 당장 최적인 답을 선택하여 적합한 결과를 도출하자” 동전 거스름돈 문제를 예로 들어보자. 500원, 100원, 50원, 10원이 있을 때 가장 최소한의 동전의 개수로 돈을 거슬러줘야 한다. 1230원이라면 500원 2개, 100원 2개, 10원 3개가 될 것이다. 이게 왜 그리디이냐 하면 1230원 - 500 * 2 = 230…

시간이 왜 이렇게 빠른가. 세상에. 프로젝트 할 겁니다 ! 일단 타입스크립트랑 객체지향이랑 듣고 싶은 강의 듣고요. 라고 생각했던 나의 8월 목표는 타입스크립트 객체지향 공부 코드스피츠 강의(programming 101) 새 프로젝트 알고리즘 였다. 한재엽님의 인터뷰질문 정리깃헙도 공부하고 싶었고 firebase로 서버구성하는것도 공부하고 싶었고 실전 리…

CSS-in-JS 로는 SCSS, Styled-Components 를 써봤다. SCSS의 네스팅기능과 Styled-Components의 props를 내려받아서 활용하는 기능이 좋았다. 그러나 Styled-Components의 태그를 대신하는 스타일명은 컴포넌트와 헷갈렸다. 그리고 컴포넌트명이 대문자로 가득찬 코드가 이뻐보이지 않았다. emotion이 CS…

과제 힌트 ds stack 을 이용한다. 최상위 배열의 원소를 돌다가 원소가 배열인 경우를 만난다. 스택에 최상위 배열과 진행했던 인덱스를 담아둔다. 자식배열을 다시 0번 인덱스부터 돈다. 자식배열이 다 끝나면, 스택에서 마지막에 넣었던 정보가 자기 부모배열의 정보이므로 이를 복원해서 부모 배열과 그 인덱스를 이어서 진행한다. 그 와중에 문자열은 acc …

OCP Open Closed Principal 좋은 코드를 가르는 기준. 코드레벨, 모듈레벨, 패키지레벨… 지금은 코드레벨을 다룬다. 객체지향 프로그래밍의 핵심원칙 OCP란? 수정에는 닫혀있고 확장에는 열려있다. 코드수정에는 닫혀있고, 케이스(switch의 병렬조건) 확장에는 열려있다 = switch문을 쓰지 않는다. 기존의 코드를 변경하지 않으면서 기능…

과제 아래 법칙들을 이용해서 stringify 만들기 (꼬리재귀, 루프 두가지 방법으로) 변수의 스코프와 라이프사이클. 연산과 메모리의 관계 오류와 실패의 관계 - 오류는 중간요소의 내결합성 때문에 실패로 이어지지 않을 수 있다. 오류가 최대한 빨리 실패로 이어지게 짜라. 컨텍스트에러가 더 무서운 것 -> 신뢰성, 안정성(컨텍스트에러발생 올라감)은 tra…

맥을 사고 gatsby로 만들었던 깃헙블로그를 클론받았다. 에러가 떠서 에러해결기를 써본다. npm install 멈춤 을 했는데 에러가 뜬다. 와 를 했는데 중간에 npm install 작동이 멈춘다. 위 상태에서 멈춘다. npm uninstall katex katex의 문제로 보여 uninstall해도 중간에서 멈춘다. 구글링해보니 해서 오류를 찾아보…

위코드 부트캠프를 수료했다. 위코드에서는 바로 면접질문 공부 및 면접연습을 하고 프로젝트 코드리뷰를 하면서 이력써를 쓰라고 했다. 그래서 그렇게 했다. 그런데 이게 맞을까라는 생각이 계속 들었다. 이력서를 당장 써서 취업을 하고 어떻게든 기능을 구현하고 시간에 쫓겨 또 기능을 구현하는.. 그런 모습이 그려졌다. 제로초님과 개발바닥 유튜브에서도 보면 자기공…

반응형 웹 만들 때 flex 속성들이 헷갈리는 부분이 있어서 정리해본다. 위 코드는 자식태그들에 자동적으로 아래 속성들을 넣는다. flex-grow : 기본 : 부모의 크기를 다 차지해라. 기본이 row니까 width를 다 차지한다고 생각. 그런데 두번째 child의 컨텐츠 크기가 엄청 크다면? grow를 무시하고 두번째 child가 제일 커진다. 즉…

과제: 1차원배열의 모든 합을 재귀, 꼬리재귀, for문 세개 코드로 작성하기 예시 코드 코드리뷰 변수의 라이프사이클과 스코프 변수의 스코프는 일반적으로 권한 관련된 얘기, 라이프사이클은 메모리의 점유 ‘스코프만큼 살아있는게 아닌가?’ 아니다. 연산과 메모리는 trade off. 같은 스코프라도 라이프사이클을 길게 가져갈 수 있다. 이점은? 연산을 덜 할…

과제: 1차원배열의 모든 합을 재귀, 꼬리재귀, for문 세개 코드로 작성하기 내가 짠 코드 예시 코드 1 코드리뷰 내용 1. 오류와 실패 오류는 있는데 실패하지 않는 경우 : 내부에 있는 함수나 기능이 *내결합성을 갖는 경우 *내결합성 : 오류가 발생했을 때 버티는 경우, 대부분 런타임에러가 안생기는 대신 컨텍스트 에러가 생긴다. 프로그램이 죽지는 않지…

Route props history 예를 들어 nav에 apple을 누른다. 버튼에 아래와 같이 함수를 넣어준다. 카테고리페이지로 가면서 apple을 파라미터로 가져간다. match 대표적으로 match.params 로 path에 설정한 파라미터값(apple)을 가져온다. location 대표적으로 location.serach 로 url의 쿼리스트링을…

sort() 의 특징 복사본이 만들어지는 것이 아니라 원 배열이 정렬된다. sort()와 sort((a,b) => a-b) 의 차이 sort메소드는 원래 문자열의 유니코드 포인트를 따라서 정렬하기 때문에 숫자 정렬시 숫자를 문자열로 변환하여 정렬한다. 그래서 sort()만 하면 우리가 생각하는 식의 정렬이 되지 않는다. a, b 에는 무엇이 할당될까 a에…

styled-components 특징 Automatic critical CSS : 어떤 컴포넌트가 렌더되고 있는지 자동으로 확인해서 스타일 적용 여부를 결정한다. 이는 사용자가 적은 양의 코드를 로드할 수 있게 해서 속도에 좋다. No class name bugs : 고유의 클래스명을 자동으로 생성한다. 코드 중복을 막아준다. 하지만 이로 인해 개발자도구…

사람의 머리는 똑똑하지 않다. 기억할 수 있는 저장수의 길이는 최대 7줄. 그래서 스코프는 좁게 변수 라이프사이클은 짧게 유지해야 한다. 또한 바로 어려운 for문을 짤 수 없다. 숟가락 얹기 재귀 -> 꼬리물기 최적화 재귀 -> for문으로 기계적 번역 단계를 거쳐서 어려운 for문도 짤 수 있게 될 것이다. 아래는 1~10까지의 합을 구하는 코드이다.…

에러의 시작 을 하는데 “unable to resolve dependency tree” 에러가 떴다. 에러를 읽어보니 katex@0.11.1이 현재 노드모듈에 있는데, ^0.10.0이 설치되어야 버전에러가 뜨지 않는다. 그래서 katex를 다른 버전으로 다시 설치하려 했는데 스택오버플로어를 보니 or 를 하면 된다고 한다. 실제로도 해결되었다. 저 둘…

svg란? Scalable Vector Graphics *XML 형식의 vector 기반 그래픽이다. XML 형식이라 CSS 와 Javascipt 로 수정 가능 *XML형식이란? Extensible Markup Language 데이터를 기술하고 구조화하는 것과 관련한 기술 데이터의 교환을 위해 고안된 기술 예를 들어 고양이를 설명하는 데이터를 보면 위 구…

Dimensions API Dimensions.get() 안에는 window or screen 입력 가능 ‘window’ : 현재 화면 사이즈 ‘screen’ : 전체 화면 사이즈 ios 는 둘이 같은데 android는 window가 screen보다 살짝 작다. Rotate 처음에는 rotate 반영 안됨. 보면 로 되어있음. portrait를 def…

리액트 네이티브 처음 사용시 초기세팅을 마치고 앱 띄울 때 알면 좋은 점들 정리 JAVA version 우선 초기세팅에서 중요한 점은 JAVA8(jdk) 버전을 설치하는 것. 최신버전을 설치했다가 왜안되지 하고 한참을 헤맸다. JDK = JRE + @, 읽기/쓰기 전용 JRE는 읽기 전용이다. 앱띄우기 순서 expo init 파일명 cd 파일명 npm s…

오늘의집 사이트를 모티브로 은행의집 사이트를 제작했다. 자취하면서 인테리어에 관심갖게 되고 자주 들락날락 했었던 사이트. 우리집 인테리어에 많은 기여를 해줬던 사이트. 1차 프로젝트의 경험으로 2차 업무분장은 금방 할 수 있었다. 이번에는 styled-component를 사용했는데 common.css 와 variable.css 등등을 적용해서 초기세팅하는…

위코드 1차 프로젝트 기간이 끝났다. 추가로 구현하고 싶은 부분들, 자잘하게 이상해보이는 부분들을 계속 수정하고 싶지만 곧바로 2차 프로젝트에 돌입하므로 일단 첫번째 회고록을 쓴다. 그 후에는 ‘프로젝트를 마쳤다’라고 쓸 수 있을 것 같다! (21.7.20. 서버상 문제로 데이터를 쓸 수 없고 연동이 되지 않는다..! 코코아 프렌즈 마트 프로젝트는 여기서…

목차 1-1. 로그인 페이지 마크다운 및 로그인 유효성 검사 1-2. 로그인, 회원가입 기능 2-1. 메인페이지 컴포넌트 분리 2-2-1. 메인페이지 Nav.js 2-2-2. 메인페이지 Feed.js 2-3-1. 메인페이지 Article.js 저번주에 자바스크립트로 인스타그램 로그인 페이지와 메인페이지를 구현했는데 이번주에는 리액트로 구현해보았다 ! HT…

결과적으로 실패기록이지만 나중에 다시 세팅에 도전할 때 참고 및 알게된 것들을 정리하려고 기록해둔다. 사건의 시작 손목이 아팠다. 버티컬 마우스를 써도 아팠다. 그러던 중 ‘드림코딩 엘리’님이 데스크 셋업 유튜브에서 타블릿으로 마우스를 대체했는데 좋았다는 말이 생각났다. 그래서 와콤 소형 타블릿을 구입했다. 펜에 버튼 할당 와콤 타블릿 펜에는 두 버튼이 …

목차 1. aside 부분 돔 구현 2. 댓글 추가, 삭제 및 좋아요 기능 3. 게시글에 좋아요 누르기 4. nav에 아이디 검색 기능 5. 후기 4월 12일부터 위코드 부트캠프 생활을 시작했다 ! 바닐라 자바스크립트로 인스타그램 로그인페이지와 메인페이지를 만들었다. 다음주 3주차에는 인스타그램을 리액트를 이용해서 다시 구현해볼 것이다. 구현한 기능 댓…

float는 원래 이미지와 글이 함께 있을 때 이미지 주변에 글을 감싸기 위해 사용했다. 그러다가 레이아웃 구성에도 사용하게 되었는데 원래 용도가 레이아웃 구성이 아닌만큼 float를 사용하기 위해서는 몇가지 추가로 알아야할 것들이 있다. 사용시 부모의 height가 0이 된다 해결방법 1 부모에 (height가 자주 바뀔 것 같다면) height를…

깊이우선탐색 vs 넓이우선탐색 깊이우선탐색은 한 분기가 끝날때까지 파고 조사한다. 넓이우선탐색은 해당 노드에서 가장 인접한 노드부터 조사한다. 트리에서 DFS의 탐색순서 순서 : 1 > 2 > 4 > 2 > 5 > 2 > 1 > 3 > 6 > 3 > 7 DFS 에는 전위, 중위, 후위순회방식이 있다. 전위순회방식 출력(부좌우) : 1 > 2 > 4 > …

그동안 카드 뒤집어서 짝맞추기, 지뢰찾기 등 게임 몇 개를 만들어봤는데 디자인에는 크게 신경을 쓰지 않았었다. 기능이 중요하지!! 하면서… 그렇지만 오늘은 유튜브에서 본 간단한 점프게임을 만들면서 이쁘게 꾸며보았다. 흡족하다. 이미지는 Pixabay에서 다운받았다. 만들면서 든 생각인데 슈퍼마리오 클론코딩하면 엄청 재밌을 것 같다. 호스팅은 파이어베이스를…

하려는 것 아마존 클론을 하고 있다. 아마존 배경화면을 보면 화면을 줄일 때 항상 이미지의 가운데 부분을 보여준다. 보통 이미지를 화면 중앙에 넣을 때 margin: 0 auto; 를 사용한다. 이렇게 하면 화면을 줄일 때 이미지의 가운데 부분만 보여주는게 안 된다. 왼쪽으로 고정되고 오른쪽 부분이 짤리게 된다. 위 3번째 그림처럼. 부모 div 두개로 …

리액트로 아마존 클론을 하고 있다. 헤더부분 검색창 클릭을 하면 주황 테두리가 이쁘게 딱 생기는데 의외로 쉽지 않아서 기록해본다. 마크업 참고로 돋보기 아이콘을 위한 태그는 material-ui.com 사이트를 이용했다. npm 으로 다운받고 이렇게 임포트 해준다음에 사용하면 된다. border vs outline input태그에 focus를 하면 …

리액트로 넷플릭스클론앱을 만들고 있던 도중 나온 에러들과 해결기록 (window) 중간중간 에러가 날 때 node_modules 폴더를 삭제하고 하고 를 다시 하면 해결이 되었다. 나왔던 에러 No render method found on the returned component instance code: ‘MODULENOTFOUND’ … 그런데 을 할…