티스토리

gaki

검색하기

블로그 홈

gaki

beenzi.tistory.com/m

프론트앤드 개발자 유병각의 블로그

구독자: 2

방명록 방문하기

주요 글 목록

[javaScript] Duck typing 이란 ? 계기: 자바스크립트 클래스의 implements 를 이해하기 위해서 우선, duck typing 이 뭔지 알아야 했기 때문에 우선, duck typing 을 공부함. Duck typing 은 객체의 속성이나 메서드를 기준으로 객체의 정체를 선정하는 방법이다. 이름에 그 힌트가 있다. 뒤뚱뒤뚱 걷고, 꽥꽥거리는 무언가는 오리이다. 라는 명제를 보면, 오리의 속성들로 오리라는 것의 정체를 정한다. 이처럼 duck typing 은 객체의 매서드나 속성을 바탕으로 객체의 정체를 정하는 방법이다. 예를들어 무엇이든 drive 시킬 수 있는 매직 완드가 있다고 하자. 스포츠카에 매직 완드를 휘두르면 스포츠카는 drive 하고, 골프채에 매직 완드를 휘두르면 골프채는 drive 한다. 하지만, 종이컵에 매직 완드를 .. 공감수 0 댓글수 0 2022. 7. 4.
[node] 맥 os 에서 Node 설치하기 https://memostack.tistory.com/274 공감수 0 댓글수 0 2022. 7. 4.
[javaScript] 클래스 프로토타입, 정적 매서드 [javaScript] 클래스 프로토타입, 정적 매서드 안녕하세요. gaki 입니다. 오늘은 자바스크립트에서 클래스 프로토타입 함수와 정적 매서드에 대해서 알아보겠습니다. 프로토타입은 자바스크립트에서 사용되는 독특한 기능으로 클래스 인스턴스를 만들때마다 클래스 내의 매서드를 일일이 정의하게 되면 메모리 낭비가 되기 때문에 클래스 인스턴스는 프로토타입에 접근해 함수의 매서드를 사용할 수 있습니다. 정적 매서드는 클래스 프로토타입 매서드와는 다르게, 클래스 인스턴스에서 사용 접근 할 수 없는 매서드입니다. 아래에서 더 자세히 설명하겠습니다. 1. 프로토타입 매서드 선언 방법 2. 스태틱 매서드 선언 방법 1. 프로토타입 매서드 선언 방법 자바스크립트에서 인스턴스를 생성하는 방법은 두 가지가 있습니다. 하나는.. 공감수 0 댓글수 0 2022. 5. 26.
[javaScript]자바스크립트 옵셔널 체이닝 연산자 설명 및 예제 안녕하세요. gaki 입니다. 오늘은 ES11 에서 추가된 옵셔널 체이닝 연산자에 대해서 알아보겠습니다 . 옵셔널 체이닝 연산자는 좌항의 피연산자가 null 혹은 undefined 인 경우 undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다. 1. 옵셔널 체이닝 연산자 설명 2. 옵셔널 체이닝 연산자 예제 1. 자바스크립트 옵셔널 체이닝 연산자 설명 옵셔널 체이닝 연산자는 ?. 입니다. 자바스크립트에서 객체의 프로퍼티를 가리킬 때, 객체가 undefined 거나 null 이면 타입에러가 발생합니다. 에러가 발생하면 프로그램이 강제 종료되며 이는 예기치 않은 버그를 만들어 낼 수 있습니다. 즉, null 이나 undefined 일수도 있는 객체의 프로퍼티에 접근하기 위한 방법은.. 공감수 0 댓글수 0 2022. 5. 10.
[JavaScript] 자바스크립트 find 함수 사용법 안녕하세요. gaki 입니다. 오늘은 배열에서 특정 값을 찾아주는 find 함수에 대해서 이야기 해보려 합니다. find 함수는 자바스크립트 Array 객체의 프로토타입 매서드입니다. 1. find 함수 설명 2. find 함수 예제 1. 자바스크립트 find 함수 설명 find 함수는 Array 객체의 프로토타입 매서드로 존재하는 함수입니다. 즉 따로 임포트 하지않고서, 배열에 바로 사용할 수 있습니다. Array.prototype.find() 시간복잡도: O(N) 함수는 아래와 같이 구성되어 있습니다. arr.find(callback[, thisArg]) find 매서드는 인자로 callback 함수를 받습니다. callback 함수가 참을 반환할때 까지 배열의 각 요소에 대해 callback 함수를.. 공감수 0 댓글수 0 2022. 5. 10.
자바스크립트 함수 선언문과 함수 표현식의 차이점은 무엇인가? 자바스크립트 함수 선언문과 함수 표현식의 차이점 선언문(statement) vs 표현식(expression) 먼저 표현식이란 어떤 변수에 할당 할 수 있는 식이다. let a = 10; // 숫자 리터럴 let fn = function (x,y) { return x + y }; let obj = {x : 1};위와같이 변수에 할당 할 수 있는 모든것은 표현식이라고 볼 수 있다. 반면 선언문은 표현식과는 반대로 변수에 할당 할 수 없다. if (x > 10) { count += 1; };대표적인 예로 if 문은 변수에 할당 할 수 없으므로 선언문이라고 할 수 있다. 함수 선언문과 함수 표현식 //함수 선언문 function add(x,y) { return x + y; } // 함수 표현식 // case1).. 공감수 0 댓글수 0 2022. 4. 19.
[번역]리액트를 언제 써야되는가? 원글: Patrickgak 왜 리액트를 쓰는가??? 그냥 자바스크립트로도 새로고침 없이 싱글페이지 어플리케이션 만들 수 있음. 심지어 자바스크립트는 리액트보다 자유도도 높아. 돔을 직접 가져와서 조작할 수도 있음. 그럼 리액트는 언제 써야되나? 일단 리액트는 컴포넌트를 랜더링, 리렌더링 해주는 코드를 사용자가 일일이 작성 할 필요가 없어. 그래서 코드 피로도가 낮아. 그리고 hooks 라는 매우 편한 기능이 있어서 바닐라 자바스크립트보다 훨씬 더 쉽게 상태를 관리할 수 있음. 또한 정해진 랜더링 순서가 존재하고 오류도 잘 띄워주기 때문에 디버깅하기도 수월해. 나는 리액트의 가장 큰 이점은 코드를 짤막하고 심플하게 짤 수 있다는것같아. 심플하다는건 정말 놀랍거든. 다른사람이 이해하기 쉽고, 친해지기 쉽고 .. 공감수 0 댓글수 0 2022. 4. 13.
자바스크립트에서 함수와 메서드의 차이점 자바스크립트에서 함수와 메서드의 차이점 function func() { console.log(1); }; const object = { method: function() { console.log(1); } } 위의 예시를 보면 알 수 있듯 메서드는 함수의 부분집합이다. 자바스크립트에서 함수는 1급 객체이기 때문에 object 의 프로퍼티에 값으로서 할당 될 수 있는데 이때 프로퍼티에 할당된 함수를 메서드라고 부른다. 공감수 0 댓글수 0 2022. 3. 5.
[React]How to optimize context value (번역) 원글: https://kentcdodds.com/blog/how-to-optimize-your-context-value — Kent C. Dodds 주의: 시작하기 전 알아둘것. 아래 조건에 해당하는 사항이 여러 개 있는 경우 컨텍스트 값 최적화를 효과적으로 도입 할 수 있습니다. 1. 컨텍스트 값이 자주 바뀔 경우 2. 컨텍스트 값을 사용하는 소비자 컴포넌트가 많을 경우 3. `React.memo` 의 느린 성능에 지친 경우 4. 당신이 프로그램을 실행 했을때 느리다고 생각하여, 최적화가 필요한 경우 만약 위 설명 중 해당사항이 있으면, 계속 읽으세요 (끝까지 읽고 더 나은 대안을 놓치지 마세요!). 정말로 대안은 확실히 좋을 겁니다. 심지어 나는 원래 작성했던 블로그 포스트를 삭제하고 다른 더 나은 .. 공감수 0 댓글수 0 2022. 3. 3.
[react] Fragments React Fragments 사용법 import {Fragments} from 'react'; use 사용 이유 하나의 컴포넌트에서 여러개의 엘리먼드를 렌더링 할때, 리액트에서는 하나의 부모로 묶어줘야한다. 이때 를 사용해 묶으면, 의도와는 다르게 ui 가 보여질 수 있다. 따라서 아무 역할 없이 단지 Fragment 를 만드는 react.Fragments 혹은 를 사용하면 원하는 대로 ui 를 만들 수 있다. 코드 import { Fragment } from "react"; export default function Row({ content, fee, content2, fee2 }) { return ( {content} {fee} {content2} {fee2} ); } 공감수 0 댓글수 0 2022. 3. 2.
[react] forwardRef Forward Ref useRef 를 사용해 엘리먼트를 참조할 때, ref 를 자식 컴포넌트에게 props 로 전달 할 수 없다. export default function Children(props) { const ref = props.ref; // 에러발생 console.log(ref); // 에러발생 return 클릭; }이때 forward ref 를 사용하면, 부모에서 정의한 ref 로 자식의 엘리먼트를 참조 할 수 있다!! (참고로 forwarding 은 전송이라는 뜻이며 즉, ref 를 자식 컴포에게 전송한다 라는 의미이다.) 코드 부모컴포넌트 import { ConstTypeChild } from "./ConstTypeChild"; import FunctionTypeChild from "./.. 공감수 0 댓글수 0 2022. 3. 2.
[개발일지] 2.8 에러메세지는 구체적으로 콘솔에 띄우기 오늘의 코딩 목표 현재 목록 페이지에서 을 눌렀을 때, 내가 가입된 팀 목록을 보여주는 페이지를 만들고 팀목록 페이지에서 팀만들기도 진행 할 수 있게 만들예정이다. 결과 TeamList 를 불러오는 api 가 아직 구현되지 않아서 팀 목록을 보여주는 페이지를 100% 구현하지는 못했지만, 로직은 다 짜둔상태이다. 그 외 app.js 에서 getUserInfo axios 의 결괏값이 올바르게 처리되지 않는 에러를 수정했다. 감상 useDispatch 는 리액트 컴포넌트에서만 사용할 수 있다. 즉, 리덕스의 상태를 바꾸는건 리액트 컴포넌트에서만 가능한 일이다. 백앤드 개발자, 프론트 개발자의 편의를 위해서는 콘솔 에러를 구체적으로 출력해주는게 디버깅에 도움이 된다. ex) console.log("로그인 에러.. 공감수 0 댓글수 0 2022. 2. 8.
2.7 개발일지 오늘은 새로 만든 랜딩페이지에 맞춰 기존의 로그인,회원가입 페이지의 css 를 수정했고 myprofile 이라는 새로운 페이지를 만들었다. 공감수 0 댓글수 0 2022. 2. 8.
미디어쿼리 미디어쿼리 미디어 쿼리는 웹사이트의 화면 넓이에 따라 view 를 다르게 보여줄 수 있는 css 코드이다. @media screen and (max-width: 768px) { span { width: 20px; } } 위의 코드와 같이 사용할 수 있으며, 특정한 넓이에서 css 스타일링을 재정의 할 수 있다. 미디어 쿼리를 사용하면 반응형 웹사이트를 만들 수 있다. 공감수 0 댓글수 0 2022. 2. 7.
Async 와 await async 와 await 의 개념 서버로 비동기 요청을 보낼 때 코드가 예상과는 다르게 작동할 때가 있다. import axios from "axios"; function getRequest() { return axios({ method: "get", url: "https://jsonplaceholder.typicode.com/todos/1", }); } function getInfo() { const data = getRequest().then((res) => res.data); console.log(data); // Promise { } } getInfo(); 위의 코드에서 서버로 요청을 보내 값을 data 라는 변수에 저장한 뒤, 해당 값을 사용하려고 한다. 하지만, 위의 경우에 콘솔에 찍히는 da.. 공감수 0 댓글수 0 2022. 2. 4.
자바스크립트 클로저란 무엇인가? 자바스크립트 클로저란 무엇인가? 요약 클로저란, 함수의 컨택스트가 사라져도 해당 컨택스트에 존재하던 변수에 접근할 수 있는 함수를 말한다. 예시 코드 function first() { let count = 0; return function second() { console.log(count); count += 1; } } const closer = first(); closer(); // 0 closer(); // 1 closer(); // 2 설명 위의 코드에서 closer 라는 상수에 의해 first 라는 함수가 실행되면 second 라는 함수를 리턴하고 가비지 컬렉터에 의해 제거된다. 그 말은 즉슨 first 라는 함수 스코프에 존재하던 count 라는 변수 또한, 제거되었음을 나타낸다. 하지만, c.. 공감수 0 댓글수 0 2022. 2. 2.
React-Redux - 1 React-Redux 의 API, Hooks 1. Provider React Redux includes a component, which makes the Redux store available to the rest of your app Provider 는 stroe 에 접근해 state 를 사용 할 수 있게 해준다. / 앱 최상단을 감싸는 부모컴포넌트이다. import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import store from './store' import App from './App' const rootElement = document.getElementById('r.. 공감수 0 댓글수 0 2022. 1. 19.
p5.js 와 three.js 의 함수들을 비교해보자. -p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의.. 공감수 0 댓글수 0 2022. 1. 15.
p5.js 와 three.js 의 함수들을 비교해보자. -p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의.. 공감수 0 댓글수 0 2022. 1. 15.
리액트의 동작 원리 및 불변성 리액트의 동작 원리 리액트는 state, view, action 으로 구성됩니다. 리액트는 현재 state 를 기준으로 UI 를 렌더링합니다. 특정 이벤트로 인해서 action 이 발생하여 state 가 변경되면 UI 는 리랜더링 되어서 변경된 state 를 기준으로 새로운 view 를 보여줍니다. React 는 어떻게 state 가 변경되었다는걸 알아낼까요? 이전 state 와 변경 후의 state 를 빠르게 비교하는게 성능상의 이점을 가져옵니다. 그래서 React 는 Obejct.is(prevState, newState) 를 활용하여 state 의 변경상태를 알아냅니다. 이것이 React 에서 불변성이 중요한 이유입니다. 예를들어 { number : 13, age : 24} 라는 state 가 있다고.. 공감수 0 댓글수 0 2022. 1. 11.
풋볼러브 프론트 (1.10) 일주일에 4번 2시간씩 프로젝트를 하는데 요즘 너무 바빠서 블로그에 글을 올린건 오랜만인것같다. 지금 팀생성 페이지에서 꾸밈요소를 좀 만들고싶어서 p5.js 를 사용해서 광고판을 만들고있다. 이렇게 오렌지색 구슬 사이에 풋볼러브라고 글자가 자동으로 써지게끔 만들고있다. 이를 위해서 글자가 써지는 위치의 좌표를 얻어야하는데 처음에는, 노가다로 계산할까 했다가 생각해보니 좌표를 얻을 수 있는 방법이 있어서 그 방법을 사용했다. const mouseReleased = () => { console.log("mouseRelease"); console.log(JSON.stringify(xPos)); console.log(JSON.stringify(yPos)); }; const mouseDragged = (p) =>.. 공감수 0 댓글수 0 2022. 1. 10.
풋볼러브 프론트 (1.3) 풋볼러브 프론트 (1.3) 오늘 꽤 많은 작업을 했다. 먼저 로그인 성공시, 네비게이션바의 컨텐츠가 바뀌도록 만들었다. 또한 새로고침시, 로그인이 유지되도록 LocalHost 에 로그인 정보를 저장해두었다. (이것보다 보안적으로 더 좋은 방법이 있을 것같은데 나중에 찾아봐야겠다.) 또한 프로필 페이지를 어도비 xd 로 대충 구상한다음 구현중이다. 내일 할 작업: 프로필 페이지 완성 및 유저정보 가져오는 api 테스트 및 로그인 유지여부 테스트 공감수 0 댓글수 0 2022. 1. 4.
풋볼러브 Front (12.29) 풋볼러브 Front (12.29) 오늘 수행 작업 : 회원가입 페이지 리펙토링 당근마켓 프론트 개발자 Nash 에게 코드리뷰를 받았는데, 내 코드의 문제점중 하나가 회원가입 페이지에서 onChange 이벤트로 input 값이 바뀔때마다 state 를 업데이트시켜서 joinData 를 최신화 시켰었는데, 문제는 이 방법이 비효율적이라는 것이다. 그래서 Nash 는 Form 태그를 이용해서 굳이 state 를 사용할 필요 없이 간단하게 joinData 를 서버로 전송할 수 있는 방법을 알려줬고 이를 적용했다. const [newUserInfo, setNewUserInfo] = useState({ id : null, pwd : null, nickname : null, address:{ city : '서울', .. 공감수 0 댓글수 0 2021. 12. 29.
풋볼러브 프론트 (12.28) 오늘 시행 작업 : 로그인 페이지 구현 완료. ( mui 를 사용했는데, 진짜 개편하다. 지금까지 일일이 이펙트를 구현했었는데 생고생했던것같음. ) 다음에 해야 할 작업 : 로그인 인증 기능 구현해야함. https://www.daleseo.com/react-router-authentication/ React Router로 사용자 인증하기 (로그인/로그아웃) Engineering Blog by Dale Seo www.daleseo.com 여기를 참고해서 구현하자. DevKor 해커톤 코드를 보니깐, 거기서는 리덕스를 이용해서 구현을 했던데 그건 나중에 해보자. 일단 내일 해야할것 1. 최상단 App 컴포넌트에 Auth 컴포넌트 구현하기. 2. 로그인 완료되면 메인페이지로 리다이렉션 및 헤더 내용 바꾸기 3.. 공감수 0 댓글수 0 2021. 12. 29.
풋볼러브 Front (12.27) 풋볼러브 Front (12.27) 작업내용: 로그인 페이지 구현 mui 에서 디자인을 가져와서 사용하는게 시간적으로 훨씬 이득이다. 원래는 일일이 모든 컴포넌트를 구현했었는데, 이는 현명하지 못한 방법이라는걸 깨달았다. 공감수 0 댓글수 0 2021. 12. 28.
12.27 FootBallLove 코드리뷰 첫번째 문제 : Lint(사소한 import 오류같은거) , Prettier(탭 관련) 를 사용하지 않는 것. 두번째 문제 : 시멘틱 태그 공부하기. 파일이름 및 div 이름 의미있게 짓기 SASS Stitches (커맨드 쉬프트 f) 세번째 문제 : 로그인, 회원가입 input 태그를 form 으로 바꾸면 성능 향상됨. input 태그 validation 을 넣을 수 있음. 네번째 문제 : 슬라이드 깨지는거 다섯번째 문제 : css는 css 에서. (인라인으로 css 관리 하지 말자 성능안좋음) 여섯번째 문제 : 모달을 ref 혹은 css 로 관리 일곱번째 문제 : 타입스크립트 MATERIAL UI 공부할것 ::과 : 브라우저 랜더링 원리 공감수 0 댓글수 0 2021. 12. 27.
나의 성장 그림 Front(12.27) 나의 성장 그림 Front 12월 일 작업 일지 오늘 시행 작업 : React 에 canvas 를 연동하는 방법에 대해서 공부하고 실습했다. useRef 를 이용해 canvas 와 canvas context 를 연동하면 되고, 조금 더 고차원적인 방법으로 canvas 관련 함수들을 context 에 담는 방법인데 이 방법은 추후에 공부해볼 예정이다. webgl 을 이용해서 우주를 구현하고, 그 우주 위에 타이머를 구현할 예정이다. 그리고 타이머 설정 버튼 및 타이머 중지 버튼을 만들예정. 해야할것: webgl 사용법을 익히기. 완료 일자 : 1월 20일 까지 참고 사이트: http://judnich.github.io/Kosmos/ Kosmos 3D Graphics Error! Unfortunately, .. 공감수 0 댓글수 0 2021. 12. 27.
나의 성장 그림 Front(12.26) 나의 성장 그림 Front 12월 26일 작업 일지 오늘 시행 작업 : 디자인 구상 완료 일자 : 1월 20일 까지 ( D - 25 ) 타이머와 모래시계 애니메이션을 같이 만들고 싶다. 이를 구현하기 위해서는 1. React 에 canvas 연동하는 방법 2. 모래시계 애니메이션을 만드는 방법 3. React Canvas 위에 타이머를 구현하는 방법 4. Canvas 에 타이머 설정 버튼 및 중지 버튼 만드는 법 을 공부해야한다. 공감수 0 댓글수 0 2021. 12. 26.
풋볼러브 Front (12.24) 풋볼러브 프로젝트 Front 작업 내용: 로그인 페이지 디자인 구안 및 구현 작업 후 : 공감수 0 댓글수 0 2021. 12. 24.
나의 성장 그림 Front(12.24) 나의 성장 그림 Front 12월 24일 작업 일지 완료 일자 : 1월 20일 까지 ( D - 27 ) 작업 전 : 작업 후 : 오늘 시행 작업 : 사실 외관상으로 달라진건 거의 없지만, 내부적인 동작 매커니즘에 대해서 결정했던 시간이였다. 먼저 todo item 앞에 있던 원을 없애고, 그냥 글자를 클릭하면 색깔이 변하는 식으로 check 를 진행할 생각이다. ( red or green ) 또한 todo items 의 data format 에 대해서 결정했는데, 년,월을 기준으로 서버에 요청을 보내면 해당 년,월에 해당하는 todo items 를 리스트 형태로 준다. 예를들면 2021.12 로 요청을 보내면 [ [{todo: "피아노", checked:false}, {todo:"프로젝트", checke.. 공감수 0 댓글수 0 2021. 12. 24.

문의안내

티스토리
로그인
고객센터

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