전체 글

웹 프론트엔드 개발자를 꿈꾸고 있습니다 :)
Frontend/React

Vite 프로젝트에 PWA와 FCM 푸시 알림 적용하기

0. PWA와 FCM을 쓰려는 이유친구들과 공모전을 나가기로 했었다. 공모전에 프로젝트를 제출하려면 몇 가지 조건을 충족해야했는데, iOS와 Android에서 모두 작동해야하며, 푸시 알림이 구현되어야 한다는 조건이었다. React와 문법이 비슷한 React Native를 빠르게 학습한 후 이 언어를 활용하여 개발을 진행하는 방법이 먼저 떠올랐다. 그 다음에 떠오른 것이 바로 PWA(Progressive Web App)였다. PWA 기술을 활용하면 웹사이트지만 네이티브 앱처럼 설치하여 사용할 수 있고, 푸시 알림, 오프라인 작동 등 앱과 유사한 기능들도 구현할 수 있다. 푸시 알림은 FCM(Firebase Cloud Messaging)을 통하여 구현하기로 했다. Firebase을 독학하여 CRUD를 구현..

Study/SQL

[SQL] SELECT, FROM, WHERE, 비교 연산자, 문자열 검색에 대해서

책 '그림으로 배우는 SQL 입문'을 읽은 후 정리한 글입니다. 데이터베이스에는 몇 가지 종류가 있는데, 그 중 가장 많이 이용되는 것은 Relational Database(관계 데이터베이스: RDB 형식) RDB는 행(record)과 열(column)으로 구성된 표(table)로 데이터를 다룸테이블 안의 1개의 요소를 ‘필드’라고 부름 RDB를 관리하기 위한 DBMS를 관계 데이터베이스 관리 시스템, RDBMS라고 부름 SQL: 데이터베이스 조작이나 정의를 시행하기 위한 언어1. SELECT, FROM데이터베이스에서 데이터를 가져오기 위해서는 SQL에서 SELECT라는 구문을 사용(SELECT 구문을 사용한 SQL을 SELECT 문이라고 함) 예시) product_id와 product_name을 pro..

Programmers(JavaScript)

[프로그래머스 자바스크립트] ‘모의고사’ 풀어보기

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42840 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 풀이1번 수포자는 1,2,3,4,5번을 계속 반복하면서 찍고,2번 수포자는 2,1,2,3,2,4,2,5번을 반복하면서 찍고,3번 수포자는 3,3,1,1,2,2,4,4,5,5번을 반복하면서 찍는다. 수포자들이 찍은 번호들을 각각 배열로 선언하고, 수포자들이 맞춘 문제 개수들도 변수로 선언한다. answers 배열을 순회하면서 해당 배열이 가리키는 index를 각각 5, 8, 10으로 나눈 값을각 수포자가 찍은 번호 배열의 inde..

Frontend/Javascript

[코딩테스트] Javascript로 코딩테스트 보기 전 봐야 할 핵심로직 정리

‘큰돌의터전’님의 ‘자바스크립트로 코딩테스트 보기전 봐야할 핵심로직 12가지’ 유튜브 영상을 보고 정리한 글입니다. 자세한 내용은 해당 유튜브 영상에 나와있으니 참고 부탁드립니다! 유튜브 링크: https://www.youtube.com/watch?v=MlvZ2IufTFI1. 배열 순회a = [1, 3, 45, 2, 10]a.forEach((e, i) => { console.log(e,i)})// 결과// element와 index가 출력된다.// 1 0// 3 1// 45 2// 2 3// 10 42. 문자열 분할const str = "Hello World";const ret = str.split(" ")console.log(ret)// 결과 (공백을 기준으로 분할)// [ 'Hello', 'World..

Programmers(JavaScript)

[프로그래머스 자바스크립트] ‘올바른 괄호’ 풀어보기

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/129091. 문제를 보고 든 생각‘(’이 먼저 나오고, 그리고 나중에 ‘)’으로 이 괄호가 닫혀야한다.그렇다면, 알 수 있는 사실은‘)’이 먼저 나오면 안된다.‘(’의 개수와 ‘)’의 개수는 같아야한다.그렇다면 0으로 시작하는 변수를 두고, ‘(’이 나오면 1을 더해주고, ‘)’이 나오면 1을 빼주면 될 것 같다.‘)’이 먼저 나오면 안된다고 했다. → 이 경우는 해당 변수가 음수가 되는 경우이므로 음수가 되면 바로 false를 return 해주면 될 것 같다. 2. 풀이function solution(s){ let count = 0; for(let ind..

Programmers(JavaScript)

[프로그래머스 자바스크립트] ‘입국심사’ 풀어보기

프로그래머스의 코딩테스트 문제 → 알고리즘 고득점 Kit → 이분탐색 카테고리에서 풀었다.이분탐색이라는 카테고리 안에 있는 문제인 것은 알았지만, 도대체 왜 이 문제가 이분탐색을 활용해야하는지 이해하지 못하고 삽질만 계속하다가 다른 분들의 풀이를 보고 겨우겨우 풀 수 있었다. 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/43238풀이우리가 구해야하는 것은 ‘모든 사람이 심사를 받는데 걸리는 시간의 최솟값’이다.n은 입국심사를 기다리는 사람 수이며, 배열 times에는 각 심사관이 한 명을 심사하는데 걸리는 시간이 담겨있다. 만약 ‘모든 사람이 심사를 받는데 걸리는 시간의 최솟값’을 안다면(answer라고 하자),심사관 A가 한 명을 ..

Study/프롬프트 엔지니어링

[프롬프트 엔지니어링] 함수 호출, 프롬프트 평가, LLM 보안, Autonomous Agent에 대하여

김진중(골빈해커)님의 '최고의 프롬프트 엔지니어링 강의'를 읽고 정리한 글입니다.함수 호출호출할 수 있는 함수(기능)를 미리 설정해두면 사용자의 필요에 따라 해당 함수 이름을 호출하여 요청에 응답하는 기능→ 프로그램 내의 함수를 직접 호출하는 것이 아니라 어떤 함수와 파라미터가 필요한지를 JSON 형식으로 응답해줌{ "name": "get_current_weather", "description": "주어진 위치의 현재 날씨를 가져옵니다.", "parameters": { "type": "object", "properties": { "location": { "type": "string", "description": "도시 또는 지역, 예) 서울", }, "unit": {"type"..

Study/프롬프트 엔지니어링

[프롬프트 엔지니어링] 프롬프트 작성 도움, 환각 줄이기, 외부 지식 주입에 대하여

김진중(골빈해커)님의 '최고의 프롬프트 엔지니어링 강의'를 읽고 정리한 글입니다.모델을 선택할 때 고려해야 할 것들성능이 높은 모델일수록 속도는 떨어진다. 즉, 성능이 낮은 모델일수록 속도는 빨라짐->비용과 성능은 비례하지만 성능이 올라가는 것에 비해서는 비용이 훨씬 더 크게 높아지는 편 입력 토큰(프롬프트)에 대한 가격보다 결과물로 생성한 토큰 가격이 보통 두세 배 정도 비싸기 때문에 답변이 길어야하는 작업이라면 더 큰 비용이 발생하므로 주의 필요 비용을 최대한 정확하게 예측해야 할 경우에는 샘플 결과를 모아 토크나이저로 먼저 계산해보면 됨 성능(추론 능력)여러 기관에서 제공하는 LLM 모델의 성능 순위 리더 보드를 참조해 성능 비교 가능벤치마크 점수가 높아도 실제 사례에서는 원하는 만큼 성능이 안나올..

우아한테크코스(프리코스)

전혀 예상치 못했던, 우아한테크코스 7기 최종 코딩테스트 후기

0. 월요일 오후 3시, 메일 한 통이 도착했다1시 반에 시작했던 수업이 끝나고, 친구가 아직 밥을 안 먹었다고 해서 같이 학생회관에 있는 식당으로 갔다. 친구가 밥을 먹는 사이에 나는 무심코 핸드폰을 들여다보고 있었다. 그러다가 오후 3시, 정확히는 2시 59분 즈음에 메일이 도착했다는 알림이 도착했다. ‘[우아한테크코스] 1차 심사 결과 안내’라는 제목이었다. 이제 결과가 도착했구나. 4주차 테스트를 다 통과하지 못했었기 때문에 합격을 할 것이라는 기대는 별로 갖지 않았다. 아쉽긴 했지만, 한 달 동안 열심히 몰입하고 성장해으니 그걸로 만족해야지 생각하고, 앞으로 무슨 활동을 해야할지 고민하고 있었다. 그래도 메일은 도착했으니 열어봐야지. 알림을 클릭해 메일로 들어가니 상세 내용이 보였다. 맨 첫 줄..

Event

‘엔비디아 RTX AI PC 캠퍼스 세미나’를 다녀오고 개념 정리하기

아직 12월은 아니었지만 오늘 첫눈이 내렸다. 어제까지만 해도 초록색을 내뿜던 나무들은 흰 눈에 덮여 그 무게를 견디고 있었다. 그 모습을 사진으로 남기고, 발걸음을 옮겨 학교로 향했다. 오늘 학교로 온 이유는 바로 대공연장에서 ‘엔비디아 RTX AI PC 캠퍼스 세미나’가 열렸기 때문이다.  미국 주식에 관심이 있어 엔비디아에 관심이 있었던 적이 있었지만, 정작 엔비디아가 어떤 기업이고, 무슨 서비스를 내세우고 있는지에 크게 관심을 두지는 않았었다. AI 대격변의 시대가 열리고 AI를 개발하는 수많은 회사들이 엔비디아의 제품을 필요로 했기에 엔비디아의 주가가 상승했다고 짐작을 할 뿐이었다. 오늘 세미나에 참석해 엔비디아는 무슨 회사인지, 그리고 제목에 써져있는 RTX는 무슨 뜻인지 확인하고 싶었다. 대..