Bleeding edge

프로젝트를 시작하게 된 계기 Notion prettier는 현재 진행하고 있는 오픈소스 프로젝트 팀원이 노션에 코드를 작성하면서 텝이나 스페이스바를 연타하는 것을 보면서, 노션에 프리티어를 적용하면 어떨까요? 라고 내가 팀원에게 물어보면서 그런게 있으면 당장 쓸 것 같아요 라는 이야기를 듣고나서 시작했다. 프로젝트 이름 정하기 Markdown helper 처음에는 이름이 Markdown helper라는 이름으로 프로젝트를 만들었는데, 다른 사람에게 프로젝트를 설명할 때 프로젝트 이름만으로는 프로젝트를 설명하는 것이 어려워서, 이름으로 프로젝트를 쉽게 설명하는 이름이 없을까 고민하다가 Notion에서 Prettier를 사용하니 Notion Prettier로 하는게 어떨까 하고 변경했다. (지은게 아니라 그..

문제점 자동완성의 keyword의 symbol을 나타내는 폰트에 문제가 있었다. 문제 원인 자동완성이 뜨기 이전까지는 볼 수 없는데.. 이 현상은 con와 같이 자동완성이 가능한 keyword가 있을 때 폰트를 request하면서 문제가 생긴다. 해결책 평범한 web에서는 아마 이러한 문제가 생기지 않았겠지만, chrome extension에서는 내가 웹주소에 폰트를 올릴 수 없기 떄문에 이러한 문제가 생길 수 있다. 이 문제를 node module에 있는 monaco editor에서 찾는다는 것은.. 잘못된 방법이고, 최종적으로 생성되는 파일의 e.exports=n.p+"b797181c93b3755f4fa1.ttf" 이 부분을 수정할 필요가 있었다. 이 파일이 실행될 경로에 자동으로 생성될 텍스트 파일..

올해 시작 2022년 1월 말에 일을 그만두고 개발을 시작하기로 결심하고 제로베이스의 커넥투에서 진행하는 (전 네카라쿠배 스쿨)에 들어가는 것을 1차 목표로, 그리고 교육이 끝난 후에는 원하는 기업에 들어가는 것을 목표로 공부를 시작하였다. 올해 목표 올해 1월에 일을 그만두고 개발을 시작하면서, 제로베이스에서 진행하는 커넥투(전 네카라쿠배 스쿨)에 들어가는 공부를 첫 번째 목표로 하고, 두 번째로는 이후에 워하는 기업에 들어가는 것을 목표로 공부를 시작하였다. 위 두 목표를 이루기 위해서는 저 목표를 이루기 위해 좀 더 세밀한 목표를 세울 필요가 있었다. 1. 글쓰기(문서정리) 커넥투에서 글을 정말 잘쓰는 분을 봤었는데, 프로젝트가 끝나면서 그 프로젝트에서 무엇을 배웠고 무엇을 고민했는지와 같은 프로젝..

Why? 리액트에서 페이지 이동을 할 때 페이지가 이전 페이지의 위치가 유지되는 현상이 있었다. SPA에서 다른 페이지로 이동할 때 자연스러운 느낌이 들지 않아서 페이지를 위로 올려주는 방법이 필요했다. 해결방법 import {useEffect} from "react" import {useLocation} from "react-route-dom" export function Component(){ const {pathname} = useLocation(); useEffect(()=>{ document.querySelector('#scrolled-it').scrollTo(0,0) }, [pathname]) ... } 고민해야할 것 scroll이 되는 대상은 스크롤이 내려진 component이기 때문에 스크..

JSON-LD? JavaScript Object Notation for Linked Data의 약자로 JSON을 이용하여 링크드 데이터를 인코딩하는 방식을 말한다. 사용하는 이유 검색 엔진은 사람과 다르게 검색어를 인식하기 때문에, 얼음과 얼음 공주과 같이 다른 검색어를 띄워야하는 결과에 대해서 다르게 인식하지 않습니다. 메타 정보나 콘텐츠 내용 상에 명확하게 정의가 되어 있다면 문제가 없겠지만, 그런경우가 아니라면 우리가 의도하지 않는 방향으로 검색 엔진이 이해할 수 있습니다. ⇒ 검색 엔진에 더 많은 정보를 전다할 수 있다. 작성 방법 구조화된 데이터 작업을 위해서는 schema.org에서 제공하는 타입(type)과 속성(property)값을 이용하여 제작할 수 있습니다. 코드 입력 위치 head 혹..

react-wai에서는 Styled components, allWAIs에서는 Emotion을 사용했다. 컴포넌트를 react-wai에 있는 스토리북을 사용해서 만들어도 됬지만.. react-wai를 만들면서 컴포넌트를 구현을 빠르게 하다보니 emotion을 이용하여 컴포는트를 만들고 라이브러리에 컴포넌트를 올렸더니 문제가 생겼다. 1. Cascading? 의도치 않던 cascading이 일어났다. 혹시 테스팅이 적어서 확인을 못했나? 라고 생각해서 다시 emotion으로 실행해봤다. 이 둘의 css를 비교하면서 알게 된 것은, 여기서 재사용성이라는 것은 일반적으로 css가 작동하는 방식처럼 변수가 바뀌어도 이전에 있던 값들이 영향을 미친다. 즉, styled-components는 css와 비슷하게 작동한..

1. 문제 : Title type Title component의 type 에 문제가 있다. export interface ITitleProps { lv: 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'; hidden?: boolean; focusable?: boolean; children?: string; restProps?: unknown[]; forwardedAs?: string | React.ComponentType; } 문제는 restProps?: unknowon[]에 문제가 있다. 지금 Title의 구조를 보면 heading tag가 바깥을 감싸고 있는 구조이기 때문에 heading에서 받을 수 있는 모든 attributes를 사용할 수 있..

import * as React from 'react'; import { Button } from 'react-native'; import { useNavigation } from '@react-navigation/native'; function MyBackButton() { const navigation = useNavigation(); return ( { navigation.goBack(); }} /> ); } 리액트는 SPA이기 때문에 (물론 페이지마다 리액트르 구동하는 방법을 중간에 섞는 방법을 이용하여 SPA가 아닌 방식을 사용할 수 있기는 하다) History를 바꾸는 것이 일반 html에서 페이지 이동에서 사용하는 방법과 다르다. 일반적인 javascript를 이용한 web의 페이지 redi..

이전에 작성했던 private key를 공개적으로 사용하면 안되기 때문에, env 파일을 숨기는 과정이 필요했다. env를 숨기기 위해서 github에서 제공하는 secrets를 사용했다. 오늘 사용하는 방법은 git action에서 사용하기 때문에 secrets > actions를 사용한다는 것을 명심해야한다. (처음에 code space에서 해야하는 건 줄 알고 오해하고 시간을 엄청 날린 경험이 있어서 메모한다..) 지금은 react를 사용하여 레포를 만들 예정이기 때문에, 접두사에 REACT_APP을 붙여야 한다. 사용할 키들을 모두 넣고 나면, 이에 맞는 env파일을 git actions로 생성하거나 env 처리를 해줘야한다. name: CI on: [push] jobs: build: runs-o..