분류 전체보기138

• 

  [React] useCallback / useMemo 일단 괜찮게 보이는 링크만 남겨둔다. useCallback / useMemo 참조 React Hooks: useCallback 사용법 Engineering Blog by Dale Seo www.daleseo.com React Hooks: useMemo 사용법 Engineering Blog by Dale Seo www.daleseo.com React & TypeScript/React 2021. 4. 13.

• 

  [CSS] PostCSS 장점 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com ▪️ CSS 전처리기는 무엇인가? PostCSS 는 CSS 전처리기를 의미한다. 기본적인 css 만으로는 (다른 브라우저와의 호환성을 위해서) 중복적으로 작성해야 하는 경우가 많기 때문에 반복적인 코드 작성을 최소화하고자 등장한 전처리기이다. 또 다른 CSS 전처리기인 Sass, Less 와는 다르며, Sass와 Less는 자체적으로 프레임워크에서 제공하는 문법이 있고 이 문법을 통해서 순수 css로 변환해주는 역할을.. HTML&CSS 2021. 4. 9.

• 

  [javascript] reference 사이트 MDN developer.mozilla.org/ko/docs/Web/JavaScript Jscript docs.microsoft.com/ko-kr/previous-versions/visualstudio/visual-studio-2010/72bd815a(v=vs.100) Javascript 사전 (생활코딩) www.opentutorials.org/course/50 Javascript/Basic 2021. 4. 9.

• 

  [javascript] 프로토타입으로 생긴 특징들.. (prototype based programming) 나중에 이해해두어야겠다.... 일단 자료는 퍼왔다. 자바스크립트는 일단 이 개념부터 이해할 수 있어야 편할 것 같다. 각종 생기는 effect가 이때문에 생기는 경우가 많다. 프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍이라고도 한다. 프로토타입 기반 언어의 가장 원조격인 프로그래밍 언어인 셀프는 데이비드 엉거와 랜덜 스미스가 개발했다. 클래스리스 .. Javascript/Basic 2021. 4. 9.

• 

  [javascript] class 문법 - super() 정의 아래 내용을 잘 읽으면 알 수 있다. super() 문법은 상위 클래스를 참조할 수 있게 하는 것이다. 여기서 this에 대한 궁금증도 생길 수 있는데, this는 작성하는 동안 구조의 맥락에 맞추어져서 상위 개체나, 생성자, 소속된 것에 대해 인스턴스화하는 구문이다. this를 통해 instance화 하고, 클래스의 구조를 엮어서 사용하는 것이다. (완전 정확하지는 않을 것 같다. javascript는 prototype언어이기 때문에 좀 더 정확히 알아볼 필요가 있다. 현재 나의 이해가 여기까지 닿을 뿐이다.) class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width.. Javascript/Basic 2021. 4. 7.

• 

  [React] 자식 컴포넌트에서 부모로 데이터 보내기 (child -> parent) by React Hook 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com #2021.06.25 내용 추가 : 이 것의 본질은 props 로 내려주는 것이 data가 아니라 function 이라는 것이다. 그 게 본질이다. 너무 어렵게 설명을 이리저리 했던 것 같다. 내가 이해한 본질은 이러했다. 리액트를 쓰다보면 parent의 props에 속성 값을 보내서, child에서 처리하는 것 뿐만아니라, child에서 처리한 것을 부모로 보내주어야 할 때가 있다. 아래와 같이 부모로 부터 전달받은.. React & TypeScript/React 2021. 3. 30.

• 

  [Dev] CallBack 콜백함수 콜백함수란 이름 그대로 나중에 호출되는 함수를 말한다. 콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다. 콜백함수도 일반적인 자바스크립트 함수일 뿐이다. 예를 들어, 이벤트 핸들러 같은 것을 콜백함수라고 할 수 있다. CallBack을 활용한 비동기적 프로그래밍 이 부분이 가장 큰 장점이다. 그리고 사실, 이 부분 때문에 사용하는 것이다. 1. 사용자 이벤트 처리 2. 네트워크 응답 처리 - A 응답이 있을 때, 그 다음 처리를 해야할 함수가 있을 때 사용된다. 3. 파일을 읽고 쓰는 등의 파일 시스템 작업 4. 의도적으로 시간 지연을 사용하는 기능 (알람 등) 대표적으로, setTimeout, setInterval, clearInterval 함수 같은 것이 있다. 출처 :.. Javascript/Basic 2021. 3. 29.

• 

  [For] 반복문 기초 (forEach/ ) forEach forEach는 가장 기본적인 Loop 메소드이다. 구동방식은 array의 map 함수와 같다. 배열을 순차적으로 i[0] ~ i[length - 1] 까지 확인하는 것이 가능하다. 작동 방식이 완전히 동일하다. // for 구문 버전 - 쓰지말자 const arr = [3, 9, 4, 2, 7, 6]; for (let i = 0; i { if (n % 2 == 0) { console.log(n); } }); 출처 https://b.. Javascript/For 2021. 3. 25.

• 

  [Array] 비구조화 구문 할당 (기본문법 / 추가문법 / 주의사항) 기본 문법 [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] 좌항이 호출될 변수명 집합, 우항이 할당될 값이다. 좌항의 각 요소에는 같은 index가 아니라 value가 할당된다. 또한 전개 연산자( ... )를 사용하여 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용할 수 있습니다. 나머지 값들은 배열로 ...rest_a 부분에 할당된다. 객체의 경우도 동일하다. 배열 대신 객체로 rest_a 부분에 할당된다. 추가 문법 우항의 key값에 변수명으로 사용 불가능한 문자열이 있을경우 아래와 같은.. Javascript/Array 2021. 3. 22.

• 

  [Array] 배열 다루기 (Concat/ Join/ Filter/ Find/ Map&forEach, Reduce, Slice) 스스로 배열에 대한 기본학습이 부족한 듯 하여, 추가적인 학습을 하고 기록을 시작함. 2021.03.18 1. concat const items = [1,2]; // output [1,2] const newItems = items.concat(3,[4],[[5]]); // output [1,2,3,4,[5]] concat 요약 사용시기 새 배열에 Element 추가 원본 조작 여부 X Return O 특징 parameter 1번 분해 주의사항 배열을 추가하려면, [[element]] 형태로 감싸야 함. Concat은 원본을 조작하지 않는다. Return 있음. 입력되는 parameter를 1번 분해한다. (*코드에서 [4] item이 배열이 아니라, element로 저장되는 것을 보면 알 수 있다. 2... Javascript/Array 2021. 3. 18.

• [git] clone하기 전에 해야할 것 1. 본인 컴퓨터에서 ssh 을 생성한다. 2. git사이트의 계정 내에 나의 ssh 정보를 등록한다. 3. git clone 명령어로 다운로드 받는다. 참조 :" xho95.github.io/macos/security/openssh/ssh/gitlab/2017/02/22/Using-SSH-on-Mac.html Dev-Basic/git 2021. 3. 10.

• 

  [Redux] 왜 쓸까? props의 상태 값에 따라 구동되어야할 함수들이 서로 의존적이지 않고 독립적으로 작성하기 위해서이다. 그래서 props에서 state(상태)가 변경되면, 그에 맞춰서 Action을 해주는 것을 reducer에서 정의하고, dispatch를 이용해서 render에 전달해주는 것이다. 이렇게 작성해야, reducer에서 정의한 상태값에 따라 작동되어야 할 Function(함수)들을 독립적으로 작동되게끔 작성하는 것이 가능하다. 함수도 단순하게 할 수 있으며, 리액트의 (독립적인)컴포넌트 구현 개념과도 일치하게 된다. Redux - 5.3. Redux의 적용 : state의 변화에 따라서 UI 반영하기 by 생활코딩 조금 더 깊게.. 조금 더 깊게 들어가면, dispatch가 전달해주는 action.type.. React & TypeScript/Recoil 2021. 2. 17.