100일은 해야지

Step1. 인가코드 받기 인가코드는 Authorization, 사용자가 동의한 항목에 대해서 접근권한을 획득하는 것이다. 일단 kakao developers의 rest API를 사용할 것이기 때문에 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 디벨로퍼 사이트에 가입을 한 후 애플리케이션을 추가한다. 애플리케이션을 추가하고 추가된 애플리케이션을 클릭하면 앱키가 발급된다. 그리고 앱키가 나온 바로 왼쪽에 앱설정에서 플랫폼을 클린한 후 사이트 도메인을 입력하면 된다. 혼자 공부한다면 localhost만 입력해도 되지만 배포를 할 것이기 때..

카카오로그인 예전에 개인 프로젝트를 하면서 firebase로 일반 로그인과 구글 로그인을 구현한 적이 있었는데, 카카오 로그인은 안 해봐서 이 부분을 내가 맡아보겠다고 했다. 처음에 내가 해야 할 일은 아래 이미지에서 step1. 까지, 카카오에서 인가 코드를 받고 백에다가 그 인가 코드를 넘겨주는 것이라 생각했다. 하지만 백엔드분과 프론트엔드의 다른 분과 회의를 했을 때 step2. 토큰까지 받아서 그 토큰을 백에다가 넘겨주는 것까지 해야 한다고 하셔서 일단 하기는 함. 보안을 강화해야 할 카카오 액세스토큰과 리프레쉬토큰을 프론트에서 다룬다? 조금 의아하긴 하지만 뭔가 백에서도 자체 로그인할때 액세스토큰과 리프레쉬토큰을 프론트에 넘겨주고 그것을 프론트에서 관리해야하니까 맞는것 같기도.. 그래서 이부분은..

😳 Redux란? 👉 Redux는 "action(액션)"이라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트하는 패턴과 라이브러리이다. 👉 전체 애플리케이션 내에서 사용해야 하는 상태에 대한 중앙 저장소 역할을 하며, 상태 업데이트를 예측 가능한 방식으로 제어한다. 😳 왜 Redux를 사용하는 것일까? 👉 중앙화된 상태 관리 : 리덕스는 애플리케이션의 상태를 중앙에서 효율적으로 관리할 수 있는 중앙 저장소를 제공하기 때문에 상태를 한 곳에서 관리하고 업데이트하는 것이 쉬워진다. 👉 예측 가능한 상태 업데이트 : 리덕스는 순수 함수인 리듀서를 사용하여 상태를 업데이트하므로 상태 변경이 예측 가능하며, 어떻게 변화하는지 이해하기 쉽다. 👉 디버깅 : time-travel 디버깅 기능을 활용하면 이전..

😳 검색 엔진 최적화 SEO? 검색 엔진 최적화 SEO, 검색 결과 상위에 노출되도록 하게 하는 작업이라고 알고 있다. 거의 물에 발만 닿은 수준으로 알고 있는데 이번 기회에 발이라도 담가보려... 한다. 정말 간단히... 🙄 SEO란? SEO는 "Search Engine Optimization"의 약자로, 웹 사이트나 웹 페이지가 검색 엔진 결과 페이지에서(SERP) 상위에 나타나도록 최적화하는 과정, 이를 통해 더 많은 유기적인 트래픽을 유도하고, 온라인 비즈니스나 정보 제공 웹사이트의 가시성을 향상시킬 수 있다. 🧐 그러면 프론트엔드 입장에서 SEO는? 프론트엔드 개발자는 웹 페이지의 디자인, 구조, 사용자 경험 및 성능을 구축하는 역할을 한다. 이 모든게 검색 엔진 최적화에 영향을 미친다. 따라..

문제 설명 : 문자열 정렬하기(1) 문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하는 solution 함수??? 제한 사항 1 ≤ my_string의 길이 ≤ 100 my_string에는 숫자가 한 개 이상 포함되어 있습니다. my_string은 영어 소문자 또는 0부터 0까지의 숫자로 이루어져 있습니다. 입출력 예 my_string result "hi12392" [1,2,2,3,9] "p2o4i8gj2" [2,2,4,8] "abcde0" [0] 문제 풀이 function solution(my_string) { let num = /[0-9]/g return my_string.match(num).sort((a,b) => a..

시맨틱 태그(Semantic Tag) 내용에 대해 아무것도 알려주지 않는 태그나 태그 등과는 다르게 시맨틱 태그는 웹 페이지 내의 내용에 의미와 콘텍스트를 제공하는 HTML 태그입니다. 즉, 페이지에 내용을 표시하는 '방법'을 지정하는 것이 아닌 내용의 '목적'이나 '의미'를 설명하도록 설계된 것이죠 주로 쓰는 시맨틱 요소 정리 : 웹 페이지의 헤더 섹션을 정의할 때 사용합니다. 일반적으로 제목이나 로고 머리말 같은 요소들이 들어갑니다. : 웹 페이지의 탐색 섹션을 정의할 때 사용합니다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들이 들어갑니다. : 블로그 게시물 또는 뉴스 기사와 같은 웹 페이지 내에 포함된 콘텐츠를 정의하는 데 사용됩니다. : 웹 페이지 내에서 내용 섹션을 정의하는..

폰트를 로컬적용 하는 법 폰트를 다운로드하여서 css 파일에 적용하면 끝입니다. 간단하죠? css 파일에 font-face로 적용하면 됩니다. 저는 Nanum Pen Script를 다운로드하였기 때문에 NanumScript로 적용시켜볼게요. @font-face { font-family: 'Nanum Pen Script'; src: local('NanumPenScript'), url('./font/Nanum_Pen_Script/NanumPenScript-Regular.ttf') format('truetype'); //너무길어서 보기좋게 줄바꾸겠습니다 } @font-face { font-family: " 글꼴이름" ==> 이름은 마음대로 설정가능 하지만 나중에 혼란을 줄 수 있기 때문에 같은 폰트와 같은 이..

문제설명 : 숫자 비교하기 정수 num1과 num2가 주어졌을 때 두 수가 같으면 1 다르면 -1을 return 하도록 solution 함수를 완성해라. 제한사항 0 ≤ num1 ≤ 10,000 0 ≤ num2 ≤ 10,000 입출력 예 num1 num2 result 2 3 -1 11 11 1 7 99 -1 저는 if문 말고 삼항 연산자를 사용했습니다. (조건) ? true : false; function solution (num1, num2) { return num1 === num2 ? 1 : -1 ; } 문제 설명 : 나이 출력 머쓱이가 선생님이 몇 년도에 태어났는지 궁금해서 나이 age 주어졌을 때 2022년 기준 출생 연도를 return 하는 solution 함수 만들라는 내용입니다. 제한사항 0..