Definition of Seon

프로젝트 시작 계기 개인 프로젝트를 뭘할까 고민하면서 보내고 있던 요즘이었는데, 대부분 백엔드와 협업하지 않으면 진행하기 어려운 아이디어여서 보류 중이었다. 파이썬이나 노드를 이용하여 백엔드를 구현할까도 잠시 고민했으나, Next.js와 타입스크립트를 배우기 전 리액트를 정리할 겸 시작하는 개인 프로젝트여서 백엔드보다는 프론트의 비중이 훨씬 중요했다. 오늘 아침 차를 타고 가면서 음악을 듣다가 갑자기 아이디어가 머리를 스쳤다. mbti 테스트와 같은 무언가를 만들어보자는 생각에서 시작하여 취향에 맞는 음악을 추천해주자는 생각이 들었다. 음악 앱 중에는 알고리즘으로 음악을 추천해주는 서비스가 있지만, 나는 문답에 참여하면 그 결과로서 음악을 추천해주는 서비스를 만들어보려고 한다. 그냥 음악으로 하면 너무 ..

팀프로젝트의 첫 단계, ui 설계를 위해 피그마를 배우기로 했다. udemy의 웹디자인 강의를 결제해두었는데 이제 정말 들을 때가 되었다. 기초 기능을 다루는 방법을 정리하며 강의를 들어야겠다. 1. 프레임 (단축키 f) - 화면 크기 정하기 (아이폰, 데스크탑 등등, 또는 개인설정 가능) - 프레임 안에 2개 이상의 도형을 하나의 그룹으로 만들기 위해서는 command+g 또는 shift 누르고 클릭 - 그룹을 해제하기 위해서는 shift+command+g - 프레임 안 오브젝트에 제약조건을 추가할 경우 프레임의 변화와 관계 없이 그대로 있음 2. 기본 도형 - 직사각형(R), 라인(L), 화살표(shift+L), 원(o), 다각형, 별, 펜툴(p) - shift를 누를 경우 정사각형, 8방향의 라인,..

리액트 강의를 거의 다 들었을 무렵부터 인프런과 홀라에 올라오는 팀프로젝트 게시물을 유심히 보기 시작했다. 개인프로젝트부터 하는게 순리인 것 같기도 하지만, 괜히 팀플로 더 멋진 결과물을 만들고 싶은 느낌. 인프런에 올라온 글을 보고 문의를 몇 번 했으나 매번 next.js나 typescript라는 조건 때문에 참여를 못했다. 그러나 이번에 올라온 글에는 언어가 명시되어 있지 않아 문의를 넣었다. 다행히 아직 언어를 정하기 전이어서 이미 합류해 계신 프론트엔드분과 협의하여 자바스크립트로 개발을 진행하기로 했다. 이 팀에서는 실력보다는 인성과 태도 부분에서의 3가지 요소를 보았고 그 부분은 모두 자신 있었다. 많은 시간을 투자해서 부족한 실력을 잘 메워야지. 이 팀은 디자이너가 없어서 ui 개발을 다같이 ..

Sass는 CSS 프로세서입니다. CSS만으로 작성한 코드는 복잡하고 관리가 어렵습니다. Sass는 CSS의 방식은 그대로 적용하되, 기능을 추가하여 관리를 쉽기 해줍니다. 컴파일러를 돌리면 컴파일러가 Sass코드를 CSS 코드로 변환해줍니다. 그래서 Sass를 CSS Pre-processor라고 부릅니다. Sass의 특징 1. 변수 제공 Sass에서 변수는 $ 달러 표시로 사용합니다. 2. 중첩 가능 nav ul li에 스타일을 추가하고 싶을 때 nav 안에 ul을 넣고 그 안에 li를 넣는 방법으로 중첩할 수 있습니다. 3. 연산자 4. partials, imports : 여러 파일에서 CSS를 쓸 수 있게 해주고 불러오게 해줍니다. 5. Mixins 재사용 가능한 코드 여러줄이 있는 변수라고 생각하..

The Keyword of the Year 2023, 인공지능 최근 무어의 법칙이 깨지고 기술이 2배 이상 더 크게 발전했다고 합니다. 2023년에는 인공지능이 우리에게 깊숙히 들어온 한 해였습니다. 2016년 4차산업혁명이라는 단어 등장 이후 인공지능이 점점 사람들에게 영향을 끼치기 시작하다가, 2022년 말 딥러닝과 머신러닝을 넘어 생성형 인공지능이 대두되었습니다. 챗 GPT의 사용자가 순식간에 증가하면서 일반인들까지도 인공지능에 대해 알게 되었습니다. 과연 인공지능은 개발자를 대체할 수 있을까요? 2022년의 개발자와 2023년의 개발자는 다릅니다. 2022년에는 개발할 때 옆에 스택오버플로우를 켜뒀다면 2023년에는 개발을 할 때도 챗GPT를 사용하고 있습니다. 개발자로 살아남을 수 있는 키워드 ..

HTML과 CSS를 잘 작성하기 위해서는 세 가지를 고려해야 합니다. 1. Responsive Design 반응형으로 작동하는 웹사이트를 만들어야 합니다. 미디어 쿼리나 fluid 레이아웃을 넘어서 화면에 맞는 글꼴과 이미지의 크기, 데스크톱 또는 모바일 중에 무엇이 먼저인지 등등을 고려해야 할 것입니다. 2. Maintainable and scalable code 유지가능하고 확장가능한 코드를 만들어야 합니다. 깔끔하고 이해하기 쉽고 확장성이 높은 코드를 써야 나의 코드를 보는 다른 개발자들에게도 좋습니다. 어떻게 마크업을 구조화하고 클래스 이름을 지어야 할지 등을 고려해야 합니다. 3. Web Performance 웹사이트를 더 빠르게 만들기 위해 우리는 httmp 요청과 코드 자체를 줄이고 코드를 ..

배열 메서드 배열은 그 자체로 개체이므로 매서드가 있습니다. 1. slice let arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.slice(2)); // cde console.log(arr.slice(2,4)); // cd console.log(arr.slice(-2)); //de slice 매서드를 이용하여 배열의 요소를 자를 수 있습니다. 괄호 안에 인덱스를 넣어 사용할 수 있는데 -를 입력할 경우 끝에서부터 -1, -2... 이렇게 셉니다. 2. splice splice의 결과는 slice와 동일하지만, splice는 원래 배열을 변경합니다. splice해서 추출된 요소를 잃고 나머지 요소만 기존의 배열에 포함됩니다. 3. reverse arr.revers..

디폴트 매개변수 ES5에서는 디폴트 값을 설정할 때 함수 안에 아래와 같은 방식을 사용하였습니다. numPassengers = numPassengers || 1; price = price || 100; 그러나 ES6에서는 함수의 매개변수에 바로 디폴트 값을 설정할 수 있습니다. const createBooking = function(flightNum, numPassengers = 1, price = 199) 함수를 사용할 때 매개변수를 건너뛰고 입력할 수는 없습니다. 만약 1, 3번째 매개변수만 입력하고 싶다면 2번째 매개변수 위치에 undefined를 입력하면 됩니다. 퍼스트 클래스 함수, 고차원 함수 함수를 변수나 개체 속성에 저장할 수 있습니다. 함수를 다른 함수에 대한 인수로 넘길 수도 있습니다...

Array destructuting Array destructing 이란 배열이나 개체의 값을 개별 변수로 분해하는 것입니다. const arr = [2,3,4]; const [x,y,z] = arr; 위와 같이 표기할 경우 x,y,z가 각각 2,3,4가 되는 것을 확인할 수 있습니다. 이때 기존의 배열인 arr은 아무 영향을 받지 않습니다. 배열에서 개별 변수로 분해할 때 꼭 모든 변수를 다 쓸 필요는 없습니다. const [first, , second] = arr; 위와 같은 방법으로 2와 4만을 추출할 수도 있습니다. 배열 내의 원소를 바꾸기 위해 임시 변수를 사용할 수도 있습니다. 또 배열 내의 원소의 위치를 바꾸기 위해서도 이 방법을 사용할 수 있습니다. 중첩된 배열에 대해서도 형태를 같게 써주..

자바스크립트 런타임 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램입니다. 모든 브라우저에는 자바스크립트 엔진이 있습니다. 예를 들어 구글의 V8 엔진이 자바스크립트 엔진의 한 종류입니다. 자바스크립트 엔진은 콜 스택과 힙을 가지고 있습니다. 콜 스택(call stack)은 실행컨텍스트를 이용하여 코드를 실행하는 곳이고 힙(heap)은 개체가 저장되는 곳입니다. 자바스크립트는 interpreted 언어라 compiled 언어에 비해 속도가 느린 편입니다. interpreted 언어는 소스 코드를 한 줄씩 실행 시키는 언어입니다. 모던 자바스크립트에서는 Just-in-time compilation 방법을 사용합니다. 소스코드를 기계어로 바꾼 후 실행하여 성능을 개선했습니다. 자바스크립트 런타임은 ..