NIKE 공식몰 신제품 프로모션 사이트 기획 제작 ✔️ 진행 기간 : 2022.12.02 - 2022.12.16 (2주) ✔️ 전체 인원 : Front-end(3인), Back-end(2인) ✔️ 프로젝트 요약 목적 NIKE+ 자체 멤버십 운영을 통해 회원만을

✅ Side Effect 💡 프로그래밍에서 “부작용(Side Effect)”? 코드가 의도한 주된 효과 외 주기적으로 발생하는 효과 프로그램을 이루는 가장 작은 단위 = 함수에서 쓰이는 용어 함수의 본질적인 역할⇒ input을 받아 output을 산출하는 것 함수의 부작용 ⇒ input을 받아 output을 산출하는 것 이외의 모든 행위 Side E...

✅ 암호화의 종류 특별한 지식을 소유한 사람들을 제외하고는 누구든지 읽어볼 수 없도록 알고리즘을 이용하여 정보(평문을 가리킴)를 전달하는 과정을 말한다 이러한 과정을 통해 암호화된 정보(암호문)를 낳는다. 이에 역행하는 과정을 해독 또는 디크립션(decryption)

✅ 인증이란? 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지를 결정하는 과정 인증 기술은 사용자의 자격 증명 정보가 데이터 인증 서버의 자격 증명 정보와 일치하는지 확인하여 인증 절차를 통과한 시스템에 대해 액세스 제어를 제공한다 📌 인증의 유형 SFA(

✅ Hook 함수(Component)에서 어떠한 행동(state 관리 / lifecycle 관리)을 할 수 있도록 연동(hook in)해주는 "함수"를 의미 hooks의 모임 === 📌 Hook의 등장배경 react 초창기, 클래스 컴포넌트에서만 state(

✅ Router Route : "경로" Routing : "경로를 찾는 행위" Router : Routing을 해주는 "도구" 다른 경로(url 주소)에 따라 다른 View를 보여주는 것 > 웹페이지 : 웹브라우저를 통해 보여지는 문서(페이지) 웹사이트 : 웹페이지들

👇 선행 개념 > #### 💡 "절차적(명령형)"프로그래밍과 "선언적" 프로그래밍의 차이 절차적(명령형) => 복잡, 유지보수의 어려움 = 생산력 저하 -원하는 결과를 위해 "어떻게(How)"해야하는지에 중점 -원하는 결과를 만들기 위한 "절차"를 프로그래밍 하는 방식 ex) Vanila Js DOM 방식 선언적 => 단순, 유지보수...

👇 선행 개념 사용자 인터페이스(UI, User Interface) : UI는 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면 = 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체를 말한다 사용자 경험(UX, User Experience) : 사용자 경험, 어떠한 제품/서비스를 직간접적으로 이용하며 느끼는 종합적인 만족을 말한다 > ...

✅ Branch 독립적으로 어떤 작업을 진행하기 위한 개념인 브랜치는 다른 브랜치와 병합(Merge)함으로써, **작업한 내용을 "새로운 하나의 브랜치"로 모을 수 있다 ** clone 원격저장소를 복제하는 명령어 저장할 원격저장소의 주소를 가져와 아래 명령어와 함께

👇 선행 개념 📌 Repositories(저장소) : Git에서 사용하는 프로젝트 저장소, 폴더의 개념(= directory, 디렉토리라 불림) Local repository: : 작업자의 개발환경(PC)에 저장된 로컬(Local)버전의 프로젝트 저장소 Remote repository : 외부(원격 서버)버전의 프로젝트 저장소, 코드를 공유, 확인, ...

👇 복습하고 넘어가기 * "이미지와 배경" * > #### 💡 웹페이지에 이미지를 추가하는 2가지 방법 * HTML 📖 * 태그로 이미지 넣기 -포털사이트에서 이미지 검색에 노출이 필요한 경우 -웹페이지에서 중요한 역할을 하는 경우 ✨ 이미지가 로드 되지 않았을때, alt 속성 안의 값으로 대체 표현됨(background-image는 ...

👇 선행 개념 리터럴(Literal) : 사람이 이해할 수 있는 문자, 약속된 기호를 통해 값을 나타내는 표기법이다 문(Statement) : 프로그램을 구성하는 기본단위이자 최소 실행단위, 컴퓨터에 내리는 명령에 해당한다 선언문, 할당문, 반복문 토큰(Token) : 문법적으로 더 이상 나눌 수 없는 기본 요소를 말한다 표현식(Expression)...

👇 복습하고 넘어가기 * "원시 타입과 참조 타입의 값"* > ### 📖 원시 타입의 값 > 불변성을 가지며, 변수가 가리키는 메모리 셀 안에 실제 값이 할당되어 있다 만약, 원시 타입의 값을 변경하고 싶다면 재할당을 통해 새로운 메모리 셀 안에 재할당할 값을 넣고, 변수는 새로운 메모리 주소 안에 재할당 된 값을 가리키게 된다 💡 그럼 여기...

✅ Flexbox 이전의 웹 페이지의 레이아웃은 CSS display, float, position과 같은 속성을 사용해 구현했지만, 이 속성들은 구현 방법이 복잡하고 표현할 수 있는 레이아웃에 한계가 있다 flexbox는 이전 레이아웃 구현방식의 단점을 보완한 방식으로 화면의 크기가 동적으로 변할때에도 요소의 크기와 순서를 ✨유연하게 배치✨할 수 있다...

✅ 데이터 타입(Data Type) 📌 데이터 타입의 필요성 값을 저장할때 확보할 메모리 공간의 크기를 결정하기 위해서 값을 참조할때 한 번에 읽어들일 메모리 공간의 크기를 결정하기 위해서 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해서 📌 동적타이핑 자바스크립트는 변수를 선언할때 var, let, const와 같은 키워드를 사용해 변수...

✅ 원시 타입과 참조 타입 📌 원시 타입의 값(Immutable Value) 메모리셀 안에 값이 위치하는 "변경이 불가능한 값" 원시값을 변수에 할당하게 되면, 변수는 "실제 값"을 가리킨다 Number, String, Boolean, Null, Undefined, Symbol 💡 불변성(Immutability) 원시 타입의 값은 변경이 불가능한 값이...

✅ 변수(Variables) 변수는 하나의 값을 저장하기 위해 "확보한 메모리 공간" 메모리 공간을 "식별하기 위한"이름(값의 위치를 가리키는 상징적인 이름으로 "식별자(Identifier)"라고도 한다) > ### 💡 데이터와 메모리 * 데이터(Data) * : 신호, 숫자, 기호, 문자 형태의 의미단위로 가공 되지 않은 상태의 개체 정보(Infoma...

👇 복습하고 넘어가기 Block과 Inline ✅ Margin auto 기본적으로 block요소는 자기자신이 가로폭을 100%차지하기 때문에, CSS에서 width값을 지정하면 그 크기만큼 가로폭을 차지하게 된다 이때, margin에 auto를 지정하면 요소를 가운데 정렬할 수 있다 ✨ > 👇 Margin이 헷갈린다면? [Margin과 Paddin...

✅ Block Elements 문서의 틀(Frame) 가로폭을 자신이 100% 차지해 기본적으로 세로정렬처럼 보인다 width, height, margin, padding 속성을 모두 반영한다 ⭕️ 🙆‍♀️ ⭕️ * 대표적인 요소 * , , , ~ , , , , , ✅ Inline Elements 틀 안의 내용(Contents) 자기자신의 크기만큼 ...

✅ 이미지(Image) 📌 속성 src : source의 약자로 이미지 파일의 경로또는 url주소를 표시한다 alt : 이미지를 불러올 수 없을 때 대신 보여줄 텍스트(대체글)를 표시한다 >💡 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text) >1. 시각 장애자인 경우 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)...