한 프로젝트를 기획하면서, 시스템 설계에 대한 플로우차트(flow chart)나 시스템 구조도를 그릴 일이 많을 것이다. 이 때 ai 를 사용해서 그리는 방법을 소개해보려고한다. 두 가지만 있으면 되는데, chatGPT와 mermaid live 사이트이다. Flow Chart 그리기 먼저, chatGPT에 다음과 같이 프롬프트를 작성한다. 나는 예시로 한 프로젝트의 플로우차트를 그려보려한다. 이 ~~~ 프로젝트에서 학생이 강의실을 대여하고 대여를 취소하며 대여 여부를 확인할 수 있는 시스템을 mermaid.live에서 사용가능한 flowchart 코드로 작성해줘 나는 이 코드를 복사해서 mermaid live 라는 사이트에 들어가 왼쪽 코드를 작성할 수 있는 공간에 붙여넣기를 했다. https://mer..
안녕하세요. 얼마전에 건국대학교에서 열린 MADC 에 다녀왔어요! 일시 2023년 12월 02일 (토) 오후 01:00 - 오후 07:00 주최 MobileAppDeveloper'sConference 행사 개요 Mobile App Developer’s Conference (이하 MADC)는 12월 2일, 건국대학교 학생회관에서 개최되는 Android, iOS, Flutter를 모두 아우르는 국내 최초의 모바일 개발자 컨퍼런스입니다. 선언형 UI라는 새로운 기술의 등장으로 세 플랫폼의 차이가 점점 줄어들고 있는 가운데, MADC는 세 플랫폼의 공통점과 차이점을 모두 살펴보고, 개발자들이 자신에게 맞는 플랫폼을 선택할 수 있도록 도와주는 자리입니다. 또한, 주니어 개발자들을 위한 특별한 세션도 마련되어 있습..
안녕하세요. 데보션영 2기로 활동한 서다원입니다! 벌써 수료식까지, 2기의 모든 활동이 마무리되었어요. 9개월 동안 길다면 긴 시간인데 정말 빠르게 지나간 것 같아요. 제가 데보션영 2기로 활동하면서 주변에서 데보션영에 관한 질문을 굉장히 많이 받고, 인스타를 통해서도 벌써 3기에 대해서 물어보시는 분들도 계신데요. 그래서 한번 수료 후기와 함께 데보션영에 대해서 소개해보는 포스팅을 작성해볼까합니다. 데보션영이 뭐야? 데보션영(DEVOCEAN YOUNG)은 SKT 개발자 커뮤니티인 '데보션'을 기반으로 활동하는 대학생 테크 인플루언서 인데요. 개발과 프로그래밍 관련 콘텐츠들을 창작하며 개발자 생태계 내의 소통과 공유 문화를 확산하는 것이 주 활동이에요! 데보션(DEVOCEAN) 은 SKT가 SK하이닉스,..
오랜만의 후기 컨텐츠인 것 같다! 이번엔 성수 앨리스랩에서 열린 2023 Devfest WebTech 에 다녀왔다. GDG Korea WebTech에서 준비한 오프라인 이벤트인데, 이번에는 "책쓰는 개발자"라는 주제였다. GDG DevFest 는 GDG 커뮤니티에서 전 세계적으로 진행하는 캠페인이며 그 예시로 현재 GDG Songdo, Busan 등에서도 에서도 DevFest 참가신청을 받고 있는 중이다. 개발자인데 책을 쓴다- 라는 주제가 궁금하기도 했고, 세미나 중에 '기술 블로그를 운영하며 개발 조직의 성장 과정을 기록하는 방법' 에 관심이 생기기도 해서 얼리버드 티켓을 구매해 갔다. 시간표 14:40 ~ 15:00 - 입장 및 참가 등록 15:10 - 키노트 15:10 - 15:40 책쓰는 개발자..
문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.
관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..
안녕하세요. 코드잇 앰배서더 1기로 활동한 dawonny 입니다. 이번 포스팅에서는 코드잇 앰배서더 1기로 활동했던 이야기와 후기를 남겨보려고해요. 이건 코드잇에서 요청한(?) 사항은 아니구요. 참여해보고 솔직하게 적어본 후기입니당! 지원 저는 개발 인스타그램을 하나 운영중인데요(@wonny_dev, @dev_event_crawler) 그러다 보니 알고리즘으로 코딩/프로그래밍에 관련된 게시물들이 많이 뜨는핀에요 코드잇 앰배서더 모집도 그 중 하나였어요! 저는 코드잇 앰배서더에 앞서 SKT의 개발자 커뮤니티인 '데보션' 홍보대사 대외활동인 '데보션영'을 활동중인데요! 이 활동은 1년 단위 활동인 것에 비해 이 코드잇 앰배서더는 한 달정도 활동하더라구요. 그래서 첫번째로 부담이 별로 없었구요. 두번째로는 서..
ref : Flutter & Dart - The Complete Guide [2023 Edition] 23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다. Flutter 프로젝트 생성 터미널의 원하는 경로에서 다음을 입력 flutter create [프로젝트이름] 또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서 flutter new project 를 선택해도 됨 Understanding Types 다트는 type-safe 언어이다. 다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다. 여기서 타입 안전성이란? 프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념 Da..
never 타입을 굳이 쓸일은 없을 수 있지만 개발하다가 나오면 어떤 건지는 알기위해..! never 키워드에 대해서 배워보자 never 란 함수에 void 타입을 붙이듯 return type 으로 쓸 수 있다. 예를 들어 다음과 같다 function myFunc() :never{ } myFunc 이라는 함수는 다음을 만족한다 1. return 을 하면 안된다 2. 함수에 endpoint 가 없어야한다 (둘이 같은 얘기이기는 하다) 여기서 endpoint 가 없어야한다는 것은 함수실행이 끝나지 않는 것이다. while(true) 때문에 함수 실행이 끝나지 않는.. 그런 예시를 생각해보면 되겠다. function 함수() :never{ throw new Error('에러메세지') } 위의 예시를 보자면 t..
rest parameter 먼저 rest parameter 에 대해서 간단히 짚고 넘어가자 function PrintNumArr(...a){ console.log(a) } PrintNumArr(1,2,3,4,5) 위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면 그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다. [LOG]: [1, 2, 3, 4, 5] 그럼 rest parameter 의 타입지정은 어떻게 할까? rest parameter 의 타입지정 array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다. 아래와 같다 function PrintNumArr(...a:number[]){ console.log(a) } Pri..
안녕하세요! 데보션 영 2기 서다원입니다. 이번 포스팅에서는 9월 데보션 테크세미나인 [In-Memory Data Grid 기반 Smart Factory 아키텍처링 연구 사례] 후기를 공유해보겠습니다! 🚀 오세진 스피커님의 첫번째 세션 IMDG 구조 소개와 SK하이닉스 CXL Memory 적용사례 데이터가 다양해짐에 따라 여러 플랫폼이 활용되면서 복잡성이 커지고, 데이터 통합의 문제가 생겨나고 있음 -> 데이터 통합 관리에 용이한 IMDG 기술이 필요! In-Memory Data Grid(IMDG)란? 데이터 통합 관리를 위한 computing 엔진이 탑재된 In-memory distributed caching software 기술 IMDG 플랫폼의 대표적인 예로 Hazelcast IMDG 가 있음 Ha..
안녕하세요 오늘은 코드잇에서 꾸준히 공부할 수 있는 비결✨에 대해서 몇가지 소개해드리려고해요! 벌써 코드잇 앰배서더로서의 마지막 포스팅이 되겠네요. 코드잇에는 다양한 동기 부여 장치들이 숨겨져 있는데요. 하나씩 살펴볼까요? 먼저 출석 체크 기능! 레슨을 1개이상 무엇이든 수강하면 코드잇 출석을 한 것으로 체크되어요. 매일 연속으로 강의를 수강한다면 마치 깃허브 잠디 심기하듯 꾸준히 열정을 가지고 할 수 있을 것 같아요! 매일 조금씩이라도 하는게 중요하니까요~! 하루에 레슨을 10개 수강하는 등의 여러 조건들을 만족하면 배지를 받을 수 있고, 강의를 완강하고 나면 수료증도 받을 수 있어요! 자기를 소개하는 페이지에 수료증을 업로드해도 좋고, 기분도 뿌듯할 것 같죠? 레벨시스템도 있는데요! 마치 게임같이 경..
이전에 type alias 를 이용해서 타입을 변수처럼 저장해 사용하는 방법을 배웠다. 추가로, object 에 타입을 지정할 때 interface 라는 키워드를 이용할 수도 있다. interface interface Student{ name: string } interface Teacher{ name: string, age: number } let 학생: Student = {name:'kim'} let 선생: Teacher = {name:'kim', age:20} interface 는 type 키워드 처럼 사용할 수 있는 키워드이다. interface 의 장점은 extends 를 할 수 있다는 것이다. 예를 들어 위의 코드를 아래와 같이 쓸 수도 있다. interface Student{ name: st..
필드값 타입지정 class 내부에는 object 가 사용할 수 있는 필드값을 만들 수 있다. class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 예를 들어 Person 이라는 class 에 0 값을 가지는 data 라는 걸 만들어놓으면 john 이나 kim 에서 이 data 라는 필드를 사용할 수 있다. 이 때 이 data 라는 필드에 타입을 지정해준다면 다음과 같다 class Person { data :number = 0; } 하지만 굳이 쓰지 않아도 자동으로 number 타입이된다. 타입스크립트는 자동으로 타입지정을 해주기 때문! co..
저는 이 티스토리 블로그를 구글 서치 콘솔에 등록해놓았는데요. 각종 관련된 문제들을 해결하면서 어떻게 해결했는지 공유하고자 포스팅을 작성해보려고해요! 적절한 표준 태그가 포함된 대체 페이지 문제 페이지 색인 생성 부분에서 '적절한 표준 태그가 포함된 대체 페이지 - 이러한 페이지는 색인이 생성되지 않거나 Google에 게시되지 않습니다' 라는 문구가 뜨더라구요. 왜 중복된 페이지가 만들어지는건가- 하고 영향을 받은 페이지를 확인해봤어요. 봤더니 다 /m/ 이 붙은 주소더라구요. 티스보리 블로그에 글을 하나 작성하면 '웹' 과 '모바일' 버전이 만들어지게 됩니다. 따라서 링크 주소도 2개가 만들어져요. 구글 서치콘솔은 별도의 설정이 없으면 웹 링크와 모바일 링크 둘중에 하나를 표준으로 설정하고, 하나는 중..
strictNullCheck 옵션 켜기 tsconfig.json 파일에 들어가서 strict 옵션을 true 로 켜준다. strictNullChecks 만 켜줘도 된다. (strict 안에 strictNullChecks 가 들어가 있다) 변수를 조작하면서 null 인지 체크할 때 유용하다 HTML 파일 script 태그에 변환된 index.js 를 적어서 연결해준다. HTML 찾아 변경하기 h4 제목을 다른 글자로 변경하려고 한다. 위 코드처럼 일단 '제목' 이라는 변수에 document.querySelector 를 통해 title 이라는 id 를 가진 object 를 가져온 후, narrowing 을 통해 null 이 아닌지 체크후에 null 이 아니라면 제목.innerHTML 을 '반갑소' 로 바꿔줬..
함수 type 을 저장하기 함수에 들어갈 파라미터와 return 값의 타입들도 지정할 수 있다고 배웠는데, 이 함수의 타입도 type alias 로 저장해서 사용할 수가 있다. type NumOut = (x : number, y : number ) => number ; 위는 예시이다 NumOut 이라는 타입을 만든건데, 이 타입은 함수를 위한 타입이다. number 타입의 x 와 number 타입의 y 를 파라미터로 받아야하고, return 값이 number 타입이어야한다는 의미이다. 그래서 이 NumOut 이라는 type alias 를 함수에 직접 사용해보는 예시는 아래와 같다 type NumOut = (x : number, y : number ) => number let ABC :NumOut = fu..
지금까지 어떤 변수에 타입을 지정하는 방법에 대해서 배워왔다. 그런데 어떤 변수에 '어떤 값' 이 들어가도록 아예 제한할 수도 있다. const 를 쓸 수도 있겠지만, 내가 어떤 변수에 들어갈 수 있는 값을 2~3개 지정할 수도 있는 것이다. 이럴 땐 Literal Type 을 선언하면된다. Literal Type string, number... 뿐 아니라 일반 값도 타입이 될 수 있다. let name :'홍길동'; 예를 들어서 위처럼 name 이라는 변수에는 '홍길동' 이라는 글자만 들어갈 수 있는 것이다. 이렇게 특정 값만 가질 수 있게 제한을 둘 수 있는 타입을 literal type 이라고 한다. 더 엄격하게 만드는 개념이다. 꼭 1개가 아니어도 된다. let name :'홍길동'|'서다원'; ..
Type Aliases 타입 정의가 너무 길면 타입을 변수에 담아서 쓸 수 있다. Type alias 라고 한다. 여기서 alias 는 '별명' 이라는 의미이다. let 동물 :string | number | undefined; 예를 들어서 위처럼 동물 이라는 타입이 복잡하면 이걸 따로 빼서 변수에 담아쓸 수 있다. type Animal = string | number | undefined; let 동물 :Animal; 이렇게 말이다. 타입을 변수처럼 만들어 쓰는 alias 문법이며, 대문자로 적는게 일반적이다. object 타입 저장하기 type 사람 = { name : string, age : number, } let teacher :사람 = { name : 'john', age : 20 } 위처럼 ..
function plusOne(x :number | string){ return x + 1 //에러남 } 위와 같은 함수가 있다고 보자 x 파라미터는 string | number 와 같은 union 타입인데 숫자 1 을 더하기에는 x 가 string 인지 number 인지 애매하기 때문에 에러를 내게 된다. 따라서 이럴 땐 타입을 하나로 narrowing 해주거나 assert 해주거나 하면 된다. narrowing 에 대해서 먼저 알아보자 typeof 를 이용한 Type Narrowing 타입 narrowing 이란 if 문으로 타입을 하나로 정하는 것을 말한다. function plusOne(x :number | string){ if (typeof x === 'number') { return x + 1..
참고로 수업 들으면서 아래 사이트의 ide 를 이용해 코드를 작성하고 실행시켜보면서 학습했습니다! https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 함수는 두 군데에 타입 지정이 가능하다. 파라미터 return 값 function 함수(x :number) :number { return x * 2; } 그래서 위처럼 x 라는 파라미터를 number 라는 타입으로 지..
코드잇의 [좋은 알고리즘이란?] 강의를 수강 후 학습한 내용을 정리한 포스팅입니다. 선수 과제 알고리즘의 정석 수업을 듣기 위해서는 기본적인 파이썬 문법과 컴퓨터적 사고력을 갖추고있어야 하기때문에 먼저 선수 과제가 주어졌어요. 펠린드롬인지 검사하는 함수를 만드는 문제였네요! def is_palindrome(word): # 여기에 코드를 작성하세요 # 테스트 코드 print(is_palindrome("racecar")) print(is_palindrome("stars")) print(is_palindrome("토마토")) print(is_palindrome("kayak")) print(is_palindrome("hello")) 문제는 위와 같고, 아래와 같이 결과가 나와야 했어요 True False Tru..
안녕하세요 오늘은 코딩 교육 서비스 '코드잇' 에서 수강할 수 있는 무료강의를 소개해볼까하는데요. 요즘 개발 관련 강의를 온라인으로 수강하시는 분들이 굉장히 많은데요. 개발 도서를 읽으면서 수강하는 방법도 있지만 온라인 강의도 온라인 강의만의 장점이 많죠. 그래서 그런지 무료로 수강할 수 있는 온라인 강의를 찾으시는 분들이 많은 것 같아요! 이 포스팅에서는 코드잇 사이트에 수강할 수 있는 대표 무료강의 3개 정도 소개해볼까합니다. 코딩 기초 필수! 프로그래밍 오버뷰 https://www.codeit.kr/paths/programming-overview 코딩 기초 필수! 프로그래밍 오버뷰 - 분야별 강의 | 코드잇 프로그래밍 시대에 맞는 인재 되기 www.codeit.kr 이 강의는 정말 코딩이 처음이라 ..
디자인 관련 포스팅들을 둘러보던 중 재미난 사이트를 발견했다. 링크는 아래와 같다. https://blush.design/collections/0bopA8Y5vn29mdFBU2Br/wavy-buddies-illustrations/character-avatar/nldaiXHq7BWq8PE5?c=Hair_0%7Efecb51-0.0.2.0%7E040226_Skin_0%7Edcad7f-0.0.2.0%7Edcad7f Wavy Buddies - Illustration by Susana Salas Check out this illustration on Blush. blush.design 배경색, 머리색, 피부색, 표정, 머리, 포즈 등을 선택해서 아바타 일러스트를 만들 수 있다. 보니까 아바타 말고도 sitting,..
지난 8월 29일 '벤처 스타트업 아카데미 해커톤'에 참여했다. 참여 학교 중에서 내가 알기론 두 팀정도 신청해서 참여하는걸로 알고있다. 나의 경우 학교측에서 신청할 기회가 주어져서(공석이 생겨서) 내가 직접 주변 지인들로 팀을 꾸려 나가겠다고 신청했다. 안내 pdf 를 보는데 수상 시 후원 기업의 서류 전형 면제, 코딩테스트 면제 혜택이 있길래 혹 했던 것도 조금 있었다. 기본 정보 날짜는 8월 29일부터 30일까지였다. 장소가 강남역 부근이라 부담이 없어서 정말이지 좋았고..! 공지는 디스코드를 통해 진행되었다. 주제는 크게 IT 기업과 관련된 것이라고만 나오고 제일 중요한 세부 주제는 당일날 공개되었다. 입장 위치는 강남역 부근에 위치한 '드림플러스 강남' 이었다. 시설 정말 깨끗하고 해커톤에 집중..
안녕하세요. 데보션영 2기 서다원입니다! 이번 8월 영밋업에서는 데보션 마스터분들의 알찬 네가지 세션을 들어볼 수 있었습니다. 개인적으로 인상 깊었던 내용 위주로 세미나 후기 바로 시작할게요~! 요즘 PM의 효과적인 프로젝트 관리 - 전창국님 저는 요즘 PM 이라는 직무에도 관심이 많은데요. 항상 같이 프로젝트를 진행할 때 같이 PM이랑 함께 작업을 해서 더 관심이 가는 것 같아요. 실제 실무에서 어떻게 PM이 진행하면 좋은지에 대해서 알 수 있었던 유익한 시간이었습니다. 전략 수립하기 창국님은 여러 전략 중에서도 '핵심 목표에 집중하기' 를 제일 중요한 전략이라고 소개하셨어요. 왜냐면 프로젝트를 처음 맡게 되면 진행되고 있던 프로젝트에 중간에 들어가는 경우도 있곤 한데, 이럴 땐 프로젝트 전체를 전반적..
📌 대학생 코딩캠프란? 코드잇에서 제공하는 코딩캠프로, 4주동안 하루 10분! 원하는 분야의 코딩 강의를 수강하고 인증하면서 매일 공부하는 습관을 기를 수 있는 프로그램이에요. 100% 온라인으로 진행됩니다. 📌 참여 방법 코딩 캠퍼가 되면 수강기간을 2배로 늘릴 수 있어요. 이렇게 되면 두 달동안 무제한 강의를 들으며 학습할 수 있어요 ! 📌 참여 혜택 보너스 수강 기간 기존에 코드잇 멤버십에서 보너스 수강기간을 최대 14일 받을 수 있어요 활동 기간동안 미션을 성공하면 추가로 14일을 더 준다고 하네요! 활동 인증서 & 강의 수료증 코드잇만의 인증서와 수료증을 제공해요. 이력서 꿀팁노트 코딩 캠프에서 배운 것들을 활용할 수 있도록 실무자들의 꿀팁이 담긴 노트를 제공해줘요 디지털 플래너 & 손코딩 노트..
안녕하세요 오늘은 코딩 교육 서비스 '코드잇'에 대해서 소개해볼까하는데요. 코드잇, 이미 유명해서 아실 분들은 많이들 알고 계실거라 생각해요! 😀 요즘 코딩 교육 서비스가 정말 많이 늘어나고 있는 것 같아요. 저도 신입생 때 컴퓨터공학부에 입학하고, 인터넷 강의를 통해서 코딩을 학습하는게 효율적이고 무엇보다 재밌다는 걸 알게되면서 코딩 교육 서비스를 정말 많이 찾아다녔던 것 같아요! 저는 사실 중고등학생 때부터 프로그래밍을 해오신 분들과는 달리 대학교에 입학하고 처음 코딩이라는 걸 접했었는데요. 신입생 때 개발동아리에 들어가서, 선배들에게 웹 프로그래밍에 대해서 처음으로 배워보면서 직접 웹사이트를 코딩하는게 너무 신기해서 재미를 붙이게 된 케이스 같아요. ⬆️ 1학년 때 태어나 처음으로 만들어본 웹페이지..
지난 7, 8월에 '서울시우먼테크해커톤' 이라는 해커톤에 참여했었다. 단톡방에 공유가 되길래 흥미가 생겨서 개인으로 지원을 해보았다. 어차피 팀매칭을 자동으로 해준다고 하더라! 주제는 이미 나와있었고, 공모 분야를 따로 지원서에 작성해서 그 공모 분야를 기준으로 팀매칭을 해주는 식이었다. 예를 들어 내가 개발(프론트)와 '아이 키우기 좋은 도시' 라는 주제로 지원을 했다면 '아이 키우기 좋은 도시' 주제를 선택한 다른 기획, 디자인, 백엔드 분들과 팀매칭이 되는 식이다. 4개 공모 분야 중에서 한가지를 선택하면 되었고 신청서에는 참여 동기, 계획, 참여목표, 아이디어 구체화 계획을 작성해서 내면 됐다. 아이디어 구체화 계획은 공모 분야 중에서 하나를 선택해 자신의 아이디어를 적어서 내는 것이다. 근데 이..
이번 프로젝트 로그인 부분을 내가 담당하게 됐는데, 로그인 방식 중에서 카카오 로그인을 구현하게 됐다. 리액트 카카오 로그인에 관련해서 정리된 글들이 많아 개발할 때 참고하면서 진행할 수 있었다. 하지만 까먹지 않고자 한번 정리하려 포스팅해본다. 방식 프론트엔드와 백엔드가 협업하면서 카카오 로그인을 구현하는 방식이 다를 수 있다. 나는 이런 방식으로 했다- 라는 정도로 참고하시면 좋을 것 같다. 나는 프론트엔드 담당이어서 프론트엔드 입장에서 서술해보려고한다. 프론트엔드에서 카카오 로그인 요청 / 인가 코드 받기 요청을 한다 카카오에서 redirect url 로 인가코드를 프론트엔드로 보내준다. 받은 인가코드를 백엔드에게 보낸다. 백엔드는 이 인가코드를 받아 처리해서 AccessToken 을 응답으로 프론..