dul2's DevLog

메모용 글입니다. 글 개요 지원하고자 하는 회사의 홈페이지를 구경하다 보니 기존 팀프로젝트에서 고민했던 프론트 라우터의 path가 이 곳에서는 어떻게 관리되고 있는지가 궁금하여 확인하던 도중 신기한 점이 있어 정리해보려고 한다.   생각했던 점마이페이지에서 아래 navbar를 클릭하여 이동하던 도중 url path가 궁금했기에 마이픽으로 클릭하여 이동함.  마이픽은 인가 처리가 되어야 확인할 수 있는 페이지였고, 첫 front path의 end point가 auth 였음. https://thisisdomain.com/auth/sign-in 그런데 이후 쿼리 파라미터로 다음과 같이 redirect와 preventGoBack 값을 받고 있는 것을 확인하게 됨. https://www.hemekolab.com/..

OAuth2 프로토콜에서는 다양한 클라이언트 환경에 적합하도록 권한 부여 방식에 따른 프로토콜을 4가지 종류로 구분하여 제공하고 있습니다. ​ ​ 1. Authorization Code Grant │ 권한 부여 승인 코드 방식 ​ 권한 부여 승인을 위해 자체 생성한 Authorization Code를 전달하는 방식으로 많이 쓰이고 기본이 되는 방식입니다. 간편 로그인 기능에서 사용되는 방식으로 클라이언트가 사용자를 대신하여 특정 자원에 접근을 요청할 때 사용되는 방식입니다. 보통 타사의 클라이언트에게 보호된 자원을 제공하기 위한 인증에 사용됩니다. Refresh Token의 사용이 가능한 방식입니다. ​ [그림 1] Authorization Grant: Authorization Code 권한 부여 승인 ..

React를 실행해보면서 느끼고 이해한 점을 주저리 나열하여 정리해보았습니다. JSX에서 만드는 함수는 return 문에서 HTML 태그처럼 사용되어 위치가 반환된다. JSX는 HTML 태그를 바로 사용할 수 있으며 {} 내부에 javascript 변수를 넣어 사용할 수 있다. react는 state의 변화가 일어나면 전체적으로 렌더링이 다시 된다. 이와 달리 JQuery와 같은 라이브러리는 화면의 어떤 값을 변경할 때 DOM의 정보를 바꾸는 식으로 처리된다. const [변수, 함수] = useState(초기값); 함수를 통해 변수를 변경하며 변수는 `const` 상수이므로 `++`, `--`와 같은 증감연산자를 사용할 수 없다. 이를 통해 react는 실제 값이 변경되는 것이 아니라 화면단에서만 값..

https://school.programmers.co.kr/learn/courses/30/lessons/12985 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 △△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습..

본 영상 생활코딩: WEB2 - Node.js 재생목록 / 36 ~ n 동기 vs 비동기 자바스크립트에는 Sync가 되는 함수와 안되는 함수 2가지가 존재한다. 동기 방식 비동기 방식 //readFileSync console.log('A'); var result = fs.readFileSync('egoing/syntax/sample.txt', 'utf8'); console.log(result); console.log('C'); //readFile console.log('A'); fs.readFile('egoing/syntax/sample.txt', 'utf8', function(err, result){ console.log(result); }); console.log('C'); 결과 A B C A C B..

웹 역사 with node.js 1990년 웹이 등장하면서 수 많은 문서의 정보들이 HTML의 웹 페이지로 만들어짐. 1995년 최초 상업용 웹브라우저인 Netscape를 만든 넷스케이프 커뮤니케이션 사는 브랜든 아이크에게 Javascript 제작을 의뢰함. Javascript으로 인해 HTML 문서가 사용자와 상호작용 하는 웹 어플리케이션으로 변모할 수 있게 됨. 단, 웹브라우저에 인터프리터가 있었기에 웹브라우저에서만 사용될 수 있는 독점적인 프로그래밍 언어이자 웹브라우저에 같혀있는 신세로 지내게 됨. 2008년 구글이 chrome에서 사용되는 javascript의 성능 개선을 위해 오픈소스 V8 엔진을 개발하게 됨. node.js의 창시자 Ryan Dahl이 V8엔진을 기반으로 하는 node.js를 ..

[프로그래머스] level 2 - 피보나치 수 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 ..

Thymeleaf 정리 기존에는 뷰 템플릿으로 JSP를 주로 사용해보았기에 Thymeleaf를 거의 처음 사용하기에 새롭게 겪은 기능들에 대해서 간단하게 정리해보려고 한다. Layout thymeleaf에서 layout을 관리하는 방법은 크게 include 방식과 계층형 방식이 있다. 다음은 include 방식의 예시이다. jsp `include 액션 태그`처럼 thymleaf에서는 `th:replace`를 통해서 HTML fragment를 관리할 수 있다. --- [2] --- [3] include 방식은 사실 무식한 방법이다. layout을 짜기위해 계속 코드를 작성해주어야 하기 때문이다. 실제 실무라면 계층형 방식이 좋겠지만 간단한 프로젝트에서 계층형 방식을 쓰려면 결국 세팅 과정이 들어가야 하므로..

JPA를 사용하여 쿼리를 작성하다보면 동적 쿼리의 필요성에 대해 느낄 때가 있다. 다음 예시를 통해 정적쿼리에서 동적쿼리가 필요할 때 어떤 방식들이 있었는지 정리해보았다. 정적 쿼리를 사용하는 상황 예를들어 이름과 상태 값에 따른 결과 검색을 해야하는 상황이 있다고 생각해보자. JPA를 사용하게 되면 JPQL 쿼리를 입력하고 이름과 상태 파라미터에 맞는 값들을 바인딩해주어 결과를 받는 코드를 작성할 수 있다. em.createQuery("select o from Order o join o.member m" + " where o.status = :status" + " and m.name like :name", Order.class) .setParameter("status", orderSearch.getO..

하도 까먹어서 망각할 나를 위해 작성. mac 기호 - ⌘,⌥,⌃, ⇧ 인텔리제이 for mac 만능 검색 ⇧(shift), ⇧(shift) 연타 창 닫기 ⌘(Command) + W 커서 이동(줄 단위) ⌘(Command) + 방향키 커서 이동(단어, space 단위) ⌥(Option) + 방향키 줄 이동 ⌘(Command) + ⇧(shift) + 방향키(위,아래) 줄 삭제 ⇧(shift) + (delete) 줄 복사 ⌘(Command) + D 최근 파일 열기(찾기) - Recent Files ⌘(Command) + E 지역 변수 추출 - Extract (Introduce) local Value ⌥(Option) + ⌘(Comand) + V 메소드 추출 - Extract Method ⌥(Option) +..