IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

IT 학습 45

프로그래머스 데브코스 3기 중간 후기겸 새해 후기

새해 근황 및 잡담 원래 매주 WIL을 작성했지만 과정상의 이유로 거의 3주 만에 글을 쓴다 😅 기간 중 거의 적을 내용이 과제 혹은 공부한 강의 중심이었는데 과제가 한동안 쉬게 되고 강의, 궁금한 강의, 강의 이런 식으로 진행되게 되어 쓸 내용이 적어져서 한동안 적지 않았다 😂 일단 새해 계획으로는 1차 프로젝트 -> 일본 여행 -> 2차 프로젝트까지는 딱히 추가적인 계획이나 토이 프로젝트를 기획하지 않고 있다. 작성하게 될 글도 일단 WIL은 프로그래머스가 끝난 이후로 미루고 1차 프로젝트 후기 , 2차 프로젝트 후기 이렇게 2개의 글을 다듬어서 올릴 예정이다. 프로그래머스 중간 후기 (22/10/14 ~ 23/1/4 2달 3주) 과정 자체는 역시 KDT 중에서는 가장 훌룡하다고 생각된다. 장점 거의..

[1차 - 개인] Vanilla JS Notion 클론 만들기

📌 과제 설명 배포 페이지 최종 완성된 디렉토리 루트 최종 플로우 차트 작동 Sample 첫 이미지 메인 루트에서 주소이동 클릭한 게시글 굵은 글씨 전환 마우스 호버시 굵은 태두리 + 추가 삭제 버튼 왼쪽 화살표 클릭 시 하위 문서 추가 간단한 에디터 (굵기 기울기 언더바등) Debounce를 통해 api 갱신은 1초에 한번 두번째 이미지 유저 이름 클릭 시 이름변경 , 주소변경 , 자동 페이지 변경 새 페이지 클릭 시 자동으로 게시글 추가 + 주소변경 세번째 이미지 통신이 정상적으로 되면 작성중인 데이터 (localStorage에 저장중)이 삭제 비정상적인 접속 종료가 되면 다음에 해당 문서 조회 시 갱신할꺼냐고 물어봄 History Api를 통해 뒤로가기 등이 가능 👩‍💻 요구 사항과 구현 내용 Co..

프론트엔드 개발을 위한 자바스크립트 - 4주차 (수료후기)

https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 서두 4주 차 미션은 1~3주 차의 총집합이었다. 생각해야 될 것도 많았고 추가해야 될 기능도 많았다. 🙄 상세 작업목록은 더보기를 누르면 나온다. 더보기 ## 작업 목록 (4주 차) ### 필수 구현 사항 - [x] 각각의 API 연결하기 - [x] 각 API의 비동기 통신을 컴포넌트로 연결하여 구..

프론트엔드 개발을 위한 자바스크립트 - 3주차

https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 서두 3주 차 미션부터 난이도가 조금 올라가서 이제야 3주 차 미션 + 강의를 마치고 후기를 적을 수 있게 됬다. 😂 구현 상세사항은 더보기를 눌러주세요 더보기 ## 필수 구현사항 - [x] 이디어츠 API를 통해 이디어츠 공연 검색기 만들기 ## 보너스 구현 사항 - [x] `fetch` 해오는 코..

프론트엔드 개발을 위한 자바스크립트 - 2주차

https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 서두 2주 차가 시작됐다! 사실은 정확하게 말해서 어제 3주 차 수업을 수강했다 🤔 과제 빨리빨리 하고 요번에도 코드리뷰 해야지 하고 마음을 먹었지만 귀신같은 면접 준비로 월요일까진 오래간만에 프로젝트 정리와 면접 준비로 바빠서 부랴부랴 2주 차 미션을 화 ~ 수요일에 올인해서 겨우 시간에 맞춰서 끝..

[Bootstrap5] 부트스트랩이란? 장단점 비교

부트스트랩 세계에서 가장 인기있는 프론트엔드 오픈 소스 툴킷이며 Sass 변수와 믹스인, 반응형 그리드 시스템, 광범위한 사전 제작된 컴포넌트, 그리고 강력한 JavaScript 플러그인이 있는 Bootstrap으로 반응형 모바일 우선 사이트를 디자인하고 입맛대로 바꿔보세요. 부트스트랩은 Html 단에서 class name 지정을 통해 각종 컴포넌트 , 레이아웃 , CSS등을 구사할 수 있는 강력한 컴포넌트 입니다. 기본적인 사이트의 구성에서부터 시작해서 하나의 웹 서비스를 매우 빠르게 만들 수 있습니다. 장점 제작 기간이 짧음 러닝 커브가 쉬움 Javascript 지식이 거의 필요 없음 => 모달 , 케로우셀부터 시작해서 기본적인 모든게 다 들어가있음 반응형 웹이 자동으로 만들어짐 디자인을 통일화시켜 ..

세션 후기 및 잡담

https://school.programmers.co.kr/learn/courses/14595 [스터디/6기] 실무와 가까워지는 Node.js 백엔드 개발(feat.TypeScript) ⏰마감되었습니다. 7기 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 실무와 가까워지는 Node.js백엔드 개발 (feat. TypeScript) 비교적 쉬운 기술 스택으로 백엔드 구조의 핵심을 짚어보 school.programmers.co.kr 들어가기에 앞서 왜 갑자기 마지막 후기가 됐냐 하면 3주 차와 4주 차는 겉모양 외에 이해한 게 거의 없어서 후기라고 적을게 잡담뿐이 될 거 같아 그냥 묶어서 마지막 후기를 남기기로 했다. 😥 첫 백엔드로 이 수업을 들으실 분이 있다면 난이도가 좀 많이 높기 때문에 다..

프론트엔드 개발을 위한 자바스크립트 - 1주차

https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 서두 백엔드 스터디를 어느 정도 진행한 시점에서 자바스크립트 스터디가 시작됐다 😁 강의의 난이도는 기본적으로 JavaScript 의 이해도가 초 ~ 중급 이상은 되어야 할 것 같다. 일단 왠간한 메서드와 기본적인 제작은 다 할 수 있다는 전제 하에 스터디가 진행된다😱 수요일 저녁 시간에 약 3시간 정..

자바스크립트 네이밍을 효율적으로 작성하기

시작하기에 앞서 최근 시작한 프로그래머스 바닐라 JS 첫 주차를 수강하며 네이밍 규칙을 정리할 겸 번역한다. https://school.programmers.co.kr/learn/courses/14723 [스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라 school.programmers.co.kr 기본적으로 에어 BNB 네이밍 컨벤션을 알고 있다는 전재 하에 작성되었습니다. 1. Variables (변수) // bad var value = 'Robin'; // bad var val = ..

HTML + CSS 마크업 (3) 자주 사용되는 CSS 선택자 12종

시작하기에 앞서 코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고 요점을 적어두고 다시 활용하기 위한 글입니다. 1. * 1 2 3 4 * { margin: 0; padding: 0; } 고급 선택자로 이동하기 전에 초보자를 위해 쉬운 선택자부터 알아보죠. 별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding 값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괜찮습니다. 그러나, 저는 여러분에게 이 별표를 실전에서 사용하지 말라고 권합니다. 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않습니다. *를 자식 선택자에도 사용할 수 있습니다. 1 2 3 #container * { border: 1px ..