SOP, COP Same Origin Policy document 객체는 출신인 origin을 가지고 있고, 이는 js에서 `document.location.origin`으로 확인할 수 있다. document 내에서 리소스들과 상호작용할 때, origin이 다르다면 리소스를 사용하는 데에 있어서 제한을 두겠다는 것이 SOP(Same Origin Policy)이다. Origin 판단 Origin이 같은 지는 Protocol, Host, Port로 판단하는데 url 구조를 보면 다음과 같다. http://localhost:3000 Protocol://Host:Port 세 가지가 모두 같으면 같은 Origin이라고 판단되는 것이다. IE는 양쪽 도메인 모두 높음 단계의 보안 수준일 경우 Same Origin ..

Ajax는 js를 이용한 비동기 통신으로, 클라이언트 서버 간의 xml(Extensible Markup Language)데이터를 주고받는 기술이다. 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. Ajax 방식을 이용한 웹 API는 XMLHttpRequest 부터 시작하여 fetch를 거쳐 axios까지 다양하다. XMLHttpRequest는 복잡하고 가독성이 떨어지기 때문에 fetch api가 ES6에서부터 표준이 되었는데, 따라서 현재 fetch api는 기본 라이브러리로 따로 설치하지 않고 사용해도 된다. axios는 Node.js에서 XMLHttpRequests를 사용하기 좋게 만들어둔 api이며 따로 설치해주어야 동작한다. TOP Ajax API를 참고하면 더 많은..

신규 아이디 추천 난이도 : ★☆☆☆☆ 걸린 시간 : 30분 => 반성! 문제 신규 아이디 추천 문제 바로가기 문제 설명 카카오에 입사한 신입 개발자 네오는 카카오계정개발팀에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. 네오에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 ..

ECMAScript 공부 ES5 이전 ES3 (1999) : 정규표현식, try/catch문 string string.length : 길이 속성 string.indexOf(string, [start]) : 해당 글자의 시작 index 위치 반환 string.lastIndexOf(string, [start]) : 해당 글자의 마지막 시작 index 위치 반환 string.search(string) : indexOf와 비슷하지만 정규표현식 사용 x string.slice(index, index2) : index부터 index2-1까지 자르기 음수 index는 뒤에서부터 셈 string.substring(index, index2) : slice와 비슷하지만, 음수 불가 string.substr(index, l..

프론트에서 2가지 호출 api를 같은 함수에 두고 동시에 호출하였더니, 서버에서 뒷 순서로 호출된 api 실행 시 No database selecte error 가 난다. 해결 방법 : gorm.DB에 있는 sql.DB의 SetMaxOpenConns 함수를 이용하여, 동시에 허용 가능한 최대 커넥션 개수를 제한해주어야한다. Config.DB, err = gorm.Open(mysql.Open(Config.DBURL(Config.BuildDBConfig())), &gorm.Config{}) if err != nil { fmt.Println("Status: ", err) return } // 아래의 코드를 추가해준다. db, err := Config.DB.DB() if err != nil { fmt.Print..

사용한 코드는 다음과 같다. { colorArr.map(...) } 해당 코드는 정상동작하지만, 표시된 getContentAnchorEl을 속성으로 설정하지 않으면 다음과 같은 오류가 뜬다. Material-UI: You can not change the default `anchorOrigin.vertical` value when also providing the `getContentAnchorEl` prop to the popover component. Only use one of the two props. Set `getContentAnchorEl` to `null | undefined` or leave `anchorOrigin.vertical` unchanged. material-ui의 popove..

html2canvas + 이미지 호스팅 *예제는 React Hook 환경에서 진행되었습니다. 결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다. html table을 이미지로 만들기 만들어진 이미지를 호스팅하기 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기 차례대로 해보자. html table을 이미지로 만들기 DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다. import html2canvas from 'html2canvas'; const copyDOM = async () => { window.scrollTo(0, 0); let url = ""; await html2canvas(..

매칭 점수 걸린 시간 : 3시간 이상 문제 난이도 ★★★☆☆ 문제 설명 프렌즈 대학교 조교였던 제이지는 허드렛일만 시키는 네오 학과장님의 마수에서 벗어나, 카카오에 입사하게 되었다. 평소에 관심있어하던 검색에 마침 결원이 발생하여, 검색개발팀에 편입될 수 있었고, 대망의 첫 프로젝트를 맡게 되었다. 그 프로젝트는 검색어에 가장 잘 맞는 웹페이지를 보여주기 위해 아래와 같은 규칙으로 검색어에 대한 웹페이지의 매칭점수를 계산 하는 것이었다. 한 웹페이지에 대해서 기본점수, 외부 링크 수, 링크점수, 그리고 매칭점수를 구할 수 있다. 한 웹페이지의 기본점수는 해당 웹페이지의 텍스트 중, 검색어가 등장하는 횟수이다. (대소문자 무시) 한 웹페이지의 외부 링크 수는 해당 웹페이지에서 다른 외부 페이지로 연결된 링..