풀먹고 그림그리고 개발공부하는 노동자

디자인 ㅈㄱ에서 배워서 잘 써먹고 있는 스킵네비 마크업와 스타일. 접근성에 필수이기 때문에 무조건 넣어줘야 한다. 마크업 본문 바로가기 스타일 #skip-nav{ position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #ffffff; font-size: 16px; transition: top 0.3s; z-index: 100000; }

유튜브 채널 freeCodeCamp.org (코딩알려주는 곳 중에 제일 유명한 곳일듯) 이 채널에 올라온 영상 중에 하나를 골랐다. 바닐라 자바스크립트 프로젝트 15개 따라서 만들어보기! 그 중 첫 번째 프로젝트! CLICK ME 버튼을 클릭하면 백그라운드 컬러가 랜덤으로 바뀌고, background color: 옆의 텍스트도 컬러값으로 바뀐다! const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; //#f15025 const btn = document.getElementById('btn'); const color = document.querySelector('.color'); btn.addEventListener('click..

프로젝트 제목 드림코딩엘리님의 무료강의 '쇼핑몰 미니게임 클론코딩' 기능 버튼 클릭 시 필터링, 동적인 액션 구현, 아이템 스크롤링(overflow-y: auto), JSON파일의 데이터 fetch 통해 가져와서 작업, 바닐라 자바스크립트! 필기 - 공통으로 사용하는 스타일은 변수 :root 로 정의해놓고 사용한다. (나중에 변경되는 사항이 있으면 한군데만 수정하면 되므로) - 동적으로 무언가를 처리할 때 UI적인 요소와 데이터를 섞어서 보관하는 것은 좋지 않다. - 데이터는 추출해서 따로 보관하도록 한다. - 자바스크립트는 어플리케이션의 비지니스 로직을 담당하는 곳. 코드만 작성되어야 한다. 코드와 데이터를 섞어서 보관하는 것은 좋지 않다. - JSON : js오프젝트노테이션. 오브젝트와 유사하다. 오..

수업 진도를 성실히 따라가고.. 촉박한 포트폴리오 작업으로 시간을 보내다 보니.. (ㅎ,,ㅎ) 마지막 포스팅에서 벌써 한 달이 지나버렸다! 🙂 이런 게으른..! 찰싹! 블로그 할 자격이 없다!! 다 치워!! 저번 주에 포트폴리오 2차 발표가 있었다. 화면을 gif으로 녹화해서 남겨놓으려 한다. 1. 개인 포트폴리오 랜딩 페이지 제작! 처음 디자인과 비교해 불필요한 부분은 다 삭제하고 심플하게 디자인했다. 상단 About me에서 학력(학원 수료), 커리어, 스킬 등을 확인할 수 있다. Project섹션 상단에는 가장 공들인(?) 포트폴리오 3개를 선정해 전시하고, 하단에는 미니 프로젝트를 보여줄 생각이다. 미니 프로젝트를 전부 나열하기에는 메인 페이지가 심각히 길어질 것 같아 따로 Project Coll..

이번 주부터 본격적으로 자바스크립트 UI 개발 수업이 시작되었다. 스타트는 이미지 슬라이드 UI! 아 진심으로 죽을 맛이다! 너무 어렵다! 하하하! 선생님께서 슬라이드 UI 코드가 정말 익숙해지도록 매일 아침마다 타이핑시킬 거라고 하셨다. 슬라이드 UI 개발 코드는 스텝을 밟을수록 점점 간결해지고 단순해지는 대신 더 많은 기능을 가지게 되었다. 선생님께서는 이 최종 코드를 얻기까지 아주 오랜 시간 시행착오를 겪었다고.. 우리는 날름 받아먹는 거니까 감사한 마음으로 머릿속에 처넣도록 해야겠다. 학원 사람들과 같이 팀 프로젝트를 진행하기로 했다. 다양한 의견을 주고받는 과정이 재미있었고, 벌써 작업물이 기대 되잖아!!! 재미있게 해보고 싶다. [프론트엔드개발 20, 21차 필기] 번뜩할 때마다 필기를 한 관..

나도 이젠 바닐라 자바스크립트만을 사용하는 멋진 개발자가 될꺼야! 는 치기일까. 오늘 하루 만에 제이쿼리 수업이 마무리되었다. 진짜 실무에서 사용하는 명령어와 문법을 짚어주셨다. 아.. 아무래도 제이쿼리와 헤어지기는 어려울 것 같다. 사용하기에 간편하고 호환성도 좋고. 따지고 보면 ㅁ..뭐 얼마나 무겁다고 그러는지! 제이쿼리를 떠나보내려고 바닐라 JS와 친해지려고 노력하는 중인데 오늘 선생님의 수업은 마치.. 아 선생님이 그냥 제이쿼리 본사에서 나온 영업 사원인가 싶었다. 그 길던 스크립트 문장을 이렇게 짧게 간단하게 작성할수 있어요 여러분~. 아직까지 제이쿼리로 구축된 웹사이트가 대부분일 것이고 유지보수 및 운영을 위해서 배워야 하는 건 맞는 거니까 ^^! 내일은 이력서 코칭받는 날이고, 다음 주부터 ..

드디어 기다려왔던 자바스크립트, UI 개발 강의가 시작되었다! 완전 기초 이론수업은 건너뛰고 바로 코드를 작성했다. 수업 시작하자마자 여러 가지 방법으로 구구단을 만들었다. 아 진심으로 바보가 된 기분이었다. 머리로는, 말로는 어떻게 해야겠다고 감은 잡혔지만. 도저히 스크립트로 구현하기가 어려운 것이다. 선생님이 돌아다니시며 진행도를 확인하는데 노트북 화면을 숨기고 싶었다. 이것저것 작성해보고 구글 서칭도 해봤지만 해결이 안 된 부분이 있었다. 아무튼 혼자 작성하는 시간을 종료하고 선생님의 코드를 확인하는데 '아 내가 하려고 했던 게 저건대!'라는 내적 소리침. 아 왜 머릿속으로는 알겠는데 정작 스크립트로 작성이 안 되는지. 그건 아마도 내가 코어 스크립트를 제대로 이해하지 못하고 있기 때문인 것 같다...

설 연휴 동안 JS 입문, 중급 강의만 계속 들었다. 조금씩의 차이는 있지만 강의 내용이 거의 겹친다. 비슷한 내용을 여러 번 보다 보니 감이 잡히는 느낌이다. 자바스크립트와 친해지고 싶다. 진짜 잘하고 싶다. 지금은 거리감 느껴지는 언어지만 나중에는 제일 능숙하게 다룰 수 있는 언어가 되기를 진심으로 바란다. 빨리 성장하고 싶다. 하지만 한 스텝 한 스텝 밟으며 기본기를 탄탄하게 다져가며 성장하는 게 맞는 것 같다. 학원에서 드디어 UI 개발 과정에 접어들었다! 제일 기다리던 부분. 한편으로는 두렵지만! 최선을 다해 머릿속에 집어넣자. 기대된다! 재밌는 프로젝트에 많이 도전해보고 싶다. [프론트엔드개발 아카데미 14차 필기] (강의를 듣는 중간중간 번뜩일 때만 필기를 하는 관계로 내용에 맥락이 없어 보..