HTML/CSS를 공부하면서 느낀점
이런 짤이 있더라고요...
짤은 html이 가장 쉬웠다 이런걸 비교한 거 같은데
저는 css보다 html이 어려웠던거 같습니다.
그렇게 느낀 이유에 대해서 정리해보겠습니다.
- 개발
- 모르는 html 속성과 태그가 너무 많아 공부하면서 하다보니 시간이 오래 걸렸다.
- css 속성에도 제한사항이 많았는데 익숙하지 않은 방식이 나온 경우 많이 헤맸다.
- 제약 구현 사항이 너무 많았다.
- html 구현사항대로 구현하고 보니 CSS에서 구현사항이 더 구체적으로 속성까지 지정되어 있어서 다시 구조를 수정해야하는 경우도 있었다.
- 추후에는 css구현사항을 먼저 확인하고 작업순서를 정한다음 구조를 그려보고 작업하는 방향으로 작업을 진행했다.
- 배우는 입장이다보니 기본적인 부분에서도 재차 확인하는 과정이 많이 필요했다.
- VScode의 단축키나 기능에 덜 익숙한 부분도 있던 것 같다.
- 전달받은 디자인
- 내가 디자인한 시안이 아니었기 때문에 파악하는데 시간이 걸렸다.
- 디자이너가 개발 환경의 고려 없이 디자인 하였다. container 등의 기본적인 box 모델의 개념이 없이 디자인 된 느낌이었다.
- 오토레이아웃을 더 많이 활용한 시안으로 작업했다면 좀 더 디자이너와 개발자 둘 다 리소스를 단축 시킬 수 있을 것이다.
HTML/CSS 공부하면서 어려웠던 개념과 이유
Grid Grid Grid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid GridGrid Grid Grid !important
ㅋㅋㅋㅋ.......(웃는게 웃는게 아님....)
아 그리드로 GNB를 구현해야하는 미션이 있었는데..
정말 너무 힘들고 점점 몸이 ㄱ자로 꺾이면서 하지만 키보드에서 손은 뗄 수 없고 찾아본 웹페이지랑 vsCode를 겁나게 번갈아가며 보면서 시도하고 시도하고 시도하고 고통속에서 했습니다...
그리드는 아래 글을 보면서 미션을 수행했는데요. 왜 제목이 이번에야말로 인지 알겠더라고요...ㅎㅎ 🥹
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
Grid 개념이 왜 어려웠을까?
일단 제일 큰 이유는 혼자 구현한 첫 그리드 CSS였다. 당연히 어려웠다..
그 밖의 일반적인 이번 미션에서 이유를 찾아본다면 아래와 같다.
- 일단 flex라는 css 속성이 너무 쉬워서 익숙하였다.
- flex는 한방향으로 각 구획마다 동작하는 방식으로 구현이 가능하지만,
- 그리드는 전체를 구상하여 속성을 디테일하게 조정해야한다.
- 속성값이 길고 속성 종류도 많았다.
- 개념이 부족했기 때문에 헷갈리는 부분이 많아 수정과 고뇌의 시간이 길었다.
제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유
📓 강의 종류 : JS 자료구조 알고리즘
💻 강의 이름 : 이론부터 실전까지 모든 것을 담은 자료구조 알고리즘
👍 강의 특징 : 크게 5가지 섹션으로 나누어지는 강의로 문법을 예시문을 통해 익히고 연습문제를 스스로 풀고 확인해볼 수 있다.
JS가 어렵고 거의 처음 배운는 것과 같은 단계이기 때문에 예습으로 먼저 진행하게 된 강의이다.
당시 Basic 자바스크립트라는 JS 기본강의가 제로베이스 투두리스트에 있었지만
나는 공부란 결국 자신에게 맞춰서 가장 효율적인 방식을 찾아 진행해야하는 것이기 때문에,
따로 계획을 짜고 시간을 나누어서 우선순위로 JS 자료구조 알고리즘 해당강의를 듣고 basic 자바스크립트 강의에서 추가할 부분에 좀 더 집중하고 다른 부분은 힘을 빼고 들었다.
강의 후 복습 정리(노션) + 블로그 + 연습
해당 강의를 듣는 목적은 JS를 문법 숙지 + 코딩테스트 프로그래머스 Lv0 ~ Lv1 마스터 이기 때문에
당연히 강의를 듣는 것에서 끝내지 않고 다 들은 다음 복습을 하면서 블로그에 정리하고 연습문제를 풀었다.
강의를 진행하며 정리한 노션 + 블로그들은 다음과 같다.
- 정리할때 꼭 진행했던 부분은 mdn 문서를 직접 찾아보고 다른 코드로 시도해 보고
- 반복문 같은 경우에는 손으로 함수가 전달되는 인자를 적어보며 이해하고 익히기 위해 노력했다.
👇 강의를 진행하며 정리한 노션
👇 강의를 진행하며 정리한 블로그
https://coralcollie.tistory.com/75
[자바스크립트] javascript 객체를 복사하는 4가지 방법
객체복사 let user = { name: “john”, age: 27, }; 객체를 복사하는 방법 2가지 (얕은 복사, 깊은 복사) 얕은 복사 using Object let admin = Object.assign({}, user); 오브젝트 내의 assign 내부함수를 이용해서 두 객체
coralcollie.tistory.com
https://coralcollie.tistory.com/76
[자바스크립트] 형 변환(String, Number, boolean) 정수 실수 변환(parseInt, parseFloat)
String console.log(String(123)); //123 console.log(String(1 / 0)); //Infinity console.log(String(-1 / 0)); //-Infinity console.log(String(NaN)); //NaN console.log(String(true)); //true console.log(String(false)); //false console.log(String(undefined)); //u
coralcollie.tistory.com
https://coralcollie.tistory.com/77
[자바스크립트] 산술, 대입 연산자
산술 대입 연산자 연산자도 우선순위가 있다. (1~21번) 우선 순위가 높을수록 먼저 수행된다. 대체로 단항 연산자의 우선순위가 높음 산술연산자 덧셈 연산자 + console.log(31 + 10); // 41 뺄셈 연산자 -
coralcollie.tistory.com
https://coralcollie.tistory.com/78
[자바스크립트] 비교, 논리 연산자
비교 연산자 좌항 우항의 피연산자를 비교한 결과값을 논리적 자료형으로 반환하는 연산자 a>b // a가 b보다 크면 true 아니면 false a=b // a가 b보다 크거나 같으면 true 아니면 false a “AAAA”); // true co
coralcollie.tistory.com
https://coralcollie.tistory.com/79
[자바스크립트] SCOPE 전역, 지역 변수 (block scope 주의점)
SCOPE 변수에 접근성을 결정하는 범위 Global scope (전역 : 웹 페이지 내의 모든 스크립트에서 접근 가능) Local scope (지역 : 특정 함수 또는 블록 범위에서 접근 가능, 외부에서 액세스 불가) Function scop
coralcollie.tistory.com
https://coralcollie.tistory.com/80
[자바스크립트] if else 조건문과 삼항연산자
if else 조건문 2개 if(조건식){ 참일때 실행문 } else if (2번째 조건식){ 1번째 조건식이 거짓이고 2번째 조건식이 참일때 실행문 } else { 1,2번째 조건식이 거짓이고 3번째 조건식이 참일때 실행문 } if e
coralcollie.tistory.com
https://coralcollie.tistory.com/81
[자바스크립트] 조건문 switch문
조건문 switch switch 문은 식을 평가하여 식의 값을 case 절과 일치시키고 해당 case와 관련된 문과 일치하는 case 다음에 오는 실행문을 실행한다. 어떤 case에도 속하지 않는 경우 default로 지정할 수
coralcollie.tistory.com
https://coralcollie.tistory.com/82
[자바스크립트] for 반복문, for in 반복문, for of 반복문
for 반복문 선언문, 조건문, 증감문 형태로 이루어진 반복문이다. 조건문이 false 되면 종료한다. 선언문, 조건문, 증감문 자리에 공백 입력이 가능하다. 선언문 : 카운터 변수를 초기화 할때 사용
coralcollie.tistory.com
https://coralcollie.tistory.com/83
[자바스크립트] while 반복문, do while 반복문
while 반복문 조건문이 참이면 코드 블록을 계속 반복 선언문과 증감문이 없음 무한 loop 수행 시에 많이 사용됨 let i = 1; while (i < 3){ console.log(i) i++; } // 1, 2 let i = 4; while (i < 3){ console.log(i) i++; } // 조
coralcollie.tistory.com
https://coralcollie.tistory.com/84
[자바스크립트] 반복문 제어 break, continue
반복문 제어 (break, continue) break 반복문은 현재 반복문을 종료하고 그 다음 문으로 프로그램 제어를 넘긴다. 다중 반복문일 경우 가장 안쪽의 반복문을 종료한다. Label을 통하여 다중 반복문을 한
coralcollie.tistory.com
https://coralcollie.tistory.com/85
[자바스크립트] 반복문 연습문제 (짝수의 합, 구구단 출력)
문제 1 1에서 10까지 수 중에서 짝수끼리의 합을 반복문으로 표현하시오. const UNTIL_NUM = 10; let sum = 0; for(let i = 0; i
coralcollie.tistory.com
https://coralcollie.tistory.com/86
[자바스크립트] 함수 총정리 (문법, 매개변수, 인수, 호출, 반환)
함수 Function 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 하나의 실행단위 호출하여 해당 작업 반복 수행(재사용) 매개변수(parameter) 매개변수(parameter)란 함수를 호출할 때 인수(argumen
coralcollie.tistory.com
https://coralcollie.tistory.com/88
[자바스크립트] 재귀함수 사용방법 (팩토리얼 예시)
재귀함수 함수가 자기 자신을 호출하는 함수 재귀 종료 조건문과 함께 사용하지 않으면 무한 루프에 빠져 스택 오버플로가 난다. 반복문보다 짧게 쓸 수 있어 반복문 대신으로 사용할 수 있다.
coralcollie.tistory.com
나만의 공부팁
일단 제로베이스에서 프론트엔드 공부를 진행한지 6주차가 되어간다.
길게 한달 정도를 공부하면서 시행착오를 통해 계획을 나에게 적합하도록 직접 수정하는 시간으로 잡았는데
처음에 계획을 세우는 리소스를 줄여보려고 제로베이스에서 진행하는 TODO-LIST대로 진행을 해보았지만
다른 일정을 제외하고 순 공부시간으로 낼 수 있는 시간에 변화가 있기 때문에 아래와 같은 문제가 발생했다.
문제
todo-list가 밀림 -> 밀린 경우 따로 공부할 수 있는 시간이 계획에 없음 -> 계획이 계속 겹치면서 밀림 -> 심각한 경우 공부 의욕 상실까지 가기도 함. (다행히 가기전에 과감하게 todo-list 버리고 계획을 참고만 하고 내 계획을 따로 세웠다.)
해결 방법
어쨌든 문제가 발생하는 부분은 예상했었기 때문에 어떤식으로 계획을 변경할지 고민을 했는데
계속 활용하고 있던 노션을 확장해서 계획을 변경하기로 했다.
👇 기존에 정리하고 있던 노션
이전에 내가 작업하면서 궁금한 부분들을 구현사항에 댓글로도 따로 남겨놓았는데
와 내가 이걸 왜 몰랐지..? 하는 것들을 발견한다...
👇 계획은 노션 페이지 + 사용 시간 분포는 어플
예전에 노션 페이지로 수행율을 퍼센트로 표시하도록 설계해서 사용한 적이 있었는데 내용이 많아질수록
노션이 무거워져 느려지기만 했다.
그러므로 이번에는 사용 시간 분포와 수행율은 어플을 통해 보충하고
노션은 큰 계획틀과 체크리스트만 사용해서 가볍게 만들었다.
- 노션 토글 페이지로 재사용 가능하게 만듦
- 노션에서 부족한 기능은 어플로 보충
딜레이된 부분은 댓글 기능을 이용해서 사유를 반드시 작성한다.
못했다는게 중요한게 아니라 왜 못했는지가 중요하다.
왜 못했는지 알아야 다음 계획에 시간을 좀 더 유동적으로 분배할 수 있다.
🥰 사용하고 있는 뽀모도로 어플
사용해보고 만족해서 유료로 구매해서 사용중이다. 6월달 부터 제대로 진행중.
전체 타임라인 확인 가능
[일간 / 주간 / 월간] 시간 비율 확인
[일간 / 주간 / 월간] 집중한 시간
목표 집중 시간 설정
목표 집중 시간은 8시간으로 집중시간을 설정해뒀다.
내 목표 시간은 12시간이고 (12시간 안에 계획을 완수하고 싶다는 뜻이다.)
보통 12시간 기준으로 8시간 정도는 집중력이 유지되기 때문에 목표 집중시간은 8시간으로 설정했다.
플러스되면 좋고.. 아니면 말고.. 12시간 이상 걸리면 나한테는 공부를 많이한게 아니라 실패다.... 😥
집중한 시간 차트
집중한 시간 차트를 확인할 수 있는 기능이 있는데 나는 딱히 이 부분은 신경 안쓰고 있다.
이런 방식으로 공부를 하고 있는데 이번주는 대학 기말고사와 미션 구현 5개 마감 까지 있어
정말 정말
정말
정..............말 위기의 한 주이다...
힘내보자..~~
일단 한 달 정도 위와 같은 방식을 유지하고,
시험 기간이 지난 후에 2주 정도 더 해보고 나서,
또 수정할 것 같다.
'개발 일기 CollieLog' 카테고리의 다른 글
| 생활비를 모아 들어갔던 유료 부트캠프를 그만 두기로 했다.(+ 반성과 동기부여) (1) | 2023.10.11 |
|---|---|
| 북스터디로 모던 자바스크립트 딥다이브 2달간 완독한 후기 (2) | 2023.08.08 |
| [제로베이스 / 프론트엔드 스쿨 / 내돈내산] 2주차 학습후기 + 한 달 (0) | 2023.05.17 |
| 그간의 일..부트캠프 수강 시작, 컴퓨터 과학 복전 보류 (3) | 2023.05.05 |
| 리액트 혼란중... 알고리즘 공부 첫걸음, 꿈노트 작성 시작 (0) | 2022.09.02 |
