본문 바로가기

Development22

[log] 2021년 회고록 2021년은 그냥 무던하게 지나간 해라고 생각했는데, 막상 글을 쓰려고 보니 여러 가지 일들이 떠오른다. 임용고시와 졸업 작년 11월 쯤에 인생 처음이자 마지막으로 임용고시를 보았다. 시험 당일 아침으로 먹을 만한 게 딱히 없어서 (먹으면 시험에서 미끌어진다는) 미역국을 먹고 시험장을 가고, 시험장에 들어가서도 좌석을 잘못 앉아서 친구가 눈치를 주는 등 시트콤 같은 하루였던 것 같았다. 그냥 시험장이나 구경해보자 라는 생각으로 갔지만 고사장에서 긴장한 임고생들, 어쩌면 예민하기까지 한 그들을 보면서 나도 어서 목표를 정하고 그 목표를 이루기위해 치열하게 살고 싶다는 생각을 했던 것 같다. 그런 생각을 하면서 2월에 졸업을 했다. 개발입문 요즘 대학생들을 1학년 기초교양으로 코딩을 배운다는 말을 듣고 코딩.. 2022. 1. 1.
[TIL] 2021-11-17 (find) ▷ find - 주어진 판별 함수를 만족하는 첫번째 값을 반환 - 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12 - 객체와 함께 활용하는 방법 var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries'; } console.log(.. 2021. 11. 18.
[TIL] 2021-11-14 (shift, pop, Object.values, Object.entries) ▷ shift() - 배열에서 첫번째 요소를 제거(배열의 길이가 바뀜) - 제거한 값을 반환 const array1 = [1, 2, 3]; const firstElement = array1.shift(); console.log(array1); // expected output: Array [2, 3] console.log(firstElement); // expected output: 1 ▷ pop() - shift와 유사, 마지막 요소를 제거한다는 점이 다름 const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; console.log(plants.pop()); // expected output: "tomato" console.lo.. 2021. 11. 14.
[development] front-end 개발자가 되기 위하여 알아야 할 Javascript 개념들 ▷ 함수, 객체 ▷ 비동기라는 개념 - 이벤트 드리븐 프로그래밍 ▷ callback, promise, async/await ▷ 호출스택, 이벤트루프, 실행 컨텍스트 ▷ scope ▷ this(call, apply, bind) ▷ closure ▷ 생성자 ▷ 프로토타입 ▷ 서브타입 & 슈퍼타입 📌 부차로 공부할 것 ▷ DOM ▷ 디자인 패턴 ▷ map, filter, reduce (필수) ▷ 이차원 배열 ▷ 함수형 프로그래밍 (선택) 2021. 9. 26.
[TIL] 2021-09-10 1. div 안의 content를 정렬할 때 굳이 span 으로 감싸주지 않아도됨 2. CSS white-space ▷ 공백 문자를 처리하는 방법 https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org 3. CSS border-collapse ▷ 표의 테두리(table border)이 겹쳐질 때, 그것을 분리할 지 상쇄할 지 설정 https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse border-.. 2021. 9. 14.
[development] 구글링 잘하는 방법 tip 1. 내가 모르는 것을 정확하게 정의하고 검색 문법을 모른다 ▷ javascript for문 라이브러리 사용법을 모른다 ▷ 리액트 usestate (초보자의 경우 공식문서보다는 블로그 글이 더 이해하기 쉬울 수 있음) 만드는 법을 모른다 ▷ 자바스크립트 테트리스 만들기 or javascript countdown tutorial tip 2. 영어로 검색해본다 tip 3. 구글 검색 문법 ""(따옴표) 안에 적어서 정확히 일치하는 문장 검색가능 ▷ javascript "type error" 최신문서를 검색할때 after: (이전 문서를 검색할 때는 befor: ) ▷ react pwa after:2000 제외하고 싶은 단어가 있을 때 -제외할 단어 ▷ react state management -red.. 2021. 9. 2.
[TIL] 2021-08-24 1. box-sizing: border-box; * { box-sizing: border-box; } ▷ 기본설정으로 사용하는 이유 : border-sizing의 기본값은 content-box인데, 이 때 padding과 border이 더해지면 내가 설정한 width를 초과하는 넓이가 되기 때문 2. margin:auto block level의 요소들은 자동적으로 오른쪽에 margin이 간다 예를 들어, block level인 list는 margin 이 오른쪽만 들어가게 됨 이 때 margin을 auto로 주면 중앙배치가 가능 /* 위 아래 여백이 0 이고, 가로 중앙배치 하고 싶을 때 */ header { margin: 0 auto; } 3. border, outline button input { bo.. 2021. 8. 26.
[CS] 알고리즘과 데이터구조를 배워야 하는 이유 (Algorithm & Data Structure) ☑︎ 알고리즘을 언제 배우는 것이 좋을까? 코드를 최적화 할 때 or 나의 어플리케이션의 속도를 개선하고 싶을 때 즉, 더 빠르고 효율적인 코드를 작성하고 싶을 때 ▷ 알고리즘(Algorithm) - 어떤 일을 수행하기 위한 여러개의 지시사항들 - 내가 아침에 출근준비를 하는 루틴, 밤에 나이트케어를 하는 과정 모두 하나의 알고리즘이라고 할 수 있음 - 컴퓨터에 적용하면 어떤 액션을 수행하기 위해 컴퓨터가 수행하는 것 ex) 지도에서 최단거리를 찾는 알고리즘, 데이터를 암호화하는 알고리즘 -알고리즘을 잘 학습하면 질 좋은 프로그램을 만들 수 있음 ▷ 데이터 구조(Data Structure) - 어떤 개발 분야든, 산업이든 반드시 데이터를 다룸 - 데이터 구조는 이러한 데이터를 정리하는 것 - 작업에 대해.. 2021. 8. 9.
[TIL] 2021-08-04 1. 클론코딩을 할 때, 정적으로 만들어보고 그 다음에 동적으로 전환하기 2. 만들기 전에 큰 지도를 그리듯 머리에 한 번 그려보고, 세세하게 디테일을 수정하기. 노래들으면서 별 생각없이 코드를 짜다가는 나중에 수정이 어려워짐 3. 변수명을 더 직관적으로 짓기 위해 노력할 것. 지금은 너무 자주 바꿈. 2021. 8. 5.
[TIL] 2021-08-02 1. 으로 을 감싸야 하는 이유: 유효성 검사를 하기 위해서 ▷ 유효성(validation) 검사란? 입력한 데이터 값을 서버에 전송하기 전에 특정 규칙에 맞게 입력되었는지 확인하는 것. 필수요소를 빼먹거나, 비밀번호 등의 정보를 잘못 입력할 경우 사용자에게 오류가 있음을 알려준다. 으로 감싸지 않을 경우, Enter키를 눌러도 submit이 되지 않을 수 있다. 그 이유는 을 과 연관시키지 못하고 별도의 독립적인 요소로 보기 때문. 2. submit 이벤트 Note that the submit event fires on the element itself, and not on any or inside it. // HTML username // Javscript registerForm.addEventLis.. 2021. 8. 3.