프로그래머스 데브코스
1.TIL 24.10.14
브라우저는 HTML만 해석할 수 있습니다.HTML 문서 구조:<!DOCTYPE html> (문서 유형 정의, DTD)로 시작합니다.메타데이터를 포함합니다 (HTML 문서의 정보).meta 태그: 웹페이지 정보를 제공합니다.주요 속성: charset, name, c
2.TIL 24.10.15
태그: <ul>, <li>특징: 글머리 기호로 항목을 나열type 속성: 기본값은 disc이며, circle, square 등으로 변경 가능예시:태그: <ol>, <li>특징: 숫자, 알파벳, 로마 숫자 등으로 순서를 표시type 속성:1: 숫자
3.TIL 24.10.16
음원 삽입에 사용필수 속성src: 추가할 파일 경로 지정추가 속성controls: 재생바 생성. 웹브라우저마다 다른 UI로 표시될 수 있음css로 디자인 가능autoplay: 자동재생. 현재는 사용자 권리 보호를 위해 지원 안 함muted: 음소거자동재생 방법: mut
4.TIL 24.10.17
웹브라우저마다 기본 스타일 차이 존재 (예: 사파리, 크롬)실무에서 브라우저 간 스타일 통일 작업 필요에릭마이어의 reset.css 활용프로젝트 초기에만 적용, 이후 수정 지양코드중복 속성 시 하나만 선택 적용우선순위 순서:전체 선택자 (0)태그 선택자, 가상 요소 선
5.TIL 24.10.18
html 요소들이 기본적인 흐름에서 벗어나 좌표값에 의해 배치하고자 할 때 사용relative - 요소를 상대적으로 배치absolute - 요소를 절대적으로 배치동일한 absolute 속성을 가진 요소들 중 나중에 작성된 태그가 위로 올라감z-index를 사용하면 요소
6.TIL 24.10.21
자바스크립트 실행 방법변수와 상수데이터 타입 - 자료형
7.TIL 24.10.22
연산자조건문개념 설명만 들을 때는 이해하고 있었다고 생각했는데 막상 연습 문제를 풀어보면 막히는 부분이 많다 😫 많이 풀어 보고 다른 사람들 풀이도 확인해 봐야겠다
8.TIL 24.10.23
반복문피보나치 수열의 특정 항까지 계산하는 예제입니다.문제: 주어진 정수 N에 대해, 피보나치 수열의 처음 N항을 출력하는 프로그램을 작성하시오.입력: N (정수, 1 이상)출력: 피보나치 수열의 처음 N항을 배열로 출력.조건: 1항은 0, 2항은 1 이라고 가정합니다
9.TIL 24.10.24
함수콤마 연산자는 마지막 표현식의 결과를 반환자바스크립트는 런타임 언어이기 때문에 실행하기 전까지 결과를 알 수 없다 → 동적 언어타입스크립트는 정적 기반 언어이기 때문에 실행 전에 에러를 알 수 있다 → 정적 언어타입 안정성: 코드의 예측 가능성 향상 및 런타임 오류
10.TIL 24.10.25
호이스팅과 컨텍스트reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환함 (누산메서드, 누적메서드)예시코드replace(): 문자열에서 특정 패턴을 다른 문자열로 대체함예시코드includes(): 배열이나 문자열
11.TIL 24.10.28
클로저클로저에 대해 배웠다 동작 원리는 언제 들어도 헷갈리고 복잡하다 클로저는 내부 함수가 외부 함수의 자유 변수에 접근할 수 있는 구조라는 것과 이 구조를 활용하면 외부 함수의 변수에 대한 직접적인 조작을 차단하고, 캡슐화를 구현할 수 있음을 알게 되었다. 강사님께서
12.TIL 24.10.29
객체this메서드접근 속성 설명자클로저에 비하면 객체는 괜찮을 줄 알았는데 아니었다... 자바스크립트는 배울수록 끝이 없는 것 같다 들었던 걸 또 들어도 새롭다 계속 복습해서 내 지식으로 만들어야지 그래도 this에 대해 좀 더 자세히 알게 됐다 마냥 상위를 말하는 게
13.TIL 24.10.30
즉시 실행 함수(IIFE)생성자함수프로토타입고급 생성자 함수 패턴래퍼 객체하나를 알기 위해 배워야 하는 개념들이 많은 것 같다. 하나에서 파생되는 개념이 매우 많은 것도 있고... 오늘 수업을 어찌저찌 듣긴 했는데 갑자기 방대한(내기준) 양이 들어오면 머릿속에서 조합이
14.TIL 24.10.31
class 기본 개념일급객체생성자함수 클래스 상속클래스 정적 메서드클래스 접근제어자 get, set어제 배운 생성자함수와 비교하며 들을 때까진 열심히 이해해 봤는데... 정적메서드, 접근제어자, 프라이빗필드# 부분 들으면서 다시 헷갈리기 시작했다. 오늘로 가장 어려운
15.TIL 24.11.01
자바스크립트 역사정규식표준 내장 객체문자열 내장 객체배열 내장 객체Set 객체이번주에 배운 실행컨텍스트부터 생성자함수 클래스까지 아직 소화가 덜 됐다 😮💨 팀원 분들도 어려웠던 부분이라고 해 줘서 조금 안심했다그래도 오늘 내장 객체를 배워서 그동안 지식의 한계로
16.TIL 24.11.04
Math 객체Date 객체내장 객체를 단순히 암기하는 게 아니라 생성자 함수, 클래스, 일급 객체 같은 개념을 선행하고 공부하니 이전에는 보이지 않던 것들이 더 잘 보이기 시작했다. 예를 들어 Math 객체는 정적 메서드만 포함되어 있어서 인스턴스 없이도 Math로 바
17.TIL 24.11.05
동기 비동기, 콜백함수Promisefatch초기 준비 단계GitHub 회원가입: GitHub 공식 웹사이트에서 계정 생성Git 설치: 운영 체제에 맞는 Git 클라이언트 다운로드 및 설치Git 기본 설정: 사용자 이름과 이메일 주소 설정새 폴더 생성Git 저장소 초기화
18.TIL 24.11.06
fetch apiasync await// 주석 이용해서 아래처럼 깔끔하게 줄바꿈 할 수 있다 tip: 매개변수를 받아서 그대로 전달하는 경우, 해당 함수를 직접 전달할 수 있다(아래 코드처럼 생략 가능)console.time()과 console.timeEnd()를 사
19.TIL 24.11.07
BOMDOM이벤트프론트엔드의 꽃? DOM조작을 배웠다. 계속 문법만 배우다가 화면 보면서 해서 그런지 재밌었다(잘하진 못함)최근 일찍 일어나기를 포기했다 6시에 일어나서 자다깨다 반복했는데 그냥 푹 자고 7시에 일어났더니 정신이 맑아지는 것 같다 👀
20.TIL 24.11.08
SPANodeJS(포스팅예정)폼에서 이벤트 리스너를 폼의 제출(submit) 이벤트에 연결하는 것이 좋음. 이렇게 하면 사용자가 엔터 키를 눌러도 폼을 제출할 수 있어 편리함.강사님 가취가욥!(다급) 이라고 속으로만 999번 외친 하루였다.자바스크립트로 SPA 구현하는
21.TIL 24.11.09
📍 문제 캘린더 구현 설명: 현재 날짜를 기반으로 간단한 캘린더를 표시합니다. 힌트: innerHTML, 테이블 태그를 문자열로 조합해서 만들면됨 기본 제공 코드: 1 (2).gif.gif.gif.gif) 🥔 내 코드 1차 실패 ❌ 풀이 현재 날짜
22.TIL 24.11.10
버튼을 클릭하면 1 ~ 45의 랜덤한 숫자가 6개 선택이 되도록 해주세요.✨ 완성된 화면기본 html, css 코드 제공 받음1차 시도 ❌문제점: 숫자 중복 제거 로직이 빠져있음2차 시도 ✅DOM 요소 선택: 'querySelectorAll'을 사용하여 로또 번호를 표
23.TIL 24.11.11
NodeJS프로젝트 기간: 11/11 17:00 ~ 11/14 18:00프로젝트 산출물 제출 마감 : 11/15 18:00바닐라js로 구현할 것기본 레이아웃 노션과 동일, 스타일 커스텀 가능History API를 이용 SPA 구현완성 소스 프로그래머스 깃허브 제출기획서
24.TIL 24.11.12
강사: 김동영 강사님일시: 2024년 11월 12일 14:00 - 18:00(4시간)Git: 버전 관리 시스템(VCS)으로, 파일의 변경 이력 기록 및 필요 시 되돌리기 가능한 소프트웨어변경 사항 기록: 누가, 언제, 무엇을 수정했는지 기록이유 명시: 커밋 메시지를 통
25.TIL 24.11.13
📚 TIL 프로젝트 진행 시작 나는 노션 클로닝 프로젝트에서 에디터 부분을 맡았다. 팀원분이 API 모듈을 만들어 주셔서 그걸 이용해 봤는데 코드가 훨씬 깔끔해졌다! 모듈이 요런 거구나 배웠음 기능 구현 삭제 기능 - 에디터 부분에서 휴지통을 눌렀을 때 삭제됨!
26.TIL 24.11.14
프로젝트 마무리, 발표합치는 과정에서 상단 경로를 표시해 주는 함수가 제대로 작동하지 않는 문제가 있었다.(해결해 주신 팀원분께 감사합니다 🙇♀️)원인 SPA에서 서버에 ID 값을 전달할 때, 문자열 형식("12345")으로 보내어 서버에 있는 숫자 형식(12345
27.TIL 24.11.15
자바스크립트 문법 정리타입스크립트 시작하기타입스크립트 기본 문법오늘 타입스크립트 배웠다. 기존에 진행했던 프로젝트에서 SPA와 API 간 타입 불일치로 인해 발생한 오류를 해결하는 과정에서 자바스크립트의 유연함이 단점이 될 수도 있다고 느끼게 되었다. 예를 들어, AP
28.TIL 24.11.18
타입스크립트 함수 타입 지정타입 오퍼레이터타입스크립트 들을 땐 내가 알고 있는 건가 싶은데 연습문제 풀어보면 감이 생기는 것 같다. 코드도 눈에 익도록 많이 써 봐야지골골대다 하루가 끝나버렸다 일요일 12시간 근무 여파가 꽤 큼... 새로운 팀과 다시 시작하게 됐는데
29.TIL 24.11.19
타입스크립트 함수 타입 지정타입 오퍼레이터전에 타입스크립트 제대로 알지 못한 채로 리액트 찍먹을 도전했던 적이 있는데 너무 어렵게 느껴졌었다. 하 지 만 타입스크립트가 어려운 게 아니라 내가 너무 건너뛴 거였음. k-취준생은 급하단말이야... 그래도 이번엔 단계별로 잘
30.TIL 24.11.20
타입별칭 활용인터페이스어제까진 타입스크립트가 어려운 게 아니라고 했는데 정정하겠습니다. 어려웠어요. 사실 수업 도중에는 중간중간 놓쳤는데... 다시 정리하면서 조금씩 이해하는 중. 나는 지식을 소화시키는 시간이 좀 필요한 것 같다.내일 시험 파이팅
31.TIL 24.11.21
타입단언 + 널 병합 연산자 + 옵셔널 체이닝이넘(enum)제네릭클래스유틸리티타입하루에 너무 많은 정보가 들어와서 좀 어지러움😵💫 타입스크립트 클래스 배우는데 갑자기 초면인 느낌이라 자바스크립트 클래스 상속 다시 보고 왔더니 이해가 좀 됐다. 반복학습의 중요성..
32.TIL 24.11.22
리액트 시작하기NPM, NPX, YARNSWC, Vite, Babel, Webpack(별도 포스팅 예정)중국인 개발자이자 전 구글 개발자인 에반 유가 만든 프레임워크개인 사이드 프로젝트로 시작한 후 커뮤니티에서 큰 호응을 얻음후발 기술의 특성상 선행 기술의 단점을 보완
33.TIL 24.11.25
리액트 가상 돔리액트 클래스형 컴포넌트, 함수형 컴포넌트컴포넌트 CSS 스타일링(별도 포스팅 예정)나름 잘 따라가다가 리액트에서 css 스타일 지정 방법 부분에서 조금 헷갈렸다. 인라인, 글로벌, css모듈... 일단 객체로 스타일을 넣는 방식부터 익숙하지 않았고 조건
34.TIL 24.11.26
리액트 CSS 스타일링웹폰트 적용(Google Fonts, Noonnu, Custom Fonts)프로젝트 시작 시 매번 처음부터 환경 설정이 필요한 경우 시간 소요가 큼.스타터팩 활용 시 빠르고 효율적인 프로젝트 시작 가능.스타터팩이란? 프로젝트 시작을 위한 초기 설정
35.TIL 24.11.27
리액트 Props, Children컴포넌트 이벤트npm은 패키지 설치 시 해당 패키지와 의존성 패키지를 함께 설치함의존성 패키지는 설치한 패키지의 정상 작동에 필요한 파일들로 구성됨새로운 버전 출시 시 의존성 간의 호환성 문제로 인한 에러 발생 가능최근 Vite 6.0
36.TIL 24.11.28
프롭스 드릴링리액트 조건부 렌더링리액트 반복 렌더링재사용 가능한 컴포넌트Tailwind Css오늘 실습이 많았다 확실히 개념만 배우는 것보다 내 눈에 UI가 보이는 게 재미있는 것 같다. 피그마 디자인을 컴포넌트로 만들어 보고 props를 구조분해할당과 나머지매개변수를
37.TIL 24.11.29
리액트 이미지 렌더링useStateuseRef(별도 포스팅 예정)주말 과제 한다고 포스팅 할 글 정리를 못해서 주말 이용해서 해 봐야겠다... 요즘 매일 새로운 걸 궤짝으로 배우는데 소화할 수 있는 양은 소주잔 정도라(술 안 좋아함) 수업 없는 주말이 소중해졌다. 폼
38.TIL 24.12.02
useReducer (별도 포스팅 예정) 코테 공부 - 스택 useReducer 예제 복습 당일 과제 TODO 만들기(등록, 추가, 삭제)TODO 과제 회고id 값을 설정할 때 초기에는 배열의 마지막 인덱스를 기준으로 id를 설정했는데, 배열 변경이 일어날 경우 예상치
39.TIL 24.12.03
useEffect함수형 컴포넌트의 생명주기를 관리하는 React Hook컴포넌트의 마운트, 업데이트, 언마운트 시점에 특정 작업 수행실습: Todo 리스트에서 로컬스토리지를 활용한 데이터 영속성 구현메모이제이션불필요한 리렌더링을 방지React.memo(): 컴포넌트 자
40.TIL 24.12.04
전역 상태 관리 Context API, Redux, zustand전역 상태 관리를 활용한 카운터 앱 구현전역 상태로 카운터 값 관리하기Context API: 메모리 최적화를 위한 상태와 함수 분리zustand(디벨롭): 로그아웃시 reset 함수 호출Context 중첩
41.TIL 24.12.05
✨ 학습 내용JSON Server를 활용한 REST API 구현JSON Server 라이브러리 설치 및 설정db.json 파일 생성하여 더미 데이터 구성GET, POST, PUT, DELETE 메서드 테스트Fetch API를 사용한 데이터 통신fetch 함수를 통한 H
42.TIL 24.12.06
프로젝트를 본격적으로 시작하는 첫날플로우차트디자인디자인리뷰퍼블리싱 역할분배수정할 부분은 많지만 일단 이렇게 하는 것만 종일 걸렸다아직 완전하진 않지만 조금씩 의견이 좁혀지고 있는 것 같음! 성장했다장하다이번 프로젝트로 팀원들 보두 각자 부족한 부분을 채울 수 있었으면
43.TIL 24.12.07 - 24.12.15
24.12.07 📚 오늘 한 일 프로젝트 디자인작업 수정 프로젝트 맡은 부분 퍼블리싱 💬 마치며 고려해야 할 부분이 추가적으로 계속 생긴다. 그래도 프로젝트 기간이 짧다보니 애자일하게 가는 게 맞을 것 같다. 24.12.08 📚 오늘 한 일 프로젝트 디자인
44.TIL 24.12.16 - 24.12.22
24.12.16 📚 오늘 한 일 팔로우 기능 추가 메인페이지 디자인 및 퍼블리싱 💬 마치며 스와이퍼 커스텀 만만치 않았다... 리액트에선 css 모듈 불러오는 오류가 계속 나서 link로 넣었다. 24.12.17 📚 오늘 한 일 메인 페이지 bmi 계산기 추가