위코드 공부 목록들(wecode Study)

\> wecode 사전 Study의 1주차 Keywords• HTML, CSS란 무엇이며 필요한 이유• HTML, CSS, JavaScript의 관계• .html, .css, .js세 종류의 파일을 연결하는 방법• script 태그의 위치에 따른 차이점• 웹 페이지에서

Javascript 설명을 찾아보거나 공부를 하다보면 자주 언급되는 단어가 있다. 그것은 바로 DOM이다. 그래서 그 개념에 대해서 알아보고자 공부를 해보면 아래와 같은 자료들을 찾을 수 있다.DOM 이란?문서 객체 모델(The Document Object Model,

Assignment > fruits 라는 배열이 있습니다. 'ap'가 들어간 과일들로 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요. 결과는 아래와 같아야 합니다. [ 'apple', 'grapes' ] [ 'apple', 'grapes' ] *힌트:

splice 3Assignment시장을 봐왔는데 바구니를 보니 곰팡이가 피어있습니다.바구니에서 곰팡이를 제거하는 함수를 작성해주세요!let basket = \['양파','곰팡이','곰팡이','빵','딸기잼','귤','곰팡이','사과'];removeGerm(basket)

getAllLettersAssignmentfor문을 사용하여 getAllLetters 함수를 작성하세요.단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다.만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다.

심화 - 인사봇여러분은 IT 컨퍼런스의 주최자가 되었습니다.행사장에 들어오는 사람에게 자동으로 인사해주는 인사봇을 만드려고 합니다.처음 보는 사람은 숫자 0으로, 한번 봤던 사람은 숫자 1로 표기된 배열이 준비되어 있습니다.처음 보는 사람에게는 '안녕하세요' 라는 인사

다음과 같이 중첩된 객체에서 'simple'을 출력하려면 어떻게 접근해야할까?<정답>우선, 객체를 호출 하는 방식을 써서 type에 접근한다.=> nestedObj.type그 다음에 'comment-type'에 접근한다.=> nestedObj.type'commen

Assignment그 동안에는 특정값을 구해서 return했다면,이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.getData에 배열 세 개를 인자로 넘길 것이고,이 배열 세 개를 조합해서 하나의 새로운 객체를 만들 것입니다.getData는 세 개의

accessObject 함수를 작성해주세요.myStorage 객체의 속성에 접근하여 glove box 프로퍼티의 값을 변수 gloveBoxContents에 대입해주세요.함수의 리턴값은 glove box 프로퍼티의 값이 되어야 합니다. // 아래의 코드를 수정하지마세요

accessArray 함수를 작성해주세요.함수의 리턴값이 "pine" 이 될 수 있도록 해주세요.<결과>

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."현재 인터넷은 세상을 구성하는 한 가지 요소라고 할 수 있다

position 속성 - relative, absolute, fixedposition 속성은 문서 상에 요소를 배치하는 방법을 지정할 때 사용한다.top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.position: relative;

Replit HTML & CSS Wrap Up 세션에서의 CSS Bottom up 방식에 대한 수업 설명에 대한 간략한 정리 및 메모(멘토 안도현님)해당 화면의 전체를 감싸고 있는 container는 432의 너비를 가지고 있다.그러나 도현님은 weegleContain

findSmallestElement 함수를 구현해 주세요.findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.arr 의 값들 중 가장 작은 값을 리턴 해주세요.만일 arr 가 비어있으면 0을 리턴 해주세요.예를 들어, 다음과 같은 배

AssignmentdivideArrayInHalf 함수를 다음과 같이 구현해주세요.divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다.divideAr

범위를 가진 랜덤함수를 구하는 법Math,random()\*(최대값 - 최소값) + 최소값처음에 왜 이렇게 되는 건지 이해가 가지 않았다.그래서 계속 구글 검색을 하면서 여러 블로그들을 읽으면서 이 수학적 사고를 이해하려고 했다.예를들어 30, 100이 주어졌다.30에

AssignmenthandleEdit 함수를 구현해 주세요.쇼핑몰 회원가입에서 한 번 쯤은 아래와 같은 문구를 보셨을 겁니다.환영합니다. 위코드님!회원가입 기념으로 쿠폰을 적립해 드렸습니다.환영합니다. 위코드님!회원가입 기념으로 쿠폰을 적립해 드렸습니다.이러한 문구에서

구현사항id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요. 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!지난 주까지만 해도 화면 weegle 화면 구성도 어떻게 해야할지 몰라서 쩔쩔매었으나, 28기 동기 분들의 도움과 멘토님들의 가르침으로

위스타그램 댓글 기능을 JS기능을 통해 만들었다.input 안에 글을 쓰고 그것을 Enter나 게시라는 버튼을 클릭했을 때 댓글이 업데이트 되게끔 만드는 것이 목표다.게시라는 버튼을 클릭해서 업데이트 하는 법논리 순서: 게시 버튼에서 클릭이라는 이벤트가 일어나면 인지하

Assignment아래 설명을 읽고 getExamResult 함수를 구현하세요.인자 scores 는 다음과 같은 객체입니다. 객체의 요소의 갯수 및 키의 이름들은 달라질 수 있습니다. 객체의 값은 다음 9가지 문자열 중에서 하나를 가지고 있습니다.'A+', 'A', '

구현사항id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요. 원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!반성점기능 구현에만 너무 초점을 맞추다 보니깐 컨벤션이 엉망진창이다. 카멜표기법과 스네이크표기법이 합쳐져 있는 혼종이다. 다음에는 하나

JS로만 짰을 때 위스타그램의 정상적인 모습리액트로 변환 후에 깨진 비정상적인 모습배운 점아무리 생각하고 동기 분들에게 물어봐도 무엇이 문제인지 몰라서 멘토님께 조언을 구했다. 그 때 멘토님께서 개발자도구로 확인해보셨냐고 물었는데, 나는 코드만 살폈을 뿐 개발자 도구

문제twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들어,n

문제reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.x: 숫자 return: 뒤집어진 숫자를 반환!예들 들어, x: 1234 return: 4321x: -1234 return: -4321x: 1230 return: 321오랫

삼항연산자와 useState 등을 활용해서 조건을 만족할 시에 버튼의 색깔을 바꾸는 코드를 짰는데, 버튼 색깔이 변경되지 않았다. console.log로 값을 찍어봐도 제대로 값을 들어오고 있었는데도 작동이 되지 않아서 무엇이 문제인지 막혀서 멘토님께 질문을 드렸고,

Self-memo를 위해서 기록을 남긴다.input 태그에 댓글을 입력하면 그 입력된 값이 state에 저장되게 한다.그리고 updateComment함수로 event.target.value는 commentValue라는 state에 담긴다.여기서 input 태그의 val

Key Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. Key는 위의 설명처럼 어떤 항목을 변경, 추가 또는 삭제할지 식별하게 해주는 포

깃이란 분산형 버전 관리 시스템(Version Control System) 의 한 종류이며, 업무의 여러 버전들을 저장 관리하기도 하면서 효율적인 협업을 위해서 사용한다.Task 1: Git Repository 생성 & Git 폴더 초기화자신의 github에 wecod

위코드의 1차 프로젝트로 요기요 팀에 배정되었다.사실상 나 빼고 다잘하시는 분들이서 많이 걱정이 되었다.특히나 최근 여러가지 일이 있어서 온전히 과제에 집중을 못해서 스스로 많이 부족함을 느끼고 있었다. 그러나 다행히 멘토님과 팀원 분들의 조언과 격려로 구글링을 해가면

갑작스럽게 오늘 팀원 한 분이 중도하차를 하였다. 굉장히 잘하고 계시던 분이라서 그만두면 내가 그만뒀지, 그 분이 그만둘지는 몰라서 충격이었다. 나도 여러번 그만두고 싶은 위기의 순간이 찾아왔지만, 이왕 시작한 도전 최소한 3년은 최선을 다해서 코딩에 도전을 해보고 그

이번에 내 인생 처음으로 백엔드와의 협업을 했었다. 그래서 그런지 많은 실수와 시행착오를 겪었으며 그중 하나가 백엔드에서 filter, 평균 별점 등을 구하는 것을 백엔드에서 받아오는건데 그런 걸의 의사소통하지 않고 나 혼자 프론트에서 처리를 해보려고 했던 것이다. 1

요기요 클론코딩을 하면서 카테고리가 전체보기, 한식, 중식, 일식 이렇게 4가지가 있었는데, 백엔드 쪽에서 전체보기에 대한 하면을 별도로 작성하지 않고 그냥 처음에 들어가는 화면이 전체보기로 구성되게끔 만들었었다. 백엔드와 소통을 하다가 결국 전체보기에 해당하는 all

위코드(wecode) 2차 프로젝트 크림(https://kream.co.kr/) 클론코딩 카카오 소셜로그인 기능(토큰 발행까지) [카카오 공식문서] https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api 

크림(https://kream.co.kr/) 클론코딩 카카오 소셜로그인 기능소셜로그인 기능 구현이라는 큰 목표를 구현하기 위해서 기능단위로 목표를 다시 쪼개어 보았다.1단계: 카카오에서 Sucream으로 인증코드롤 보내주는 것을 받는다.2단계: Sucream에

크림(https://kream.co.kr/) 클론코딩 카카오 소셜로그인 기능소셜로그인 기능 구현이라는 큰 목표를 구현하기 위해서 기능단위로 목표를 다시 쪼개어 보았다.1단계: 카카오에서 Sucream으로 인증코드롤 보내주는 것을 받는다.2단계: Sucream에

❓ Local Storage에 저장된 Key 값이 사라진다?! 소셜 로그인 기능을 구현하면서 계속해서 로컬스토리지에 잘 저장된 key값이 계속 사리지는 에러가 발생을 하였다. 아무리 생각을 하고 구글링을 해봐도 이유를 알 수가 없었다. 그러다가 결국 멘토님께 도움

문제점 토큰을 로컬 스토리지에 저장을 해서 변수에 넣은 뒤에 변수를 활용한 삼항 연산자를 했는데, 직접 새로고침을 해야하지만 렌더링이 되면서 인식을 하면서 로그인/로그아웃이 바뀌었다. 내 상상(?)으로는 자동으로 바꿔져야하는데 그렇지 못해서 구글링을 했다. 그 결과

1단계: Login.js 파일에서 슈크림 서비스의 토큰을 받아와서 전역변수로 관리를 한다.2단계: 그것을 Nav.js에서 검사를 한다.3단계: 이 때 Login에 있는 token과 Nav에 있는 token이 같아야 하기 때문에 Recoil을 써주는 것이다.결국 이 논리

기능구현은 어느정도 되었고 작동은 되었는데, 개발자 도구에 카카오 로그인 버튼을 클릭하기 전에 계속 fetch 요청이 가서 계속 오류코드가 발생하는 현상이 일어났다. 무엇이 문제인지 알기 위해서 개발자 도구를 열어서 네트워크 탭도 열고, 오류가 뜬 코드가 어느 줄인지

401 에러코드 발생...카카오 소셜로그인의 400 에러코드를 해결을 했지만, 401에러코드도 발생을 했다. 도대체 어떻게 해결할지 여러가지 시도를 했지만 이 에러코드는 없어지지 않다가, 400에러코드 해결과 비슷하다는 생각이 들어서 비슷하게 코드를 쳐보니....우리