본문 바로가기

전체 글

(38)
#2 첫 면접 보호되어 있는 글입니다.
#1 슬기로운 백수생활 시작 보호되어 있는 글입니다.
리액트 카카오(kakao) 소셜로그인 구현 카카오 소셜 로그인 구현 (React - Spring)  여기서 프론트엔드는 카카오에게서 인가코드를 받아서 백엔드에게 전달만 하면 끝이다!1. 애플리케이션 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com먼저 여기서 Kakao Developers에 로그인 후 애플리케이션 생성하고 REST API 키 및 Redirect URI를 설정해야 한다.2. 카카오 로그인 요청 사용자가 '카카오 로그인' 버튼을 클릭하면 카카오 인증 페이지(https://kauth.kakao.com/oauth/authoriz..
React Daum Postcode(카카오 우편번호 서비스) 방법이 두가지가 있었다.1. 다음 우편번호 서비스 API 사용하기(react-daum-postcode)https://www.npmjs.com/package/react-daum-postcode react-daum-postcodeDaum Postcode service for React. Latest version: 3.1.3, last published: a year ago. Start using react-daum-postcode in your project by running `npm i react-daum-postcode`. There are 24 other projects in the npm registry using react-daum-postcode.www.npmjs.com 2. 카카오 우편번호 ..
git reset, 이전 커밋으로 돌아가기 커밋하고 추가 작업을 하다가~~~~~코드가 꼬여버려서 그 전 커밋으로 돌아가고 싶을 때, 추가 작업코드는 다 날아감 주의 1. 현재 작업 중인 브랜치에서 특정 커밋으로 돌아가고 싶다면 git checkout을 사용git checkout 하고 git branch로 확인해보니까 무슨 브랜치로 이동이 됨. - 원래 seunghee 브랜치에서 작업하고 있었음.(해당 커밋의 상태로 "detached HEAD" 상태로 이동. 즉, 기존 브랜치는 그대로 남아 있고, 해당 커밋을 임시로 볼 수 있음.)근데 이전 커밋의 상태로 돌아가있지는 않았음. 왜냐 ?"detached HEAD" 상태에서 특정 커밋으로 이동했더라도, 해당 커밋의 변경사항이 현재 작업 디렉토리에 자동으로 적용되지는 않습니다. 라고 하네요 2. 이 경..
[모던 리액트 Deep Dive] 타입스크립트 TypeScript is JavaScript with syntax for types자바스크립트 문법에 타입을 가미한것이 타입스크립트이다. 타입스크립트는 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다.런타임까지 가지 않더라도 코드를 빌드하는 시점에서 이미 에러가 발생할 가능성이 있는 코드를 확인할 수 있다.타입스크립트 활용법any 대신 unknown을 사용하자any모든 타입을 허용하므로 타입 안전성이 낮다.타입 추론이 어렵다.unknown모든 타입을 허용하지만, 실제 사용 시 타입 검사가 필요하므로 타입 안전성이 높다.다른 타입으로 좁혀질 수 있어, 타입 추론이 용이하다. 타입 가드를 적극 활용하자조건문 + 타입가드를 사용하면 타입을 효과적으로 좁힐 수..
[모던 리액트 Deep Dive] 리액트에서 자주 사용하는 자바스크립트 문법 구조 분해 할당배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것.배열 구조 분해 할당  : 배열의 요소를 개별 변수에 할당하는 방법기본 사용법 ▼const array = [1, 2, 3, 4, 5]let [first, second, third, fourth ,fifth] = array;console.log(first); // 1console.log(second); // 2console.log(third); // 3console.log(fourth); // 4console.log(fifth); // 5 일부 요소 건너뛰기 ▼쉼표를 사용하여 배열의 일부 요소 건너뛰기const array = [1, 2, 3, 4, 5]let [first, , , ,fifth] = array;console..
[모던 리액트 Deep Dive] 이벤트 루프와 비동기 통신의 이해 싱글 스레드 자바스크립트싱글 스레드는 자바스크립트의 코드의 실행이 하나의 스레드에서 순차적으로 이루어지는 것을 의미한다.이는 코드를 한 줄 한 줄 실행하는 것을 의미하며, 궁극적으로 하나의 작업이 끝나기 전까지 뒤이은 작업이 실행되지 않는다는 것을 의미한다. 이러한 특징은 'Run-to-completion'이라고 하며, 동시성을 고민할 필요가 없다는 점에서는 아주 큰 장점이 된다. 자바스크립트는 싱글 스레드에서 동기방식으로 작동한다. 일반적으로 한 번에 하나의 작업을 처리할 수 있는 것이다.동기 방식은 직렬 방식으로, 하나의 작업을 처리할 동안 다른 모든 작업은 대기한다. 과거에는 자바스크립트가 기초적인 수준에서만 제한적으로 사용되었기 때문에 싱글 스레드가 더 합리적인 방식이었다.오히려 멀티 스레딩을 지..