note

url 모음

Flexbox 1. 컨테이너에 지정할 수 있는 속성들 display: flex; display: inline-flex; flex이면서도 inline이고 싶을 때 flex-direction: row / column / row-reverse / column-reve

자료구조

javascript 노트

대충 연산 횟수 1억 당 1초

그래프 탐색 Depth First Search, Breadth First Search

딕셔너리, 셋(집합)을 활용하여 인접 리스트 구현

Dynamic Programming

https://jae04099.tistory.com/entry/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%B0%B1%EC%A4%80-1463-1%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://23log.tistory.com/24

velog KaTex 기반 수식 에디터(로그, 캐럿, 조합, 행렬 기호 등)

https://google.github.io/styleguide/

다익스트라 알고리즘 개념 및 이해

파이썬 비어있는 2차원 리스트 할당하기

최단 경로 알고리즘에서 이해하기 어려운 부분 설명 모음집

SW 마에스트로 - 프로그래밍 독학 시 도움을 받을만한 사이트

웹 사이트 런칭 이를 위해 프론트엔드, 백엔드 지식 필요 웹의 주제는 무엇이고, 무엇을 위해 웹 서비스를 구현할 필요가 있는 것인지 등 목표를 잡고 그걸 수행하는 방향으로 그 때 그 때 필요한 지식들 공부해나가기

좋은 알고리즘 풀이 블로그

https://die-romantische-schule.tistory.com/64

SCSS 컴파일 SCSS 문법

https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html

repl.it 또는 goorm ide 같은 온라인 IDE에서 SCSS 작성 및 CSS로 컴파일하는 방법

https://medium.com/quantum-ant/%ED%8A%B8%EB%A6%AC-tree-cec69cfddb14https://velog.io/@holicme7/%ED%8A%B8%EB%A6%AC-cjk49jslrd

의사 코드의 장점

https://tyrionlife.tistory.com/128

트리의 정의, 간선, 사이클

사이클과 사이클을 이루는 정점 찾기(DFS, BFS)

CSS 스타일 가이드 : 속성 선언 순서

https://knulab.com/archives/1153

https://yozm.wishket.com/magazine/

https://academy.dream-coding.com/courses/web-roadmap

CSS의 global scope와 specificity 문제를 해결하기 위해 나온 CSS framework와 CSS in JS (styled component) 중에 CSS in JS 쪽으로 흥행이 일고 있고 신기술도 그쪽으로 많이 나오고 있다고 한다.SASS의 경우,

https://yozm.wishket.com/magazine/detail/1319/https://yozm.wishket.com/magazine/detail/1326/

통제받지 않는 Column그리드 라인 2번부터 8번까지의 모든 열이 통제받지 않는 열이 됨(저 구문 없을 때는 그리드 컨테이너의 열은 한개임)

SCSS 필기

https://gmlwjd9405.github.io/2018/08/28/algorithm-mst.html

파이썬 sort 함수와 sorted 함수

주피터 노트북 관련 툴

https://swexpertacademy.com/main/sst/intro.do삼성 : A형 합격자는 서류가산 B형,C형 합격자는 서류가산+코테면제

파이썬 문법 참고

https://boxnwhis.kr/2020/09/27/ir-for-developers.html

1) readlines로 싹 다 받아서 쓰기2) EOFError 예외 처리

https://www.youtube.com/watch?v=t3M6toIflyQ

IoT (라즈베리파이로 집 안 사물들 사물통신 가능케)웹 개발 (프론트&백)

노드를 계속 합쳐나가는 양상이 보일 때 유니온 파인드 적용을 고려해보자

dart 스타일 가이드함수, 메소드 내에서는 var 사용class 내 변수 또는 프로퍼티에는 타입 지정

flutter와 네이티브 앱 개발의 차이점네이티브 앱은 호스트(운영체제)에서 직접적으로 위젯(안드로이드의 홈 버튼 뒤로가기 버튼 등등등)을 사용하고 화면에 띄우는데, 플러터는 호스트의 위젯을 사용할 수 없음.플러터 앱을 들어갔을 때 안드로이드 UI처럼 보이더라도 그건

windows : chocolateymacOS : homebrew

렌더링기본적으로 변화 없는 부분들은 리렌더링 하지 않음단 컴포넌트의 상태가 변하면 그 컴포넌트의 내부를 싹 다 리렌더링함.만약 부모 컴포넌트 상태가 변했을 때, 변화 없는 특정 자식 컴포넌트만 따로 리렌더링 되는걸 막아서 속도 이슈를 해결하고자 한다면,const 컴포넌

TDD요즘은 개발 lifecycle에서 시장 출시를 앞당기기 위해 hardware, software, integration and test가 앞당겨져서 거의 같은 시기에 이루어짐. 이를 shift left라고 함이러한 형태에 적용되는 방법론 중 하나가 TDD(test

https://fe-developers.kakaoent.com/2023/230330-frontend-solid/https://velog.io/@irondesk/SOLID-%EC%9B%90%EC%B9%99%EA%B3%BC-%ED%94%84%EB%A1%A

airbnb 코드 컨벤션 : https://github.com/apple77y/javascript/tree/master/reacthttps://myung-ho.tistory.com/100추가 작성import 부분에서, 외부 라이브러리와 내 폴더 내의

https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0

참고https://woochan-dev.tistory.com/94https://www.datoybi.com/http-proxy-middleware/https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-

https://velog.io/@yena1025/%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%95%B4%EC%B9%98%EC%9A%B0%EA%B8%B0https://data-jj.tistory.com/53

https://velog.io/@badahertz52/%ED%94%84%EB%A1%A0%ED%8A%B8-%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-JWT-AccessToken-RefreshToken-%EB%8B%A4%EB%A3%A8%EA

프론트 리다이렉트를 플랫폼별로 다 나눠서 만들건지 하나만 둘건지 생각해보자. 로그인 버튼 누르면백쪽 특정 주소로 a링크든 뭐든 활용해서 가게하면됨그 주소에서 백쪽 코드로 인해 구글 로그인 창 페이지로 이동하고, 로그인하고 나면 서버쪽으로 위 주소 리다이렉트 페이지로 이

카카오 네이버 구글 애플

https://tyrannocoding.tistory.com/51

px = dp 단말 DPI/기본 160dp = px 기본 160/단말 DPI보통 웹의 DPI는 72로 잡음

https://velog.io/@devstone/React%EC%97%90%EC%84%9C-Axios%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0-feat.-fetc

https://velog.io/@cada/%ED%86%A0%EA%B7%BC-%EA%B8%B0%EB%B0%98-%EC%9D%B8%EC%A6%9D%EC%97%90%EC%84%9C-bearer%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%

몇 달 전에 삽질했던 내용, 이번에 팀원분이 해결해주신 내용을 바탕으로, 가비아에서 도메인을 구매하고 프로젝트에 적용하는 과정을 요약해 둠(어려웠던 거만 써놓은거라서 빠진 과정도 있으니 참고만)EC2 : 프론트랑 백 별개의 인스턴스로 구축ELB : 프론트, API 서버

강제로 http로 들어온 요청을 https로 리다이렉트해주는 설정이라고 한다.크롬에서는 chrome://net-internals/ALB의 리스너에 http를 등록하지 않아도 https로 리다이렉트가 잘 됐던 이유가 이거인가?엣지, 사파리에서도 잘 되던데 거기도 HSTS

현재 소마 프로젝트에선 프론트에 인증서를 적용하여 https 접근하도록 해두었는데, 백도 마찬가지로 인증서 적용하여 https 접근하도록 했다.그런데 인증서를 두 군데 관리하기 귀찮으니 보통 프론트쪽에 nginx를 두고, 거기서 판별해서 백 쪽으로는 http로 접근시키

502 에러첨에 로드밸런서가 443(80은 443으로 리다이렉트) 포트로 들어온 요청을 ec2에 80이 아닌 다른 포트로 요청을 보내도록 설정되어있었다. 팀원분께 부탁드려서 80으로 바꾸니 nginx에 정상적으로 접근은 되었다.접근 후에 프록시 서버를 띄워 ec2 내부

react nginx 배포 시, 만약 서버 주소를 도메인:포트/app/main1 으로 하고 싶다면, (nginx server 블록 내 root 주소에 요거 포함해서 설정해놨다면)react의 BrowserRouter props에 basename={process.env.P

react nginx 배포 시, 만약 서버 주소를 도메인:포트/app/main1 으로 하고 싶다면, (nginx server 블록 내 root 주소에 요거 포함해서 설정해놨다면)react의 BrowserRouter props에 basename={process.env.P

API 주소를 배포 환경에서는 https, 개발 환경에서는 http로 API 서버에 접근하도록 하기 위해 if문에서 process.env.NODE_ENV 값으로 분기하였고,빌드할 때 NODE_ENV가 production으로 설정되도록 package.json에서 "bui

http://15.165.204.158/programing/view/ayNx6eZZmcWrf5Hhttps://ssv.skill.or.kr/Cloud-Security/nginx-security-vulnerability

윈도우 패키지 매니저 chocolatey 설치 및 이용 방법

https://developer.mozilla.org/ko/docs/Web/HTTP/StatusHTTP 상태 코드는 위에 링크 참고보통 400은 프론트단에서 잘못된 요청을 헀을 때 던지는 코드그 외에도 다양한 코드가 있는데 이거에 대응되는 로직을 실행시키고싶다

select에 화면 상 표시되는 내용 : 선택된 옵션 태그의 내부 텍스트 값select onChange에서 감지하는 event 객체 : select 태그. 그런데 왜인진 모르겠지만 event.target.value는 선택된 option 태그의 value로 나타남.sel

사실 프론트 단에서는 백엔드와 API 명세 관련 의견 나눌 때, 넘겨야 할 파라미터들을 리액트 단에서 문제 없이 해당 지점에서 넘길 수 있는지만 판단하면 그 외에는 딱히 더 생각할게 없는 것 같긴 하다.근데 지금 프로젝트는 약간 학습의 성격도 좀 띄다보니 백엔드 관련

도커 : 가상 컨테이너에 redis, mysql 같은 image들 띄우는 방식인듯?AWS도 도커 기반으로, 하나의 거대한 컴퓨터를 여러 컨테이너로 쪼개서 전 세계 사용자에게 제공하는 방식이라고 들음쿠버네티스 : 도커의 여러 컨테이너들을 유지 보수 관리하는 느낌인듯?현업

엑세스 토큰 재발급 API를 호출하니 접근 권한이 없다는 에러 응답을 받았다.백에서는 로그를 보니 검증 시 비교할 CSRF Token이 없어서 검증 실패했다고 떴다고 한다.프론트에서 CSRF 토큰이란걸 받고 어찌 저찌 하는건가..?잘 모르겠지만 아무튼 프론트 서버랑 백

\++a : lvaluea++ : rvalue\++a는 a의 값을 먼저 변화시키고 그대로 a를 쓴다.a++는 a의 기존 값을 임시 변수에 저장해두고 이걸 해당 표현식의 평가값으로 쓴다. 이 후 a의 원본 값은 변화한다. 따라서 rvalue이다.

https://velog.io/@clfclf3138/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%B

포인터와 레퍼런스는 어셈블리 코드 까보면 똑같다. 인자로 들어온 주소를 레지스터에 올리고, 스택에 push하여 그걸 통해 원본에 접근하는 구조이다.그렇다면 레퍼런스는 왜 쓰는거고 문법도 약간 다른가?포인터는 nullPtr을 가리킬 때 오류를 발생시킬 수 있고, 그리고

react, typescript로 프로젝트를 진행하면서 생긴 문제다.interface에 React.FormEvent<HTMLFormElement> 부분이 원인이었다. 왜 그런지는 잘 모르겠다..이거 때문에 vscode 재설치하고, 다운그레이드하고, npm 뒤적거리

https://velog.io/@rnrn99/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-SEO-%EA%B8%B0%EC%B4%88

https://sorrow16.tistory.com/172

출처 : https://velog.io/@do_dadu/React%EC%97%90%EC%84%9C-Modal-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0feat.-createPortal-%EC%8A%A4%ED%81%AC%EB%A1%A4-%

https://refactoring.guru/

익명 부트 -> memberId 생성됨멤버 부트 -> 지정한 memberId로 부트됨. 이미 익명 부트 된 상태여도 바뀜유저 인포 업뎃 메소드 -> 익명 부트의 경우에도 업뎃되고 멤버가 됨.익명 유저가 채팅이나 이런거 치는 순간 리드로 바뀜채팅 안치고 익명인 상태에서

몇몇 브라우저 구글 로그인 안되는 이슈삼성 인터넷 브라우저, 에브리타임 자체 브라우저, 카톡 브라우저에서 구글 로그인이 안되는 문제 발생삼성 인터넷 : 주소 접근 자체가 안되는 듯에타, 카톡 브라우저 : 구글 로그인 엑세스 오류 페이지

네이버에서 만든 성능 테스트 오픈소스설계 바꾼 후TPS가 200에서 600으로 증가

구글 애널리틱스 연동 참고

구글 애널리틱스 연동 참고

post(url, {key: value 들}, {headers: {Authorization: \~~}})요런 식, 두 번째 인자 객체가 바디에 해당

웹 캐시

Object는 키-밸류 쌍들을 조회할 때 삽입했던 순서대로 순회를 못하고, Map은 가능하다.Map의 삽입 순서 상 첫 번째 키-밸류 쌍을 조회하는 방법은 (Map객체변수).entries().next().value 이다.

디스콰이엇https://disquiet.io/

인프런 "그림으로 쉽게 배우는 운영체제" 강의 듣고 필기

비밀번호에 특수문자가 들어있는 경우라면 쌍따옴표로 감싸서 입력하면 됨.

깃 커밋 메시지 컨벤션

JUnit5 docs(https://junit.org/junit5/docs/current/user-guide/AssertJ docs(https://assertj.github.io/doc/https://velog.io/@woonyumnyum/%

JUnit5 docs(https://junit.org/junit5/docs/current/user-guide/AssertJ docs(https://assertj.github.io/doc/https://velog.io/@woonyumnyum/%

JUnit5 docs(https://junit.org/junit5/docs/current/user-guide/AssertJ docs(https://assertj.github.io/doc/https://velog.io/@woonyumnyum/%

https://velog.io/@eddy_song/domain-logic

https://velog.io/@eddy_song/mvc

https://velog.io/@pp8817/record

https://tecoble.techcourse.co.kr/post/2020-05-26-static-factory-method/

https://velog.io/@win-luck/Springboot-%EC%8A%A4%ED%94%84%EB%A7%81-API-%EA%B5%AC%ED%98%84-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%9D%91%EB%8B%B5%EA%B0%9D%

https://zara49.tistory.com/130

강의 소개 스프링 그 자체에 매몰되지 말고 어떻게 사용해야 하는지에 초점을 맞추자. 실무에서 거의 안 쓰이는 오래된 스프링 기술과 마이너한 스프링 기술은 강의에서 최대한 다루지 않게끔 구성했다. 학습 방법 : 처음부터 끝까지 다 직접 코딩해보면 된다. > 프로젝

https://rlaehddnd0422.tistory.com/62#head11

https://velog.io/@seasame_oil/Spring-bean

문자열 상수화 : ctrl + alt + c

생성자가 하나일 때는 @Autowired를 명시 안해줘도 의존성 주입 됨

상태코드ResponseEntity강력 새로고침구글 검색창 다양한 기능 활용크롬 개발자 도구카카오 선물하기 API 등 다른 서비스의 API 설계도 함 봐보자PR에서 질문 잘하는 법 : 현재 상황 설명을 잘 해야하고, 해당 요구사항에 대한 기술적인 내용을 "왜" 고려하고있

https://hyerin6.github.io/2021-08-16/spring-exception/

@ModelAttribute : 생성자로 먼저 바인딩하고, 바인딩안된 것들은 setter로 바인딩@RequestBody : 생성자 안 씀. reflection이란걸 이용

MethodArgumentNotValidException 클래스는 BindException을 상속받은 클래스임BindException에는 getBindingResult 메소드가 있고, 이걸로 받아낸 BindingResult 객체는 여러가지 필드를 반환하는 메소드가 있음

https://systemdata.tistory.com/82

필드 age가 있다고 치면, 자식 클래스에 age가 있으면 부모의 age는 접근 불가. 자식에 없으면 부모로 거슬러 올라가면서 age를 찾음. 메소드는 동적 바인딩이란 개념이 있지만 필드는 컴파일 타임에 접근할 필드가 결정됨dto 추상화 전략 : https:/

basic auth는 authorization 필드에 id와 비번 인코딩해서 보내고, 서버에서 디코딩세션은 클라이언트에서는 세션 id를 저장 (쿠키나 로컬 스토리지에 저장). 단점은 서버가 여러개라면 어떤 서버와 통신했는지 기록을 해야한다는 단점. (sticky ses

인터셉터에서 @Value를 쓰기 위해 configuration파일에서 인터셉터를 빈에 등록

스프링의 역사그 이전의 EJB, 그게 너무 불편해서 나온게 스프링

연관 관계의 주인다대일에서 보통 다 쪽에 외래키 관리를 맡긴다 (연관 관계의 주인)만약 객체 레벨에서 양방향을 설정하고 싶다면, 연관 관계의 주인이 아닌 일 쪽에서 일대다 어노테이션을 걸어주고 mappedBy로 상대 쪽 외래키 필드가 뭔지를 명시해주면 된다.이 때, 연

https://kkambi.tistory.com/210

https://ddonghyeo.tistory.com/16https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token

https://velog.io/@city7310/%EB%B0%B1%EC%97%94%EB%93%9C%EA%B0%80-%EC%9D%B4%EC%A0%95%EB%8F%84%EB%8A%94-%ED%95%B4%EC%A4%98%EC%95%BC-%ED%95%A8-6.-API

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

엔터 방식 설정 협업 시 윈도우와 맥에서의 엔터 방식 차이로 인한 오류를 방지해 줌 CLI vs GUI 배울 땐 CLI로 최대한 익히고, 숙련되면 GUI랑 혼용해서 쓰면 됨 GUI로 하는게 더 편한 작업들도 분명히 있음 다만 섬세한 작업은 CLI로 해야하기 때

프로젝트 탐색 시 주의할 점오픈소스 라이선스가 맞는지 검토커뮤니티가 활발한 프로젝트인지 확인 (commit 이력 빈도수, 최근 커밋 날짜 언제인지)이슈가 적극적으로 처리되고 있는지 확인Main 커미터 / 컨트리뷰터가 comment를 적극적으로 달고 있는지 확인READM

모든 오픈소스 SW는 반드시 라이센스를 준수해서 사용해야 함.github에 소스코드가 공개되어 있다고 해서 모두 free license는 아님. 잘 알아보고 쓰자대부분의 오픈소스 라이센스는 오픈소스를 재배포할 때 의무사항을 부과함. 즉 사내에서 테스트 용도로만 쓸 때는

https://velog.io/@joonghyun/JPA-JPA-N1-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-%EB%B0%8F-%EC%84%B1%EB%8A%A5%EA%B0%9C%EC%84%A0

https://developers.google.com/identity/openid-connect/openid-connect?hl=kohttps://developers.google.com/identity/protocols/oauth2?hl=kohttps

Dark Reader는 웹 페이지를 분석하여 웹 서핑 중 눈의 피로를 줄이기 위한 오픈 소스 MIT 라이선스 브라우저 확장 프로그램입니다. Dark Reader는 다크 모드를 생성하며, 여러 UI를 통해 다양한 방식으로 사용자화할 수 있습니다.질문대부분의 질문은 도움말

Dark Reader 프로젝트에 기여하고 도움을 줄 수 있는 다양한 방법이 있습니다. 아래에서 더 자세히 알아보세요. 미리 감사드립니다.Dark Reader의 개발을 후원하세요.번역을 개선하거나 제안할 수 있습니다. 지원 가능한 언어 코드 목록을 참조하세요.웹사이트 페

우리 커뮤니티의 구성원, 기여자, 리더로서 우리는 나이, 신체 크기, 보이는 또는 보이지 않는 장애, 민족성, 성적 특성, 성 정체성 및 표현, 경험 수준, 교육, 사회경제적 지위, 국적, 개인의 외모, 인종, 종교 또는 성적 정체성과 지향에 관계없이 모든 사람에게 괴

https://medium.com/@kanguk.ku/redis-%EC%82%AC%EC%9A%A9%EA%B8%B0-4fd3695ab0c7

가비아에서 도메인 구매 후, GCP cloud DNS에서 레코드 설정 후, 그 네임서버를 가비아에 등록해줬다.근데 docker로 띄운 nginx 컨테이너에 certbot으로 SSL 인증서 발급이 계속 안돼서 엄청난 삽질을 했는데... GCP cloud DNS에 CAA

https://p-kyung.tistory.com/m/106