야금야금 코딩 기록

[IT Lifehack] Bitbucket PR을 Slack에서 알림받기

Nagneo — Thu, 9 May 2024 20:05:52 +0900

PR 확인 하셨을까요?

회사에 출근하면 하루도 빼먹지 않고 하는 것 같은 말이 있다면, 그것은 바로 'PR 확인 부탁드립니다~ '인것 같다.

하루는 출근하자 마자 옆자리 동료가 '혹시 제 PR리뷰 확인하셨을까요?' 라고 했는데, 내가 이미 리뷰한 사항이었다.

문득 다음과 같은 생각이 났다.

하루에도 여러번 반복하는 말

PR 리뷰, 댓글, 승인자동으로 알림 받고 싶다.

기존에도, 이메일로 bitbucket활동에 관해 메일을 받고 있기는 했지만, 사실상 메일은 목록만 봐서는 직관적이지 못하고 여러개의 알림메일이 혼재되어 있어 회사에서는 메신저로 slack을 사용하고 있었기 때문에, 당연히 관련 플러그인이 있을거라고 생각하고 검색해봤다. 결론적으로는 Bitbucket에서 일어나는 여러가지 활동을 Slack에서 구독 가능하고 알림 받을 수 있다. 이를 통해 협업이 한층 더 편해졌다. 우선은 FE유닛에서 사용해보고 조만간 개발팀에도 공유해야겠다.

Slack에서 Bitbucket Cloud 연동하기

1. Slack에서 왼쪽 네이게이션 하단 > 앱 추가 > Bitbucket 검색 > Bitbucket Cloud 선택

2. /Bitbucket connect <repository-url> 명령어로 Bitbucket 저장소 연결하기

이 때, 내가 해당 계정의 admin 권한이 있어야만 해당 명령어가 정확하게 동작한다.

3. Slack Notification 관련 설정 하기

제대로 명령어를 쳤다면, 새로운 브라우저 창이 열리고 아래와 같이 slack 알림을 설정 할 수 있다. 특정 채널을 지정하고 add버튼을 누르면 아래와 같이 설정 창이 뜬다.

PR 생성, 승인, 거절, 병합, 댓글, 멘션등 다양한게 받을 수 있고 특정 브랜치 관련한 알림도 받을 수 있다.

우리팀은 아래와 같은 알림만 받아보기로 설정하였다. ~~알림 지금도 너무 많아 최대한 줄여버려~~

4. 연동 결과 확인하기

아래와 같이 #bitbucket_notify_fe 채널에 설정한 알림들이 멘션기능과 함께 잘 온다. ~~근데 멘션기능은 좀 되다 안되다 하는듯? 역시 깃가야하나..~~ 이상 PR 독촉 쉽게 하기 끝

Lighthouse 품질 분석하기 - 개선 사례 (1) (feat. SEO)

Nagneo — Fri, 3 May 2024 20:44:25 +0900

There are no solutions: there are only trade-offs.

해법이라는 것은 없다. 오직 절충만이 있을 뿐이다.

프로그램의 성능은 비즈니스 요구사항 충족이라는 우선적인 과제에 늘 밀리기 마련이지만, 개발자에게는 성능을 관리하고 개선 시켜야할 역할과 책임이 있다고 생각한다. 성능을 개선하기 위해서는 먼저 성능을 측정해야 한다. 그래야만 성능이 개선 되었을 때, 어느정도 개선되었는지 그 수치를 정확하게 측정할 수 있다.

오늘은 Lighthouse에서 웹페이지의 품질을 분석하고 그 분석 결과를 통해 간단한 개선 위주로 정리해보려고 한다. 회사에서 일본 웹 서비스의 SEO 개선을 목표로 하고 있어, 점진적으로 개선을 시도할 예정이다. (~~SEO를 핑계로 프로그램 성능 왕왕 업그레이드 해보자구.!!!~~)

Lighthouse 소개

Lighthouse는 크롬에서 제공하는 웹페이지의 품질을 개선하기 위한 오픈소스 자동화 도구이다. 성능을 개선한다? 그럼 개발자도구의 Performance 탭과 더불어 가장 먼저 기본적으로 사용해볼 수 있는 도구 이다. 크게 다섯가지 항목에 대해서 검사(audit)를 진행한다.

Performance: 성능
Accessibility: 접근성
Best Practices:
SEO
그리고 Progressive Web App

검사를 진행하는 방법에는 크롬 확장도구를 이용하는 방법, 개발자 도구에서 이용하는 방법, CLI에서 사용하는 방법, 검사 사이트를 이용하는 방법 등등 여러가지가 있는데, 이 포스팅에서는 개발자도구를 이용해서 분석하는 방법을 설명하려고 한다.

분석 결과 및 문제 해결

Performance

성능 측정 값은 측정 할때마다 변할수 있는데 이는 인터넷 트래픽, 컴퓨터 사양 등의 영향을 받기 떄문이다. 5가지 항목정도 있지만, 그중에서 나는 LCP 시간 감소와 Render-Blocking 시간 감소 두가지에서 개선을 진행하였다.

Largest Contentful Paint Element: 콘텐츠가 포함된 최대 페인트

사용자가 처음 페이지로 이동한 시점을 기준으로 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간. GOOD의 기준은 2.5초, POOR의 기준은 4.0초이다.

⛳️ 용어 정리 하고 가자

코어 웹 바이탈
좋은 사용자 경험을 제공하기 휘애 어떤 점을 개선해야 하는지에 대한 웹 성능 지표이다. 크게 LCP, FID, CLS가 있다.

Cf) FCP(First Contentful Paint)
사용가가 처음 페이지로 이동한 시점을 기준으로 우수한 사용자 환경을 제공하려면 FCP가 1.8초 이하여야 한다.

일본 웹 서비스의 경우 최초 사이드 진입시 APP CTA버튼이 있었는데, 해당 이미지를 webp로 바꾸고(Render Delay), <img> 태그에 fetchpriority="high"로 attribute를 삽입하였다.

Eliminate render-blocking resources

기존에는 Google Font를 동기적으로 블러와 이미지를 최적화 하였다. web.dev에서는 폰트를 인라인 @font-face로 선언하여 처리하기를 권장하고 있는것 같았자만, 가장 적은 변경으로 최대 효과를 내고자 했던지만 일단은 우선적으로 link태그에 요소를 삽입하여 font를 비동기적으로 불러와 오류를 해결하였다.

구글 폰트로 인한 render-blocking

// _document.js
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap"
  rel="stylesheet"
  media="print"
  onload="this.onload=null;this.removeAttribute('media');" fetchpriority="high"
/>
<noscript>
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap"
    rel="stylesheet"
  />
</noscript>

Accessibility

접근성 검사의 해결 방법은 비교적 간단하다.

[user-scalable="no"] is used in the <meta name="viewport">...

웹 페이지의 확대는 기본적으로 허용되어야 하는데 그 이유는 부분 시력, 저시력의 사용자가 웹의 텍스트를 더 쉽게 읽을수 있도록 하기 위해서 이다. 단, 경험적으로 봤을때 해당 옵션을 true로 했을 때 일부 모바일 기기에서 (특히 iOS) 의도하지 않은 scale-up으로 인해(예컨데, <input> field focusing) 문제가 발생하지는 않을지 고려가 필요하다. 가중치는 10점이다.

<html> element does not have a [lang] attribute

Screen Leader와 같은 기능을 사용할 때 해당 속성을 기본으로 페이지를 읽어준다. 따라서 lang 속성에 유효한 값이 있어야 하낟.

SEO

Image elements do not have [alt] attributes

SEO는 정말이지 alt를 엄청나게 중요하게 생각하는 거 같다. 전역 검색을 통해 모든 alt태그에 값을 추가해준다.

개선 결과

개선 결과를 간략하게 표시하면 다음과 같다. 다음에는 사용하지 않는 스크립트와 스타일 시트를 최적화 하는 방향으로 개선을 시도해보고자 한다.

Performance: 51 -> 69 (35% 향상)
Accessibility: 51 -> 91 (78% 향상)
SEO: 92 -> 100 (8% 향상)

Reference

라이트하우스 Chrome For Developers

개요 | Lighthouse | Chrome for Developers

Lighthouse를 설정하여 웹 앱을 감사하는 방법을 알아봅니다.

developer.chrome.com

Asynchronouse Google Fonts

Asynchronous Google Fonts For Page Speed

Eliminate the render blocking effect of Google Fonts and optimize for page speed by loading font CSS asynchronously and adding a preconnect resource hint. Hold On! Before we get into the finer points of optimizing Google Fonts, don't forget to first apply

pagespeedchecklist.com

CORS(Cross-Origin Resource Sharing)와 CORS 오류

Nagneo — Thu, 2 May 2024 20:51:58 +0900

CORS

"저희는 이 api 클라이언트에서 써야하는데.. 그럼 CORS 처리해주시나요?"

최근 회사에서 통합 검색 api를 다른 도메인으로 요청하라는 개발 사항을 전달 받고 다시 떠오른 CORS 이슈.

누구나 겪었지만, 누구나 제대로 알고 처리하는 것은 아니기에 이제라도 제대로 정리해보자는 마음으로 정리해본다.

CORS를 설명하기 위해서는 먼저 SOP를 알아야 한다.

SOP

Same-origin Policy (동일 출처 정책) 란?

Same-origin Policy(MDN)

: 하나의 출처에서 만들어진 문서/스크립트가 다른 출처의 자원과 어떻게 상호작용 할 것인가에 대해 제한하는 주요 보안 방식
: The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

SOP란 말 그대로 보안을 위해 동일 출처의 요청에만 응답하도록 만든 정책이다. 예컨데, 악의적인 웹 사이트의 공격으로 개인적인 정보 (메일이나 회사 인트라넷 정보 등)가 유출 되는 문제를 해결하기 위해 브라우저에서 지원한다.

Same-origin(동일 출처) 란?

그렇다면 동일 출처란 무엇일까? 쉽게 설명하자면 Protocol, Port, Hostname 같은 URL을 의미한다.

URL 구성 요소

그렇다면 다음중 http://localhost와 동일 출처인 url을 찾아보자.

URL	동일 출처 여부
https://localhost	X
http://localhost:80	O
http://127.0.0.1	X
http://localhost/api/cors	O

정답은 2, 4번이다. http의 경우 기본 포트가 80포트가 생략되어 있기 때문에 2번과 같다. 4번의 경우 protocol, port, host가 같고 path만 다르다.

Cross-origin 지원

만약 다른 서버로 부터 응답을 받고 싶다면 어떻게 해야할까? 브라우저에서는 이미 몇가지 방식의 http요청에서 cross-origin을 허용하고 있다. (embedded CORS) 그 사례는 아래와 같다.

<script src="…"></script>
<link rel="stylesheet" href="…">
<img>
<video>
<iframe>
@font-face

그 밖의 교차 출처를 허용하기 위해서는 서버가 HTTP 응답 헤더에 허용하는 다른 출처를 명시해야 한다.

CORS

Cross-Origin Resource Sharing (교차 출처 리소스 공유) 란?

CORS

추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

그렇다. CORS를 오류가 아니고, 일종의 정책이다. 아래 세가지 요청 방식에 따라 '교차 출처 간 정보 공유'(cross-origin resource sharing)를 할 수 있다.

Preflight Request

OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP요청을 보내 실제 요청이 전송하기에 안전한지 확인하는 방법
cross-origin 요청으로 인해 실제 서버 데이터에 영향을 주지 않기 위해 사용된다.

요청 헤더 및 응답 헤더에 필요한 정보들

Simple Request

preflight와 달리 cross-origin을 별도 확인과정 없이 바로 자원을 요청하는 방법
Simple Request의 문제점 - 서버가 CORS처리가 되어 있지 않을 경우를 고려하지 않는다. (멱등하지 않은 HTTP 요청시 문제)
Content-Type 헤더는 다음의 값들만 허용된다.
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain

Credential Request

HTTP 헤더에 인증 정보를 포함하여 요청하는 방법
Access-Control-Allow-Origin에 *를 포함할 수 없음.
아래는 토스 테크 블로그에서 Credential 요청으로 toss.tech에서 api-public.tosss.im으로 블로그 정보를 가지고 온 경우

CORS 오류 대응하기

Access to XMLHttpRequest at {server url} from origin {client url} has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

cors를 제대로 이해했다면, CORS오류에 대응하기 쉬워진다. 위에 세가지 방법 중 하나의 방법을 선택하고, api 요청 헤더 및 응답 헤더에 필요 정보를 기록하면 된다. 일반적으로 응답헤더에 Acccess-Conrol-Allow-Origin에 *를 넣고 처리하기 쉽지만, 이건 보안상 위험하기 때문에 좋은 방법이 아니다. 특별히 멱등하지 않은 HTTP 메소드(POST, PATCH)를 사용할 때는 preflight 또는 credential을 필수적으로 고려해야 한다.

Cf. 프록시 서버 설정으로 Same-origin인 척하기

일반적으로 프레임워크에서 프록시 설정하는 것도 CORS 때문이다. 배포전 로컬환경에서 개발할 때에는 위와같은 CORS오류를 해결하기 위해 NextJs, NuxtJs 등의 프록시 설정을 사용한다.

프록시 서버란?

: 클라이언트가 다른 네트워크에 접속할 수 있도록 중간에서 대리해주는 서버를 의미한다.

아래는 Nuxt에서 Nitro를 사용하여 프록시 설정을 한 예시이다.

export default defineNuxtConfig({
  // 생략
  nitro: {
    compressPublicAssets: true,
    devProxy: {
      "/es/": {
        target: process.env.APP_API_URL + "/es",
        changeOrigin: true,
      },
      "/es/**": {
        target: process.env.APP_API_URL + "/es/**",
        changeOrigin: true,
      },
    },
  },

Reference

내 지식으로 만들기 위해 포스팅을 하지만, 사실상 공부하다 보면 이미 잘 정리되어 있는 곳이 너무나도 많은거 같다.

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라

developer.mozilla.org

[10분 테코톡] 나봄의 CORS: https://www.youtube.com/watch?v=-2TgkKYmJt4

악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

악명 높은 CORS 개념 & 해결법 - 정리 끝판왕

악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이

inpa.tistory.com

[책] Clean Code 북스터디 시작

Nagneo — Sat, 27 Jan 2024 00:06:17 +0900

북스터디 시작

clean code 읽기

clean code 완독 후기 작성하기

북스터디 종료

친구들과 나누기

[코엑스/삼성역] DEVIEW 2023 2/27일 참석 후기

Nagneo — Mon, 27 Feb 2023 20:59:06 +0900

개요

2.27일 월요일 방문한 DEVIEW 2023.

이전에 다니던 회사에서 보내주는 세미나 외에

나 홀로 오프라인 컨퍼런스를 신청해서 다녀온 것은 처음이었다.

웹 개발로 전향한 이후, 국내에서 들을 수 있는 컨퍼런스가 많아져서 좋다.

모든 것을 다 이해할 순 없지만, 그래도 내가 사용하는 기술과 가깝고, 사용하는 워딩도 비슷하다는 사실에 놀랐다.

더 오래, 더 많은 것을 들을 수 있었으면 좋았겠지만, 일도 있고 해서 반나절 정도만 참석했다.

개발의 세계는 참 넓고, 다양하고, 끊임없이 변화한다.

내가 어쩌다 이 세계에 발을 들이게 된건지,, 신세를 한탄하면서도

좋은 기술팁과 인사이트를 얻을 수 있는 유익한 시간이었다.

자료가 공개되면, 더 꼼꼼히 볼테지만 우선은 까먹기 전에 후기를 남겨 보려고한다.

내가 들은 세션은 아래와 같다.

1. UI 빌더를 지탱하는 레고 블록 같은 아키텍쳐 만들기

2. 중요한 건 꺾이지 않는 마음: 스마트에디터의 도전

3. GraphQL 잘 쓰고 계신가요? (Production-ready Graph QL)

4. SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략

전부 A 세션에서 진행되었다.

크게 카테고라이징 했을 때 웹 분야 이기도 하고,

미리 장바구니 기능을 담았던 걸로 보아서

사람들이 많이 담은 장바구니 세션대로 강연장을 분리했을지도 모른다는 생각이 들었다.

왜냐면 내 앞 사람도 계속 A에 있으면 되겠다고 말했기 때문.

1. UI 빌더를 지탱하는 레고 블록 같은 아키텍쳐 만들기

UI 블록을 사용해 페이지를 구축할 수 있는 서비스를 만드는 네이버 개발팀에서 나와 발표했다.

잘은 모르지만 mooc 같은건가? 생각했다.

최초 설계한 2단계의 아키텍쳐에서, UI builder를 추가하고, Chacra-UI(?) 디자인 시스템을 도입하는 등

단계적으로 구조화, 개선 해나가는 과정을 설명해주셨다.

~~점심 회식을 하고 온지라 너무 많이 먹은 탓인지, 내 옆자리 사람이 자는 걸 보고 긴장이 풀려서 인지 살짝 졸고 말았다~~.

2. 중요한 건 꺾이지 않는 마음: 스마트에디터의 도전4

2022년 가장 많이 쓰인 유행어라는 '꺾이지 않는 마음'.

2008년 부터 지금까지 스마트 에디터가 어떻게 변화해왔는지를 알려주는 세션이었다.

스마트 에디터는 네이버에서 글을 작성하는 많은 부분에서 사용될 수 있는 프로덕트이다.

브라우저가 기본적으로 제공하는 contentedittable 을 유지하면서, 여러가지 문제 해결을 하기 위해

upstream, downstream 등을 사용한 문제해결 사례들을 설명해주었다.

두 명의 발표자가 발표했는데

처음 발표해 주신 분의 특유한 어조 때문에 안 졸리고 잘들었는데,,

벌써 기억이 가물가물하다.

이래서 노팅이 중요한가보다.

3. GraphQL 잘 쓰고 계신가요? (Production-ready Graph QL) .

네이버에서 영수증 리뷰를 작성하고, 보는 MY 플레이스를 만드는 서비스에서

어떻게 자신들의 서비스에 Graph QL을 적용하고, 어떤 장점이 있었는지 알려주는 세션이었다.

다양한 서버에서 다양한 정보를 조합에서 표현해야 하는 MY 플레이스 서비스의 특성상

Backend for frontend를 구축하고

거기에 Graph QL을 사용해서 필요한 데이터들을 어떻게 관리, 표현하고 있는지 보여주었다.

솔직히 Graph QL을 사용하고 있는 사람이라면, 별로 새로울게 없을 거 같았으나

나는 거의 처음 접하는 지라 튜토리얼 보는 것 마냥 가볍게 들을 수 있었다.

4. SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략

내가 들은 세션 중에서는 유일하게 외부 인사였던 세션이다.

쿠팡 개발자 박찬진님이 발표해주셨다.

MFE에 SSR을 적용하는 얘기였는데,

현재의 MFE 지원 모듈에서는 제공하지 않는 여러가지 복합적인 문제를 해결하기 위해

직접 씨름 했던 이야기를 잘 요약 정리 해주셨다.

듣기만해도 도전정신이 생기고, 넘 하드하다 싶었던 얘기였는데

결론적으로 서버를 재실행할 필요 없이 위젯단위의 배포가 가능해진다는 사실이 신기했다.

~~쿠팡 서비스도 롤백을 하는구나.알게되었을 때 인간미가 느껴졌다.~~

MFE가 뭔지 잘 몰랐었는데, 이 세션을 통해 어느정도 감을 잡게 된 거 같다.

늘 사용자 경험만이 최고로 대우받는 회사에서 지내다가 (물론 나도 이것을 아주 최우선으로 생각하지만)

개발자 경험이 않좋아지면 결국 사용자경험도 안 좋아 진다는 아젠다에

모두가 공감하는 공간에 참여하고 있다는 사실이 좋았다.

앞으로도 이런 기회가 있다면 또 참여하고 싶다.

다음에는 회사가 보내줘서 올 수 있기를.

불경기를 반영한것인지 채용부스는 많지 않았다.

(혹시라도 틀린 내용이 있다면, 댓글 부탁드려요:)

https://deview.kr/2023

DEVIEW 2023

DEVIEW는 국내외 개발자들이 서로의 지식을 나누고, 탁월함을 추구하며, 함께 성장하는 컨퍼런스 입니다.

deview.kr

[코엑스/삼성역] 혼밥하기 좋은 노브랜드 버거, 치킨 시저 샐러드

Nagneo — Mon, 27 Feb 2023 19:37:50 +0900

삼성역 노브랜드 버거

차마 맛집이라고는 할 수 없으나, 이 가격에 삼성역에서 치킨 샐러드를 먹기는 힘드니까 남겨본다.

노브랜드 버거

한 때는 꽤나 유명했던 노브랜드 버거.

이마트 브랜드의 노브랜드 버거가 가성비 브랜드로 뜨기 시작할 때 생겼다.

예전에 이거 먹어보겠다고 멀리서 포장해와서 먹기도 했었는데, 딱히 군더더기 없이 평범한 버거 맛이었다.

요즘 경기가 다시 어렵다고 하기 다시 뜨는 것인가..

위치

위치는 여기. (빨간 동그라미)

노브랜드 버거 위치. 예전에는 버거플랜트가 있었나보다.

치킨 시저 샐러드

공홈에서 가져온 이미지이고, 분명 여기 있었던거 같은데, 사진은 업데이트 되지 않았다.

코엑스 몰에서는 조금 떨어진 위치다.

나는 그랜드볼룸에 방문했다가 돌아오는 길에 저녁을 먹으러 갔다. 가게는 넓고 쾌적한 편이다.

포스팅할 생각까지는 못했어서 사진이 많지 않다ㅠㅠ

치킨 시저 샐러드 콤보 5,800원

사진에는 없지만, 시저 소스가 별도로 나온다. 개인적으로 소스 킬러인데, 이 소스는 너무 짜서 많이 먹지는 못했다.

메뉴는 대체로 5,000원 ~ 9,000원 사이였다. 삼성역 기준 담 없는 가격이었지만, 샐러드의 가성비는 별로.

버거 세트를 먹고, 칼로리가 부담스럽다면 감자튀김을 적당히 남기는 걸 추천.

Link

https://place.map.kakao.com/1628132988?referrer=daumsearch_local

노브랜드버거 코엑스점

서울 강남구 영동대로 513 1층 (삼성동 159)

place.map.kakao.com

http://www.coex.co.kr/services/catering-service-5?type=organizer

코엑스 ORGANIZER

노브랜드 버거는 최적의 식자재와 요리방법을 찾아 버거를 중심으로 다양하고 맛있는 웨스턴 스낵을 제공하는 캐주얼 버거 하우스입니다. 두툼하고 스모키한 직화구이 패티와 이에 어울리는

www.coex.co.kr

[코엑스/삼성역] 카공하기 좋은 넓은 카페 추천 '가배도'

Nagneo — Mon, 27 Feb 2023 19:16:17 +0900

코엑스에 볼 일이 있어서 왔다가 공부하려고 찾아 간 가배도.

월요일 저녁 시간대였는데 사람도 별로 없어 조용하고, 카공하기 딱이라는 생각에 추천 글을 남겨보려 한다.

알고보니 티라미수 맛집이었다지,,, 조만간 티라미수 먹으러 다시 가야징 하핳

일단 위치는 여기다.

공홈에서 가져왔지만, 2018년도 자료라서 다른 가게이름으로 표시되어이있다.

삼성역 6번 출구에서 별마당 도서관을 지나 직진하다보면 나타나는 길다란 복도 바로 다음에 위치해 있다.

아마도 조금 외진 이곳에 있어서 사람이 많이 없는 것 같기도 하다.

노트북 놓기 편한 자리

이런 노트북 놓고 공부하기 좋은 자리가 한 쪽 벽면에 줄지어 있어서 책 읽거나 공부하기 좋다.

밑에 콘센트도 있고, 벽면 좌석도 적당히 푹신한 편.

편해 보였던 쇼파 자리

솔직히 삼성역에 쇼파 테이블 있는 카페 찾기 어려운데, 여기는 쇼파 자리도 있어서 앉아서 쉬기에도 좋을 거 같다.

시그니처 메뉴가 정리되어 있는 메뉴판.

계산대에는 더 많은 메뉴가 있다. 잘 살펴보고 주문하기

코르타도

스페니쉬 라떼라는 코르타도. 이제보니 에스프레소 40ml. 우유 40ml 인거 같다. ~~그렇다면 정말 많이 남겠다.~~

밥먹고 배부른데 아아는 싫다면 추천. 따뜻하게만 가능하다.

예쁘게 라떼 아트도 올려주셨다.

와이파이 정보는 위와 같다.

어디나 사람 많은 삼성역. 맛있는 커피와 함께 조용한 카페 찾는다면 추천한다.

[Git] stash를 이용한 변경 내역 임시 저장 (옵션 및 꿀팁 포함)

Nagneo — Sat, 14 Jan 2023 19:36:30 +0900

Stash: (안전한 곳에) 넣어두다[숨기다]

보통 한 번에 하나의 이슈만을 처리하면 좋겠지만, 일을 하다보면 여러개의 일을 처리해야 할때도 있고, 특정 브랜치에서 뭔가를 확인해야 할일 도 생긴다. 이 때, 작업중인 내역을 커밋할 수는 없고, 날리기도 아까울 때 필수적으로 사용하게 되는 명령어가 바로 stash 이다.

기본 사용법

1) 저장(save)

save 뒤에 따옴표로 description을 포함하여 저장한다.

$ git stash save '[Feature] ** 작업중'

2) 목록 보기(list)

$ git stash list

위와 같이 저장한 목록은 list 명령어로 볼수 있다. stash는 스택으로 관리된다(FILO/선입후출).

결과는 아래와 같이 출력된다.

3) 적용하기(apply)

변경 사항은 apply 명령어로 저장한다. 2)번에서 확인한 목록에서 적용할 목록을 적어주면 된다.

// 0번째 stash를 적용하기 위해서는 단순히 apply 만 사용해도 적용된다.  
$ git stash apply

// 특정 stash를 적용할 때는 다음과 같이 적용한다. 
$ git stash apply stash@{n}

terminal은 git bash를 사용하였다.

4) 사용한 목록 삭제

특정 목록 삭제(drop)

이미 적용했거나, 더 이상 사용하지 않은 stash는 아래 명령어로 삭제한다.

$ git stash drop stash@{n}

모든 목록 삭제(clear)

아래 명령어를 사용하면 모든 목록이 삭제된다. 주의해서 사용하자.

$ git stash clear

-u: untracked 파일 저장 (필수)

사실 위에 내용만 가지고 사용한다면 stash는 당신이 원하는 대로 동작하지 않을 가능성이 높다. 왜냐하면 stash는 나도 처음에는 모르고 사용하다가 작성중인 파일을 날려먹은 경험이 있다. (눙물ㅠㅠ)

$ git stash -u
$ git stash --include-untracked

--index: staged 상태까지 저장하기 및 불러오기

-u 옵션을 이용해서 모든 타일을 저장했다면 불러올때는 --index를 이용하여 stage 상태까지 불러오기 할 수 있다.

$ git stash apply --index

그외 명령어들

1) 적용과 동시에 삭제하기.

계속해서 쌓이는 stash들을 일일이 관리하기 귀찮다면 아래 명령어를 이용해서 사용하면서 삭제할 수 있다. 다만, 바로 삭제됨으로 적용할 stash가 무엇인지 정확하게 적는 것이 중요할 것이다.

$ git stash pop

2) 되돌리기

stask를 무자비하게 사용하다 보면 해당 브런치에서 불러오지 말아야 할 stash를 불러오기도 한다. 그런데 이 때, 해당 브랜치에 이미 작업하던 내용이 있다면?? restore를 이용해서 변경 내역을 마냥 지울 수도 없는 일이다. 그 때를 위해 다음의 명령어를 기억해두자.

$ git stash show -p | git apply -R

Reference

https://git-scm.com/book/ko/v2/Git-%EB%8F%84%EA%B5%AC-Stashing%EA%B3%BC-Cleaning

Git - Stashing과 Cleaning

작업하던 저장소가 완전 지저분해져서 Git에게 진짜로 강제로 정리하도록 해야 하는 경우가 생길 수 있다. 예를 들어 Git 버전관리 데이터가 포함된 디렉토리를 복사해왔거나 서브모듈 디렉토리

git-scm.com

이상 꿀팁인지는 모르겠지만, 다양한 stash 사용법을 정리해보았다.

혹시 잘못된 내용 이나 다른 꿀팁 있다면 댓글로 남겨주세요.!

[Daily] 기계식 키보드 청소하기 (다이소제공)

Nagneo — Mon, 19 Sep 2022 07:41:13 +0900

100년만에 회사 키보드를 청소했다.

더럽다고 생각한지는 꽤 되었는데 청소할 엄두는 내지 못했다.

무엇보다 나의 퇴근 시간은 소중하니까.

점심시간을 이용해 빠르게 청소하고, 후기도 빠르게 남겨 보려고 한다.

나의 키보드는 레오폴드 FC750R 저소음 적축

당시에는 사무실에서 사용할 것을 고려해서 저소음으로 구입했으나

키감은 적축이 압도적으로 좋은것 같다. 참고

필요 청소 용품은

준비물

에어스프레이, 미니 빗자루, 청소 티슈

모두 다이소 제공

내돈내산 아님 동료돈동료산.

처음 청소를 마음 먹었을 때는

거창하게 키보드 청소기를 사려고 찾아보기도 했는데

역시나 출력이 좋을수록 가격이 비싸고,

많이 쓰지도 않고 둘데도 없어서 알아보다가 에어스프레이로 청소하였다.

하고나니 굳이 그걸 살 필요없었던 거 같다.

본격 청소하기

1. 키캡 리무버로 키캡을 분리한다.

순서대로 분리가 중요하다. 화살표 키의 경우 헷갈리게 두면, 다시 꽂을 때 당황스럽다.

더러운 키보드. 확대 주의

잘못 놓인 키캡을 찾으시오.

주의 했으나 결국 하나 틀려서 나중에 실제 타자 칠 때 이상함을 감지했다.

2. 에어스프레이로 내부 먼지를 떼어낸다

워낙 사이다인 과정이라 사진이 없는 점 양해 바란다.

사진 참고

3. 빗자루로 먼지를 털어낸다.

안타깝게도 먼지제거 스프레이로는 완전 날아가지 못한다. 빗자루로 말끔히 털어준다.

4. 클리너/물티슈로 굳은 먼지를 닦는다.

쓸었으면 닦아야지.

5. 키캡을 하나하나 닦으면서 순서대로 꽂는다.

이게 예상외로 오래 걸린다ㅠㅠ 집에서 닦으신다면, 물에 담가 씻는것도 좋은 방법일거 같다. 잘 말릴수 만 있다면.!!

깔끔해진 모습. 40분정도 소요되었다.

보이시나요?? ㅂ과 ㅈ의 위치가 바뀌었다ㅋㅋㅠㅠㅠ

[Hello, React!] Trouble Shooting - Sandbox 코드 VScode에서 실행하기

Nagneo — Thu, 7 Jul 2022 20:21:49 +0900

Hello, React

샌드박스에서 React 코딩을 하다가 VScode로 복사 해왔는데, 몇가지 오류를 경험하고 해결 과정을 기록해둔다.

1. npm start 가 안될 때

PS C:\Users\workspace\react-hooks\src> npm start

> react@1.0.0 start
> react-scripts start

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

해결 방법

npm install -save react-scripts

해당 명령어를 실행하면 node_modules를 폴더가 생기면서 npm start가 가능해진다.

2. Manifest: Line: 1, column: 1, Syntax error. 오류

해결 방법

index.html 파일을 열어 아래와 같이 상대경로를 수정해준다.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

=> <link rel="/manifest" href="%PUBLIC_URL%/manifest.json" />

참고로, manifest.json 파일은 해당 React 앱이 안드로이 홈 스크린에 추가될 데 메타정보를 제공한다고 한다. (주석 참고: manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ )

2. ETC. npm ERR! code EJSONPARSE

npm ERR! code EJSONPARSE
npm ERR! path C:\Users\tosk3\workspace\react-hooks/package.json

해결 방법

뭐 명령어만 입력하면, 자꾸 Json 파싱이 안된다는 것이다. 알고보니 정말로 json 파일에 ","가 남아있었다.

잘 생각해보니 sandbox에서 코드를 받아서 typescript관련 설정을 지우면서 (나 타입스크립트 안쓸건데?? 하면서 지워버림..ㅎㅎ) "," 지우는 것을 빼먹은 것이다.

Reference

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.

codesandbox.io

https://anerim.tistory.com/209

[react Error] Manifest: Line: 1, column: 1, Syntax error.

안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트로 개발할 때 볼 수 있는 'Manifest: Line: 1, column: 1, Syntax error.' 에러 해결방법에 대해 알아보겠습니다. CRA

anerim.tistory.com