프론트엔드

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Suite Landing Page FOCUS ON This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test! 반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요! WHAT TO DO? - 기본적인 레이아웃 구조 작업을 했다! text-transform : 태그 안에 ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? WHAT TO DO? - 페이지에 있는 곡선 부분을 CSS로 구현해보았다. -..

- TypeScript의 동작 원리에 대해 설명해 주세요.- 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. TypeScript의 동작 원리타입 스크립트의 동작 원리를 설명하기 위해서는 다른 언어의 동작 원리와 다르다는 이야기를 해야하기 때문에 다른 프로그래밍 언어는 어떻게 동작하는지 먼저 알아보자.다른 프로그래밍 언어의 동작 원리프로그래밍 언어는 컴퓨터가 사용하는 기계어를 사람이 작성할 수 있게 만들어주는 것이다.이때, 대다수의 프로그래밍 언어는 컴퓨터가 이해할 수 있도록 기계어로 변환해주는 과정을 거치는데 이를 컴파일(Compile)이라고 한다. 컴파일은 컴파일러(Compiler)이 수행하게 되는데, 자바스크립트나 자바 같은 프로그래밍 언어는 바이트 코드라는 (통칭)..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? (나는 안만들고 이미지로 떼웠기 때문에 아주 놀랐....구현해야겠다ㅜㅠ) WH..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Workit Landing Page FOCUS ON This HTML and CSS-only landing page will be an excellent test of your UI and responsive skills. There’s also some fun to be had creating the curved section borders! UI와 반응형을 제작하는 데 도움이 된다고 합니다. 곡선 섹션 경계를 만드는 것도 재미가 있다고..!? WHAT TO DO? - 오늘은 PC 화면만 구현해봤다. - 겹쳐있는 듯한 레..

**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**내용은 유사하지만, 조금 더 보완해서 게시했습니다! - Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요.- Git Flow 브랜치 전략에 대해 설명해 주세요. Branch Merge란?: merge, 병합하다 합병하다라는 뜻으로, git에서 branch를 나누어 작업을 한 후 나누었던 브랜치들을 다시 합치는 것을 의미합니다. 1. Merge commit: 합치는 것과 합쳐지는 것의 데이터를 모두 남기면서 새로운 커밋을 형성하는 방법 # 장점히스토리를 보존할 수 있음 -> 프로젝트 진행상황 파악이 용이하다.커밋 아이디가 바뀌지 않아서 squash나 rebase를 사용하기 쉽다.# 단점커밋이..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Single price grid component FOCUS ON In this challenge, you will build out the pricing component to the designs provided. This is perfect for beginners and people who want to complete a smaller challenge. 프로젝트 디자인에 대한 설명이네요 (제공된 디자인에 맞춰 가격 정보를 구성해라) WHAT TO DO? - 그리드를 이용해서 레이아웃을 짰는데, grid-area ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : NFT Preview Card Component FOCUS ON This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with. HTML과 CSS를 갓시작한 사람에게 좋을 거라고 하는 군요. WHAT TO DO? - 작업 전반적으로는 쉽다고 느꼈으나, 메인 커버 이미지 hover 효과 접근을 너무 어렵게 시작했다. 처음으로 했던 생각 눈 아이콘과 배경 색상을 구분 ..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Recipe page FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. 프론트엔드를 추천해준 분에게 1차 완성본에 대한 피드백을 받아봤는데, 생각보다 내 코드에 수정할 부분이 많았다. 많은 걸 깨달았던 좋은 피드백 시간 👍 피드백에서 알 수 있었던 내용 height 값을 임의로 지정하는 것은 나쁜 습관! ( 유연성을 해침 ) 상속을 고..

WHAT Frontenc Mentor? https://www.frontendmentor.io/challenges?sort=difficulty%7Casc CHALLENGE TITLE : Product Preview Card Component FOCUS ON This HTML & CSS-only challenge will be perfect for anyone starting to build responsive projects. 반응형 페이지를 만드는 데에 도움이 된다고 하네요. WHAT TO DO? - 상품 이미지에 hover 시, 자연스럽게 확대되는 것을 추가해서 구현해봤다. transition 을 처음 이용해봤는데, 제대로 이해하고 쓴 것 같지는 않지만 그래도 정상적으로 동작하게 만들었다는게 스스로 신..