본문 바로가기

분류 전체보기

 (370)
[Next.js] 카카오 소셜 로그인 구현하기 카카오 소셜 로그인을 구현하기 위해서 먼저 kakao developers에서 설정을 해주어야 한다. 먼저, 내 애플리케이션 > 애플리케이션 추가하기를 클릭하고, 앱 이름과 사업자 정보를 입력하여 애플리케이션 생성한다.생성된 애플리케이션에 들어가서, 앱 설정 > 플랫폼에서 웹 플랫폼을 추가한다. 다음으로, 앱 설정 > 카카오 로그인에 들어가서 활성화 설정을 ON으로 하고, http://localhost:3000/api/auth/callback/kakao를 Redirect URI로 추가한다. ( 프로덕션 환경에서는 프로덕션 URL을 사용 ) .env 파일을 만들어준다. .env 파일에는 앞에서 추가한 REDIRECT URI와 REST API KEY를 설정해주어야 한다. REST API KEY는 앱 설정 > ..
[SSAFY] 자율프로젝트 회고 및 2학기 수료 후기 SSAFY에서의 마지막 프로젝트인 자율 프로젝트가 어느덧 끝나게 되었다.취업 준비와 병행하며 힘들었지만, 가장 얻어가는 게 많은 의미있는 프로젝트이기도 하다. 프로젝트 소개누구나 쉽게 LLM 챗봇을 만들 수 있도록 돕는 플랫폼 "Flow Studio"를 개발했다. 복잡한 코딩 없이도 블록코딩으로 챗봇의 대화 흐름을 눈으로 보면서 쉽게 조작할 수 있도록 하였고, 챗봇을 공유하여 커스터마이징 할 수 있는 기능과 챗봇의 성능을 분석하는 기능이 기존 챗봇 제작 플랫폼과의 차별점이다.  https://github.com/minseonkkim/FlowStudio GitHub - minseonkkim/FlowStudio: 🤖 누구나 쉽게 만드는 LLM 챗봇 제작 플랫폼🤖 누구나 쉽게 만드는 LLM 챗봇 제작 플랫..
[Javascript] 자바스크립트 모듈 (export, import) JavaScript에서 모듈을 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 하며, 다른 파일에서 필요한 기능만 가져다 쓸 수 있다. 자바스크립트 모듈의 기본 개념과 export, import의 사용법을 알아보자.HTML 파일에서 자바스크립트 모듈을 사용하는 방법 type="module" 속성을 사용하면, 해당 스크립트 파일이 모듈로 처리된다.export와 import 사용법1. 개별 함수 내보내기 및 불러오기// hello.js export function hello1() { console.log("Hello 1!"); } export function hello2() { console.log("Hello 2!"); } // main.js import { hello1, hello2 }..
[Typescript] unknown과 any의 차이 1. unknown 타입은 any를 제외한 다른 타입에 할당할 수 없다. Typescript 3.0 버전부터 추가된 타입이다. any와 마찬가지로 모든 타입의 값을 할당할 수 있다.그렇다면 그냥 any로 사용하면 되지 왜 unknown이 필요한걸까? typescriptlang.org의 설명에 따르면 unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없다.반면 any는 never를 제외한 모든것에 할당 가능하다. 조금 더 쉽게 코드로 예시를 들어보자면, let varr:unknownlet booleanType:boolean = varr // Type 'unknown' is not assignable to type 'boolean'let bool:boolean = truelet unkw:unk..
[React] useState 사용법과 동작원리 useState란?state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 react는 자동으로 UI를 업데이트 시킨다. 다음 예제에서 name은 state가 아니고 단순 변수이기 때문에 버튼을 클릭해도 화면에 표시되는 이름이 바뀌지 않는다.export default function Hello() {  let name = "Mike";  function changeName() {    name = name === "Mike" ? "Jane" : "Mike";  }  return (          state      {name}      Change      );}  state로 만들기 위하여 react hook 중 하나인 useState를 사용한다.https://legacy.reactjs.o..
[SSAFY] 공통프로젝트 회고 (feat. 최우수상🏆) 7주간의 공통프로젝트가 끝났다!! 열심히 달려왔고 목표로 했던 수상, 그것도 1등을 해서 너무 뿌듯한 프로젝트로 기억에 남을 것 같다. 이대로 보내주기 아쉽지만 보내줄 때가 되었으니 회고를 써보려 한다.프로젝트 소개서비스명은 키즈링크, 유치원과 학부모를 연결하는 서비스이다. 유치원 선생님이 겪는 잡무와 학부모의 갑질 문제를 해결하고, 학부모의 입장에서 아이의 안전에 대한 걱정과 상담을 위해 유치원을 방문해야 하는 번거로움을 줄이기 위해 이 프로젝트를 기획했다. 핵심 기능은 AI 아이별 사진분류, 화상상담 예약 자동 일정 조율, 실시간 화상상담, 상담 중 폭언 감지, 등하원버스 실시간 위치 확인이고 부가 기능은 알림장, 성장일지, 서류관리, 일정관리가 있다. 이 프로젝트에서 나는 선생님용 서비스의 전체적인..
[React] Typescript 컴포넌트 타입 종류 1. React.FC함수형 컴포넌트를 정의할 때 사용하는 타입이다. FunctionComponent의 줄임말이다.   ❓ React 18 버전 이전까지 FC 사용을 지양했던 이유와 이제 다시 사용할 수 있는 이유는 무엇일까? React.FC는 함수 컴포넌트의 props 타입을 간결하게 표현하기 위해 만들어졌다. 이를 통해 타입스크립트를 사용하는 프로젝트에서 함수 컴포넌트의 props를 명시적으로 지정할 수 있었다. 뿐만 아니라 props에 기본적으로 children이 포함하여, 컴포넌트에서 자식 요소를 손쉽게 다룰 수 있기를 의도했다.import { FC } from 'react';interface Props { name: string}const Foo: FC = ({ name }) => { ..
[React] Redux 상태 관리 라이브러리 Redux를 사용해야 하는 이유기존에는 props로 상태관리를 했다. (다음 게시물 참고)https://winterflower.tistory.com/460 [React] props를 통해 컴포넌트에 값 전달하기props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코winterflower.tistory.com props로 상태 관리를 할 경우 자식 컴포넌트 간 다이렉트 데이터 전달은 불가능하고, 부모 컴포넌트를 통해 주고받아야 해서 자식이 많아질 경우 상태 관리가 매우 복잡해진다. redux를 쓰면 상태값을 컴포넌트에 종속시키지 않고, 컴포넌..

티스토리툴바