Thoughts on development, design, and technology.
새로운 프로젝트를 기획하며, 개발에서 무엇을 가장 먼저 고민해야 하는지 다시 돌아보게 되었습니다.한때는 프론트엔드가 모든 설계의 출발점이라고 믿었습니다. 유저가 무엇을 보고, 어떤 흐름에서 머무르고 이탈하는지에 대한 이해 없이 서비스를 만든다는 건 불가능하다고 생각했기
오랜만에 방법론에 관한 글을 쓰게 되었습니다. 최근 상황은 이렇습니다. SSAFY에서는 하루에 엄청난 양의 알고리즘 문제들을 과제로 수행하게 됩니다. 그 과정에서, '구현력'이 매우 떨어진다는 생각이 들었습니다. 완전히 어려운 문제라면 '아쉬움'이라는 감정조차 느끼지
반복되는 루틴 속에서 얻은 안정감을 발판 삼아, 이제는 기술적 스펙트럼을 넓히기 위한 개인 프로젝트에 착수하고자 합니다.이번 프로젝트의 목표는 단순한 포트폴리오 구축을 넘어, 실제 서비스 수준의 블로그 시스템 구현과 다국어 처리 적용 등 실무에 가까운 역량을 한 단계
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/131120다음은 식당 리뷰 사이트의 회원 정보를 담은 MEMBER_PROFILE 테이블입니다. MEMBER_PROFILE 테이블은 다음
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/132203다음은 종합병원에 속한 의사 정보를 담은 DOCTOR 테이블입니다. DOCTOR 테이블은 다음과 같으며 DR_NAME, DR_
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/133025다음은 아이스크림 가게의 상반기 주문 정보를 담은 FIRST_HALF 테이블과 아이스크림 성분에 대한 정보를 담은 ICECRE
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/132201 문제 설명 ✅ 다음은 종합병원에 등록된 환자정보를 담은 PATIENT 테이블입니다. PATIENT 테이블은 다음과 같으며 PTNO
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/144853다음은 어느 한 서점에서 판매 중인 도서들의 도서 정보(BOOK) 테이블입니다.BOOK 테이블은 각 도서의 정보를 담은 테이블
Reference: https://school.programmers.co.kr/learn/courses/30/lessons/151136 문제 설명 ✅ FIRSTHALF 테이블은 아이스크림 가게의 상반기 주문 정보를 담은 테이블입니다. FIRSTHALF 테이블 구조는
다음은 어느 자동차 대여 회사에서 대여 중인 자동차들의 정보를 담은 CAR_RENTAL_COMPANY_CAR 테이블입니다.CAR_RENTAL_COMPANY_CAR 테이블은 아래와 같은 구조로 되어 있으며,CAR_ID, CAR_TYPE, DAILY_FEE, OPTIONS
0. Intro 🎯 지난 글에서는 Pages Router에서 활용할 수 있는 다양한 렌더링 방식과 더불어 RSC 개념까지 폭넓게 살펴봤습니다. 각각의 방식이 어떤 고민 속에서 등장했는지, 어떤 트레이드오프를 가지고 있는지 이해하는 시간이었습니다. 렌더링 방식이 '
바야흐로 연말, 회고의 제철. 지난 1년을 4000자로 압축해 봤습니다.가까운 지인들은 이미 다 알지만, 저는 통계학을 싫어했습니다. 통계학이 싫어 행정학을 복수전공하고, 공무원 시험도 준비해 보는 등 나름 방황을 했습니다. 결국 모든 걸 접고 다시 학교로 돌아가야 했
reference: https://nextjs.org/learn/pages-router최근 며칠간, 위 링크를 참고하여 Pages Router 방식으로 간단한 형태의 블로그를 만들어 봤습니다.Pages Router는 pages 폴더 안에 파일을 만드는 것만으로
reference: https://nextjs.org/learn/react-foundations올해가 얼마 남지 않았습니다. 연말이기도 하고 면접도 다니다 보니 공부를 조금 소홀히 한 것 같습니다. 물론 방향성에 대한 고민도 있었지만, 그렇다고 설렁설렁할 수는
Server가 뭐죠? 서빙하는 사람입니다. 서빙은 뭐죠? 제공입니다. 김밥천국에서 라면을 주문하면 이모님이 라면을 서빙해 주시죠. 네트워크에서의 서버도 동일합니다. 네트워크에서 서버는 사용자에서 정보나 서비스를 제공하는 컴퓨터입니다. 요청에 대한 응답을 하는 시스템이라
코드 품질을 관리하기 위해서는 Code Formatting과 Code Linting 작업이 필요합니다.Code Formatting: 띄어쓰기, 줄 바꿈, 따옴표 등의 시각적 스타일을 일관성 있게 맞추어 가독성을 높이는 작업Code Linting: 코드를 정적 분석하여
블록체인은 외부 세계와 단절된 폐쇄 시스템입니다. Smart Contract가, '비트코인 가격이 9만 달러를 넘으면 자동 실행'과 같은 조건을 가지고 있어도, 블록체인 자체는 현재 비트코인 가격을 알 수 없습니다.오라클은 이 문제를 해결하는 다리입니다. 외부 데이터를
https://velog.io/@minkwan/%EB%B8%94%EB%A1%9D%EC%B2%B4%EC%9D%B8-Smart-Contract이전에 작성한 글에서, Smart Contract 로직을 작성하고 Monad Testnet에 배포하는 법을 다루었습니다.
이론적 논의가 길어졌습니다. 이론을 먼저 공부하고 코드를 작성하면 학습 수준은 깊어지지만 휘발성이 높습니다. 공부는 많이 했는데 기억나는 건 딱히 없는 대참사가 펼쳐지죠. 코드를 먼저 작성하고 후에 이론으로 보강하는 전략은 휘발되는 지식의 양은 확실히 줄지만 이론에 대
1. EVM 🎯 1-1. 이더리움 블록체인 노드 구성 및 트랜잭션 처리 ✅ 이더리움 네트워크는 다수의 블록체인 노드로 구성되어 있으며, 이 노드들은 P2P 통신을 통해 서로 연결됩니다. 사용자가 트랜잭션을 생성하면, 이 트랜잭션은 노드 구성요소를 거쳐 전송 및 전
1. 합의 알고리즘 🎯 합의 알고리즘이 어느 단계에 위치하는지 확인해 봅시다. > 트랜잭션 생성 => 네트워크 전파 ✅ : 사용자가 Private Key로 트랜잭션을 생성하고 P2P 네트워크에 브로드캐스트합니다. 참고로 브로드캐스트란, 네트워크에 연결된 모든 장치
1. 코인과 토큰 🎯 1-1. 복습 ✅ 디지털 시대의 자유와 신뢰를 보장하기 위해, 비잔틴 장군 문제 해결 과정에서 블록체인 기술이 탄생했습니다. 블록체인 시스템은 메시지 위변조 방지는 공개키 암호화 방식으로, 메시지 처리의 무결성(Integrity)은 합의 알
블록체인에서 지갑은 디지털 자산을 관리하는 소프트웨어이고, 개인키를 소유한 사람이 지갑에 접근할 수 있습니다.HD(Hierarchical Deterministic) Wallet은 트랜잭션이 발생할 때마다 지갑의 주소가 새로 생성되는 지갑입니다. 이름에서 알 수 있듯 지
1. 블록체인 지갑 기본 개념 블록체인 지갑 : 디지털 자산을 담는 소프트웨어 : 개인키 또는 니모닉을 소유하고 있는 사람만이 접근 가능 : 수많은 DApp들과 상호작용할 수 있음 : 자료형이 허용하는 한도까지 디지털 자산을 보관할 수 있음 => 지갑은 체인에서 허용
1990년대, 암호학자들과 프로그래머들이 모였습니다. 이들은 Cypherpunk라 불렸고, 하나의 신념을 공유했습니다. "개인의 프라이버시는 디지털 시대의 필수 권리다."Cypherpunk 운동은 단순한 기술 커뮤니티가 아니었습니다. 이들은 정부와 기업의 감시로부터 개
Node.js는 서버 사이드 자바스크립트 런타임 환경입니다.런타임 환경은 프로그래밍 언어가 구동되는 환경입니다. 자바스크립트가 브라우저에서 실행되기에 우리는 웹 서비스를 이용할 수 있죠. 이때의 자바스크립트 런타임 환경은 브라우저라고 할 수 있습니다. 브라우저에서 자바
DNS의 원리와 TCP/IP 통신, 브라우저 렌더링 작동 방식과 JavaScript 엔진의 동작 등 인터넷의 개념은 분절되어 있지 않습니다. 그래서 개별적인 주제에 대한 정보를 학습했다 한들, 개념을 통합하는 과정이 없다면 인터넷을 제대로 이해할 수 없습니다.레오나르도
'면접을 위한 CS 전공지식 노트'라는 책을 읽게 되었습니다. 약 300페이지 정도로, 개발 서적 치고는 얇은 축에 속하는 책이었습니다. 그럴 때 있죠. 갑자기 책을 읽기 싫을 때. 책을 어떻게 하면 효율적이면서도 즐겁게 읽을 수 있을지에 대해 고민했습니다. 그러다가,
Pullim(프로그래밍 Q&A 사이트)을 개발하며 마주했던 가장 도전적인 과제 중 하나는, 'AI 응답에 대한 대기시간을 최소화하는 것'이었습니다.Chat GPT, Claude, Gemini와 같은 훌륭한 AI 어시스턴트 서비스가 이미 많음에도 프로그래밍 Q&A 사이트
프로젝트를 개발하고 AWS 환경에 배포했으며, Github Actions를 통해 CI/CD를 구축했습니다. 추가적으로 Sentry라는 모니터링 툴까지 연동하여, 에러 추적과 대응을 위한 환경까지 구축했습니다.여기서 끝이 아니다!개인 프로젝트만 하다 보니, 코드 리뷰가
0. Overview 🎯 프론트엔드 개발과 배포, 그리고 CI/CD 구축까지 마친 상황입니다. 그런데 배포해놓은 서비스에서 에러가 발생하면 어떤 단계를 밟아야 할까요? 우선은 에러의 원인을 파악해야 할 것입니다. 이를 에러 탐지라고 하겠습니다. 그 다음 에러에 대
1. EC2 인스턴스 구성 🎯 1-1. EC2 인스턴스 생성 ✍️ 1-2. EC2 기본 설정 ✍️ 1-3. 보안 그룹 설정 ✍️ 1-4. 스토리지 구성 ✍️ 1-5. 탄력적 IP 설정 ✍️ 2. 서버 환경 구축 🎯 2-1. Node.js 설치 ✍️ 2-2. 프
0. 프론트엔드 배포 과정 🎯 React 프로젝트를, Amazon 서비스를 통해 배포하고 Github Actions를 활용해서 CI/CD를 구축하는 전 과정에 대해 기술하고자 합니다. 단순히 배포하는 과정을 나열하는 것에서 그치지 않고, "각각의 서비스를 왜 사용
프론트엔드는 S3와 CloudFront를 통해, 백엔드는 EC2를 통해 배포하는 것에 성공했습니다. 배포를 마치고 확인해 보니, 수정해야 할 사항들이 몇 가지 발생했습니다. 꼭 수정이 아니더라도, 새로운 기능을 추가하는 일도 발생할 수 있겠죠. 기존 코드를 수정하든 새
1. RDS란? 🎯 2. RDS 생성 🎯 3. 보안 그룹 설정 🎯 4. 파라미터 그룹 추가 🎯 5. RDS 접속 🎯 6. EC2와 RDS 연결
1. Route 53 🎯 1-1. Amazon Route 53이란? ✍️ Amazon Route 53은 DNS(Domain Name System) 서비스입니다. AWS에서 도메인을 발급하고 관리해주는 서비스죠. 여기서는 발급을 구매로 이해해도 무방합니다. 1-2
EC2 접속 ✅ pem 키가 있는 경로로 이동 🟣 > ⚠️ 로컬 컴퓨터에서 SSH 접속에 필요한 비밀 키 파일이 저장된 위치로 이동했습니다. 바탕화면에 키 파일이 있어서 desktop 경로로 이동했습니다. chmod 400 .pem 🟣 > ⚠️ chmod 4
Amazon EC2를 살펴보기 전에, 배포(Deployment)에 관해 간단하게 이야기하고자 합니다.저는 Pullim이라는 프로그래밍 Q&A 사이트의 프론트엔드(ReactJS)와, 백엔드(NestJS)를 모두 구현했습니다. 기능 구현이 끝났으니 배포를 해야겠죠.배포(D
0. Overview ✍️ 인터넷을 이해할 때 핵심적으로 보는 요소는 라우터(Router)와 DNS(Domain Name System)입니다. 프로젝트의 디테일을 잡으며, 서비스 배포를 준비하고 있습니다. 배포란, 내 컴퓨터에서 만든 프로젝트를 인터넷이나 서버에
물론입니다. 작성하신 내용에 이어서 전체 글을 완성해 드리겠습니다. Reference MDN - Intersection Observer API YouTube - Learn Intersection Observer In 15 Minutes 1. Overview
0. Overview ✍️ Prototype에 관해 다루다 보니, this를 피할 수 없었습니다. this는 자바스크립트에서 가장 혼란스러운 개념 중 하나입니다. 상황에 따라서 this가 바라보는 대상이 달라지고, 어떤 이유로 그렇게 되는지를 파악하기 어려운 경우
최근에 Prototype에 관해 정리했는데, this 이야기가 빠지지 않고 나왔습니다. 그래서 this를 공부하려고 하니, this는 실행 컨텍스트로부터 파생되는 개념이었죠.끊임없는 공부 체이닝으로 '실행 컨텍스트'라는 주제까지 도달했습니다. 깔끔하게 정리해 보도록 하
배포 전, 프로젝트의 주요 feature를 다이어그램으로 도식화하고 있었고, 그 과정에서 Passport.js의 소스 코드를 확인했습니다.사실 모든 코드를 완벽하게 이해한 것은 아니었습니다. prototype, this, closure 등 자바스크립트의 근간을 이루는
0. Overview ✍️ 프로젝트를 배포하기 전에, Pullim의 주요 feature를 다이어그램 형식으로 정리하고 있었습니다. 회원가입 / 로그인 / Amazon S3를 통한 이미지 처리 / Gemini 2.5 Pro를 적용한 질문 답변 / 페이지네이션, 총 5
성능 최적화를 위한 아이디어 🚀 Debounce와 Throttle은 모두 이벤트를 제어하기 위한 개념입니다. 여기서 이벤트를 제어한다는 것은, 이벤트의 실행 빈도를 줄여 성능을 최적화한다는 것을 의미합니다. 이번 글에서는 이벤트를 제어하는 대표적인 두 가지 방식인
0. Overview ✍️ 1편에 이어서, 오늘은 '깃과 브랜치' 그리고 '원격 저장소 연결'에 대해 정리하고자 합니다. 브랜치는 독립적인 작업 공간을 만들어 메인 코드에 영향을 주지 않고 새로운 기능을 개발하거나 실험할 수 있게 해주며, 작업 완료 후 merge
1. Git 시작하기 ✍️ 1-1. 깃으로 할 수 있는 것 ✅ 1-2. 리눅스 명령어 ✅ 2. 깃으로 버전 관리하기 ✍️ 2-1. 깃 저장소 만들기 ✅ 2-2. 버전 만들기 ✅ 2-3. 커밋 내용 확인 ✅ 2-4. 파일 상태 확인 ✅ 2-5. 작업 되돌리
Pagination 📄 1. Pagination이란? 🟢 행정안전부 및 디지털플랫폼정부위원회에서 배포한, 행정기관 및 공공기관이 준수해야 할 디지털 정부서비스 디자인 시스템(KRDS)에서는 Pagination을 다음과 같이 정의한 바 있습니다. 웹사이트에서
오늘 얘기하고자 하는 '독서'의 대상에 소설은 포함되지 않습니다. 정보 전달을 목적으로 하는 글을 읽는 행위에 대해서 얘기할 것이고, 특히 기술 서적에 대해 논하고자 합니다.독서란 무엇일까요? 독서는 침묵 속의 대화입니다. 일면식도 없는 누군가가 작성한, 내가 일방적으
Progressive JSON 🎨이미지를 위에서 아래로 순차적으로 로딩하는 것이 아니라, 처음에는 흐릿하게 보이다가 점점 선명해지는 방식으로 로딩하는 메커니즘을 점진적 JPEG라고 합니다. 이 아이디어를 JSON 전송 방식에 적용한 것이 Progressive JSON
C언어 비트 음수 표현 🤖컴퓨터는 모든 데이터를 0과 1의 '비트' 형태로 저장합니다. 전기 신호를 두 가지 상태(켜짐/꺼짐, 1/0)로 표현하여, 하드웨어 구현을 단순화하고 오류를 최소화하며 데이터 처리의 효율성을 제고할 수 있습니다.컴퓨터는 오직 0과 1의 조합만
휴대폰 인증 과정 정리 - Frontend 🎨핵심 로직 및 상태를 자식 컴포넌트인 PhoneVerificationContainer에 props 형태로 전달합니다.유저 정보가 존재할 경우, 해당 정보를 localstorage에 저장합니다. 브라우저를 새로고침해도 유저
생각은 크게! 행동은 작게! 🤖요즘 AI 관련 콘텐츠를 보면, 빠지지 않고 등장하는 문장이 있습니다. “앞으로는 질문하는 능력이 더욱 중요해질 거예요.” 말하는 사람의 표정에는 확신이 가득하고, 듣는 사람도 고개를 끄덕입니다. 하지만 저는 이 문장을 들을 때마다 한
Fetch 비동기 통신과 Tanstack Query v5 완전 정복 ✍️프론트엔드 개발을 하다 보면, 서버와 데이터를 주고받는 비동기 통신은 피할 수 없는 과제입니다. 사용자가 버튼을 클릭하면 새로운 데이터를 받아오고, 폼을 제출하면 데이터를 서버에 저장하며, 페이지를
Image Processing Optimization 🎨Question Content에 포함되는, 이미지를 처리하는 방법에 대해 소개하고자 합니다.Amazon S3란, 이미지 / 동영상 / 문서 / 백업 데이터 등 다양한 파일을 저장하고 관리할 수 있는, AWS에서
ReactJS와 NestJS를 메인으로 사용하는 개발자로서, 타입스크립트에 대한 명확한 이해는 필수적이겠죠. freeCodeCamp의 타입스크립트 강의 내용을 기반으로, TS의 기초에 대해 정리하겠습니다. 오늘은 Bob Ziroll(밥 지롤) 선생님을 모셨습니다. 발음
Applying session-based authentication to the project ✍️현재 목표에 대해 브리핑하겠습니다.이미 회원가입이 완료된(=기존 유저) 유저를 Database에서 찾는다. 해당 유저에 대한 validation을 진행한다.serializ
NestJS & Google OAuth2 with Passport ✍️reference: https://www.youtube.com/watch?v=OitgkKTxht4&t=1036s오늘은 Anson Foong(앤슨 풍?) 형님의 유튜브 강의를 찾아 들었습니다.
NestJS + Google OAuth + Session 중간 정리 🤮이 글은 부적절한 정보를 제공할 가능성이 매우 높습니다. 오늘은 정말 자신이 없습니다. 절대로 믿지 마십시오.아,,, 고민이 정말 많았던 주제고 여전히 완벽하게 해결되지는 않았습니다만, 완벽이라는
Filter를 구현하는 과정에서, http-exceptions Filter를 만들었으나 AxiosError는 HttpException으로 떨어지지 않는다는 점을 확인했습니다. 문제를 해결하기 위해, convertAxiosErrorToHttpException()라는 공용
NestJS에서 Filter는, 애플리케이션에서 발생하는 각종 예외를 Filtering 하기 위한 목적으로 사용합니다. 이 글은 Filter를 적용하는 과정에서 발생한 문제(AxiosError 관련 문제)에 대한 해결을 논의합니다.만약 Filter라는 개념 자체를 처음
웹이 처음 등장했을 때, 서버는 사용자의 '이전' 요청이나 방문 '이력'을 전혀 기억하지 못했습니다. 매번 새로 요청하고, 새로 응답하는 방식이었죠. 이러한 특성을 업계에서는 stateless(무상태)하다고 표현합니다. 웹은 그저 텍스트나 이미지 등의 파일이 하이퍼링크
세션 방식으로 로그인을 구현하기 전에, 클라이언트의 요청이 처음에는 컨트롤러 내에서 Guard를 만나게 된다는 흐름을 파악하려고 다양한 글을 읽었습니다. Guard는 실제 검증 처리를 담당하는 Strategy와 연결되어, 최종적으로 검증을 통과하면 사용자 정보 직렬화가
0. 일단 시작해 ✍️ 흐름을 정리해 봤습니다. 개발을 하면서 늘 드는 생각이지만, 코드를 작성하는 행위 자체가 어려운 게 아니라 '어떤 내용'을 코딩해야 하는지, 흐름에 대한 이해가 어렵습니다. 회원 가입에 대한 구색이 어느 정도 갖춰졌으니, 로그인에 대한 개발을
나름대로 오랜 시간 고민한, 회원가입 프로세스에 대해 단계별로 정리하고자 합니다. 회원가입 프로세스는 단순한 기능을 넘어 UX, State Management, 보안, API 연동까지 복합적인 상황에 대한 이해를 요구합니다. OAuth와 Twilio SMS까지 반영한
OAuth 관련 로직(구글)을 개발 중이었습니다. 구글 버튼을 클릭하며 지속적으로 테스트를 진행해야 하는 상황이었는데요, 인가 코드를 재사용 했다는 이유로 토큰을 발급받는 과정에서 계속해서 에러가 발생했습니다.prompt=consent를 추가하기로 했습니다. 구글 OA
Authentication과 Authorization에 대한 이해가 깊어짐에 따라, NestJS에서의 예외 처리에 대한 고민이 생겼습니다. 이번 글에서는 NestJS에서 예외를 어떻게 처리하는지 정리해보겠습니다.NestJS는 HttpException이라는 기본 예외 클
23년 이론 Pool 정리
24년 3회 이론 Pool 정리
솔직함은 단순한 미덕을 넘어, AI와 구별되는 인간만의 강점입니다. 이 글에서는 솔직함의 본질과 그것이 개발자로서의 성장에 미치는 영향, 그리고 AI 시대에 인간 고유의 가치로서 솔직함이 갖는 의미를 재조명하겠습니다.'Hallucination'이라는 단어는 본래 환각을
21년 2회 기출 코드 정리 ✍️21-2-7-Python ⚙️비트 연산자(시프트 연산 포함)를 사용하면 정수는 자동으로 이진수로 변환되어 처리된다. 첫 번째 루프를 돌았을 때 result는 51, 두 번째 루프까지 돌았을 때 result는 26이 된다. 따라서 최종 결
중간 점검 - 요즘 어때요? ✍️첫 시작은 2023년 1월 2일이었다. 여러 가지 이유로 프론트엔드 개발자가 되기로 결심했고, 학교를 다니며 일을 하며 짬짬이 개발을 배우기 시작했다. 처음엔 HTML과 CSS를 다루는 것만으로도 벅찼다. JavaScript는 낯설었고,
21년 3회 기출 코드 정리 ✍️21-3-1-JAVA ⚙️이 코드는 싱글톤 패턴을 사용하여 Connection 객체를 한 번만 생성하고 모든 호출에서 동일한 인스턴스를 반환한다. conn1 = Connection.get();에서 \_inst가 null이므로 객체를 생성
22년 1회 기출 코드 정리 ✍️22-1-1-JAVA ⚙️객체의 경우 Call by Reference, 주소가 복사된다. 메소드 내부에서 값을 변경하면 원본 객체도 변경된다. 최종 출력 결과는 2000.22-1-5-JAVA ⚙️멀티스레딩을 구현한 코드다. Runnabl
22년 2회 기출 코드 정리 ✍️22-2-7-JAVA ⚙️보통 switch 문이 문제로 출제되면, break를 생략했을 때의 흐름(fall-through 현상)에 대해 묻는 경우가 많다. 코드 자체는 쉬우니 설명은 추가하지 않겠다. 출력 결과는 -8.22-2-8-C ⚙
22년 3회 기출 코드 정리 ✍️22-3-1-C ⚙️중첩 포문을 4개를 걸었고, 특별히 C언어의 본질을 묻는 것도 아닌 roTMfprl 코드. 풀 가치가 없음. 코드로서의 가치도 없음. 이런 문제 때문에 떨어진다면, 정처기 그냥 안 따고 말겠음.22-3-4-JAVA ⚙
23년 1회 기출 코드 정리 ✍️ 23-1-1-JAVA ⚙️ 23-1-2-C ⚙️ 23-1-3-C ⚙️ 23-1-9-C ⚙️ 23-1-14-C ⚙️ 23-1-15-Python ⚙️ 23-1-17-JAVA ⚙️ 23-1-20-JAVA ⚙️ > 이론 문제
커밋 메세지를 먼저 생각해보자는 생각을 적어보자는 생각 💭Github는, 원격 코드 저장소이면서 동시에 협업 플랫폼입니다. 쉽게 말하면 내가 작성한 코드를 반영하는 외부 저장소입니다. 데스크톱이나 랩톱에서 코드가 날아가더라도, 외부 저장소에 내가 작성한 코드가 기록되
23년 2회 기출 코드 정리 ✍️ 23-2-1-C ⚙️ 실행 결과가 "43215"일 때 빈칸에 들어갈 알맞은 식을 물어본 코드. 답은 . 에 대해서 순차적으로 어떠한 처리를 했는데 가 나왔다. n[i]에 대한 연산을 하면 n[i+1]이 나오다가, n[4]에 대한
23년 3회 기출 코드 정리 ✍️23-3-1-JAVA ⚙️SuperObject a = new SubObject();에서 a.paint()는 부모의 paint()를 호출하며, 다형성에 의해 오버라이딩된 자식의 draw()를 호출하게 되어 "B", "D", "C", "D"
24년 1회 기출 코드 정리 ✍️24-1-1-C ⚙️시프트 연산자에 대한 이해를 물어보는 코드. 29는 이진수로 11101(2)이지만, 왼쪽으로 2비트 시프트하면 1110100(2)이 되고, 이는 정수로 116이다. 따라서 최종 출력 값은 v2(35)와 v3(116)을
24년 2회 기출 코드 정리 ✍️24-2-1-JAVA ⚙️문자열 분할(String split) 메서드와 배열 인덱싱에 관한 코드. 특히 문자열을 특정 구분자로 나눴을 때 어떤 배열이 생성되는지, 그리고 해당 배열의 특정 인덱스에 어떤 값이 저장되는지 이해하고 있는지 확
20년~24년, 5년간 출제되었던 모든 코드 + 이론 문제 핵심 포인트 300선을 총 15회에 걸쳐 정리할 예정입니다. 요긴하게 활용하십시오. 아 그리고 코드 공부할 때 다음 사이트에서 실행 순서를 확인해보세요. 많은 도움이 될 것입니다. C, JAVA, Python
Pitfall 🚨60점 맞는 시험이기에, 좁고 깊게 아는 게 아니라, 넓고 얕게 아는 게 중요해요. 넓고 얕게 알아야 찍어서라도 통과할 수 있기 때문... <유튜브 강의 + SQLD 모든 것 + 클로드> 합작으로 만든 요약본입니다. 지나가는 구글 나그네들에게 도
프로세스 동기화 ✍️워드 프로세서에는 1)사용자로부터 입력을 받는 프로세스, 2)입력한 내용의 맞춤법을 검사하는 프로세스, 3)입력한 내용을 화면에 출력해 주는 프로세스 등이 있겠다. 이러한 프로세스들은 각기 다른 프로세스이지만 공동의 목표를 위해 서로 협력한다. 협력
CPU 스케줄링 ✍️CPU 스케줄링은, 프로세스들에게 공정하고 합리적으로 CPU 자원을 배분하는 것을 말한다. 선착순으로 처리하는 것이 언뜻 보기에는 합리적이다. 하지만 프로세스마다 우선순위가 다르기에 문제가 된다.우선순위가 높은 프로세스란 빨리 처리해야 하는 프로세스
정리본 ✍️
프로세스와 스레드 ✍️프로그램이 실행되기 전까지, 보조기억장치에 위치한 프로그램은 그저 데이터 덩어리에 불과하다. 보조기억장치에 저장된 프로그램이 메모리에 적재되고 실행되는 순간, 프로그램은 프로세스가 되었다고 볼 수 있다.유닉스(Unix) 기반의 운영체제를 사용하는
그냥 웃겨서 추가한 썸네일, 열린 마음으로 계속해서 공부하지 않으면 엑셀 팡션맨이 될 수 있으니 주의하자.운영체제 ✍️앞서 정리한 컴퓨터 부품들은, 전기만 공급한다고 알아서 작동하지 않는다. 실행할 프로그램에, 필요한 컴퓨터 부품(=시스템 자원)을 할당하고, 프로그램이
개요 ✍️ORM(Object Relational Mapping)은 애플리케이션과 데이터베이스 연결 시, SQL 언어가 아닌 애플리케이션 개발 언어로 데이터베이스에 접근할 수 있게 해주는 툴이다. ORM은 SQL을 직접 다루지 않지만, 성능 최적화와 트랜잭션 관리 같은
입출력장치 ✍️ 1. 입출력장치 ⚙️ 1-1. 장치 컨트롤러와 장치 드라이버 🌿 1-1-1. 장치 컨트롤러 💡 일단 공감이 필요하다. 입출력장치는 지난 글에서 다루었던 CPU, 메모리보다 다루기 훨씬 까다롭다. 크게 두 가지 이유가 있다. 입출력장치의 종류
휴대폰 인증 전 Flow 🍀Twilio를 통한 휴대폰 인증 전까지의 흐름에 대해 정리할 예정이다. 참고로 하단의 넘버링은 위 이미지의 넘버링과 일치하지 않는다. 서술을 위한 넘버링이다.Appbar에 위치한 카카오 로그인 버튼을 클릭하면 provider 파라미터를 통해
보조기억장치 ✍️보조기억장치는 비휘발성 저장 장치다. 데이터를 영구적으로 저장하기 위한 장치라는 점에서 RAM과 상반된 역할을 수행한다. 대표적인 보조기억장치인 '하드 디스크'에 관한 이야기로 글을 전개하고자 한다.하드 디스크는 자기적인 방식으로 데이터를 저장한다. 자
Google AI Studio 적용하기 🔍프로그래밍 관련 Q&A 사이트를 이용하며 생겨난 추가적인 질문을, 서비스 내에서 AI에게 질문할 수 있도록, 관련 페이지를 개발하고 싶었다.Google AI Studio를 활용했다.Get API Key 버튼을 클릭한 뒤, AP
혼자 개발할 때사실 실무 경험이 없어서 내 말이 정답인지는 모르겠으나 그리고 실무에서도 정답이라는 게 있는지는 모르겠으나, 전체 사이클을 개발할 때 가장 중요한 것은 '점과 점을 연결하는 것'이라고 생각한다. 무슨 말이냐?혼자 개발한다는 것은 클라이언트-서버-데이터베이
Overview ✍️프론트엔드 작업을 하다 보니 백엔드가 필요해졌고, 백엔드 작업을 하다 보니 DB 지식이 필요해졌다. 결국 이 모든 과정이, 데이터로 구성되는 무언가를 만들어내는 작업이라, 테이블 설계(=데이터 모델링)가 되지 않아 계속 막히는 지점이 생겼다.필요하면
메모리와 캐시 메모리 ✍️RAM은 Random Access Memory의 약어다. RAM에는 우리가 실행할 프로그램의 명령어와 데이터가 저장된다.컴퓨터의 전원을 끄면, RAM에 저장된 명령어와 데이터가 모두 날아가는 곤란한 상황을 조우하게 된다. 이처럼 전원을 끄면 저
본 글은 이전 글의 내용에 의존합니다.reference: https://velog.io/@minkwan/TIL%ED%98%BC%EA%B3%B5%EC%BB%B4%EC%9A%B4-20250115 CPU 성능 향상 기법 ✍️CPU에서 성능 향상이라는 주제의 본질은
오늘도 역시 여자친구와 함께했다.Overview ✍️CPU의 세부적인 구성 요소와 더불어 성능 향상 기법에 관한 논의까지 다룰 예정이다. 다만 구성 요소와 성능 향상 기법을 한 편의 글에 모두 담기에는, 글을 쓰는 사람도 읽는 사람도 부담된다. 오늘은 구성 요소에 집중
소셜 로그인 - 휴대폰 인증 흐름 정리 📱회원 페이지에서 카카오 아이콘(네이버, 구글도 마찬가지)을 클릭하는 순간 실행되는 함수다. 해당 함수는 사용자를 http://localhost:3000/auth/${provider}/login 경로로 이동시킨다. 카카
클라우드 환경에서 명령어 몇 줄로 애플리케이션 코드를 생성하고, AI로 "딸깍" 하면 view가 그려지는 오늘날. 너무 많은 것이 변할 때에는, 역설적으로 변하지 않는 본질에 집중하는 것이 더 유리한 전략일 수도 있다. 더욱이, 올해는 '개발 서적'을 될 수 있는 대로
최적화: 이미지 처리 ✍️ 이전 글에서 Base64 인코딩 이슈와 관련하여 Amazon S3를 다루었는데, 아직 미션이 두 가지 남았다. 가장 먼저 Base64 형식의 URL을 File 객체로 변환하는 함수가 문제였다. 일단 돌아가니까 문제가 없는 것 같지만, fe
오늘 든 생각의 발단 ✅학교에서 지난 학기에 '딥러닝 이해'라는 과목을 수강하면서 '통계'라는 주제 자체에 대해 반추하게 되었다. 더군다나 Tensorflow.js라는, Javascript 용 머신러닝 라이브러리의 데모를 살펴보니, 나중에 요긴하게 쓸 수 있을 것 같다
Client-Server: HTML 렌더링 및 이미지 처리 ✍️ 측정할 수 없다면 관리할 수 없고, 관리할 수 없으면 개선할 수 없다. 프로젝트를 진행하는 것도 중요하지만, 진행 상황을 정확히 계측하고 정리하는 시간도 분명히 필요하다. 이 글을 두 가지 질문을 중심
reference: 1)https://bbangson.tistory.com/87 2)https://namhyo00.tistory.com/70#%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC 3)https://www.youtube.com/watch?v=
비동기와 리액트...(2) 이전 글: https://velog.io/@minkwan/TILReact-20241209 1. Overview ✍️ 이전 글에서 React.lazy()와 Suspense의 개념에 대해 얕게 다룬 바 있다. 두 개념에 대해 알아가는 과정에
1. Overview ✍️ 지금까지 TIL 역사상 가장 긴 분량의, 동시에 가장 완성도 높은 글을 작성할 예정이다. 개요를 구성하는 데에만 많은 시간이 소요되었다. 발단은 다음과 같았다. 프로젝트 특성상 에디터를 적용해야 했는데, 에디터 UI가 등장하기 전에 fal
수박 겉핥기 사고방식
OAuth 2.0 Initial Setup Guidelines ✍️https://developers.kakao.com/console/app -> 애플리케이션 추가하기앱 이름: real-code, 회사명도 동일하게생성한 애플리케이션 선택내 애플리케이션 -> 앱
의사코드(Pseudo Code)에 관한
통제감요즘 프로젝트를 하기 바빠서, velog에 딱히 정리할 내용이 없었던 것 같다. 블로그에 거미줄이 생기는 것 같아서 끄적끄적 해본다.이상한 환상 같은 것에 취해있었던 것 같다. 가령, 내가 해내야 할 업무가 50개라고 하면 50일로 나눠서 매일 하루에 1개씩 해내
1. 리액트 생성 및 종속성 설치 ✍️ 1.1 리액트 생성 🚀 1.2 종속성 설치(+ Amplify 생성) 🚀
서버리스 컴퓨팅은 개발자가 서버 관리나 인프라에 대한 걱정 없이 애플리케이션의 코드를 작성하고 실행할 수 있도록 해주는 클라우드 컴퓨팅 모델을 의미하는 용어다. Serverless는 실제로 서버가 없는 것이 아니라, 개발자가 직접 서버를 관리할 필요가 없음을 의미한다.
✅ Kakao Auth 2.0 Flow Based on NestJS (up to refetch)1\. GET /oauth/authorize (Client -> Kakao)사용자의 Kakao 계정으로 인증을 요청한다. 이 단계에서 클라이언트는 Kakao의 인증 서버에 c
✅ CRUD Blog MVP 모델 만들기 CRUD가 구현된 Blog MVP(Minimum Viable Product) 모델을 만들기 위해 다음과 같은 기술 스택이 동원되었다. : 데이터베이스로 사용 : 백엔드 프레임워크 : 프론트엔드 라이브러리 : JavaScrip
✅ Why NestJS?최근에 구입한 'Node.js 백엔드 개발자 되기'라는 책에서 발췌한 표다.일단 기본적으로 NestJS는 NodeJS 서버 측 애플리케이션을 구축하기 위한 프레임워크라는 점에서는 Express와 다를 바 없다.공식문서에 의하면 NestJS는 Ty
✅ API Reference - useMutationState MutationCache에 존재하는 모든 mutation에 접근할 수 있도록 하는 hook이다. 1)filter를 통해 mutation을 좁힐 수 있고, 2)select를 통해 mutation의 상태를
✅ API Reference - useMutation 일단 useMutation이 왜 만들어졌는지 알아야 하는데, API Reference에는 해당 내용이 없다. Guides & Concepts의 Mutation 파트에서 해답을 찾을 수 있었다. useQuery가
🚀 공식 문서를 읽어야 하는 이유?라이브러리, 프레임워크에 있어서 강의 내지는 책은 현실의 속도를 반영하는 데 여러 제약이 있다.블로그에 누군가가 정리한 글은, 내가 작성하는 글도 마찬가지지만, 부정확한 정보를 제공할 가능성이 높다.🚀 공식 문서의 어떤 부분을 읽어
reference: https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#memoization > ✅ API Reference - useQueries 예제 코드 ✍️ 공식문서의 내용
✅ TanStack-Query 사용 이유Fetching Server StateCaching Server StateSynchronizing Server StateUpdating Server State=> 서버 상태의 효율적인 관리를 위해 사용✅ API Reference
✅ 나만의 로제타 스톤 구현하기MongoDB: NoSQL 데이터베이스로, JSON 형태의 데이터를 저장하고 관리한다.Express.js: Node.js 기반의 웹 애플리케이션 프레임워크로, 서버 및 API를 쉽게 구축할 수 있도록 지원한다.React.js: 사용자 인터
✅ Jotai v2와 친해지기 reference: https://tutorial.jotai.org/quick-start/intro (금일 학습 목표: 공식문서 Tutorial을 통해 Jotai의 컨셉에 익숙해지자) 1. 소개 어마어마하게 좋은 전역 상태 관리 라이
✅ 계획과 학습에 대한 생각(개강 후 멘탈 바사삭 대비 특집)보통 어떤 패턴으로 멘탈이 나가는지 파악 완료다. 개강하면 멘탈이 부서지는 패턴이 있다. 개강을 앞두고 계획과 학습에 대한 생각을 정리해놓으면 갈대처럼 흔들릴 때 와서 한 번 읽지 않을까? 읽지 않을까? ✍️
🌿 1. Naive한 기획집에서 배를 벅벅 긁다가 '대졸 백수 400만 시대'라는 폭력적인 제목의 기사를 읽게 되었다. 단어는 철학을 반영한다. '채용'에서 '영입'으로, '공개 채용'에서 '수시 채용'으로, '인사팀'에서 '직원경험팀'으로, 사회에서 사용하는 용어가
✅ Overview새로운 프로젝트에 대한 몇 가지 요구사항이 있는데, 핵심은 '지도'와 '검색'이다.방탈출 및 보드게임 카페의 위치를 지도 상에 마커로 표시하고, 사용자의 '지역 검색어' 및 '실시간 위치 정보'를 기반으로, 해당 지역의 방탈출 및 보드게임 카페에 대한
✅ 강남(=특정 지역)으로 이동 강남 버튼을 클릭하면 moveToGangnam 버튼이 호출됨 map이라는 조건을 기준으로, 강남의 위도 및 경도를 통해 중심화 및 zoom이 이루어짐 map은 handleMapReady 함수의 실행 결과 handleMapReady는 N
✍️ Session-Based Authentication(MERN) > 👨💻 part 1 > 👨💻 part 2 > 👨💻 part 3 > 👨💻 part 4  https://medium.com/@sanjanashivananda07/mastering-user-authentication-building-a-simple-login-page-using-mern-stack-part-2-frontend-
reference:1) https://medium.com/@sanjanashivananda07/mastering-user-authentication-mern-stack-login-page-part-1-backend-107ef537f8e6(Part 1 — Bac
✅ 1. 시작이 왜 안 됨?전투적인 정보처리기사 공부를 잠시 멈추고 다시 개발 공부에 돌입하려 했는데, 왜 때문인지 npm run serve(or dev)가 돌아가질 않았다.Connection이 안 된다는 것은, mongoose 쪽 코드를 봐야 한다는 뜻.ㅋㅋ 진짜 잘
reference:1) https://www.youtube.com/watch?v=\_7UQPve99r4&t=257s(MERN Stack CRUD API Tutorial, 50분 수강)✅ InsomniaInsomnia는 HTTP 및 RESTful API를 테스트
reference: 1) https://brunch.co.kr/@theopenproduct/58 (무한 스크롤에 대한 정의, 페이지네이션과의 비교를 중심으로) 2) https://tech.kakaoenterprise.com/149 (카카오 엔터프라이즈 포스팅) 3)
reference: 1) https://vitejs.dev/guide/why.html 2) https://www.youtube.com/watch?v=UdTD_NAWxyE&t=185s 3) https://crystallize.com/comics/no-code-splitt
Reference:1) https://bluemiv.tistory.com/872) https://emewjin.github.io/feature-sliced-design/3) https://dev.to/m_midas/feature-sliced-
reference:1) https://www.react-hook-form.com/api/usecontroller/controller2) https://legacy.reactjs.org/docs/render-props.html✅ React-Hook-Fo
reference 1) https://www.react-hook-form.com/get-started/#Integratinganexistingform 2) https://react.dev/learn/referencing-values-with-refs 3) https
✅ todo-backend/server.js 1. 모듈 및 환경 변수 설정 🎯 server에 관한 기본적인 모듈 및 환경 변수 설정이다. express와 mongoose, cors, 그리고 dotenv에 관한 내용을 각각의 변수에 할당하고 있다. 여기서 requ
reference: https://www.youtube.com/watch?v=u4VylkVzB8k&list=PLmsBpw69UXdYtB2aAwpMvblRoQDegGZ05&index=1next => update, delete 듣고 코드 분석하기✅ 또두리스트새로운
🎯 프로젝트 개요 본 프로젝트가 지향하는 바는 다음과 같았다. 프로젝트의 필요성을 본인 스스로 납득할 수 있을 것 Firebase를 통한 Authentication과 CRUD의 전 과정을 경험할 것 Redux-Toolkit을 통해 전역 상태 관리를 경험할 것 >
![](https://ve
✅ 최근 업적ADsP 취득, 정처기 필기 합격...붙으면 끝나냐? 주먹구구식 접근을 그만두고 싶다는 생각이 들어버렸다. 모순의 안진진처럼 "그래, 이렇게 살아서는 안 돼! 내 인생에 나의 온 생애를 다 걸어야 해. 꼭 그래야만 해!"라고 외쳐버린 것.거슬리는 놈 = 정
🍅 뽀모도로 아저씨뽀모도로 프로젝트가 거의 마무리되고 있다. 뭘 해도 흥이 나지 않는 무색무취의 인간 원민관이 프로젝트로 만들 만큼 꽂힌 주제가 있다면 바로 '뽀모도로'다.뽀모도로 기법(Pomodoro Technique)은 시간 관리 방법론으로 1980년대 후반 '프
✅ [23년 10월 1번, JAVA] > ✅ [23년 10월 2번, 용어] > ✅ [23년 10월 3번, C] > ✅ [23년 10월 4번, C] > ✅ [23년 10월 5번, 리눅스 or 유닉스에서 a.txt 파일] chmod는 리눅스 또는 유닉스에서 파일
✅ section 11: UML-다이어그램✅ section 12: 유스케이스(Use Case) 다이어그램✅ section 13: UML-활동(Activity) 다이어그램업로드중..
reference: https://www.youtube.com/watch?v=D9W7AFeJ3kk&t=2160s✅ 왜 살까?Lama 형님의 firebase를 듣는 35분 경이었다. Firebase에서 제공하는 Cloud Firebase에 데이터를 추가하는 작업
✅ Comfort Zone컴포트 존(Comfort Zone)이란, 심리적으로 안정을 느끼는 영역을 의미한다. 소소하게는 아침에 수행하는 'CEO 뒹굴'부터, 더 넓게는 '반복되는 업무의 수행'처럼, 자신이 통제감을 갖는 범위를 지칭하는 용어라고 할 수 있다. 문제는,
✅ 또두리스트?거의 1년 전에 투두리스트로 CRUD를 연습했다. 이제 프로젝트를 정리해나갈 시기가 왔기 때문에, 과거에 사용했던 기술을 복습할 겸 투두리스트 리뉴얼 버전을 제작하기로 결심했다.(notion에 디테일하게 정리할 예정)평소 예찬하던 뽀모도로 기법이 반영된
✅ CSR / SSR / SSG를 비유해 보자
✅ 1. JavaScript ES6+ 기능🔴 Q. JavaScript ES6 이후에 추가된 주요 기능 중에서, 템플릿 리터럴, 화살표 함수, 스프레드 연산자를 설명하고, 이러한 기능들이 JavaScript 프로그래밍에 어떤 이점을 제공하는지 구체적인 예를 들어 설명해
✅ 쿠폰독 서비스 구현, part: 1원민관님 친구 추천 수를 확인해 보자는 것이다. 친구가 없기로 유명하기에 good 쿠폰을 받을 가능성이 높다. 객체 형식의 데이터로부터 문자열로 이루어진 쿠폰 랭크를 리턴하는 단순한 구조의 함수이다. 핵심은, 해당 로직은 '데이터'
✅ Pagination 정리Pagination에 활용된 로직을 정리하고자 한다.✅ table data, button array, page handler
✅ 노노그램 예찬노노그램을 잘 풀어내는 첫 번째 방법은 '논리'적 접근이다. 박스에 색을 채울 때, 1)왼쪽 끝부터 그리고 2)오른쪽 끝부터 채워지는 두 가지 상황을 가정하고 공통된 부분에 먼저 색을 채운다. 그러다 시간이 한참 지나면 '직관'이 굉장히 유용한 도구가
✅ 데이터 타입 - 기본형 데이터와 참조형 데이터 - 가변값✅ 데이터 타입 - 기본형 데이터와 참조형 데이터 - 가변값(중첩 객체)✅ 데이터 타입 - 기본형 데이터와 참조형 데이터 - 변수 복사 비교
✅ section 7: 요구사항 분석✅ section 8: 요구사항 분석(CASE와 HIPO)✅ section 9: UML(Unified Modeling Language)✅ section 10: UML - 관계(Relationship)
✅ Node.js 환경 설정
✅ MERN stack 개론 MERN stack은 로 대표되는 네 가지 요소를 활용하여 웹 사이트를 개발하는 것을 의미한다. MERN stack에 대한 학습이 필요하다고 생각하게 된 배경은 다음과 같다. 이제는 괄목할 만한 프로젝트를 반드시 만들어봐야 한다. 그런데
✅ section 4: 개발 기술 환경 파악✅ section 5: 요구사항 정의✅ section 6: 요구사항 개발 프로세스
✅ p.1 ~ p.46 도식화
✅ section 1: 소프트웨어 생명 주기✅ section 2: 스크럼(Scrum) 기법✅ section 3: XP(eXtreme Programming) 기법
✅ 데이터 타입 - 기본형 데이터와 참조형 데이터 - 불변값데이터 타입은, '기본형 데이터'와 '참조형 데이터'로 구분된다고 학습했다. 구분의 핵심 기준은 변경 가능성이다. 변경 가능성에 대한 명확한 이해가 없다면, 불변값과 상수를 구분하지 못하게 되는 불상사가 발생하
✅ 데이터 타입 - 데이터 타입의 종류 데이터 타입의 종류는 으로 나뉜다. 사실 핵심은 기본형과 참조형의 구분 기준, 그러니까 '복제', '참조', '불변성' 등의 개념이다. 그런데 이러면서 아사모사하게 넘어감. 그래서 나도 넘어감. 하여튼, 기본형 또는 참
✅ 1. 미래의 노예 - 성취주의의 이면 ❓탈 벤 샤하르는, "성취주의자는 미래의 노예로 살고, 쾌락주의자는 순간의 노예로 살고, 허무주의자는 과거의 노예로 산다."라고 기술한 바 있다. 사람은 역시 책을 읽어야 한다. 성취주의는 인생에 있어 '만능 호랑이 연고' 같은
reference: https://yozm.wishket.com/magazine/detail/1561/카테고리는, 유사한 특성을 가진 항목들의 묶음 내지는 분류를 의미한다. 이커머스 최적화 사이트인 Notos에 따르면 구매의 70% 정도가 카테고리를 통해 발생
reference: https://www.youtube.com/watch?v=NOvx4LB6Hfk&t=21s 오늘 ~11분까지 내용 정리 1. 강의 내용 기록(~11분) > ✅ TanStack Query Install 명령어를 입력한다. 최신 버전으로 잘
✅ 깨달음의 맛세이노 아저씨는 '스트레스'라는 주제에 관해, 독자들에게 다음과 같은 고견(高見)을 제시한 바 있다. "장담하건대 그 모든 원인은 일이나 인간관계에서 발생한 문제를 어떻게 해결하여야 하는지 모르는 당신의 무지, 그것이 원인이다. 그리고 무지함의 뿌리는 바
✅ 코딩은 무협이다운 좋게 참여하게 된 프로젝트에서, footer 관련 작업을 진행 중이었다. 그런데 footer 코드가 318 라인이 되는 순간 깨달음이 찾아왔다. 컴포넌트는 개나 줘버렸다는 사실을 깨달았다.리액트는 '컴포넌트'로부터 UI를 생성하는 도구다. 이것이
✅ 사람을 움직이게 하는 것(불금 특집)거두절미하고 결론부터 얘기하면 '필요'다. 경제학에서 'Needs'라고 부르는 것.수많은 자기 계발 서적 또는 비디오에서는, '의지'를 핵심 동인(動因)으로 다룬다. 조금 더 나은 수준의 글에서는, 의지는 소모품이며 결국 '시스템
✅ 뭔데개발에 관한 글과 회고풍 글의 분리를 위해 새롭게 뻗은 브랜치라고 볼 수 있다.✅ 제어문에 관하여코딩의 '코'자라도 들어본 사람이라면, 제어문에 대해 알고 있을 가능성이 높다. 코드는 기본적으로, 위에서 아래로 처리된다. 기본적인 코드의 실행 순서를 조건과 반복
✅ 40문항 핵심요약🍀1\. 앙상블 분석 시 모델 간에 상호 연관성이 높으면 과적합을 해결할 수 없다. (O) 2\. 다층 신경망에서 은닉층의 수가 너무 많아 역전파 과정에서 은닉층의 가중치 조정이 이루어지지 않고 이로 인해 학습이 제대로 이루어지지 않는 문제를 뜻하
✅ 5가지 쟁점 정리p.277 참고<37, 14, 17, 40, 35> => 선택(Selection) 정렬 + 오름차순 + 3회전 결과1회전: <14, 37, 17, 40, 35> -> <14, 37, 17, 40, 35> -> <14, 37, 1
✅ 60문항 핵심요약🍀1\. 연봉을 높이는 노력보다 모아둔 자금으로 주식 시장에 뛰어드는 것이 실질적인 수익 증가를 가져올 것으로 예상된다. - 지식 (O) 2\. 데이터는 구조에 따라 정형, 반정형, 비정형으로 구분된다. (O) 3\. 빅데이터 분석의 비용 효율성을
✅ 60문항 핵심요약🍀1\. 단순회귀분석을 수행하기 위한 가정사항으로는 선형성, 정규성, 독립성, 등분산성의 4가지가 있다. (O) 2\. 최소제곱법이란, 회귀분석에서 각 독립변수에 대한 회귀계수를 추정하기 위한 방법으로 잔차의 제곱합이 최소가 되는 회귀식을 찾는 방
✅ 60문항 핵심요약🍀1\. 시스템 엔지니어링, 프로젝트 관리, 인수 및 서비스 등을 포함한 광범위한 분야를 포괄하여 개인 또는 조직의 프로세스별 수준을 5가지 단계로 나타낸 소프트웨어와 시스템 공학의 역량 성숙도를 평가하는 모델은 CMMI이다. (O) 2\. 데이터
✅ 3가지 쟁점 정리반정규화(Denormalization): 정규화된 데이터 모델을 의도적으로 통합, 중복, 분리하여 정규화 원칙을 위배하는 행위이다.테이블 분할은 레코드(Record)를 기준으로 테이블을 분할하는 수평 분할과 속성(Attribute)을 기준으로 테이블
✅ 6가지 쟁점 정리스키마: 데이터베이스의 구조와 제약조건에 관한 전반적인 명세를 기술한 것이다.개념 스키마: 데이터베이스의 전체적인 논리적 구조로, 모든 응용 프로그램이나 사용자들이 필요로 하는 데이터를 종합한 조직 전체의 데이터베이스이다.내부 스키마: 실제로 저장될
✅ 60문항 핵심요약🍀1\. DIKW 피라미드는 데이터, 정보, 지식, 지혜로 구성된다. (O) 2\. 빅데이터는 다양하고 대규모의 데이터에서 저비용으로 가치를 추출할 수 있어 비용 효율적이다. (O)3\. 빅데이터의 특징에는 Volume, Variety, Veloc
✅ 60문항 핵심요약🍀1\. 강력한 호기심은 사이언티스트의 핵심 요소 중 하나이지만 반드시 있어야 할 필수 요소는 아니다. (O) 2\. 사용자들의 기계학습과 딥러닝의 간편한 구현을 목표로 구글에서 만들었으며, 텐서플로에서 복잡한 모형을 만들기 쉽지 않은 문제를 해결
✅ 60문항 핵심요약🍀1\. 객관적인 사실을 의미하는 데이터로부터 정보와 지식, 지혜를 도출할 수 있다. (O) 2\. 개인이 보유한 경험을 다른 사람이 쉽게 접근할 수 있도록 문서나 매체로 변환하는 과정을 '표출화'라고 한다. (O)3\. 메타데이터는 데이터를 설명
✅ 정보처리기사 필기 준비 썰정보처리기사를 준비하겠다고 선언한지는 꽤나 오래되었으나... 발등에 불이 떨어지고 살이 탄 뒤 뼈가 드러나야 비로소 시작하는 지독한 습관 때문에 고생을 좀 했다. 3월 1일부터 3월 3일까지 3일간 스터디 카페에서 폐관 수련을 진행했다.전략
✅ 2과목 소프트웨어 개발(150문항 정리)
✅ 2과목 소프트웨어 개발(50문항 정리)
✅ 1과목 소프트웨어 설계(50문항 정리)✅ 회고개발을 하며, '문제 정의'에 가장 많은 시간을 할애한다. 의료계 파업 사태를 목도하며 다시금 '문제 정의'가 너무도 중요하다는 것을 반추한다. 의사의 절대적인 숫자가 부족한 것은 자명한 사실이지만, '본질'은 의사 수의
✅ 1과목 소프트웨어 설계(100문항 정리)
✅ 1과목 소프트웨어 설계(50문항 정리)✅ 회고서로소는 확률론적으로 표현하면 배반사건에 해당한다. 동시에 두 사건이 일어날 수 없으면, 그 두 사건은 서로 배반사건이다.때로는 나의 매일을 구성하는 일들이 배반사건 관계, 즉 서로소라는 생각이 드는 경우가 많다. 그런데
✅ CLI 인증 설정IAM을 검색한 뒤 해당 서비스로 이동한다. 사용자 탭으로 이동한다.사용자 생성을 클릭한다.계속 진행한다.진행.액세스 키 만들기 진행.친숙한 단어 발견. 진행.AWS Access Key ID와 AWS Secret Access Key를 얻게 된다.✅
Reference: https://inpa.tistory.com/entry/AWS-📚-AWS-CLI-설치-사용법-쉽고-빠르게✅ Trouble ShootingAWS Lambda 작업을 진행하면서 느낀 문제점은 다음과 같다.1\. AWS Lmabda의 '코드 소
✅ 아키텍처의 미학몇 년을 고민했는지. 드디어 내가 무엇을 좋아하는지 확신하게 됐다. 아키텍처를 구성하는 일을 좋아하는 사람이었다.타고난 달란트인지, 어릴 때부터 글을 쓰는 것을 좋아했다. 내가 하고 싶은 말의 대전제를 설정하고, 그 대전제를 문단으로 나누고, 오와 열
reference: 1.https://joshua1988.github.io/web-development/javascript/promise-for-beginners/2.https://developer.mozilla.org/ko/docs/Web/JavaS
✅ JSON이란?JSON은 'J'ava'S'cript 'O'bject 'N'otation이다. 자바스크립트 객체 형식의 표기법이라는 뜻.클라이언트가 서버에 요청하면, 서버가 클라이언트에 응답을 하는 구조. 결국 데이터를 주고받는 문제이고, 그 중심에 JSON이 있는 것
Auth with API ☝️🔴 Access Token을 보내는 것이 핵심이번 단계에서는, 'web page'에서 Amazon API Gateway로 생성한 'API로' Access Token을 보내야 한다. 엄밀히 말하자면, 생성한 API와 AWS Lambda가 연
텍스트
✅ API Gateway에 관한 고찰프론트엔드계의 백종원 선생님이 되고자 하는 나로서는, 이런 글을 읽게 되면 백종원이 아니라 은현장에 더 가까워진다. (화가 머리끝까지 난다는 뜻)API Gateway는 API계의 '전역 상태 관리'라고 할 수 있다. 이게 다임 실제로
Sign in via Kakao ☝️Redirect with Auth code ☝️사전 설정부터 시작하도록 하자.카카오 dev 문서의 '내 애플리케이션'에서, 테스트를 진행하기 위해 애플리케이션을 추가해준다. aws cognito와의 통합을 테스트하기 위해서, 앱 이름
🔥 AWS Cognito Flow(with. KakaoTalk)reference: https://haandol.github.io/2021/01/31/cognito-kakao-login.htmlSign in via Kakao ☝️Redirect with Aut
✅ Query란?Query란 질문 또는 문의라는 뜻을 내포하고 있다. 컴퓨터과학에서 말하는 Query는 DB에서, 원하는 내용을 검색하기 위해, code나 key를 기초로 질문하는 행위를 의미한다. 질문하는 행위 자체를 Query라고 한다면, 질문의 형식을 Query
reference:https://velog.io/@qjqdn1568/%EC%9D%B8%EC%A6%9D%EA%B3%BC-%EC%9D%B8%EA%B0%80%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%
✅ 분할 정복(Divide and Conquer)분할 정복(Divide and Conquer)은 여러 알고리즘의 기본이 되는 해결방법으로, 기본적으로는 엄청나게 크고 방대한 문제를 조금씩 조금씩 나눠가면서 용이하게 풀 수 있는 문제 단위로 나눈 다음, 그것들을 다시 합
✅ 새로운 것을 빨리 배우는 법reference: https://haandol.github.io/2020/11/06/tips-for-learning-new-things-faster.htmlAWS Cognito에 대한 개념을 학습하기에 앞서, 새로운 것을 빨리
✅ 개요Signup Page에 대한 기본적인 layout을 잡았다. Signup Page는 PageContainer와 ComponentWrapper를 차치하고, 총 5개의 파트로 구분된다. ✅ part 1: main titleBox 태그는, main title에 대한
✅ 시작에 앞서...며칠간 고심했다. 다른 건 아니고, 구현을 하는 과정에서 뭔가 잘못되었음을 깨달았다. 무슨 말이냐?개인적인 의견이지만, 코드를 작성하는 행위는 논리적인 글(예를 들면 기사)을 작성하는 행위와 유사하다. 그런데 글을 작성할 때에는 나름대로 목차를 구성
reference: https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%A2%85%EB%A5%98-%ED%86%B5%EC%8B%A0-%EA%B3%BC%EC%A0
reference:https://aws.amazon.com/ko/what-is/api/https://www.youtube.com/watch?v=4DxHX95Lq2U✅ API란?API는 Application Programming Interface의 줄임
✅ color 정리MUI에서 다크 모드와 라이트 모드를 구분할 때, <Typography와 Buttons> <Background와 Divider>를 대조하는 방식을 취한다고 느꼈다. ✅ getDesignTokens위와 유사하게, 같은 모드 내부에서 <
✅ The Table element 프로젝트 메인 페이지의 테이블을 구현할 차례이다. MUI와 같은 라이브러리를 통해 view를 구현하는 것 자체는 그리 어려운 일이 아니다. 다만, 제공되는 템플릿을 명확하게 이해하여 다양한 요구사항에 확장성 있게 대응하는 것이 더
✅ 다시 공식문서 공식 문서의 theming과 palette 파트에 최근 며칠간 deep dive 했다. 끝난 줄 알았다. 아뿔싸... dark mode 파트를 공부하지 않으면 의미가 없다는 것을 공식 문서를 훑어보며 깨달았다. 도대체 무슨 말을 하고 싶은 걸까?
길 잃음의 연속이었다. 2019년 크리스마스에 군대를 전역하고, 코로나의 시작과 함께 전면적인 온라인 형태로 2학년 수업이 대체되었다. 원래도 뜻이 없던 전공 수업을 온라인으로 듣고 있는 매일은, 무의미의 폭력 그 자체였다. 그렇게 2020년을 보내고, 2021년이 되
✅ 분리 X1\. theme.jstheme.js에 있는 getDesignTokens 함수부터 살펴보자.getDesignTokens는 인자로 mode를 받는다. 함수를 사용하는 부분에서 받은 mode가 light에 해당하면, light 버전의 palette가 반환된다.
reference: https://mui.com/material-ui/customization/palette/palette ✍️공식문서에는, palette를 통해 사용자에게 적합하도록(=customize) 컴포넌트의 '컬러'를 수정할 수 있다고 언급되어 있다.
reference: https://mui.com/material-ui/customization/theming/Theme? ✍️MUI에서 Theme은, 컴포넌트의 color, breakpoints를 포함한 다양한 디자인적 제반사항을 미리 지정해놓은 객체이다. t
Home Page Layout ✍️ PageContainer.jsx 🟢
reference: https://react.dev/reference/react/createContext https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree > createCon
Dark Mode 습작 🌖새로고침 console 순서ToggleColorMode component renderingtheme executed 1theme executed 2MyApp component rendering모드 아이콘 클릭 console 순서toggleCo
파일 구조 ✍️오늘의 핵심 파일src/components/layout/footer/footerMenu.jsxsrc/components/layout/footer/Footer.jsxsrc/components/layout/common/PageContainer.jsxsrc/p
파일 구조 ✍️ 오늘의 핵심 파일 src/components/layout/appbar src/hooks/common/useResponsive.jsx > 1. src/components/layout/appbar/index.jsx 🟢 MUI에서 Appbar에 대한
MUI, Grid System ✍️reference: https://www.youtube.com/watch?v=eYGIIc2FOVIhttps://mui.com/material-ui/react-grid/MUI를 사용하여 프로젝트를 진행하기로 기획했다.
코인 시황 사이트 🪙 아직 졸업이 1년 정도 남았지만, 지금까지 학습한 지식으로 그리고 앞으로 학습할 내용으로, '제대로 된' 포트폴리오 용 사이트를 하나 개발하고 싶다는 생각이 들었다. 프론트엔드 개발자로 취업하는 것이 단기적인 목표이지만, 궁극적으로는 "플랫폼
reference: https://inpa.tistory.com/entry/GIT-⚡%EF%B8%8F-개념-원리-쉽게이해정육각 배포 관련 ✍️배포에 앞서, 버전 관리에 대해 공부해야겠다는 생각이 들었다. 찐막 찐찐막을 반복하던 삶에서 벗어나고자 하는 욕구에서
1과목: 소프트웨어 설계 🔴 3장: 애플리케이션 설계 🟠 3장-16: 소프트웨어 아키텍처 🟡 3장-16-1: 소프트웨어 아키텍처의 설계 🟢 3장-16-2: 모듈화(Modularity) 🟢 3장-16-3: 추상화(Abstraction) 🟢 3장-16
서론 ✍️사람은 why에 대한 본인만의 대답이 없을 때 흔들린다. 다들 무엇(what)을 하겠노라고 쉽게 얘기한다. 어떻게(how) 하겠다는 말로 무엇(what)을 강화한다. 그런데 지칠 때면 왜(why) 해야 하는지에 의심을 품기 시작하고, 명확한 답이 없을 때 혹은
ㅇ
1과목: 소프트웨어 설계 🔴 1장: 요구사항 확인 🟠 1장-7: 요구사항 분석 🟡 1장-7-1: 요구사항 분석의 개요 🟢 1장-7-2: 구조적 분석 기법 🟢 1장-7-3: 자료 흐름도(DFD) 🟢 1장-7-4: 자료 사전 🟢 1장-8: 요구사항
할 일이 쏟아졌다. 잘 해내는지가 문제가 아니라, 일단 쏟아지는 것들이 너무 많았다. 각종 조별 과제, 살아남기(=졸업하기) 위한 시험 준비, 그런데 성취했다는 느낌은 없는, 그러다 보니 껍데기 인생을 산다는 느낌이 스스로를 잠식했다."네가 선택한 거에 집중해", "나
1과목: 소프트웨어 설계 🔴 1장: 요구사항 확인 🟠 1장-1: 소프트웨어 생명 주기 🟡 1장-1-1: 소프트웨어 생명 주기(Software Life Cycle) 🟢 최근 10회 출제 X 1장-1-2: 폭포수 모형(Waterfall Model) 🟢
장바구니, 옵션 추가 로직 ✍️ 옵션은 기본적으로 Drodown 컴포넌트를 통해 보여진다. 위 코드는 Dropdown을 컨트롤하기 위한 기본적인 state, array, Fn이다. 상세페이지에서는 Dropdown을 '보여주기만' 한다. 따라서, 위에서 설정한 sta
상세 페이지 ✍️ 상세 페이지에서 '바로구매' 버튼을 클릭하면 144번 라인의 handleDirectClick 함수가 실행된다. dispatch를 통해 getCartData라는 액션 함수로, 상세 페이지 상의 상품 정보를 전달한다. category와 count가 추가
쇼핑 목록 추가 로직 정리 (redux slice를 중심으로) ✍️ ☝️ 정리 구조 a) slice에 정의된 액션 생성 함수를 소개한다. b) 어떤 파일에서 무엇을 dispatch 하는지 살펴본다. c) addCase에서 데이터를 어떻게 parsing 되는지 살
reference: https://www.npmjs.com/package/redux-persist > Redux-Persist ✍️ 배경 🟠 프로젝트 진행 중(=쇼핑 카트 목록 페이지), 새로고침에 의해 데이터가 초기화된다는 문제점을 발견했다. Redux-Per
장바구니 버튼 🛒 1) MUI에서 쇼핑 카트 아이콘을 가져와서 color와 fontSize를 적절히 변경함 2) onClick 이벤트에 handleNavigate 함수를 적용해서, 아이콘을 클릭했을 때 쇼핑카트 페이지로 이동하도록 설정함 3) SidebarDat
reference: 1)https://www.youtube.com/watch?v=tosLBcAX1vk2)https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API3)https://kyoung
redux-toolkit shopping cart(with. redux-persist) ✍️ reference: https://github.com/trickjsprogram/toolkit-shopping-cart 최상단인 App.js에서는 NavBar와 CartCo
CartPage 시작 🟢detail page에 있는 내용이다. 바로구매를 클릭하면 가장 먼저 if 문을 통해 로그인 여부를 확인한다. 로그인이 되어 있지 않은 상태라면 로그인 페이지로 이동하고, 로그인이 완료된 상태라면 쇼핑카트 페이지로 이동한다. 이때 이동에 앞서
Detail page layout 🟢ProductDetailPageBackgroundStyle에 의해 전체적인 배경색이 적용되고 있다. AllContentWrapper는 첫 번째 사진에서 노란색 border로 표시되는 영역이다. 해당 wrapper는 width가 90
Dropdown Box 🟢 App.js에서는 'Dropdown Example'이라는 제목과, Dropdown 컴포넌트를 렌더링한다. 동시에 options라는 배열이 상단에 선언되어 있는데, 이를 Dropdown 컴포넌트에 props로 전달하고 있음을 확인할 수 있다. Dropdown.js에서는 위 내용을 return한다. 1) Dropdown But...
반응형 🟢px(픽셀)과 같은 고정 단위를 쓰면 위와 같이 처참한 결과를 얻을 수 있다. 코드를 수정했다.수정 후 모습 🟢코드에 대한 설명이 필요한데, 오늘은 도저히 힘이 나지 않는다. handleDirectClick 함수를 통해, 로그인이 되어 있지 않다면 logi
상세 페이지 전체적인 구조 🟢1)2)3)4)상세 페이지 주요 로직 🟢useParams()를 통해 url에 부여된 id를 가져온다. useLocation()을 통해 url에 대한 정보를 담고 있는 location 객체를 가져오는데, navigate를 통해 페이지를 이
Detail Page를 위한 Routing 연습 🟢최상단 파일인 App에서는 ProductPage와 ProductDetailPage를 보여준다.ProductPage는 상품 이름 목록을 보여준다. 이커머스 사이트의 '상품'이라고 가정했다. 해당 상품을 클릭하면 그에 맞
NotifyPage에 관하여(근데 이제 페이지네이션을 곁들인...) 🟢 1) 전체적인 를 설명하고, 2) 을 정리하도록 하겠다. > 페이지 구조 🟢 좌측 NotifyPage는 1) background-color와 padding을 조절하는 와, 2) Compon
keyword ✍️
QnA Page는 , 으로 구성된다. 1-1. 제목 영역 wrapper를 통해 제목이 나타나
1\. QnA Page 경로 지정 🟢2\. QnA Page 셋팅 🟢3\. QnA List 셋팅 🟢4\. QnA List Detail 셋팅 🟢5\. 현재 모습 🟢
.
슬라이더 구현하기 🟡정육각에는 위 이미지와 같은 slider가 있다. '기능적으로' 최대한 비슷하게 구현하는 것이 오늘의 학습 목표였다.최상단인 App.js에는 '이미지 슬라이더 예제'라는 제목, 그리고 'ImageSlider 컴포넌트'가 있다.이 부분을 보여주고 있
오늘의 myTask 🟡auth data를 활용하여 AppBar의 UI를 변경하기로 했으나, '로그아웃'을 구현하는 것이 선행되어야 한다고 생각했다. pedro 형님이 firebase에서 signOut 함수를 가져오고 있음을 확인했다. signOut 함수에 auth를
쇼핑하기 페이지 추가 🟢antibioFree를 통해 subtitle에 '무항생제'가 포함된 경우, 해당 제품명의 색을 green으로 변경하는 로직을 추가했다.이미지에 마우스를 갖다 대면 호버를 통해 이미지 배경이 검정색으로 변한다. 고기가 상당히 고급져보이는 효과가
시작에 앞서... 🟢 학교를 다니고 종강 이후에는 일을 하는, '바쁘다 바빠 현대사회'를 몸소 체험하고 있다. 그런데 매번 상황이 바뀔 때마다 초반에 정신을 못 차린다는 느낌을 받았다. 10번째의 myTask가 계속 주어지고 process라는 함수로 실행은 하는데,
reference: https://baekkyoungjung.medium.com/react로-확장성-있고-재사용성도-있고-가독성도-있으면서-코드를-추가하기도-쉽고-동시에-제거하기-쉬운-코드-컴포넌트-만들기-아토믹-컴파운드-패턴-7912f1b65a40정육각 프로
두괄식 글쓰기망함쇼핑하기 페이지에서, 카테고리에 해당하는 버튼을 클릭하면, 버튼 하단에 상품 카드가 나타나는 기능을 구현하는 것이 오늘의 목적이었다.돼지고기 이미지를 정육각 페이지에서 야무지게 받아왔다.해당 객체를 export 해준다.기존에 있던 카테고리 리스트에, i
27장. 배열 🟢 27-9. 배열 고차 함수 🟡 는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 고차 함수는 외부 상태의 변경이나 가변(mutable) 데이터를 피하고, 불변성(immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있
쇼핑하기 페이지 구현 🟠iamge정육각 홈페이지에서 이미지를 추출해 옴!, 객체 형태로 각 이미지를 구성한 다음, shoppingMainImg라는 이름으로 exportdata카테고리 리스트에서는 id, title, image를 객체로 담아 배열화 함!shopping
EventPage 반응형 구현 🟠SignUpPage layout 재구성 🟠validation logic 수정 🟠타입 지정 및 switch 문 적용, case 별로 error에 대한 처리를 어떻게 할 것인지는 고민중.
1\. ver2 🟢layout의 흐름을 놓친 결과는 처참하다. 괜찮다 수정하면 되니까. 차분히 고민을 녹여낼 ver2 파일을 만들었다.최상단 App.js에서는 로그인 페이지를 포함한 여러 페이지들을, PageContainer라는 컴포넌트로 감싸고 있다.PageCont
문제 정의 🟠어느 페이지를 가도, width가 900px 이하가 되면 우측 화면이 깨졌다. 문제 해결 접근 방식 🔵'어느 페이지를 가도'라는 말에서 layout에 관한 코드에 문제가 있음을 인지했고, 'width가 900px 이하'라는 말에서 디버깅의 대상을 구체화
27장. 배열 🟢
src/pages/EventPage.js 🟡 > src/data/EventList.js 🟡 > src/images/index.js 🟡 > 현재 모습 🟡 업로드중.. > 회고 🟢 '이상도 이하도 아니다'라는 표현은 과대평가와 과소평가를 막으려는 의도로
event page 관련 🟠 정육각의 event page를 구현하고자 한다. 마우스를 'press'하고(click과 구분할 것) 우측에서 좌측으로 넘기면, 진행중인 event들이 oveflow되는 모습을 볼 수 있다. best practice를 이해하는 방식을 택했
CardComponent 🟠src/components/common/ProductCard.jssrc/data/ProductList.jssrc/pages/Home.jsproduct list에 대한 데이터 구조를 잡고, 카드 컴포넌트에 map을 통해 적용한 뒤, home
Validation에 대해 알아보자 🟠 어디에서 🟢 전역 상태 관리와 유사하게, 유효성 검사 자체에 대한 독립된 directory가 필요하다고 판단했다. utils가 바로 그것이다. src/utils/LogInValidation.js 🟢 LogInValidation.js는, 세 개의 함수(isValidLogIn, isValidEmail, isV...
LogIn 상태, 전역에서 관리하기(feat. Redux Toolkit) 🟠 > src/pages/LogInPage.js 🔵 > src/modules/authSlice.js 🔵 > 해결 과정 🟢 개요 어떤 action을 행함에 있어, 특히 개발자는 따위의 대답을 해서는 안 된다. 에 대한 근거부터 서술하고자 한다. 전역 상태 관리는, 소...
Array.prototype.splice 🟣push, pop, unshift, shift 메서드는 모두 원본 배열을 직접 변경하는 메서드였다. 원본 배열의 처음 또는 마지막에 요소를 추가하거나 제거하는 기능을 수행했다.원본 배열의 중간에 요소를 추가하거나 제거하는 경
파일 구조 변경 🟠프로젝트에 sidebar 적용 🟠회원가입 🟠지금까지 🟠회고 🟢10%도 완성되지 않았는데 엄마가 되게 좋아한다. 그럼 대작이지 뭐,,, 내일은 딥다이브 좀 읽어야겠다. 진행시켜!
Sidebar Nav Menu 🟠reference: https://www.youtube.com/watch?v=5R9jFHlG6ik&list=WL&index=1sidebar를 구현하고 싶었다. pedro 형님이 말아주시는 sidebar 강의를 듣고, style
Authentication in ReactJS Using Firebase 🟠 프로젝트의 진행을 위해, 로그인과 회원가입 기능(Authentication)에 대한 학습은 필수불가결하다. 외국인 프로그래머 누님의 자료를 참고했다. reference: https://w
Array.prototype.shift 🟣shift 메서드는 원본 배열에서 첫 번째 요소를 제거하고, 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. 이때, shift 메서드는 원본 배열을 직접 변경한다.shift 메서드와 push 메
asdsasda
Array.prototype.pop 🟣pop 메서드는 원본 배열에서 마지막 요소를 제거하고, 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. 이때 pop 메서드는 원본 배열을 직접 변경한다.pop과 push 메서드를 사용하면, 스택(s
27장. 배열 🟢 27-8. 배열 메서드 🟡 자바스크립트는 배열을 다룰 때 유용한, 다양한 빌트인 메서드를 제공한다. 배열 메서드가 결과물을 반환하는 패턴은 다음 두 가지다. 원본 배열을 직접 변경하는 메서드 원본 배열을 직접 변경하지 않고 새로운 배열을 생성
27장. 배열 🟢 27-5. 배열 요소의 참조 🟡 배열의 요소를 참조할 때에는 대괄호 표기법을 사용한다. 대괄호 안에는 인덱스가 와야 한다. 정수로 평가되는 표현식이라면 인덱스 대신 사용할 수 있다. 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와
length 프로퍼티는 배열의 길이(=요소의 개수)를 나타내는, 0 이상의 정수를 값으로 갖는다. length 프로퍼티의 값은 빈 배열일 경우 0이고, 빈 배열이 아닐 경우 가장 큰 인덱스에 1을 더한 것과 같다.length 프로퍼티의 값은 배열에 요소를 추가하거나 삭
배열(array)은 여러 개의 1) 값을, 2) 순차적으로 나열한 자료구조다.배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값(=원시값, 객체, 함수, 배열 등...)은 배열의 요소가 될 수 있다.각 배열의 요소는, 배열에서 자신의 위치
프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분 가능하다.데이터 프로퍼티(data property): 키와 값으로 구성된 일반적인 프로퍼티다.접근자 프로퍼티(accessor property): 자체적으로는 값을 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할
프로퍼티 어트리뷰트를 이해하기 위해, 먼저 내부 슬롯(internal slot)과 내부 메서드(internal method)의 개념에 대해 알아봤다.내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사
forwardRef부모 컴포넌트에 ref가 있는 경우, 자식 컴포넌트를 부모 컴포넌트에서 노출하기 위해서는 forwardRef의 사용이 필요하다.reference: https://react.dev/reference/react/forwardRef우선 'ref 값
정리부터 CSS 폭망 이슈로 코드의 늪에서 빠져나올 수 없다고 판단해서, 처음부터 구조를 직접 정리했다. 어차피 더 붙잡고 있어봐야 해결 안 될 것이 뻔했다. > 문제상황 상태관리는 차치하더라도 일단 scroll이 되어야 하는데, 진짜 인내심을 끝없이 시험한다.
오늘 한 일파일 구조 변경에 따른 recent todo 재구성회고width와 height를 설정하며, 부모 컴포넌트로부터 논리적으로 접근했다. 평소 css는 단순히 view를 꾸며주는 것 그 이상도 이하도 아니라고 생각했는데, 처음부터 논리적으로 접근하지 않으면 코드가
파일 구조App.js최상단인 App.js에서는 Homepage 컴포넌트만을 보여줌src/pages/Homepage.jshomepage는 크게 1)AppBar, 2)Common, 3)Footer 로 구성src/components/appbar/AppBar.jsAppBar
ㅈ
Layout.jsHome.js오늘의 삽질어제 예정한 대로, 오늘은 공식문서의 코드를 참고하여 스크롤 기능을 완성하는 것이 목표였다. 개별 컴포넌트에서 forwardRef를 사용하는 것은 큰 문제가 되지 않았다.분명 제대로 했는데, 맵핑 과정에서 footer가 화면 최하
x zcczxc
useRef 🟢 Reference 🟡 컴포넌트의 최상단에서 useRef를 호출하여 ref를 선언한다. Usage 🟡 Referencing a value with a ref 🟣 ref를 사용하여 값을 참조할 수 있다. 위 컴포넌트는 버튼이 클릭된 횟수를
src/App.js src/components/Layout.js src/components/FirstSection.js src/components/SecondSection.js src/components/ThirdSection.js src/components/
ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수가 갖는 특징과 문제점에 대해 알아봤다.변수 중복 선언 허용 🟣var 키워드로 선언한 변수는 중복 선언이 가능하다.위 예제에서, var 키워드로 선언한 x
App.js아주 좋은 학습용 코드를 구했다. 이번 주는 이 코드를 이해하고 투두리스트를 적용하는 것을 목표로 하겠다.
함수 선언문함수를 정의하는 방식 중 함수 선언문(Function declaration) 방식이 있다. 기본적인 syntax는 다음과 같다.다음은 함수 선언문 방식의 특징이다.함수 선언문은 function 키워드를 사용한다.함수 선언문 방식으로 함수를 정의할 때, 함수명
암묵적 결합 🟣전역 변수를 선언한 의도는, 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 달리 표현하면 모든 코드가 전역 변수를 참조하고 변경할 수 있도록, 암묵적 결합(implicit coupling)을 허용하는 것이다. 변수의 유효 범위가 크
전역 변수의 무분별한 사용은 위험하다고 한다. 특별히 전역 변수를 사용해야 할 이유가 없다면, 지역 변수를 사용해야 한다. 14장에서는 전역 변수의 문제점과 전역 변수의 사용을 억제할 수 있는 방법을 살펴보겠다.지역 변수의 생명 주기 🟣변수는 선언에 의해 생성되고 할
loading spinner 구현하기 🟣 loading spinner를 구현하기에 앞서, action이 무엇인지 console에 찍어봤다. action은 기본적으로 '객체'이다. action 객체 내부에서 'requestStatus라는 key와 fulfilled라는
프로젝트 생성 및 환경 설정 🟣store 관련 셋팅 🟣src 폴더 외부에 db.json 생성하고 대강 초기 데이터 설정json-server 설치 후, port 8000으로 실행src/index.js에서 App 컴포넌트를 Provider로 wrapping하고 stor
13장. 스코프 🟢 코드는 과 으로 구분할 수 있다. 전역에서 선언된 변수는 전역 스코프를 갖는 이고, 지역에서 선언된 변수는 지역 스코프를 갖는 라고 할 수 있다. 13-2. 스코프의 종류 🟡 > 전역과 전역 스코프 이라는 것은 을 의미한다. 전역에 선언
async logic 실습비동기 작업을 다루기 위해, 무료 가상 API를 제공하는 {JSON} Placeholder를 활용했다.reference: https://jsonplaceholder.typicode.com/guide/해당 사이트에서 posts와 관련된
Reference: https://redux.js.org/tutorials/essentials/part-5-async-logicUI에서 Deposit Button을 클릭함onClick Event에서 dispatch를 통해 '액션생성함수'를 '호출'하여 '액션'
순수 함수와 비순수 함수함수형 프로그래밍에서는, 어떠한 외부 상태에 의존하지도 않고 변경하지도 않는, 즉 부수 효과가 없는 함수를 순수 함수(pure function)라고 하고, 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수를 비순수 함수(i
환경 변수api key는 다음과 같이, 상수에 할당하는 방식으로 파일에 직접 작성할 수 있다. 그런데 api key는 사람의 '주민등록번호'와 같은 말 그대로 고유한 'key 값'이다. 데이터를 요청하거나 서비스를 사용할 때 인증하는 데 사용된다. 외부에 노출되지 않도
netflix 만들기 뜬금없지만 예전에 결제해놓고 듣지 않은 강의에서, 요즘 내가 학습하고자 하는 내용들을 많이 담고 있다고 보여서 진행했다. > installation
12장. 함수 12-7. 다양한 함수의 형태(이어서...) > 중첩 함수 함수 내부에 정의된 함수를 라 한다. 중첩 함수를 포함하는 함수는 라 부른다. 중첩 함수는 외부 함수 호출할 수 있다. > 콜백 함수 특정 작업을 반복 수행하는 repeat 함수를 정의
2. 웹 요청 처리하기 🔴 a) 비동기 작업 처리 & Promise 🟠 redux-thunk를 사용하여 비동기 작업을 처리하려 한다. 라는 라이브러리를 이용하여 웹 요청을 할 것이다. axios는 이다. 는 ES6에서 비동기 처리를 다루기 위해 사용되는 이다.
redux-logger오픈소스 커뮤니티에 있는, 더 잘 만들어진 로거 미들웨어를 활용하는 방법에 대해 학습했다.설치적용store.js 수정더 예쁘게 기록이 된다고 합니다!비동기 작업을 처리하기 위한 미들웨어 사용해보기redux-thunk, redux-promise-mi
PhoneBook Service 구현 InputTodo와 TodoSection 컴포넌트에 대응되는, InputPhoneNumber와 PhoneNumberSection 컴포넌트가 필요함. PhoneBook Service 전용 reducer가 필요함. store에 해
12장. 함수 12-6. 참조에 의한 전달과 외부 상태의 변경 원시 값은 , 객체는 방식으로 동작한다. 매개변수 역시 함수 몸체 내부에서 변수와 동일하게 취급되므로, 타입에 따라 '값에 의한 전달', '참조에 의한 전달' 방식을 그대로 따른다. 를 살펴보면, 은
매개변수와 인수함수를 실행하기 위해 필요한 값을, 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수(parameter)를 통해 인수(argumnet)를 전달한다. 인수(argument)는 함수를 호출할 때 지정하며, 개수와 타입에는 제한이 없다.매개변수(p
함수 정의란 함수를 호출하기 이전에, 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다. 한마디로 함수를 셋팅하는 것을 함수 정의라고 한다. 함수를 정의하는 방식은 다음과 같다.함수 선언문함수 선언문은 크게 두 가지 특징을 갖는다.1\.
Try 1 todo section에서는 title만 보여주기 상세 페이지에서 subtitle, desc 보여주기 객체 형태로 subtitle과 desc에 대한 state를, useNavigate()를 통해 페이지가 이동될 때 전달함. 기존에 Todo Card에 있던
12장. 함수 12-1. 함수란? 수학에서의 함수는 을 받아 을 내보내는 일련의 과정을 정의한 것이다. 프로그래밍 언어의 함수도 수학의 함수와 동일한 개념이다. 'x, y'는 함수 내부로 입력을 받아들이는 변수(=아직 결정되지 않은 임의의 값을 나타내는 기호)이다
상세 페이지 관련 츄라이 어제는 상세 페이지에 대한 기본 골격만 잡았다. 투두리스트에서는 Main Title만 보여주고, 상세 페이지로 넘어갔을 때 subtitle과 desc를 보여주고 싶었다. detail page에서 todo.subtitle과 todo.desc를
값에 의한 전달이전에, 원시 값은 '변경 불가능한 값'이기 때문에, 변수에 새로운 원시 값을 재할당하면 변수가 가리키던 메모리 공간의 주소가 변경된다고 정리한 바 있다. 원시 값이 변경 가능한 값이라면 메모리 주소를 바꿀 필요없이 원시 값 자체를 변경하면 그만이기 때문
페이지에 회색 배경색상 적용 > 메인 페이지 꾸미기 src/components/MainPageTemplate.js index.js에서 App 컴포넌트를 BrowserRouter로 wrapping함 App.js에서는 해당 페이지의 경로를 지정해줌 중간점검 >
src/pages/Profile.jsURL 파라미터를 사용하는 방법을 학습하기 위해 Profile 페이지 컴포넌트를 생성함src/App.jsApp.js에서 Profile 컴포넌트는, path에 username을 파라미터로 넘기고 있다. params 상수를 콘솔에 찍어봤
Router 까먹었다!https://velog.io/@velopert/react-router-v6-tutorial벨로퍼트님의 글을 통해 복습했습니다!React Router프로젝트 생성라이브러리 설치src/index.jssrc/pages/Home.jssrc/pa
11장
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우에, 일반적인 함수와 구분하기 위해 메서드(method)라고 부른다. 한마디로, 메서드는 객체에 묶여있는 함수를 의미한다.프로퍼티에 접근하는 방법에는 두 가지가 있다.
CompleteSection<src/Components/InputSection.js><src/Components/TodoSection.js><src/Reducer/reducer.js><src/Reducer/store.js><src/App.js
xxx
4. TodoSection 컴포넌트 & 필요한 Action 생성 요구사항 정리하기 할 일 list가 제시되는 TodoSection이 필요함 추가된 할 일에는 세 가지의 버튼이 존재함 세 가지 버튼은 각각 edit, complete, delete 기능을 수행함 edit
1. 프로젝트 생성, 설치 리액트 프로젝트에서 의존 패키지를 설치하면, 항상 package.json에서 잘 설치되었는지 확인해주는 작업을 해야함! 2. reducer 생성, st
논리 연산자를 사용한 단축 평가"논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다." 논리 연산자를 사용한 단축 평가 파트에서
src/App.jssrc/index.jssrc/Reducer/store.jssrc/Reducer/reducer.jssrc/Components/InputSection.js현재투두리스트의 상태를 redux를 통해 관리하고 싶은데 생각보다 어려웠다. 가장 작은 단위부터 성취
개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.문자열 타입으로 변환문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 다음과 같다.String 생성자 함수를 new 연산자 없이 호출하는 방법Object.prototype.toString 메서드를
9장. 타입 변환과 단축 평가 9-1. 타입 변환이란? > 타입 변환의 종류 자바스크립트의 모든 '값'은 '타입'이 있다. 타입의 변환이 에 의한 것인지 여부에 따라 과 으로 구분된다. 은 이라고도 부른다. 표현식을 평가하는 도중에, 자바스크립트 엔진에 의해
src/App.jssrc/components/InputSection.jssrc/components/PrevEditForm.js기존에 TodoSection.js 파일에서 todo.id와 edit.id가 다른 경우 반환하던 코드였다. TodoSection.js 파일의 코드
src/App.jssrc/components/InputSection.jssrc/components/TodoSection.jssrc/components/CompleteSection.jssrc/components/TodoTemplate.js현재까지의 스타일링 (styled
src/App.js src/components/InputSection.js src/components/TodoSection.js src/components/CompleteSection.js현재까지의 스타일링 (styled-components)내일은 DeepDive를 읽
src/App.jssrc/Components/InputSection.jssrc/Components/TodoSection.jssrc/Components/CompleteSection.js오늘까지의 최선... 일단은 굴러간다
src/App.jssrc/Components/InputSection.jssrc/Components/TodoSection.jssrc/Components/CompleteSection.jsid를 어떻게 적용해야 할까...?
구현하고자 하는 기능을 큰 틀에서 이해해 보려 노력했다. 각각의 넘버링 된 항목이 '지식의 서랍'이라고 생각하고, 서랍 안에 있는 내용들을 꺼내서 설명할 수 있는 상태를 최종 지향점으로 두고 공부하겠다. 내일도 화이팅!
투두리스트 코드새로운 형태의 투두리스트에 도전 중인데, index만으로는 기능을 구현하는 데 한계가 있어서 id를 활용하고자 했다. id를 통해 코드를 조정하는 순간 맛이 갔다. 그래도 차근차근 학습하는 과정에서 많은 것들이 익숙해지고 이해됐다. 회고최근에 TIL 작성
CRUD(데이터 처리의 기본) 는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 인 를 묶어서 일컫는 말이다. CRUD를 어떤 방식으로 구현하는지에 따라 todolist가 될 수도, blog가 될 수도 있다. 결국 학습의 본질은 CRUD로 대표되는, 데이터 처리 기능
오늘의 삽질큰 제목과 text를 입력하는 필드, 그리고 추가 버튼까지를 하나의 컴포넌트로 분리했다. 그다음은 각각 Todo 영역과 Completion 영역이다.App.js에서 component를 작성하고 따로 파일로 빼서 구성하는 방식으로 진행했다. 스타일링은 styl
머리글 최근에 개발에 관련해서 좋은 글을 읽었다. 해당 글에서는, 개발은 학습보다는 훈련에 가까우며, 이 효과적인 성장에 꽤나 유효하다는 내용이었다. 이후에는 만들고, 하면 된다고 제시하고 있다. > 남의 코드를 어디서 배껴올 것인가 에게 꽤나 디테일하게 물어봤
GoalReact로 투두리스트 만들기상태는 useState()를 통해 구현CSS는 파일 형태로 관리할 일을 추가하는 form 구현추가된 할 일이 나타나는 Todo 영역 구현(완료 버튼도 구현)완료 버튼을 누르면 완료된 Todo를 모아두는 Completion 영역 구현C
투두리스트 연습하기회고간단한 예제인데도 어렵다 ㅜㅜ 내일도 화이팅!
component 만들기페이지에 회색 배경 색상을 적용했다.페이지의 배경 색상을 설정하려면 body 태그에 css를 적용해주면 된다. styled-component에서 글로벌 스타일을 추가하고 싶다면 createGlobalStyle을 사용하고, 해당 함수를 통해 만들어
반복문(loop statement)의 핵심은 반복에 있다. 주어진 조건식의 평가 결과가 참인 경우 코드 블록을 실행하는데, 이후에 그 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 조건식이 거짓일 때까지 반복한다. 자바스크립트에는 세 가지 반복문
8장. 제어문(control flow statement) 코드는 일반적으로 , 즉 위에서 아래 방향으로 순차적으로 실행된다. 이러한 일반적인 코드의 실행 흐름을 인위적으로 제어하기 위해 을 사용하게 된다. 에 따라 등으로 활용된다. 코드의 실행 순서에 인위적으로
삼항 조건 연산자?삼항 조건 연산자(ternary operator)는 말 그대로, 조건에 의해 동작하는 연산자이며 연산의 대상, 즉 피연산자가 3개이다. 조건식의 평가 결과에 따라 반환할 값을 결정한다는 점이 핵심이다.첫 번째 피연산자인 'score>=60'이라는 조건
Router Redux에 심취한 나머지 Router 설정을 매우 매우 많이 까먹었다. 기억을 천천히 헤집으면서 복습하는 시간을 가졌다. 1. React Router 라이브러리 설치 을 terminal에 입력해준다. 2. BrowserRouter src/inde
7장. 연산자(Operator) 는 하나 이상의 을 대상으로 (산술, 할당, 비교, 논리, 타입, 지수 연산) 등을 수행해 을 만든다. 이때 연산의 대상이 바로 이다. 피연산자가 "값"이라는 을 한다면, 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 을 한
counter 예제를 통해 redux 이해하기redux가 미친 듯이 이해되지 않아서, 침착하게 전체 과정을 넘버링 했다. 도대체 습작으로 만든 react project가 몇 개인지 모르겠다. 하지만 반드시 이해해야 한다.yarn add redux, yarn add re
심벌(symbol)은 ES6에서 추가된 7번째 타입이다. 기본적으로, 변경 불가능한 원시 타입의 값이다.symbol 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다. 추가적으로,
Updating state based on the previous stateuseState를 활용하며 한 가지 의문점이 생겼다. 의문점은 다음과 같다.위 코드에서 setCount 함수를 세 번 연속으로 작성한 까닭은, button을 한 번 클릭할 때마다 숫자가 '3'씩
React-Redux는 상태관리 도구인 'Redux'를 React에서 쉽게 사용할 수 있도록 도와주는 라이브러리이다. React-Redux는 Redux store와 React component를 연결하여, Redux store의 데이터를 React 컴포넌트에서 사용할
What is template literal?Template Literal은 ES6부터 도입된 새로운 문자열 표기법이다. '멀티라인 문자열(multi-line string)', '표현식 삽입(expression interpolation)', '태그드 탬플릿(tagged
What is Redux?Redux는 스스로를 다음과 같이 소개한다. 'A predictable state container for JavaScript apps'. 개발을 할 때 '복잡성'이라는 개념은 우리를 위험에 빠뜨릴 수 있다. 애플리케이션을 이전보다 더욱 pre
6장. 데이터 타입(Data Type) 데이터 타입(data type)은 말 그대로 값의 종류를 말한다. JS의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 과 으로 분류할 수 있다. 6-1. 숫자
JSON ServerJSON Server는 로컬에서 빠르게 RESTful API를 모의(mock)할 수 있도록 도와주는 도구이다. 'JSON 파일을 데이터 소스로 사용해서 API 엔드포인트를 생성'하고, 클라이언트에서 해당 엔드포인트에 요청(Request)을 보내면 적
useEffect에 대한 개념 정리가 잘 되어있지 않다고 판단해서 오늘은 'useEffect' 한 놈만 팼다.useEffect!'useEffect'는, 함수형 컴포넌트에서 'side-effect'를 수행하기 위한 'Hook'이다. 그렇다면 'side-effect'라는
5. 표현식과 문(Expression&Statement) 5-1. 값(Value) > 값? '값'이라는 용어는 자바스크립트에서만 등장하는 용어는 아니다. 컴퓨터 공학 전반에서 사용되는 용어이기에 정의를 정확하게 학습해야 할 필요가 있다. '값'이란 무엇일까? 책
useSearchParams: URL 쿼리값을 읽어보자'Query String'이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 '미리 협의된 데이터'를 'parameter'를 통해 전달하는 것을 의미한다.지금 작성하고 있는 TIL의 주소를 확인했다
4장. 변수(Variable) 4-4. 변수 선언의 실행 시점과 변수 호이스팅 > 변수 선언의 실행 시점 > 변수 호이스팅 4-5. 값의 할당 4-6. 값의 재할당 4-7. 식별자 네이밍 규칙
변수란 무엇인가?변수(Variable)란 하나의 값을 '저장'하기 위해 확보한 '메모리 공간 자체' 또는 그 메모리 공간을 '식별하기 위해 붙인 이름'을 말한다.이미지 출처: https://codingclimber.tistory.com/28<10 + 20
라우터란?: 여러 웹페이지를 만드는 지름길 'Route'는 다음과 같이 '경로'라는 뜻을 갖고 있다. 여러 웹페이지를 만들고 경로에 따라서 이동할 수 있게 만들어 주는 것이 라우터의 역할이다. 우선 react router를 설치하는 명령어를 터미널에 입력해서 설치를
버튼 보여주기버튼을 여러 개 만들어줄 때, 굳이 배열을 'cities'라는 변수에 할당해서 'WeatherButton.js'에 props의 형태로 보냈다.만약 웹에서 보여줘야 할 도시 정보가 1000개가 넘는다면, 매번 복사 붙여넣기로 버튼을 추가하는 것 자체가 곤욕이
현재위치 기반 날씨 가져오기매번 느끼는 것이지만, 왜 어제는 안 됐는데 오늘은 잘 되는가...UI 만들기넘버링은 차후에 복습할 때 해보기로 하고, 일단은 강의의 흐름을 충실하게 따라가기로 결정했다!날씨 데이터 보여주기Flex 연습하기 with 개구리 옮기기https&#
Class Component: 옛날 방식이지만 중요한 것 React 공식문서에서는 더 이상 'Class Component'를 사용하지 말고 'Function Component'를 사용할 것을 권고하고 있지만, 그럼에도 'Class Component'를 학습해야 할 몇
5\. '3, 4'의 결과로 승패를 따지게 한다.강의에서는 'user' 기준으로의 승패 결정 로직만을 설명해 줬다. 'computer 기준의 로직 적용'과 '테두리 색 변경'은 다음에 해보겠다. 오늘은 머리가 잘 안 돌아간다.CSS: Flex 익혀보기'Flex'는 레이
머리글 무작정 만들어 보는 것도 물론 도움은 되겠지만, 로직을 이해하기 위한 최소한의 노력이 가미되어야 한다고 판단했다. 오늘은 개조식으로 글을 작성하면서 코드를 복습해 보겠다. > 가위바위보 게임 프로젝트 로직 이해 박스 2개 그리기(박스는 title, img,
유저가 선택한 아이템 보여주기User가 버튼을 클릭했을 때, 클릭한 값이 박스에 보이도록 하는 작업을 수행했다. 박스에 클릭한 값이 보인다는 것은 곧 UI의 변경을 의미한다. 따라서 React의 Hook 중 하나인 'useState'를 사용하였다.'play' 함수는 '
가위바위보: 박스 만들기가위바위보 게임을 위해 기본적인 UI를 만들었다. Item 선택하기'가위바위보'를 위한 기본적인 logic을 구현했다.처음에 onClick 이벤트로서 'play'라는 함수를 실행할 때 'play()'만 입력했더니, 버튼을 클릭하지 않았음에도 '선
State: 리액트가 리액트인 이유해당 강의에서는, '클릭을 할 때마다 숫자가 1씩 늘어나는' 버튼을 만들었다. 버튼을 만드는 과정을 통해 state를 이해해 봤다.버튼 태그를 통해 '클릭 버튼'을 만들었고, 숫자가 올라가는 것을 보여주기 위해 'counter'라는 변
머리글그저께 공부하면서 알게 된 유튜버님이 인프런에서 진행하고 있는 강의가 있어서 고민 없이 바로 결제했다. 인프런 강의와 기존에 듣고 있던 강의를 병행하며 React를 마구마구 파헤쳐 보겠다.React에서 자주 쓰이는 JS 문법 정리key와 key 값에 들어가는 변수
React에서 'DOM 요소'를 가져오는 법 with Ref 기존에 만들었던 버킷리스트 하단에 input box를 생성하여 작동하게 하는 것이 본 강의의 목적이었다. 관련해서 'Ref'라는 것을 사용해봤다. 'Ref'는 render 메서드에서 생성된 DOM 노드나
styled-components'styled-components' 설치는 이전에 했으니, 실제로 사용하는 방식을 익혔다.가장 먼저 styled를 import하는 작업을 선행했다. export 바로 상단에 'MyStyled'라는 변수를 선언하고 'styled' 키워드와
버킷리스트 컴포넌트 만들기 Quiz주어진 코드를 수정해서, 상단의 이미지를 현출하는 것이 Quiz의 목적이었다.구체적인 퀴즈의 내용은 다음과 같다.우선 '내 버킷리스트'라는 큰 제목이 필요한 관계로, App.js 폴더의 render 영역에 h1 태그로 감싼 '내 버킷리
머리글Component는 '함수형'과 'Class형'으로 구분된다. class형은 이제 잘 사용하지 않지만, 코드를 알아볼 수는 있어야 하기 때문에 두 종류 모두 살펴보았다.Component예전에 'React'가 '레고'라면, 'Component'는 '블록'이라고 비유
라이프 사이클이란?'Component'가 웹 페이지에 들어갔다가 사라지기까지의 한 과정을 '라이프 사이클(Life Cycle)'이라고 한다. Life Cycle을 이해하기 위해서는 '가상 돔(Virtual DOM)'에 관한 학습이 선행되어야 한다.'DOM(Documen
'map method' 함수로 구현각 데이터에 2가 곱해진 새로운 배열을 생성하는 것이 목적이었다.'forEach method' 함수로 구현배열 내부의 데이터를 모두 더한 값을 출력하는 것이 목적이었다.'filter method' 함수로 구현20보다 큰 값만을 필터링하
첫 React 프로젝트 만들기공부 목적으로의 TIL을 처음 작성했을 때 react 프로젝트를 만든 경험이 있으나, 당연히 전혀 기억나지 않는다. 반복만이 살길이다. 다시 해봤다.강의에서는 nvm과 node.js 설치를 진행했는데, 나는 이미 설치가 완료된 상태였다. 버
요즘에는 아침에 고통없이 눈을 뜨는게 참 감사하다.'강직성 척추염'은 인구의 0.1%에게 발병하는 희귀성, 난치성 질환이다. HLA-B27 유전자를 갖고 있는지가 강직성 척추염의 발병과 상관관계에 있다고 한다. 아무튼 그 대상자가 본인이다.죽을 병은 아니고, 평생 약을
머리글React 강의를 이어서 수강하려고 했으나, 어제까지도 map을 function으로 구현하지 못한 것이 계속 마음에 남아서 끝장을 봤다. 성공하고 보니 별거 아니었지만 매우매우매우매우 뿌듯하다. 내친김에 forEach도 낱낱이 파헤쳐 봤다. Start!map, '
머리글 오늘은 'React 프로젝트를 위한 자바스크립트 기초'의 마지막 강의를 수강했다. array의 대표적인 method 네 가지를 살펴보았다. 강의를 통해 이미 아는 내용은 복습했고, 몰랐던 내용은 새롭게 익혀보는 시간을 가졌다. > 자바스크립트 기초(3) 1
머리글 지난주 목요일에 듣다가 지쳐서 잠시 미뤄두었던 자바스크립트 기초 강의를 이어서 수강했다. class의 상속부터 정리하겠다. > 자바스크립트 기초(2) 1) Class의 상속 class를 '상속'한다는 것은, 이미 만들어 둔 특정 class를 통해 자식 c
Array.prototype.map() 직접 구현해보기이전에 학습했던 'map'은, 모든 배열 내부의 items에 대하여 function을 실행하는 method였다. 'map'을 포함한 여러가지 'method'는 결국 누군가가 조금 더 편리하게 사용하기 위해서 구현한
머리글 React 프로젝트를 위한 최소한의 'JavaScript 문법'을 학습했다. 이전에 JS를 살짝 맛보기는 했다. 이미 아는 내용은 복습한다는, 그리고 모르는 내용은 더 알아가겠다는 마인드로 접근했다. 오늘은 크롬에서 시크릿 모드를 켠 후, 해당 창에서 콘솔 창
머리글오늘은, 어제 공부한 'JavaScript로 DOM을 조작하는 방법'을 TIL을 통해 복습했다. 강의를 더 들으려고 했지만, 복습하는 중에 이해가 되지 않는 부분이 있어서 고민의 시간을 가졌다.자바스크립트 기초(1)1) documnet로 DOM에 접근하기1-a)
머리글오늘은 'TODO LIST 만들기'라는 첫 'React' 프로젝트를 수행하기 위해 필요한 최소한의 내용을 공부했다. 어제 만들어놓은 기본적인 HTML setting을 CSS로 꾸며보았고, 추가적으로 JavaScript로 'DOM'을 조작해봤다.CSS(1) Sele
머리글 프론트엔드(FE)의 꽃이라 할 수 있는 'React'에 관한 '실무 기초' 강의를 본격적으로 수강하기에 앞서, 서버와 클라이언트라는 큰 줄기를 통해 몇 가지 기초 지식을 살펴보았다. > 서버와 클라이언트 인터넷이 동작하기 위해서는 컴퓨터가 최소 2대 있어야
호이스팅(Hoisting) 호이스팅(Hoisting)이란 변수나 함수가 어디에서 선언이 되든지 간에 최상단에 위치하게 되어(=최상단으로 끌어 올려져) 동일한 스코프에서는 어디서든 '참조'할 수 있게 되는 현상을 말한다. 역시 한국말이 세상에서 가장 어렵다. 예제 코드
Array.prototype.reduce()오늘도 역시 array의 method에 관해 공부했다. 'reduce'라는 method인데, 본래 뜻에 맞게 "배열에 있는 데이터의 값을 감소시키거나 제거하는 method가 아닐까?" 하는 예상을 했으나 보기 좋게 빗나갔다.
Array.prototype.filter()오늘 살펴본 'filter' 역시, array 내부에 있는 데이터를 조작하기 위한 'method'의 일종이다. filter는 여과 장치라는 뜻을 갖고 있다. "array의 데이터를, 특정한 조건을 통해 '여과'하는 역할을 하지
Array.method 개론배열(Array)을 놓고 '.'을 입력하면 다양한 메소드(Method)가 제시된다. 'method'는 기본적으로 function과 유사한 의미로 사용된다. 입력값(매개변수 또는 인자)을 받고 결과값(return값)을 도출해낸다. 여기에서 잠시
머리글함수에 대해서는 이전에도 공부한 바 있지만, 학습한 내용의 총량이 함수를 이해하기에 턱 없이 부족하기도 하고, 너무 중요한 개념이기 때문에 구글링을 통해 추가적으로 살펴보았다.1\. 함수함수에 대한 정의부터 다시 살펴보고 진행하기로 한다. 일반적으로 함수란 자신의
머리글조건문은 이전에 살펴봤듯이, 조건을 충족할 때에만 특정 구문을 실행하기를 원할 때 사용한다. '조건 (삼항) 연산자', 'switch문' 등은 표현상의 차이로 인해 출현하게 된 개념으로서, 궁극적으로는 조건문이라고 할 수 있다. 조건문의 다양한 형태를 공부해봤다.
1\. 배열(1)배열이란 JS에서 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 할 수 있다. 배열을 선언하는 방식에는 다음과 같이 두 가지가 있다.방법1의 경우 클래스를 활용하여 객체를 만드는 것과 동일한 형태를 띄고 있다.
1\. 클래스와 객체(1)객체(Object)란 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것'을 의미한다. 객체를 생성하기 위해서는 클래스(Class)를 선언해야 한다.'객체'는 이미지 좌측 하단에 위치하
1\. 반복문과 조건문 활용반복문과 조건문은 코딩에 있어 핵심 중의 핵심이다. 앞서 학습한 반복문, 조건문을 활용하여 다음의 예제를 실습해봤다.예제) 반복문과 조건문을 같이 활용하여 1부터 10까지의 숫자중 3으로 나누었을 때 나머지가 0인 숫자를 구해서 출력해보자.퀴
1\. 연산자(2)비교 연산자말 그대로 숫자값을 비교하는 연산자이다. '비교 연산자'를 통해 궁극적으로 얻게 되는 값이 바로 'Boolean'이다.논리 연산자'or(||)', 'and(&&)', 'not(!)'과 같은 연산자를 '논리 연산자'라고 한다. (||)는 연산
1\. 데이터 타입'변수 part'에서 값(데이터)을 변수에 할당하고 출력하는 것을 해봤는데, JS에는 여러 종류의 데이터 타입이 존재한다. 그 중에서도 기본 또는 원시형(primitive) 타입이라고 불리는 'number', 'string', 'boolean', 'n
1. Hello World 코딩을 처음 시작할 때 'Hello World'라는 문구를 출력해보는 것은 코딩세계에 존재하는 일종의 관습 같은 것이다. 관습에 충실해보자. 처음으로 'javascript'라는 이름의 새로운 폴더를 생성했다.
1\. 컴포넌트 꾸미기앞서 배운 컴포넌트를 꾸미기 위해서, 컴포넌트에 'CSS'를 적용하는 것에 대해서 학습했다. 아래 이미지를 구현하는 것이 학습목표였다.우선 바탕의 Style과 네모의 Style 두 가지를 먼저 만들어줬다. 바탕에는 padding:"100px"이라는
1\. State Part 1'State'란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 'State'가 일반적으로 '상태'라는 뜻으로 사용되는 단어라는 점으로 미루어 볼 때, 'State'는 컴포넌트 내부의 동적 데이터를 지칭하는 개념이라는 것을 짐작할 수 있다.
1\. Props Part 1'Component'라는 요소를 잘 활용하기 위해서는 'Props'의 개념에 대한 이해가 요구된다. 'Props'는 부모 컴포넌트로부터 받아온 데이터를 의미한다.Mother 컴포넌트에는 '홍부인'이라는 이름을 가진 데이터가 있다. Child
1\. Component Part 1영어단어 'Component'는 한국말로 요소 내지는 부품을 의미한다. 레고로 만들어진 장난감에서 레고를 의미한다고 생각하면 된다. React의 관점에서 이해하자면, 'Component'는 화면을 구성하는 하나의 단위이며 이는 곧 '
1\. React란, 무엇일까?라이브러리는 익히 도서관이라는 의미를 지니고 있다. 도서관이 정보집합의 공간이라고 해석한다면, 프로그래밍에 있어서 라이브러리란 무엇일까?바로 프로그래밍에 필요한 정보집합의 공간일 것이다. React는 기본적으로 Javascrip 라이브러리
파울로 코엘료 작가의 <연금술사>는 이맘때쯤 매년 한 번씩 다시 읽는 책이다. 읽을 때마다 새로운 느낌을 주는 신비로운 책이다. 전체적인 줄거리를 짧게 요약하자면 주인공 산티아고는 이집트 피라미드에 관한 꿈을 연속해서 꾸게 된다. 꿈에서 나오는 보물을 찾기 위해