둥글게 둥글게

* Array(배열)에 접근하는 방법 및 함수 사용 정리 🫠 javascript에서 배열은 굉장히 많이 사용되므로, 배열을 탐색하거나 조작할 수 있는 함수들에 대해 아래와 같이 정리하였다. 배열을 하나 생성하고, 배열인지 확인해 보자 > Array.isArray를 통해 animation 변수가 배열인지 확인 > output : true 🫠 배열 조작 - 배열 삭제 ① delete > 입력형식 : delete 배열[index]; 👉🏻 output : [ 'digimon', , 'pinggu' ] ✅ delete 배열[index]로 위치 지정하여 삭제할 경우, 빈 공간이 그대로 남는다. 🫠 배열 조작 - 배열 삭제 ② pop( ) > 입력형식 : 배열.pop( ) > pop( )은 배열의 뒤에서부터 삭제 👉..

* String(문자열) 내에 접근하는 다양한 방법 🫠 javascript에서 String에 접근하는 방법으로 위치 기반 접근, 길이 기반 접근, 스펠링, 개수... 등 다양한 방법들이 존재한다. 이 중 내가 상황에 맞게 어떤 함수를 사용해야 보다 빠르게 원하는 값을 찾을 수 있는지 효율을 높이며 시간을 절약하기 위해 아래와 같이 정리하였다. 인사를 나타내는 문자열을 예시로 들어 확인해 보자 > 콘솔창 : how are you? 확인 🫠 indexOf( ) / lastIndexOf( ) > 문자열에서 원하는 문자가 몇 번째 자리에 있는지 검색 > 입력 형식 : indexOf('원하는 문자', 몇 번째 자리부터 찾아줘); 👉🏻 output : 4 \n 1 \n 9 ❗️ indexOf에서 확인할 점은 만약 ..

* CSS를 공부하면서 제일 쉬울 것 같으면서도 헷갈렸던 img와 background-img를 실습을 통해 비교하여 정리하고자 한다. 🫠 img와 background-img를 비교하기 위해 박스를 두 개 만들어보자 > 같은 크기의 박스를 2개 만들고, div-1은 img 요소로 마크업, div-2는 background-img로 구성해 보겠다. 🫠 div-1에 img 요소로 마크업 한 후, CSS에서 클래스 선택자를 사용하여 사진의 크기를 지정하자 > 박스의 크기 200px 200px에 맞춰 img의 크기를 조정해 줬기 때문에 박스 크기에 img가 딱 맞게 들어가졌다. 🫠 div-2에 background-img로 사진을 넣어보자 > background-img를 넣기 위해 url()을 사용하며, url()의..

* HTML/CSS 과제를 마치고 ▼▼▼ ① HTML/CSS 공부하면서 느낀 점 프론트엔드의 가장 기초가 되는 언어인 HTML과 CSS를 한 달 ~ 6주 정도 학습 하였다. 6주 동안 HTML과 CSS를 배우기에는 굉장히 짧고, 부족할 수 있지만 과제까지 마친 지금은 꽤 친해진 느낌이 든다. 수많은 조건을 이용해서 결과물과 똑같은 화면을 구현하는 것은 정말 쉽지 않지만, 잘 풀리지 않다가 해결했을 때의 기쁨은 말로 못할 정도로 좋았다. HTML과 CSS는 하나의 화면을 만들어도 다양한 방법으로 마크업 할 수 있기 때문에 정답이 없는 것 같다. 그래서 하나하나 풀릴 때마다 앞에 있는 벽을 뚫고 나아가는 느낌이 들어 정말 재밌었다. ② HTML/CSS를 공부하면서 어려웠던 개념과 이유 CSS를 공부하면서 어..

* Git Issues / README / Markdown * Issues (github에서 제공하는 issues 기능) - 댓글 / label 등을 달 수 있음 - open / closed 기능을 통해 버그 해결 여부도 확인 가능 - 템플릿 생성 가능 > 이슈에 대한 질문 등을 지정할 수 있음 * GIT README (github홈에서 사용 및 확인 가능) * README.md란? : 프로젝트가 어떤 목적으로 개발되었는지, 코드가 어떤 개요로 작성되었는지, 코드의 구조, 빌드 방법 등 프로젝트를 설명하는 문서 - markdown으로 작성된 문서 * Markdown이란? : 일반 텍스트 형식의 문서의 양식을 편집하는 문법 : 특수기호와 문자를 활용한 간단 구조이기 때문에 쉽게 HTML로 변환 가능하며, ..

* 터미널에서 Git 명령어 사용하기 * sourcetree가 아닌 터미널에서 git 명령어를 사용해 보자 > git은 명령어로 구성되어 있음 > 입력 형식 : git의 명령어 + [옵션] ① Clone(클론) 명령어 - 입력 형식 : git clone [원격 저장소 주소] ② 저장소의 상태를 보여주는 명령어 - 입력 형식 : git status - git의 commit or add or push 등의 action을 취한 후, git status로 git의 상태를 확인하는 것이 중요 ③ Working directory > Staging area로 등록할 때 사용하는 명령어 - 입력 형식 : git add [파일 경로] - 입력 형식 : git add -i (추가되지 않은 파일들 모두 한 번에 Stagin..

* Git을 다루는 명령어 : Merge, Conflict, Fork, Pull Request ▼▼▼ ① Merge : 각각의 브랜치에서 작업이 완료된 후에 통합 브랜치(Main)에서 하나로 모아져 합치는 작업(브랜치 끼리합치는 작업) : 내 Local Repository의 변경사항을 Working Directory에 합치는 작업 (도 merge에 해당) * Sourcetree에서 Merge를 실행해 보자 ex) main 브랜치에 새로 작업한 feature2 기능을 합칠 경우 1) main 브랜치 check-out 되어 있는지 확인 2) feature2 브랜치 마우스 우 click - ‘Merge feature2 into main’ (= feature2 브랜치를 main 브랜치에 합침) 3) merge ..

* 지난 한 달간 좋았던 점 제로베이스 프론트엔드를 시작한 지 벌써 4주 차가 되었다. 한 달 동안 제로베이스 커리큘럼을 따라가면서 온라인 강의 외에도 많은 학습과 경험을 하였는데, 다음과 같다. - 매일 팀원과 데일리 스크럼 진행 - HTML/CSS 클론코딩 및 과제 진행 - 매주 1회 CS 퀴즈 진행 - 현업 개발자의 live 강의 - 코딩테스트 진행 (4주차~ ) 이 중 가장 좋았던 점은 매일 팀원과 10분 정도 데일리 스크럼을 진행한 것이었다. 온라인 강의 단점은 혼자 공부를 하기 때문에 금방 지칠 수 있다는 것인데 매일 10분씩 팀원과 데일리 스크럼을 진행하며, 진도를 맞추고, 자료를 공유 하는 등의 장점으로 한 달을 무난하게 버틸 수 있었던 것 같다. 두 달째부터는 다른 분들과 스터디도 진행할..

* 이전 게시물 Local Repository 생성 방법 ②번과 연결되는 내용 ▽▽▽ https://cyjcyj.tistory.com/29 [Git/Github] 저장소 및 생성 방법 (Local / Remote) Git/Github 저장소 및 생성 방법 (+ Gitignore) * 저장소(Repository) 란? 파일 또는 폴더를 저장하는 곳 Git 저장소 : 파일이 변경될 때마다 파일의 변경 부분을 포함한 모든 파일이 저장되는 것이 아니라, cyjcyj.tistory.com * Sourcetree를 이용하여 Clone 해보자 ✅ * Clone이란? 내 pc의 Local에서 작업을 하기 위하여 원격저장소(Remote Repository) github에서 해당 프로젝트를 복제해(소스파일, 변경이력, 설..

Git/GitHub 저장소 및 생성 방법 (+ Gitignore) * 저장소(Repository) 란? 파일 또는 폴더를 저장하는 곳 Git 저장소 : 파일이 변경될 때마다 파일의 변경 부분을 포함한 모든 파일이 저장되는 것이 아니라, 변경된 부분만 이력별로 구분되어 저장이 된다. ’snapshot’ : 파일이나 폴더가 변경된 순간의 상태를 사진을 찍듯 저장하는 것을 의미 * Local Repository 내 PC에 파일, 폴더가 저장되는 개인 저장 공간 Local Repository 생성하는 방법 (git init 명령어 사용하여 초기화하는 것이다.) ① Local Repository 생성 방법 (git 초기화) 프로젝트 폴더 생성 경로 : 해당 폴더 > git init 명령어 입력 ls를 통해 생성된..