전체 글303 [인생 그래프] 개인 프로젝트 시작하기 https://github.com/hongggyelim/lifeGraph GitHub - hongggyelim/lifeGraph: 인생 그래프를 그려주는 웹어플리케이션인생 그래프를 그려주는 웹어플리케이션. Contribute to hongggyelim/lifeGraph development by creating an account on GitHub.github.com 처음 생각한 것은 테이블 입력을 받아서 인생 그래프를 그려주는 것이었다.Datetitilescoreemoji2020년입사60😎2022년코로나-30😂2023년퇴사90🙋♀️이런식으로 유저가 데이터를 입력하면 그걸 그래프로 그려주는 방식그리고 그 그래프에 유형을 지정해주고 이미지로 저장해서 공유할 수 있도록 하면 재밌겠다는 생각이 들었다... 2025. 2. 10. 2025년 6주차 회고 (W1 ~ W6) '24년 7월에 시작한 부트캠프를 12월 30일에 수료하고, 6주가 지났다.한창 부트캠프에서 새로운 걸 배우는 동안은 커리큘럼과 팀미팅과 프로젝트가 있으니 그걸 소화하기 위한 나름의 루틴이 있었지만, 이제 온전히 혼자 학습해야 하는 시간이다. 그러니 더욱 내 시간을 어떻게 보냈고, 무엇을 했는지 잘 기록해야겠다는 생각이 든다.W1✅ 부트캠프 종강과, 연말연시의 들뜬 분위기에.. 푹 쉬다! ✅ 포트폴리오 작성을 시작하다호기롭게 도메인을 구입하고 배포했다. 간단히 1장짜리 이력서를 만들었다가 좀 더 포트폴리오스럽게 수정 ~ing W2✅ "미라클 코딩" 스터디를 시작하다 부트캠프에서 알게된 이들과 모여서 아침 스터디를 시작했다우리의 목적은 : 해이해지지 않는 것 정해진 시간에 해야하는 팀미팅도 없고, 진행.. 2025. 2. 7. 이벤트 핸들러를 할당하는 시점 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등저자고경희출판이지스퍼블리싱출판일2019.03.26여기에서 작성했던 프로그램을 다시 한번 작성해 보았다. X 버튼을 눌러도 아이템이 삭제되지 않는 문제가 발생했다. 전체 코드를 보면 크게 세 가지 동작을 하.. 2025. 2. 7. [Do it 자바스크립트 기본] Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등저자고경희출판이지스퍼블리싱출판일2019.03.26 React, Next.js를 거쳐 프로그램 만드는 게 익숙해지긴 했지만 자바스크립트가 많이 부족하다는 생각이 늘 있었다. 그래서 이 책으로 공부를 시작했고.. 2025. 2. 7. [리팩토링] LinkHere : 모달 UX를 개선해보자 LinkHere 서비스에서 모달에서 사용자 경험을 개선하기 위해 추가한 기능들은 아래 4가지 이다. (기능이라고 하기에도 소소한..ㅎ) 1. 링크 추가 시 폴더 default 선택 2. 링크 추가 시 폴더가 없다면 폴더 생성 모달을 띄우기3. 모달에 값 입력 시 input에 포커스 4. 모달에 값 입력 후 '엔터' 눌렀을때도 제출하기 1. 링크 추가 시 폴더 default 선택 2. 링크 추가 시 폴더가 없다면 폴더 생성 모달을 띄우기 기존 서비스에서 유저가 회원가입을 하고 서비스를 이용하려고 할때 마주치는 화면은 바로 이것이다.당연히 추가하기 버튼을 누르게되고, 그 다음에는 링크가 추가되는 것이 유저가 기대하는 자연스러운 동작이다.그러나 링크를 추가할 폴더를 선택해야하기 때문에 에러 토스트를 만나게 .. 2025. 2. 4. [리팩토링] LinkHere : 링크 저장 서비스 linkbrary 프로젝트를 리팩토링했다.서비스 이름 및 색상 테마 변경Linkbrary → Link Here LinkHere저장한 링크 어디있지? Link, Here!linkhere.vercel.app* og image가 티스토리에서 잘 안나오는 문제가 있었는데 권장 사이즈인 1200x630px 로 하니 잘 나온다. 💢 랜딩페이지, 로그인 페이지를 제거하고 메인 페이지와 사이드바로 변경주요 기능인 링크를 추가하고, 조회하는 것에 집중하고자 페이지를 개편했다.또한 게스트 계정을 추가하여 회원가입 없이 프로젝트를 경험해볼 수 있도록 했다. 내부적으로는, 주요 기능인 링크와 폴더 불러오는 로직을 SSR 에서 CSR 로 수정했다.getServerSideProps → React query (tanstack.. 2025. 2. 4. DOM 요소 자체를 변수에 저장하자 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등저자고경희출판이지스퍼블리싱출판일2019.03.26- doit 자바스크립트 기본 편 실습 아래와 같은 참가 신청 명단을 작성하는 프로그램이다.input에 값을 입력하면 아래 div에 추가되도록 한다.이때 입.. 2025. 2. 4. 함수에서 this 바인딩 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편무엇이든 처음 공부할 때는 기본기부터 빠르게 정복해야 한다. 그래야 그 분야에 재미를 느끼며 빠르게 적응할 수 있다. 《Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편》은 자바스크립트를 통해 웹 프로그래밍에 입문하는 사람들이 가장 먼저 배워야 할 기본 문법을 웹 분야 베스트셀러 저자인 고경희 선생이 모아 엮은 책이다. 137개 예제를 통해 직접 프로그램을 만들면서 기본 문법을 흥미롭게 배운 뒤 ‘1분 복습’, ‘마무리 실습’, ‘연습 문제’ 등 저자고경희출판이지스퍼블리싱출판일2019.03.26요즘 Do it 시리즈의 자바스크립트 기본편을 공부하고 있다! 대략 이런 프로그램이다. x 버튼을 눌렀을때 해당 아이템을 삭제하는 함수를 작성해보는 중 말.. 2025. 2. 1. MVC 패턴과 Flux 패턴 이해하기 Zustand와 Jotai은 같은 개발자에 의해 만들어진 상태관리 라이브러리인데 왜 다른 방식을 채택했을까? 라는 궁금증이 생겨 이에 대해 알아보기 위한 배경 지식을 먼저 정리하고자 한다. 도서관리 어플리케이션을 예시로 각 패턴을 이해해보려고 한다 리덕스가 등장하기 이전 프론트엔드에서 데이터의 흐름을 관리하는 방식은 MVC 패턴이었다. [MVC 패턴]🎁Model은 데이터와 관련된 모든 것을 관리한다. (상태 저장 및 관리) 📊View는 사용자에게 데이터를 보여주는 역할을 한다 🕹️Controller는 모델과 뷰 사이의 중재자 역할사용자 입력을 받아 모델을 업데이트하고 & 모델의 변경 사항을 뷰에 반영한다. 데이터 흐름1. 사용자가 웹 페이지 (뷰)에서 새 책 추가 버튼을 클릭하고 책 정보를 입력2.. 2025. 1. 24. 이전 1 ··· 6 7 8 9 10 11 12 ··· 34 다음
