오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

import React, { Component } from 'react' class Test extends Component { componentWillMount() { console.log('class => componentWillMount') } componentDidMount() { console.log('class => componentDidMount') } shouldComponentUpdate(nextProps, nextState) { console.log('class => shouldComponentUpdate') return true } componentWillUpdate(nextProps, nextState) { console.log('class => componentWillUpdate'..

라이프 사이클을 알아야 하는 이유 라이프 사이클을 모르라도 앱을 만들 수 있다. 하지만 여러가지 문제점을 접하게 될 텐데 어떤 부분에서 문제가 일어났는지 정확히 알 수 없게 된다. stateless의 경우 constructor가 실행이 되고 build가 실행되는게 끝입니다. stateful의 경우 constructor가 가장 먼저 실행이 되고 createState, initState, didChangeDependencies가 실행되고 build가 되고 위젯이 없어질때 dispose가 실행됩니다. setstate의 경우 위젯 내에서 state값이 변경될 때 실행이고 그 다음 build가 됩니다. didUpdateWidget의 경우 부모 위젯에서 업데이트가 발생할 때 실행됩니다. 코드를 보면서 이해해 보죠...

CupertinoTabBar를 이용하는 방법 https://stackoverflow.com/questions/49628510/flutter-keep-bottomnavigationbar-when-push-to-new-screen-with-navigator 문제점 CupertinoScafold에서는 scafold와 appbar를 사용할 수 없다는 단점이 있습니다. provider controller를 이용하는 방법 bottom_navigation_provider.dart import 'package:flutter/material.dart'; class BottomNavigationProvider extends ChangeNotifier { final List _indexList = [0]; int get c..

프로젝트 요약 기간: 22.09.26~22.10.21 설명: 경제 초보자들의 경제를 공부하기 위한 퀴즈 플랫폼 깃허브: https://github.com/oxopolitics-internship-for-codestates/MoneyPig/wiki 사용한 스택: Next.js, Tailwind CSS, storybook, firebase 작업 내용: 문제 풀기 페이지 작업 레이아웃 제작 퀴즈 페이지 제작 공통 컴포넌트 제작 버튼 컴포넌트 제작 default card 컴포넌트 제작 fourchoice card 컴포넌트 제작 ox card 컴포넌트 제작 quiz list card 컴포넌트 제작 result card 컴포넌트 제작 icon 컴포넌트 제작 header 컴포넌트 제작 sidebar 제작 fireba..

open graph 작업을 해주어야하는 이유 직접적인 영향을 주지는 않지만 meta tag 작업을 해주는 것이기 때문에 seo 최적화작업을 진행주는 것이기 때문에 seo 최적화 이점이 있다. 멋있는 미리보기를 보여줄 수 있다. https://ogp.me/ 태그사용법 이미지의 경우 최소한 600 x 315 픽셀은 되어야 하며, 1200 x 630 픽셀 크기를 권장 기본적으로 웹에 설정해줘야하는 og 메타태그 Naver 블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정 모바일 앱 미리보기 설정 모바일 앱이 존재하는 경우 앱으로 연결 시 노출

오픈 그래프(Open Graph)란? 인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 것이었고, 이후 트위터와 링크드인에서 이를 차용하여 더 나은 UX를 제공하는 데에 활용하고 있다. open graph 작업을 해주어야하는 이유 직접적인 영향을 주지는 않지만 meta tag 작업을 해주는 것이기 때문에 seo 최적화작업을 진행주는 것이기 때문에 seo 최적화 이점이 있다. 멋있는 미리보기를 보여줄 수 있다. https://ogp.me/ 태그사용법 이미지의 경우 ..

웹 폰트란? 정확히 무엇일까요? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 기본 사용법 font-face 규칙에는 다음과 같은 두 가지 세부 속성을 설정합니다. font-family: 사용할 웹 폰트의 이름을 지정합니다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없습니다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋습니다. src: 폰트 파일의 경로와 폰트의 형식을 지정합니다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정합니다. 웹 폰트의 렌딩 방식 Foit : 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작입니다. ..

프론트엔드 최적화에는 여러가지 방법이 있다. 폰트 최적화 이미지 최적화 등등 오늘은 그중에서 next js에서 lazy loading을 통한 로딩 속도 최적화에 대해서 알아보자 source 탭을 보게 되면 길게 다운로드 되고 있는 chunk file이 하나 있다. 이 파일은 처음 페이지가 로딩될 때 필요한 패키지들을 다운로드 하는 것인데 처음 페이지가 로딩이 이렇게 길어지게 되면 next js의 장점을 버려버리는 것과 같다. 최적화를 해주자 npm install @next/bundle-analyzer yarn add @next/bundle-analyzer 우선 webpack을 분석하기 위한 analyzer를 설치하고 "scripts": { "webpack-build": "ANALYZE=true next ..

분명 로그인을 해주었는데 쿠키에 jwt 토큰이 보이지 않는다. 이게 무슨 일인가 분명 얼마 전까지만하더라도 토큰이 잘 저장되어 있는 것을 확인할 수 있었다. 백엔드에 로그를 찍어보니 잘 생성이 되었다. 그렇다면 클라이언트의 문제라는 것인데 이게 어떻게 된 것일까? 문제가 되었던 코드 리팩토링하는 과정에서 withCredential 옵션을 넣어주지 않았다. withCredential을 truer값으로 설정해주어 해결하였다.

피드백 후 추가된 아이디어 테오구(필자) 경제 관련된 사이트 요즘 반드시 알야하는 경제 하지만 경제는 어렵게만 느껴지는 경제에 대한 정보를 한 곳에 모을 수 있는 사이트 이 사이트에서 제공하는 컨텐츠 요즘 반드시 알야하는 경제 하지만 경제는 어렵게만 느껴지는 경제에 대한 정보를 한 곳에 모을 수 있는 사이트 — 피드백 아이디어 자체는 정치와 관련이 있으니 괜찮다 이 사이트에서 제공하는 컨텐츠 경제 용어에 대한 풀이 - 해당 api 가 있다면 좋다 (해결) 경제 퀴즈 (경제 용어와 관련된 5지 선다 퀴즈라던지 ox퀴즈) - 퀴즈는 우리가 직접 만들어야 하는데 해당 지식은 개발자의 영역이 아니라 기획자의 영역이다. api가 있다면 좋지만 직접 만들어야 한다면 조금 고민을 해봐라 Q 다음 설명의 옳은 용어를 ..