JAY⌨️CODE

❤️‍🔥 Liked 요즘 React 수업은 재현님이 반복 학습을 진행하고 있다. 추가로 코어자바스크립트의 지은이 재남님이 번역하신 React 공식문서를 읽으면서 보완학습을 진행하고 있어서 Component, Props, State에 대한 개념은 어렵지 않게 잡을 수 있었다. 리액트 라이브러리의 사용 목적이 재사용성을 위해 상태에 따라 컴포넌트를 사용자 정의 요소로 표현하는 것이므로 동작 원리에 대한 개념을 잡는 것을 중점으로 공부하고 있다. 프로젝트 조편성을 위해 객관식문항을 비롯한 간단한 코딩 테스트를 진행했는데 시간 내에 Javascript 동작이 되도록 구현은 해냈다. 코드 품질은 개선해야겠지만 열심히 순서도를 그리는 연습을 했던 결과가 돌아온 것 같아서 뿌듯! React도 JS 기반의 언어이다 보..

⚠️ 일반적인 조건부 로직으로 사용되는 if문을 다른 작성 패턴으로 대체하는 이유? if문 조건이 한 번에 너무 많은 요소를 비교할 경우 중첩(nested) 조건이 많아지므로 가독성이 떨어진다. 조건식에서 동일한 코드가 반복되는 경우 소스코드가 너무 길어지고 비효율적이다. 특정 부분의 변경이 필요하면 모든 조건을 살펴봐야 하기 때문에 유지보수가 어렵다. 위와 같은 이유로 if, else 문과 같은 조건문을 남발하면 가독성을 해치는 코드를 작성하게 된다. 아래에 이어서 문제를 해결할 수 있는 대안을 소개하고자 한다. if (user) { if (user.accessLevel) { if (user.accessLevel === 'admin') { console.log("관리자님 안녕하세요."); } else ..

❤️‍🔥 Liked 밴딩머신을 JS Class로 만들어서 모듈패턴을 이해해 보는 수업을 했는데 수업 자료를 기반으로 getter와 setter를 활용하면서 직접 만들어보고 회고조원 분과 같이 코드리뷰를 하는 시간을 가졌다. 회고조원 분은 함수형으로 처음부터 끝까지 다 짜셨는데 보면서 문제해결 방식에 대한 영감도 얻을 수 있었고 큰 도움이 됐다. 💙🩵 스터디에서 게임 만들기 실습을 하고 있어서 간단한 가위바위보 게임을 만들었다. 게임을 만드는 게 실무에 꼭 도움이 된다고 할 수는 없겠지만 이론으로만 배운 개념을 어떻게 적용해 볼까, 플로우차트는 어떻게 만들까 로직을 그려보는 훈련이 되는 거 같다. 최종적으로 레트로 미니게임 모음집을 하나 토이프로젝트로 완성해보려고 한다! :) 본격 리액트 시작! JS 서버..

1️⃣ class 란? 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수. 객체를 생산하는 붕어빵 틀과 같은 개념으로 흔히 설명하는데, 생산 도면 혹은 청사진이라고도 표현할 수 있다. class + 이름 + { constructor ... } 로 구성. constructor()는 new 연산자로 호출되는 인스턴스의 기본 상태를 자동으로 설정해주는 생성자 메서드. 특별한 절차 없이 객체를 초기화 할 수 있다. class내부에 있는 Field는 변수와 비슷하게 사용되는데, Constructor와 Method 전체에서 사용되며, 소멸되지 않는다는 특징이 있다. 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것. 이처럼 내부적인 동작은 동일하지..

❤️‍🔥 Liked 드디어 React 시작!.... 가보자고! 🔥🔥🔥 (울지 말고 천천히 말해봐...) 스터디에서 팀 repo를 만들어서 처음으로 git folk를 했다. 진행하면서 CLI 명령어를 보기 쉽게 자료로 정리했는데 곧 포스팅으로 올릴 예정! 협업에 익숙해지고 싶어서 조원들과 같이 알고리즘 문제풀이를 할 수 있도록 Organizations계정도 만들었다. 🙂 이번 주는 메모장 만들기 실습 과제가 있었는데 과제 구현을 하면서 DOM제어와 LocalStorage에 대해 많이 공부할 수 있었다. 새벽 내내 에러와 씨름하다 3시간 자고 수업 들으려고 일어나자마자 내내 안 보이던 수정할 코드가 보이는 경험을 했다. 아직 원하는 기능을 구현하기에 미숙하고 개발 속도도 너무 느리지만 뭔가 일단 만들어 보는..

❤️‍🔥 Liked 정규표현식 진짜... 아득했는데, 다 외워서 능숙하게 사용하는 방법을 습득하기보다는 기본 문법만 숙지하고 패턴은 그때그때 보면서 구현하면 될 것 같다! 객체지향 프로그래밍에 대해 객체리터럴 문법, 프로토타입 문법, 클래스 문법을 비교해서 작성해 보면서 차이점을 비교해 볼 수 있어서 좋았다. 주말에 할 일은 너무 많고 계획도 밀렸는데 혼자 프로토타입에 꽂혀서 공부하다 보니 몇 시간이 후루룩... 그래도 시간이 하나도 아깝지 않았다. 프로토타입 공부하다가 closer 패턴을 이해해버림... 👍 JS 초보자 스터디에 가입했다. 비전공자도 있고 나처럼 다른 업무를 하다가 개발자로 전향하신 분도 있고, 숙련자가 없으면 효율이 떨어질 수 있는데 모두 적극적으로 스터디에 참여하면서 JS 지식을 공..

1️⃣ 객체 지향 프로그래밍이란? 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 객체를 데이터 목록으로 보는 시각에서 벗어나 각각 독립적인 기능을 하는 부품과 같이 상호작용하도록 하는 프로그래밍 방법론. 추상화 상속 다형성 캡슐화 4가지의 특징을 갖고 있으며, 설계의 이점들을 가장 잘 살릴 수 있는 방향으로 각 객체들의 역할을 정의해 나가는 것에 초점을 맞춰 프로그래밍을 진행한다. 객체 지향적 설계를 통해 직관성과 재사용성이 높은 코드를 작성할 수 있으며, 반복 없이 간결하고 변경이 용이한 유연한 프로그램을 만들 수 있다는 장점이 있다. 대표적인 객체 지향 설계 요소로 class가 있다. 해당 게시물에서는 객체리터럴 프로토타입 클래스에 대한 예제를 소개하고 간단하게..

❤️‍🔥 Liked 줌이라곤 회의할 때 밖에 사용해보지 않은 나...ㅋㅋㅋ 온라인으로 수업을 듣고 채팅으로 사람들과 대화하는 건 아직도 낯설지만 그래도 새로운 사람들을 알아가는 건 참 즐거운 일이다. 각자 다른 환경에서 다른 사연으로 어렵게 지원해서 치열하게 학습하고 있는 동기들의 개인적인 면모를 들여다볼 때마다 참 이 경험이 소중하기도 하고 시간이 지나도 기억에 남겠다는 생각이 든다. 이번 주말 거의 대부분의 시간을 집에서 복습하는데 보냈다. 수업 시간에 다 끝내지 못했던 mbti 페이지도 완성해서 배포했고, 함수, 객체, 배열, 배열메소드를 유튭 강의랑 병행해서 복습하다 보니 예전에는 전혀 이해하지 못했던 내용들이 자연스럽게 습득된 게 느껴졌다. 몇 번을 다시 보고 또 봤는지...... 자바스크립트를..

1️⃣ @mixin 🌟 Sass에서 @mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일 그룹을 정의할 수 있다. @mixin지시문을 통해 mixin을 생성하고 필요한 경우 @include기능을 통해 불러와서 값을 넣어 재사용하는 방식. @mixin을 더 유연하게 사용하기 위해서 Arguments 값을 전달할 수도 있다. ( $key : value ) 형태로 작성하면 arguments가 공란일 때 기본값도 설정할 수 있다. (기본 값은 생략 가능) 자동화 되어있는 _mixin.scss 그대로 가져와서 사용해 보는 것을 추천. 실제 현업에서도 _mixin은 새로 작성해서 사용하지 않고 고정되어 있는 경우가 많다. ⚠️ 반복하는 모든 코드를 하나의 @mixin에 몰아넣어서 사용하는 건 권장하..

1️⃣ 비슷한 기능을 하는 for..in, for ...of 무슨 차이가 있을까? JavaScript는 Object, Array, Map 및 String과 같은 Collection을 반복하는 여러 메서드를 제공한다. for in과 for of는 ES6에서 요소를 순회하기 위한 목적으로 새롭게 추가 되었다. 두 메서드의 구현 방식은 동일하다. 그렇다면 차이점은 뭘까? 아래 예제를 통해 살펴보자. 1️⃣ for...in loop ✅ Object와 함께 for...in 사용 for...in은 Object의 key를 순회. 아래 예시와 같이 사용하면 key를 순회하면서 value값도 함께 표시할 수 있다. // for..in Input const car = { make: "🚘Tesla", model: "Mode..

❤️‍🔥 Liked JavaScript 예습했던 게 살짝 빛을 발했던 한 주. 그동안 예습했던 거 4일 만에 진도 다 나간 거 실화인가... 매일 만족도를 체크하는데 이번 주는 100%가 없다...🫠 그만큼 쉽지 않았던 자바스크립트 기초. 그나마 예습해서 다행이었다고 생각한다. 차근차근 정확히 이 기술을 습득하는 데 집중하자. 자바스크립트에서 너무 헷갈리는 배열 메소드들... 아직 완벽하게 손에 익은 건 아니지만 입문자 수준에 맞게 다 풀어서 설명해주셔서 큰 도움이 됐다. 능숙하게 활용하는 날이 오길 바라면서 열심히 복습하자. 호준 님이 다 이해하려고 하지 말고 외울 건 외워라! 하고 암기할 것들을 따로 알려주셔서 좋았다. 이해해야 하는 것도 있고 암기할 것도 있을 텐데 자바스크립트 입문자는 구분하기 어..

❤️‍🔥 Liked 이번 주는 온라인 학습이 있어서 일단 프로덕트를 몇 개 따라서 만들어봤는데 결과물이 나오니까 재밌었다.(물론 어려움....) 어렵게만 생각했던 Sass를 호준님 강의로 드디어 입문하게 되었다. 실무에서 가장 유용하다는 mixin 기능을 실습해보고 싶어서 과제 하나를 Sass로 구현해 보면서 감을 잡았다. Java Script와 비슷한 구석이 있어서 스크립트를 잘 다루게 되면 사용할 수 있는 기능이 더 많을 것 같아서 나중에 다시 활용해 봐야겠다! 회고조분들에게 화면공유를 받아서 과제에 있는 JavaScript 버튼 구현을 배웠는데 유익했다. 이번주는 같이 게임도 하고 점점 편해지는 회고조 활동, 그리고 특이하고 재밌는 멘토님 덕분에 많이 웃었던 한 주였다. ㅋㅋㅋㅋ 😊 멋사 특강 강사..

1️⃣ Sass 란? Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 브라우저가 Sass파일을 직접 읽지 못하기 때문에 Sass를 기반으로 개발한 후, 일반 CSS로 컴파일! 컴파일 하는 방법으로는 터미널을 이용하는 방법과, VS Code의 익스텐션을 사용하는 방법이 있다. Sass와 Scss가 있는데 일반적으로 CSS와 동일하게 중괄호를 사용하는 Scss를 사용. 본 포스팅은 Scss문법을 기준으로 작성되어 있습니다. :) //SCSS 형식 {} css와 동일하게 중괄호를 사용하기 때문에 권장됩니다. $font-stack: Helvetica, sans-serif; $primary-color : #333; body { font: 100% $font-stack color: $pri..

❤️‍🔥 Liked 원래 seo에 관심이 많았는데 불확실한 정보나 광고가 많다 보니 양질의 정보를 얻기 힘들었는데 마케터 수준의 딥한 정보는 아니어도 정리된 가이드를 받을 수 있어서 좋았다. seo 관련 tag를 스니펫으로 만들어 놓는 아이디어... 누가 이런 정보를 선뜻 가르쳐줄까? 멋사에서는 개발 기술은 물론이고 유용한 꿀팁들을 많이 알려준다. 현업에서 정말 큰 도움이 될 것 같아서 감사하다. 이번 주는 주로 실습이 많았고 강사님이 코드리뷰를 해주는 기회가 있었는데 완성은 못 했지만 운 좋게 리뷰를 받게 되었다. 나름 꼼꼼히 작성했는데도 실수투성이 내 코드...❤️‍🩹 부족한 점을 확실히 보완할 수 있는 기회가 생겨서 기뻤다. 마크업은 비교적 저평가받는 기술인데 시멘틱 마크업 기술을 모르고 하는 소리..

1️⃣ Transform : translate() 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 transform: translate(-50%, -50%); 값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성! 요소 크기에 대한 transform 값을 퍼센티지로 주기 때문에 유지보수에 용이해서 가장 보편적으로 사용하는 방법. .parent { /* 부모 ..

❤️‍🔥 Liked 이번 주는 실습이 많았다. 따라서 타이핑만 하는 것보다 확실히 실습을 하고 나니 반응형 웹을 구현하는 css들에 대해서 관념으로만 알고 있던 것들의 작동 원리를 파악하게 되었다. 저번주에 이어 이번주에도 특강이 두 번 있었는데 강의의 질이 정말 좋다고 느꼈다. 네이버 현업 개발자 우상훈님의 강의는 실제 경험들을 바탕으로 문제 해결을 위해 어떻게 적정 기술을 구현하고 출시할 것인지에 대한 현실적인 인사이트를 얻을 수 있어서 좋았다. 빔캠프 이종찬님은 그냥 기술로만 넘어갔던 css 작동 원리에 대해 정말 쉽고 명확하게 설명을 해주신다. 덕분에 css flex나 margin 등 기초적이지만 은근히 헷갈리는 요소들의 개념을 정확하게 세울 수 있었다. 타고난 언변가! 왜 그렇게 모두가 좋아하..

1️⃣ 태그의 src 와 alt 속성img의 src 속성은 브라우저에게 이미지 파일의 경로, 파일명을 알려주는 역할.img태그 안의 이미지 파일이 보이지 않을 때 alt 속성은 이미지 대신 텍스트를 표시하는 역할. 스크린리더와 같이 시각적으로 접근이 어려운 경우에도 이미지에 대한 정보를 텍스트로 제공.alt 속성은 SEO(Search Engine Optimization)에 도움된다는 사실! 저는 블로그 이미지에도 전부 alt 속성을 입력하고 있습니다! :) 2️⃣ 반응형 이미지를 위한 srcset 속성반응형을 위해 사용하는 속성.여러 해상도에서도 브라우저가 자동으로 최상의 이미지를 출력할 수 있게 선택권을 넘긴다.x(pixel density) 와 w(viewport) 서술자는 동시에 사용 불가.srcse..

1️⃣ Grid 란? display:grid 를 선언하면 자식에게 적용. 부모요소는 grid-container 자식요소는 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템. Gap 을 통해 셀과 셀사이의 간격을 설정. 2️⃣ grid-container ↔️ grid-template-columns 열방향 그리드 트랙의 사이즈를 설정. ↕️ grid-template-rows 행방향 그리드 트랙의 사이즈를 설정. .container{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 200px 100px; } .container{ display:grid; grid-template-columns: 1fr ..

❤️‍🔥 Liked 1주일 늦게 합류한 멋사 FES 5기, 회고조를 잘 만나야 한다고 들었는데 나는 운이 좋았던 것 같다! (우리조 최고 🦁) 시스템이 체계적으로 준비되어 있다. 비대면 온라인 수업이지만 수강생 그룹별로 매니저가 배정되어 있어서 실시간 피드백을 받을 수 있다. 제출할 서류가 있었는데 운영을 담당하는 매니저가 있어서 쉽게 DM을 주고받으며 바로 처리! 전 기수들의 시행착오를 겪으며 더 나은 교육체계를 만들기 위해 노력하는 모습을 보면 앞으로 제공될 수업은 얼마나 더 좋을까 기대도 되고, 지원해 주는 만큼 열심히 습득하고 따라가기만 하면 되겠다는 생각이 든다. 질문을 해도 답변을 잘 해주는 분위기. 짧은 4개월 과정인 만큼 나처럼 내성적인 사람도 좀 더 적극적으로 행동한다면 훨씬 얻어갈 게 ..

1️⃣ flex의 구조 flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃. 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능! 부모 요소는 flex-container 자식 요소는 flex-item 2️⃣ flex-direction 아이템을 배치할 때 주축과 방향을 지정! ➡️ row 기본값. 왼쪽에서 오른쪽 배치. ⬇️ column 위에서 아래로 배치. ⬅️ row-reverse 오른쪽에서 왼쪽 배치. ⬆️ column-reverse 아래에서 위로 배치. 3️⃣ Justify-content row, column의 주축을 기준으로 배치. flex-start 기본 값, 시작 축 기준으로 배치. flex-end 마지막 축 기준으로 ..

1️⃣ if, else if else조건문은 JS에서 가장 기본적인 제어문 중 하나. if문은 조건식이 True인 경우에 코드를 실행. else문은 조건식이 False인 경우에 실행. //조건문 구조 if (num > 10) { console.log('🔍 num이 10보다 크다.'); } else { console.log('🔍 num이 10과 같거나 작다.'); } const won = 1000; if (won > 800) { console.log('🥖800원에 구매 가능'); } else if (won > 400) { console.log('🧀400원에 구매 가능'); } else { console.log('돈이 없는 분은 구매할 수 없습니다...'); } // = 🥖800원에 구매 가능 //2중 조건..

1️⃣ for문 가장 보편적인 반목문! for() 조건이 true 반복문 실행, false면 실행 안 함. for( 초기화; 조건; 종료식 ) { 반복 실행 내용 } 구조 종료식에서 숫자 + ++ 는 한 개씩 증가시킨다는 뜻. for(;;) for문 무한 반복 //기본 구조 for( let i = 0; i < 10; i++) { console.log(`😀Hello for ${i}`) } // = '😀Hello for 0' ~ '😀Hello for 9' //구구단 예제 // 9단 for (let i = 1; i

HTML 삽입 미리보기할 수 없는 소스 1️⃣ 함수, function 이란? 자바스크립트에서 function은 재사용 가능한 코드 블록을 의미. 아키텍처 파악, 유지 보수에도 유리! function 은 변수처럼 선언 가능. 입력값 parameter 을 받아 결과값을 출력 return 하는 방식. 보통 function(인자)라고 말하는데, parameter는 선언할 때, argument 는 실제 사용될 때의 용어. 파선아실! 암기. function은 다른 function의 (prarameter)로도 전달 가능. 2️⃣ 자바스크립트의 호이스팅 Hoisting 과 함수 선언 Hoisting은 변수와 함수 선언이 Scope의 맨 위로 옮겨지는 것. function 은 변수 var let const 와 마찬가지로..

Object를 학습하다가 나온 Map! Map이 유용한 건 알겠는데 뭔지 잘 모르겠다... (비전공 입문자의 눈물🥲) 간단하게 정리하면 Map은 {Object}와 다르게 기본 Key를 포함하지 않고 입력된 내용만 포함한다. Map의 Key는 모든 값(function, array …등) 설정 가능! Key - value 데이터 추가,제거 성능도 object보다 우수하고 자체 순회도 가능하다. 👍 1️⃣ Map 생성 Map 생성 구조는 변수명 = new Map() → 변수명.set(key, value) Map의 .get 메소드는 Map 객체 내에서 특정 key의 value를 반환. // 신규 Map 생성 let weather = new Map(); weather.set('sunny', '🌞') weather..

[ Array ]와 { Object }는 각각 JS에서 여러 개의 값을 하나의 변수에 저장할 수 있게 하는 데이터 구조이다. 항상 보는 구조지만 비전공자 JS 입문자는 헷갈려서 이해를 위해 정리해본다. 1️⃣ [ Array ] 배열 [대괄호]를 통해 표현. 대괄호 안의 항목의 명칭은 [ element ] 0부터 시작해서 [0, 1, 2 ]… 와 같은 형식으로 데이터 저장. JS에서는 Array도 Object에 포함! 특별한 Object로는 Array나 Function이 있다. Array 접근 및 수정 예제 // Array 생성 const fruit = [ '🍑Peach', '🍒Cherry', '🍋Lemon']; // 맨 앞에 신규 element 추가 fruit.unshift('🍇Grape') // 맨 뒤..

😰 겨우 평정심 유지 중인 예비합격자 오늘 멋쟁이 사자처럼 프론트엔드 스쿨 5기 발표가 3시에 있기 때문에 아침부터 계속 테킷 홈페이지 접속을 오갔다. 결과는... 예비합격! 구글링해보니 예비에서 최종합격까지 달성한 분들도 계신 것 같지만.. 주로 합격한 분들이 글을 게시했을 거라고 생각한다. 그래서 나는 최종 결과가 불합격으로 나오더라도 데이터를 남겨두려고 한다. 🤓 아직 최종 결과가 남았다! 예비합격이라는 결과에 아쉬운 마음은 어쩔 수 없지만 후회는 없다. ...... 그래서 내 예비 순번은 몇번째인지...? 결과와 관계 없이 주어진 시간과 환경 안에서 내가할 수 있는 만큼은 했다고 생각한다. 아쉬움은 그만 이제 할 일을 하자 .... 지치지 말고 JS복습 가보자고! ✏️ 🥳 예비합격에서 최종합격으로..

💡 스스로의 가치를 확장하고 싶은 욕구 지방에 거주하는 30대 여성인 내 주변 환경은 둘로 갈리기 시작했다. 직종을 바꾸거나 사업을 시작하는 이들. 그리고 현업에서 꾸준히 전문성을 유지하거나 출산 등으로 일하기를 멈춘 이들. 나는 누구나 도태될 수 있는 업계에서 언제라도 대체될 수 있다는 불안감이 항상 있었다. 업무 후 남는 시간에 사이드잡에 도전해서 꽤 많은 수익을 얻는 경험도 했지만 경쟁이 심한 업계 특성상 언제든 대체될 수 있다는 불안감은 여전했다. 이 일을 하는 게 너무 즐거운데 전문성을 더 확장할 수 있는 방법이 없을까? 단 기간 돈을 많이 버는 것보다 스스로 만족스럽게 일할 기술을 갖고 싶다는 고민 끝에 나는 프론트엔드 개발 영역에 뛰어들기로 결심했다. 업무와 병행해 자바스크립트 학습을 시작했..