꿀팁 저장소

브라우저 캐시는 사이트의 속도나 보안에 큰 영향을 미친다.

과거 캐시에 데이터를 때려박는 형태에서는 브라우저 캐시만 탈취하면 사용자 정보를 취득할수도 있었다.

현대에는 간단한 정보는 browser의 localStorage/sessionStorage를 이용해 처리한다.

유저 기반 사이트라면 반드시 들어가는 기본이자 가장 중요한 로그인/로그아웃

위 주제는 파도파도 끝이없다.

Node.js로 서버 개발을 하는 나는 cache를 이용해서 사용자 정보를 주고받는다.

이때, javascript로는 캐시를 읽어볼수 없게하는 httpOnly옵션과

https에서만 캐시를 캐치가능하게하는 secure옵션을 사용해 보안성을 높인다.

사용자 데이터는 JWT를 이용해 토큰화 해서 캐시에 담아 주고받는다.

통신 패킷 자체가 탈취당하더라도 암호화된 데이터는 비밀키가 탈취당하지 않는한 안전하다.

그런데, 아주 기본 상식적인 부분에서 문제를 캐치하지 못해 오늘 고생을 하였다.

요점은 이것이다.

naver.com에 로그인하면 m.naver.com  / blog.naver.com / finance.naver.com 등

naver.com의 서브도메인에 해당하는 사이트들에 재 로그인할 필요없이 활동이 가능하다.

그 방법은 브라우저 캐시에 있다. 네트워크 쿠키탭을 뜯어보면 NIDSES (domain: .naver.com)가 포함되어있는것을 알수있다. 각 쿠키가 어떤역할을 하는지 상세한 내용은 알수없으나 분명 사용자 데이터를 포함하고 있고 해당 데이터는 브라우저에 저장된다.

그렇기 때문에 하위 도메인에서도 계정상태를 유지할수 있는것이다.

이 부분을 잊어버린 나는 문제아닌 문제와 힘겨운 싸움을 했다.

회사 메인 도메인 사이트에서 로그아웃을 했더니, 서브 도메인 사이트에서도 자꾸만 로그아웃 되는게 아닌가?

이거는 곤란한대?! 하며 속앓이를 했다.

어떻게 "잘" 해결할수있는 방법은 없을까? 하고 고민도 해보고 여러가지 시도도 해보았다.

보안이 중요하지 않은 사이트에서는 꼼수는 있지만, 정상적인 사이트에서라면 해당 이슈를 거스리지않는게 맞다는 결론을 내렸다.

모바일 반응형의 기본인 viewport메타태그

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

maximum-scale을 포함해 다양한 옵션이 존재한다.

이중에서 user-scaleable이 yes 상태이면

input창을 focus했을떄 자동으로 화면이 줌인된다.

user-scalable=0 으로 설정하면 해당 이슈는 해결된다

다양한 사용자들에게 접근성을 제공하는 옵션이기도하니 서비스의 특성에 맞게 설정하도록하자.

지금 운영중인 회사의 사이트가 모바일 가로모드에서 옆으로 돌아가는게 너무나도 싫어서 막는방법에 대해서 알아봤다.

1. meta tag설정

2. css 트릭

3. jquery 트릭

4. vanila javascript 설정

5. manifest 설정

결론부터 말하면 다 소용없었다.

MDN에 보면 screen orientaion과 device orientation이 다름을 명확히 구분하고있고

screen과 달리 device에 대해서는 별다른 방법이 없는것들만 나타나있다.

여기서 screen과 device의 가로모드가 어떻게 다르냐고 한다면

device가 landscape(가로)/portrait(세로)가 돌아감에 따라 screen이 함께 돌아가는데

screen은 그에맞게 css를 통해 어느정도 맞춰줄수있지만(@media쿼리 활용)

device가 돌아가는것 그 자체에 대해서는 아직까지는 대응할(막아버릴) 방법이 없어보인다.

앱이 내 소유물이라 하면 브라우저는 내 소유물이 아니라 이런 환경적인 부분의 설정에있어서는 한계가 있는걸까?

라는 아쉬움이 남는다.

브라우저가 돌아가는것을 막는 좋은 방법을 알고계신분이 있다면, 댓글 달아주시면 감사하겠습니다.

종종 캐시로인해 .gitignore의 untracking파일이 제대로 안먹힐때가 있다.

이때는 간단히 캐시를 제거해주는것 만으로 해결이 가능하다.

git rm -r --cached .

git add .

git commit -m "fix untracked files"

git push

commit까지 진행하고나면 untracking파일들이 삭제되는걸 볼수있다.

프로젝트를 오래 진행하다보면

commit  / tag / branch등으로 인해 .git/objects폴더가 굉장히 거대해진다.

로컬에서는 문제없지만, 스토리지 사이즈가 작은 Linux서버에서는 제법 치명적이다.

그래서 해당 폴더를 관리하기위한 방법을 찾았다.

=============================================

git filter-branch --index-filter 'git rm --cached --ignore-unmatch *.mov' -- --all

rm -Rf .git/refs/original

rm -Rf .git/logs/

git gc --aggressive --prune=now

==========================================================================================

나는 마지막 한줄만을 사용중이다.

종종 쓰이지만, 쉽게 까먹는 git명령어에 대해 짚어본다.

협업을 하다보면 원격 브랜치에 푸시를 해야하는 경우가 있다.

(= 혹은, 로컬에 새로운 브랜치를 생성하고 해당브랜치를 원격 저장소에 푸시하는 경우가 있다.)

1. git checkout -b feature_branch_name

2. Edit, add and commit your files

ex)

  > git add -A

  > git commit -m 'something message'

3. git push -u origin feature_branch_name

sns관련 meta태그 설정이 존재한다.

자, 빠르게 필요한 부분만 정리해본다.

// 공통
<title>타이틀</title>
<meta name='descriptoin' content='소개글'/>
<meta name="Copyright" content="selfmade" />
<meta name="author" content="selfmade" />

// facebook, kakao
<meta property='og:url' content='https://stock.selfmade.cloud'/>
<meta property='og:type' content='website'/>
<meta property='og:title' content='타이틀'/>
<meta property='og:descriptoin' content='소개글'/>
<meta property='og:image' content=''/>

// twitter
<meta name="twitter:title" content="타이틀" />
<meta name="twitter:description" content="소개글" />
<meta name="twitter:image" content="" />
<meta name="twitter:card" content="photo" />

이것을 설정해야만 링크를 공유할 때, 이미지 소개글 등이 제대로 나타난다.

※ 단, 카카오 공유시 이미지가 변경되지 않을때, 캐시를 지우도록 하자.

https://developers.kakao.com/docs/cache

API를 계속해서 만들어왔고, 서버를 관리해왔다.

전문적으로 서버를 공부한 사람은 아니지만, 실무위주의 학습과 개발을 해왔다.

전문적으로 다루시는 분들에 비해 그 내부적인 동작과 퍼포먼스 향상 관련해서는 부족하지만,

적어도 원하는 기능을 구현하고자 한다.

나아가 전문가가 된다면 더 좋겠지만, 나의 주 포커스는 Front-end이다.

[ 지금부터 언급하는 RestAPI는 외부 RestAPI를 말합니다.

Restful API Server를 말하는것과는 다릅니다. ]

그런 내가 개발과정에서 RestAPI, API에 대해 얻은 개인적인 통찰을 기록한다.

최근, YoutubeAPI, KakaoAPI, FacebookAPI 등의 RestAPI를 통해 개발을 하면서 느낀바는 '비슷하다' 이다.

무슨말이냐면, 'Kakao의 RestAPI를 가져다 쓸줄 안다면 나머지도 다 쓸수 있다' 라고 봐도 무방하다.

그 사용패턴과 방식이 같기 때문이다.

그렇다면 본론으로 들어가  RestAPI가 어떻게 돌아가는지 확인하자.

RestAPI는 Client에서 직접 호출하는걸 지양한다. 즉 server - to - server API 이다.

따라서, RestAPI를 통해 어플리케이션을 구축하고자 한다면 Third API Server가 필요하다.

여기서 Third API Server는 흔히 말하는 서버이다.

즉, Only Front-end앱이 아니라면 보통 하나씩 가지고있는 그 서버말이다.

일반적인 경우에는 아래와 같이 서버를 사용한다.

Client의  API요청 <---> Third API Server의 API응답

그러나, 외부 RestAPI를 이용할때는 아래와 같다.

Client의 API요청 <---> Third API Server의 API 요청/응답 <---> RestAPI Server(외부)의 응답

server - to -server 로 외부 RestAPI를 호출하고 응답받아 나의 Client로 전달해주는것이다.

다소 번거롭지만 그 장점은 확실하다. 

하나의 서버구축만으로 웹/앱/데스크탑 어떤 플랫폼에도 대응할 수 있다는것이다.

클라이언트에서 필요한 api를 요청하기마나 하면 된다.

RestAPI를 처음 접하시는 분들에게 혼선을 주지않기위해 마지막 코멘트를 남기자면,

흔히 말하는 Rest API Server란, Restful하게 설계한 내 서버를 의미합니다.

Restful하다는 의미는 검색해보시면 잘 정리된 자료가 많이 있습니다 ^^

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

지저분한 코드들

일관되지 않은 작성법들이 꼴보기 싫었다

Prettier와 Eslint를 적극 활용해보고자 하는 의지가 생겼다.

Eslint는 문법의 정리를

Prettier로 코드 작성법의 통일을 해보았다.

Prettier를 사용하기위해서는 vscode기준. settings > format javascript enabled를 꺼주어야한다.

그리고 .prettierrc파일에서 포멧을 정한다.

나는 4칸 들여쓰기를 즐기므로 4칸들여쓰기를 설정하고 singlequote, semi등의 옵션을 주었다.

{
    "singleQuote": true,
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "avoid",
    "semi": true,
    "useTabs": false,
    "tabWidth": 4,
    "trailingComma": "all",
    "printWidth": 80
}

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

여러 프로젝트에 참여하다보면 특정 git계정을 이용하여 clone하는 경우가 발생한다.

이때, 써먹도록 하자

git clone https://아이디@github.com/이름/프로젝트명.git 

비밀번호 요청시 입력

(이름이 별도로 없다면 이름에도 아이디를 입력해보자)