서론 이번에는 지난 시간에 배운 js를 통한 dom 접근 방법들을 활용해 가며 프로그래머스 “2022 Dev-Matching: 웹 프론트엔드 개발자(상반기) 프로그래밍 언어 검색” 과제를 풀어보도록 하겠습니다. 본 글은 프로그래머스 기술 블로그에 기술된 과제 해설을 따라 가되 제 개인적인 코드 해석을 추가하면서 진행됩니다. 문제 소개 image 프로그래머스 에서 풀어볼 수 있습니다. 코드 작성 기본 셋팅 아주 기초적인 html을 작성합니다. style.css는 문제를 풀때 추가 되어 있으나 여기서는 추가하지 않고 하단의 Link에서 추가하도록 하겠습니다. script 태그는 body 태그의 최하단에 위치하는 것이 좋습니다. 왜냐하면 렌더링 엔진이 Html을 파싱하다가 script 태그를 만나게 된다면 Html 문서의 파싱을 중단하고 js 파일을 로드하게 됩니다. 이 경우 html문서를 파싱하는 과정에 있어서 2가지 문제가 발생하게 됩니다. 첫번째는 js 로드가 끝날때까지 화면에 표…

이 문서는 멋쟁이 사자처럼 FE를 위한 교육자료로 작성되었습니다. 👋 state란 우리는 react를 배우기 전 js의 기초 문법을 배우면서 변수를 선언하는 여러 가지 방법에 대해 배웠습니다. var, let, const와 같은 것들이었죠. 우리는 그리고 컴포넌트 내부에 값을 전달하는 방식인 prop을 배웟습니다. 그런데 state는 무엇이고 우리는 왜 배워야 할까요? 그 이유는 state는 setState를 통해서 컴포넌트의 state객체에 대한 업데이트를 실행합니다. 그리고 state의 변화가 감지되면 해당 컴포넌트에 작동하는 부분을 Re-Rendering시키게 됩니다. re-rendering은 간단하게 화면에 뷰를 다시 새롭게 보여준다는 의미입니다. 정확한 표현으로는 조화과정(Reconciliation)이라고 칭합니다. image 위의 사진은 Dom 트리와 Virtual Dom 을 보여줍니다. 여기서 중요한 점은 view를 변형시키는 것이 아닌 render함수로 인해서 새로…

이 문서는 멋쟁이 사자처럼 FE를 위한 교육자료로 작성되었습니다. 멋쟁이 사자처럼 10기 FE 4주차 과제 🦁 반갑습니다 여러분!!☺️ 벌써 react의 정말 재밌는! 필수적인 요소인 hooks를 다뤄보는 시간입니다! 실습 진행방법 기존의 실습들과 동일하게 진행됩니다 이 레포를 fork 한다! fork하여 이동한 자신의 레포에서 깃크라켄을 통해 클론을 받습니다. 클론을 받은 파일을 vs 코드에서 엽니다! vs 코드에서 터미널을 열어서 npm i 후 npm run start 를 입력하면 코드가 실행됩니다! 이번 실습도 2주차와 마찬가지로 3차에 걸쳐서 진행됩니다! 마지막까지 열심히 진행해보시죠 ㅎㅎ 실습 1번문제 InputSample 컴포넌트는 name과 nickname을 입력받아서 render시키는 컴포넌트 입니다. 해당 기능을 수행하기 위해 주석이 있는 부분을 채워 기능을 완성시켜 봅시다 image image 주석을 채워서 name과 nickname 을 입력받아 봅시다! 해당하는 …

이 문서는 멋쟁이 사자처럼 FE를 위한 교육자료로 작성되었습니다. 멋쟁이 사자처럼 10기 FE 3주차 과제 🦁 반갑습니다 여러분!! 지난 2주차 세션 때 React.js에 대해서 재밌게 열심히 실습을 잘 진행하셨나요? 다들 정말 잘하시던데… 처음 배우시는건지 살짝 의문이 드는데 괜찮으시겠어요..? 실습 진행방법 3주차는 과제 중심으로 세션이 진행됩니다! Component를 만들어서 샤샤샥 주어진 홈페이지를 구현하고, PR을 올리고 웹페이지를 배포하세요😀 이 레포를 fork 한다! fork하여 이동한 자신의 레포에서 깃크라켄을 통해 클론을 받습니다. 클론을 받은 파일을 vs 코드에서 엽니다! vs 코드에서 터미널을 열어서 npm run start 를 입력하면 코드가 실행됩니다! 3주차 MISSION : Bootstrap Album 페이지 클론코딩 해오기 https://getbootstrap.com/docs/4.3/examples/album/ 클론코딩(Clone-Coding)이란? :…

이 문서는 멋쟁이 사자처럼 FE를 위한 교육자료로 작성되었습니다. 멋쟁이 사자처럼 10기 FE 2주차 과제 🦁 반갑습니다 여러분!!☺️ 2주차부터 약 4주간 함께 진행할 10기 운영진 이성인입니다 ☺️ react는 크게 어렵지 않습니다! 다같이 열심히 하시죠 ㅎㅎ 실습 진행방법 기존의 실습들과 동일하게 진행됩니다 이 레포를 fork 한다! fork하여 이동한 자신의 레포에서 깃크라켄을 통해 클론을 받습니다. 클론을 받은 파일을 vs 코드에서 엽니다! vs 코드에서 터미널을 열어서 npm run start 를 입력하면 코드가 실행됩니다! 이번 실습은 3차에 걸쳐서 진행됩니다! 마지막까지 열심히 진행해보시죠 ㅎㅎ 실습 1번문제 여러분은 프론트 엔드 작업을 진행하시면서 글자에 효과를 어떻게 주셨나요? 매번 id, class를 통해서 받지 않으셨나요? Text 컴포넌트를 수정하며 다양한 순간에 재사용성이 뛰어난 코드를 만들어봅시다! 제한조건 text-weight , text-size 를 pr…

서론 지금 까지 배웠던 HTML, CSS, JS기초 문법들을 통해서 간단한 기능 구현을 해보겠습니다. 복습 - js 를 통한 dom 접근 간단한 todoList 를 만들어보면서 js를 통해 dom에 접근해 보겠습니다. 평범하게 시작할 수 있는 html 파일에 data 배열 형태로 text를 넣어주었습니다. 그 후 document.querySelector 를 통해 내부의 innerHtml에 접근 하여 그 값을 조작합니다. (querySelector 는 선택한 선택자를 포함한 태그 뭉치들 중에서 가장 ‘첫번째’ 요소를 선택합니다. ([mdn]https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector)) (+) 탐색은 깊이 우선 전위순회를 통해서 찾게 되며 문서의 첫번째 요소부터 시작해 자식노드를 모두 검사합니다. ) data라는 배열에 map 함수를 사용하여 내부의 innerHtml을 변경합니다. 변경될 값을 예상해 보자…

이 문서는 멋쟁이 사자처럼 FE를 위한 교육자료로 작성되었습니다. 실습 목표 js를 통해서 프로그래밍에 언어에 대해서 학습한다. js의 입출력 , 조건문, 반복문, 배열 에 대해 학습합니다. 실습 문제 입출력 Hello World : https://www.acmicpc.net/problem/2557 사칙연산 : https://www.acmicpc.net/problem/10869 조건문 시험 성적 : https://www.acmicpc.net/problem/9498 윤년 : https://www.acmicpc.net/problem/2753 반복문 N 출력 https://www.acmicpc.net/problem/2741 별찍기 -1 https://www.acmicpc.net/problem/2438 배열 최소, 최대 https://www.acmicpc.net/problem/10818 나머지 https://www.acmicpc.net/problem/3052 제출 방법 사전과제의 제출 방…

npx로 시작하는 react! 직접 react를 기반으로 시작해 보겠습니다!! 사전 준비가 몇가지 필요합니다! vs code 상에서 터미널을 통해서 해당 명령어를 입력해 주어야 합니다! (만약 깃크라켄을 통해서 프로젝트를 시작한 경우 프로젝트 명이 결정되어 있고 폴더가 생성되어 있는 경우가 있습니다. 이경우 npx create-react-app . 이라는 명령어를 대신하여 사용합니다. 이럴땐 해당 폴더의 위치에서 create-react-app이 실행됩니다.) 아래와 같이 입력하면 됩니다. 현재 폴더의 위치 : 바탕화면/이성인/) 여기서 start-react 라는 이름으로 폴더가 현재 위치에 생성되게 되며, 해당 위치로 꼭 이동해 주어야 합니다. 현재 폴더의 위치 : 바탕화면/이성인/start-react) 현재 위치를 확인하는 명령어 : pwd (만약 현재 위치에서 이동하고 싶다면 cd 명령어를 통해 이동합니다.) 현재 위치가 생성한 프로젝트명과 동일한 경우 위와같은 명령어를 입력…