전체 글 86

다양한 화살표 함수 구문

중요한 참고 사항. 이 글의 끝 부분에 있는 "함수는 객체만 반환"하는 특수 사례를 놓치지 마세요!1) 기본 구문:const add = (a, b) => { const result = a + b; return result; // like in "normal" functions, parameters and return statement are OPTIONAL!};주목하실 만한 사항. 마지막의 세미콜론, 함수 키워드 없음, 매개변수/인수의 괄호.2) 정확히 하나의 매개변수를 받는 경우 더 짧은 매개변수 구문.const log = message => { console.log(message); // could also return something of course - this example j..

💻 FE/🍓 JS 2025.05.13

제미나이와의대화

inner join 은 양쪽 테이블 모두 일치하는 경우 값 반환outer join 에서 left join 오른쪽 컬럼 nullnot exists는 특정 조건을 만족하는 레코드가 쿼리에 없을때 메인 쿼리를 반환할 경우 유용. 특정 조건이 없는 레코드 필터링 용도rank()는 1224, dense_rank()는 12223over()절은 윈도우를 정의, 데이터를 partition by하고 order by 하는 방법 지저정, 각 행에 대해 어떤 범위의 데이터를 가지고 계산할 것인가. 집계범위. partition by는 전체 결과 집합을 그룹으로 나눔. 그룹별로 별도 계산 수행. 그룹별 집계 구간 지정윈도우 함수 : 결과 집합의 개별 행을 유지하면서 계산 결과를 추가. 각 부서별 급여 순위SELECT 사원..

💻 FE 2025.05.13

깃 워크 플로우

단순히 명령어를 나열하는 것을 넘어, 프로젝트의 변경사항을 추적하고, 협업하는 것 정의 워킹 디렉토리 (Working Directory):물질적 비유: 사용자님의 컴퓨터 책상 위, 현재 펼쳐놓고 작업 중인 실제 프로젝트 파일들이 놓인 공간입니다. 코드를 수정하고, 파일을 생성하거나 삭제하는 모든 활동이 여기서 일어납니다.실체: 프로젝트 폴더 그 자체입니다. my-project/ 같은 곳이죠.스테이징 에어리어 (Staging Area, 또는 Index):물질적 비유: 책상 위에서 작업한 결과물 중, 다음번 공식 기록(커밋)에 포함시킬 것들만 골라 올려두는 '발표 준비대'와 같습니다. 모든 변경사항을 한꺼번에 기록하는 것이 아니라, 의미 있는 단위로 선별하는 중간 단계입니다.실체: .git 디렉토리 내의 ..

💻 FE 2025.05.13

기리기리기리깃 !

버전관리를 왜 해야한다고 생각하나요? 음, 일단 수정한 것들이 예상대로 안 굴러갈 수 도 있고, 이전의 코드가 필요한 상황도 언제든지 있을 수 있고, 또 타인과 협업할때 코드의 타임라인을 확인하고 병합하기에도 수월하기 때문입니다. git add, git commit, git push의 차이점을 설명해보세요add는 내가 수정했고 커밋하고 싶은 파일을 추가하는것 ? -> 스테이징 구역 -> 준비커밋은 수정사항을 메모와 함께 저장하는 것이고 -> 레파시토리에 이력 -> 저장푸시는 커밋된 사항을 깃허브와 같은 저장소에 업로드 하는 것입니다. -> 원격 저장소 업로드 -> 공유 .gitignore 파일은 왜 필요한가요? 유료 api를 남이 쓰면 내 돈이 나감. 용량 큰 모듈은 안 올리기 로그파일, 임시 파일 ..

💻 FE 2025.05.13

2. 네트워크

1. 네트워크의 기초네트워크 : 노드와 링크가 서로 연결되어 리소스를 공유하는 집합노드 : 서버, 라우터, 스위치 등 네트워크 장치를 의미링크 : 유선 또는 무선을 의미1.1 처리량과 지연시간좋은 네트워크 기준 : 처리량이 많음 / 지연 시간 짧음 / 장애 빈도 적음 / 보안 좋음 처리량 링크 내에서 성공적으로 전달된 데이터 양트래픽을 얼마나 처냈냐많은 트래픽 처리 = 많은 처리량 가짐bps : 초당 전송 수신 비트 수 트래픽, 네트워크 장치 간 대역폭, 네트워크 에러, 하드웨어 스펙에 영향을 받음대역폭 : 주어진 시간동안 네트워크 연결을 통해 흐를 수 있는 최대 비트 수 트래픽 : 특정 시점에 링크내에 흐르는 데이터의 양트래픽 많다 : 흐르는 데이터가 많다처리량 많다 : 처리되는 트래픽 많다 (흐르는 ..

📚 개발 책 2025.04.29

동조하기

사람들의 생각은 강압적인 권력이나 자신의 전문성에 의해서만 좌우되는 것이 아니다. 다른 사람들의 불확실성에도 불구하고 일관되고 흔들리지 않는 의지를 가진 한 개인으로 좌우될 수 있다. 이는 내면화된다. 그러한 신념이나 관념이 단 한 명의 개인이나 하나의 작은 집단에 의한 사물일 수 있으며, 오랜 시간에 걸쳐 지속되면서 본질적인 의미를 규정하는 어떤 것이 될 수 있다. 다른 사회적 집단에 속해 있음을 명백히 알 수 있는 경우에 동조 현상은 크게 감소한다. 자신감 넘치는 그 사람이 자신과 다른 집단에 속해 있다는 사실을 알게 되면 사람들은 어떠한 영향도 받지 않을 수 있다. 사람들이 명백하다고 느끼는 근거를 과연 무시할까. 소집단의 "명백한 오류 제시" 실험은 36.8퍼센트의 오답률을 보여준다. 이는 집단의..

재귀의 신

function solution(arr) { // 재귀 호출을 위한 내부 함수를 만든다. // 이 함수는 처리해야 할 배열의 부분을 인자로 받는다. function recursiveOR(currentArr) { // **베이스 케이스:** 만약 현재 처리할 배열이 비어있다면 (길이가 0이라면) if (currentArr.length === 0) { // 더 이상 OR 할 게 없으니 0을 반환하고 재귀를 멈춘다. return 0; } // **재귀 스텝:** // 1. 배열의 첫 번째 요소를 가져온다. const firstBinaryString = currentArr[0]; ..

💻 FE/🍓 JS 2025.04.26

2025 F1 사우디아라비아 제다 그랑프리

트리플헤더의 마지막 주, 응원하는 팀이 생긴 이후 경기를 보는 것 자체가 심장건강에 매우 안 좋음을 깨달았고 트리플헤더는 지옥 그 자체인 스케줄임을 실감한다. 아무생각 없이 경기를 보던 때는 레이스 위크만을 기다리며 적당한 도파민을 충전하면서 살았지만 지금은 레이스 위크가 되면 설렘과 동시에 스트레스도 졸라게 몰라온다. 왜냐면 랜도란도랜깅이는 빠와까를 미치게 하는 놈이기 때문에 구설수에 너무 많이 오르기 때문이다. 걍 쳐 피곤함. 프랙티스는 바레인과 마찬가지로 아주 잘했던 랜도란도랜도란스다. 퀄리가 새벽 두 시에 시작하는 지옥같은 시간대의 경기였기 때문에 기도 오천번 하면서 쿠플 라디오로 틀어두고 잠에 들었다. 야 그런데 "레드 플래그예요~! 랜도 노리스!!!" 에 심장이 발랑발랑머리가 빙글빙글으아어..

자바스크립트에서 on과 handle의 관계에 대해 알아보았다.

바닐라 자바 스크립트로 컴포넌트 구현, api 로 데이터를 가져오는 작은 과제를 하는데 "바닐라", "컴포넌트"로 하려니 ㅇ-ㅇ 상태되어서 아무것도 못하겠더라. 리액트는 잘 모르고 스벨트는 좀좀따리 강의를 듣는 중이라 스벨트로 구현하고 바닐라로 옮길 계획을 세웠다. 확실히 스벨트로 하니 신경쓸게 적어서 좋았다. 하나의 컴포넌트가 하는 일은 하나의 파일에서만 작성하면 되니까 하나의 파일에서 handle을 정의하고 내려줄 일이 적어지니 참 편했다. 모르겠는 부분은 문서와 구글링, ai 도움 조금으로 금방 해결됐다. 그리고 이 완성된 파일들을 ai에게 자바스크립트 컴포넌트 파일로 변환하라고 "시켰"더니 "해줬"다. 파일을 열어 코드를 뜯어보는데 app.js 파일 갔다가 컴포넌트 파일 갔다가 와리가리를 너무..

💻 FE/🍓 JS 2025.04.20

F1 2025 바레인 그랑프리

나는 네가 삐끗하는 걸 기대하지 않았다. 비록, 오스카가 폴 찍을때 박수를 치긴 했지만, 맥라렌 차로 로우 아닌 그리드는 충격적이구나. 충격적이야. (... ) 니 인스타 그만해라. 1. 점프 스타트 2. 해밀턴 추월 에도 불구하고, 세이프티카 흐름 잘 타고존달. 해서 P3 한거 축하합니다. 꾸준히 포디움에 오르는 당신이 나의 삶의 동력.

바닐라 JS 클래스 데이트 피커 구현하기.

이번에는 순수 자바스크립트, 즉 바닐라 JS만으로 달력 형태의 날짜 선택기(Date Picker)를 만들어 보기로 했다. 라이브러리를 사용하면 금방이겠지만, 직접 구현해보면서 DOM 조작과 자바스크립트의 Date 객체에 대해 깊이 이해하고 싶다는 생각이 들었다. 솔직히 시작 전에는 꽤 복잡할 것 같아 막막하기도 했지만, 그만큼 배우는 것도 많을 거라 기대하며 도전했다. 이 글은 그 제작 과정과 삽질의 기록이다.1. 무엇을 만들 것인가? (기능 정의 및 설계)먼저 어떤 형태의 데이트 피커를 만들지 구체적으로 구상했다.기본 UI:날짜를 표시하고 선택 결과를 보여줄 필드.입력 필드를 클릭하면 나타나는 달력 팝업.달력 팝업은 헤더(현재 년/월 표시, 이전/다음 달 이동 버튼)와 본문(요일 표시, 날짜 그리드)..

카테고리 없음 2025.04.06