본문 바로가기

전체 글166

Promise 다루기 Promise란 비동기 작업이 맞이할 미래의 완료 도는 실패와 그 결과 값을 나타내는 객체 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 최종 결과 반환 (X) 미래의 어떤 시점에 제공하겠다는 '약속(Promise)' 반환 (O) Promise의 3가지 상태 1. pending : 초기 상태 2. fulfilled : 연산이 성공적으로 완료됨 3. rejected : 연산이 실패함 fulfilled/rejected 시, 프로미스의 then 메서드에 의해 대기열에 추가된 처리기들이 호출됨 생성자 Promi.. 2023. 11. 11.

[LeetCode] 2620. Counter : 클로저 문제 Given an integer n, return a counter function. This counter function initially returns n and then returns 1 more than the previous value every subsequent time it is called (n, n + 1, n + 2, etc). 정수 n이 주어질 때, counter 함수를 리턴하세요. 이 counter 함수는 초기에는 n을 리턴하며 이후에는 호출될 때마다 이전 값보다 1씩 큰 값을 리턴합니다. 예시 Example 1: Input: n = 10 ["call","call","call"] Output: [10,11,12] Explanation: counter() = 10 // The .. 2023. 11. 11.

[우테코 프리코스 6기] 2주차 자동차 경주 회고 1주차 과제를 무사히 제출하고 2주차 과제를 진행하게 되었다. 1주차 과제 덕분인지 클래스 개념에 한결 익숙해져 과제를 수월하게 진행할 수 있었다. 과제 이번 과제를 진행하면서는 1주차 과제 보다 기능 구현 목록을 좀 더 상세하게 작성해보고자 노력했다. 필드에 대한 설명도 하고, 해당 기능은 어떤 함수로 구현했는 지도 작성했다. 그리고 이번 과제는 1주차와는 다르게 테스트 코드를 직접 작성하는 것이 추가 요구 사항으로 주어졌다. 그치만 테스트 코드 작성이.. 맘처럼 쉽지 않았다... 그래서 예시로 주어진 코드를 분석해가며 작동 과정을 파악해서 이를 흉내내는 방식으로 테스트 코드를 작성했다. 배운 점 1. 기능 목록을 재검토한다 공통 피드백에서 이런 내용이 있었다. 기능 목록을 클래스 설계와 구현, 함수 .. 2023. 11. 7.

[우테코 프리코스 6기] 1주차 숫자야구게임 회고 작년에 이어서 올해도 우테코 프리코스에 도전하게 되었다. 작년에는 능력 부족으로 인해 도중에 하차했는데, 이번 6기 프리코스는 꼭 끝까지 해보고 싶다. 과제 진행 지난 5기 프리코스의 1주차 과제는 JavaScript 알고리즘 7문제를 풀어 제출하는 것이었는데, 이번에는 지난 5기 프리코스의 2주차 과제였던 숫자야구게임이 1주차 과제로 주어졌다. 1년 전에 해봤던 과제였지만, 어차피 1년 지나서 잘 생각나지 않기도 하고 새로 실력을 점검해볼 겸 이전 과제 코드는 참고하지 않고 진행해보았다. 평소 혼자서 코드를 작성할 때는 클래스를 자주 사용하지 않아 과제 진행에 앞서 클래스에 대한 기초 공부를 하는 과정을 거쳤다. 확실히 클래스에 대한 이해를 마치고 나니 과제를 수행하기 한결 수월해진 기분이었다. Jav.. 2023. 11. 7.

⚾️ 직관일기 : 직관 기록하고 직관 승률 계산하는 서비스 개발 일지 직관일기 ⚾️ 나의 직관 승률은? happybaseball-diary.web.app 기획 아이디어 올해 야구에 빠져서 정말 직관을 많이 다녔다. 팀의 승률만큼이나 재밌는 건 내가 직관 승요인지의 여부이다. 직관 기록만을 전용으로 남기는 플랫폼이 존재하지 않기 때문에 (내가 못 찾은 것일수도) 대부분의 야구 팬들이 메모장에 직관 승/패 여부를 기록하고 있었다. 나는 노션에 기록해서 승률을 계산했다. 하지만 모든 사람이 노션을 잘 활용하는 것은 아니고, 메모장은 정말 불편하다고 생각했기 때문에 일기 기록 플랫폼과 같이 직관 기록 플랫폼을 만들어보기로 했다. 주요 기능 1. 로그인 2. 직관 경기 내용 기록 (CREATE, READ, DELETE) 3. 승률 계산 4. 야구 행운 복권 5. 광고 배너 구현 과.. 2023. 10. 22.

Google 소셜 로그인 과정 (OAuth) ⚾️ 직관일기 : 직관 기록하고 직관 승률 계산하는 서비스 개발 일지 직관일기 ⚾️ 나의 직관 승률은? happybaseball-diary.web.app 기획 아이디어 올해 야구에 빠져서 정말 직관을 많이 다녔다. 팀의 승률만큼이나 재밌는 건 내가 직관 승요인지의 여부이다. 직관 기록만 inner-stella.tistory.com 직관일기 라는 서비스 구현 과정에서 로그인 기능이 필요했기 때문에 Google Firebase에서 제공하는 Authentication 기능을 사용하기로 했다. 여러 가지 로그인 제공업체를 제공하고 있다. 기본은 이메일/비밀번호인데, 비밀번호 입력 시 암호화 등을 잘 할 자신이 없었고 이를 구현하기에는 다소 시간이 걸릴 것이라고 생각되어 소셜 로그인을 사용하기로 했다. 추후 이 .. 2023. 10. 22.

🍀 lucky template : 지원서 편리하게 작성하는 서비스 개발 일지 lucky template 🍀 지원서를 편하게 작성하기 위한 에디터를 제공합니다 lucky-template.web.app 기획 아이디어 요즘 취업 준비를 하며 여러 기업에 지원서를 넣을 일이 많아졌다. 이력서와 포트폴리오만 받는 기업이 있는 한 편, 3~4개 정도의 문항에 대한 답변을 작성해야 하는 기업도 있다. 이 때 신경 쓰이는 것은 (내용은 당연히 챙겨야 하고) 글자 수 제한이다. 나는 주로 답변을 노션에 작성한 후, 네이버 글자 수 세기 프로그램에 복사 & 붙여넣기 하며 답변을 완성했다. 이 부분에서 내가 불편함을 느낀 점은 다음과 같다. 1. 노션 - 네이버 글자수 세기 왔다 갔다 하기 귀찮다. 물론 네이버 글자수 세기에서 계속 써도 되지만, 네이버 글자수 세기는 텍스트 창의 높이 가 고정되어 .. 2023. 10. 22.

카카오톡으로 링크 공유시 오픈 그래프 이미지 안 나올 때 (공유 디버거 사용하기) ※ 오픈그래프 설정하는 법 [HTML] 링크 공유 시 미리보기 썸네일 설정하기 (meta 태그) 프로젝트를 하던 중, SNS로 링크 공유 시 미리보기 화면을 꾸미고 싶다는 기획자의 의견을 받아 이를 반영하게 되었다. 넣을 수 있는 것들은 크게 4가지가 있다. 1. 썸네일 이미지 2. 썸네일 제목 3. inner-stella.tistory.com 오픈그래프를 설정하면서 테스트하는 과정에서 카카오톡으로 링크를 보내다보면, 변경 사항이 제대로 반영되지 않는 경우가 있다. 이는 카카오톡에 이미 해당 링크에 대해 캐싱되기 때문인데, 이를 해결하기 위해서는 카카오톡 개발자 도구 사이트에서 해당 링크에 대한 캐시를 초기화해주면 된다. https://developers.kakao.com/tool/debugger/sha.. 2023. 9. 21.

맛집 검색기 React 리팩터링 작년 초에 웹 개발 공부를 시작하면서 만들었던 맛집 검색기를 리팩터링했다. 리팩터링을 하고자 했던 이유는 다음과 같다. 1. HTML 위주의 하드 코딩으로 인한 유지 보수 문제 2. 디자인 기존 코드 극 초기의 코드는 정말 HTML 80~90%로 작성되었었기 때문에, 한 번 함수 정리를 한 상태긴 했다. ver 1.5 리팩터링 일기 리팩터링 리디자인하면서 컴포넌트 위주로 리팩터링하였다. 따라서 리액트를 사용하였고 언어는 typescript를 사용했다. 재사용성을 고려하여 컴포넌트를 만들고 별도의 폴더에 넣어두었다. 또한 함수의 재사용성을 고려하여 따로 함수 파일을 생성한 후 이를 필요한 곳에서 export 해오는 방식으로 사용했다. 이전에 HTML, JS 파일에 변수로서 저장되었던 데이터들을 json 파.. 2023. 9. 15.

이전 1 2 3 4 5 6 ··· 19 다음

티스토리툴바