JAY⌨️CODE

❤️‍🔥 Liked 멋쟁이 사자처럼 프론트엔드 5기를 수료하면서 가장 크게 배워간 것은 협업 능력과 팀 문화인 것 같다. 실제로 경험해 보니 정기적으로 진행되는 수업이나 프로젝트 과정에 몰두하다 보면 스스로를 한계까지 몰아가기도 하는데 외부에 있는 친한 친구들 보다도 같은 목표를 가지고 공부하는 동료들에게 많이 의지할 수 있었다. 나이나, 지역 등 환경의 차이를 넘어서서 끈끈하게 서로 응원해 주고 지지해주고 있다는 느낌을 자주 받을 수 있다. 같은 목표를 두고 있는데 경쟁하지 않고 서로 응원해 주는 소중한 경험은 사회에서 쉽게 얻을 수 없기 때문에 더 소중했던 경험! 팀문화가 생성될 수 있도록 분위기를 조성해주는 운영진 분들의 능력이 정말 탁월하다고 느꼈다. 덕분에 더 열심히 해서 기대 이상으로 성장할 ..

❤️‍🔥 Liked 프로그래머스 0단계를 꾸준히 풀고 있는데 대부분의 문제를 배열 형식으로 메소드체이닝해서 풀고 있었지 데이터를 저장하고 관리하는 자료구조 방법론으로 접근하기는 처음이었다. 자료구조에 작동 방식에 따른 성능 차이에 대한 지식을 보완할 수 있었고 절차적 해결력을 키우는 데 도움이 되었다. 컴퓨터의 논리로 사고하는 것을 더 연습해야겠다. Jasmin, Jest를 사용해서 간단한 TDD를 진행해 봤는데, 실무에서 주니어 개발자가 바로 투입되는 영역은 아닐지라도 수업을 통해 전체적인 TDD 개발 프로세스를 이해해 볼 수 있는 경험이라 유익했다. 장애인, 소수자 인권을 위해 제도를 개선하기 위해서는 많은 투쟁과 비용, 시간이 필요하다. 이번주, 카카오 소속 김혜일님의 웹 접근성 특강을 통해 결함을..

❤️‍🔥 Liked 이번주 수업에서 git 심화과정이 있어서 좋았다. 범재강사님이 일부러 팀끼리 PR, Merge 과정에서 에러가 나는 상황을 만들었고, History가 꼬이는 화면을 보여주시면서 해결하는 걸 보니 확실히 도움이 됐다. 실제 현업에서 남기는 커밋 메시지와 기록을 보는 것도 큰 동기부여가 되었다. React 마지막 파트에서 customHook을 배우면서 무한 스크롤을 구현했는데 꿀잼! 왜 재밌어지자마자 끝나버리니 리액트... 과정이 너무 짧아요... 계속 배우고 싶어요... promise, fetch 계속해도 이해가 안 가고 어렵더니 그냥 통째로 외워버리니 편-안. API를 가져오는 구조에 대해서는 충분히 이해했다는 생각이 들어서 스니펫으로 만들어버렸다. 주말에 공공 API 가져와서 실습해..

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

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

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

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

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

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

❤️‍🔥 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 마지막 축 기준으로 ..

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

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