위코드풀스택 OKYA 2차 프로젝트 회고 또한 처음 프로젝트를 시작할때 새로운 부분(React-Hook, Styled-components)를 적용하여 1차 프로젝트보다 더욱 난이도 있는 사이트를 더 짧은 기간에 클론해야해서 부담이 있었다. 새로운 기술을 빨리 적용해 활용할 수 있다는 자신감을 얻은게 가장 큰 수확인것 같다. IKEA 클론 코딩 프로젝트, IKEA의 기본적인 기능들을 우리 힘으로 구현해 보았다. - 카메라 아이콘 클릭... nodejs위코드ReactWeCode위코드풀스택React 14. 객체-2 지난 포스팅에 이어 객체를 다루는 방식 등에 대해 더 서술하겠습니다. 이런 '객체를 다룬다'는 방법에는 이런 것들이 있겠죠? 객체의 value값을 바꾼다 객체에 새 property를 추가한다 객체의 property 를 삭제한다 마구 다뤄지는 객체의 모습이다. 일단 임의의 객체를 하나 만들어보겠습니다. 🔸 dot notation 🔸 bracket notation 중요한 것은 추가하려는 객체가 ... wecodefullstack위코드풀스택wecodefullstack 15. 객체 -3 이전 포스팅에서 객체의 key값을 바꾸려다가 배열 안에 객체를 넣는 요상한(?)형태가 있다는 것을 발견했습니다. 객체나 배열은 꼭 특정한 모습을 가지고 있지 않습니다. 예제에서나 쓰일 법한 아주 단순한 형태의 배열과 객체 자꾸 게임 이야기를 끌어와서 뭐하지만 객체의 예시를 들기에 아주 적절한 것 같습니다. 이처럼 객체 mythrilCirclet는 2개의 객체, 1개의 배열을 값으로 가지고 있... wecodefullstack위코드풀스택wecodefullstack HTML 레이아웃을 짜기 위한 기초 지식 모든 html 태그들은 block,inline-block,inline요소로 구분지어집니다. block: 자동으로 줄바꿈이 되고, width값을 부모 요소의 값을 따라갑니다. inline: 자동으로 줄바꿈이 되지 않고, width 값은 콘텐츠가 들어있는 만큼의 넓이만 가집니다. inline-block: 인라인과 블럭의 특징을 믹스시킨 짬뽕같은 요소입니다. block inline inline-b... wecodefullstack위코드풀스택wecodefullstack [1차 프로젝트] 다신코(다신샵 클론코딩) 더듬더듬 지금까지 이용해본 사이트를 찾아서 들어갔고, 2주 안에 할 수 없을 것 같은 사이트를 제외하고 나니 리유저블 컴포넌트로 사용할 수 있을만한 것들이 많이 보이는 다신샵이 목록에 남았다. 실제 서비스에는 시간 관련한게 굉장히 많기 때문에 앞으로도 유용하게 사용할 수 있을 것이다. 캐러셀을 만들며 리액트에 다시 한 번 익숙해졌고, state의 개념을 다시 한 번 잡고 다른 기능들도 구현할... 위코드위코드풀스택WeCode클론코딩프로젝트WeCode 파펨 클론 1차 프로젝트 프로젝트 시작전 나의 목표는 다음과 같았다. 특히 전체적으로 결과물에 대한 기대보다는 실제로 동료랑 협업하면서 개발하는건 어떨까? 가장 대표적인 웹사이트인 쇼핑몰의 사이클은 어떨까? 이때까지 배운부분에서 조금이라도 나은 결과물을 만들것 Find Your Scent, 가장 나다운 향을 찾아드립니다. 향수 판매 사이트 클론 프로젝트 BackEnd : Node.js, Nodemon, Express... 위코드위코드풀스택WeCode클론코딩프로젝트WeCode 01. console.log와 주석 위코드 사전 스터디 1주차 수업을 듣고 쓰는 글입니다. 수업 내용을 참고/인용하여 작성했습니다. console.log는 javascript의 대표적인 디버깅 명령이라고 합니다. 그래서 검색해봤습니다. 그냥 결과를 출력한다는 뜻으로 이해하기로 했습니다. 간단하네요! 저 괄호 안에는 수많은 데이터들을 넣을 수 있습니다. 다만 한가지 주의할점은, 1번째와 2번째 문장처럼 따옴표 안에 넣은 데이터들... wecodefullstack위코드풀스택wecodefullstack 03. 데이터 타입 기본 타입 - number 기본 타입 - string 여기서 중요한 것은 string을 나타내기 위해선 반드시 따옴표로 감싸주어야 한다는 것.또한 대소문자를 구별하기 때문에 대소문자 입력에도 주의해야합니다. 변수 이름을 정할 때 지켜야 할 것! 변수 이름을 정할 때 첫 번째 문자는 반드시 글자, 언더바(_), 달러기호($) 중 하나입니다. 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서... wecodefullstack위코드풀스택wecodefullstack #2 TIL Function 어제 공부한 내용을 토대로, Primtive Type 에는 number, string, boolean, null & undefined이 있다. In Javascript, undefined means a variable has been declared but has not yet been assigned a value, such as null is an assignment value. 위의 내... 위코드풀스택wecodefullstackwecodefullstack 04. String 활용하기 위코드 사전 스터디 1주차 수업을 듣고 쓰는 글입니다. 수업 내용을 참고/인용하여 작성했습니다. 이전에 문자열인 string은 +기호를 이용해 연결이 가능하다고 했습니다. 하지만 누군가는 이런 걸 시도해봤을겁니다. 숫자 2와 문자 2를 같이 연결해버렸어요. 이렇게 넘버와 스트링 데이터가 퓨전이 되는 경우엔, 문자열 22가 출력됩니다. 순서를 바꿔 볼까요? 순서를 바꿔도 결과가 같은 걸 보니 ... wecodefullstack위코드풀스택wecodefullstack 07. Array 수업 내용을 참고/인용하여 작성했습니다. 자바스크립트 배열은 여러 변수의 집합이며, 데이터를 대량으로 연산할 때 도움이 됩니다. 만약 1부터 100개까지 변수를 만들어서 이 변수들을 전부 더해야 한다는 문제가 주어지면 어떻게 될까요? 이것을 배열로 바꿔서 쓰면, 적어도 let 선언을 한번만 해준다는 점에서 굉장히 시간을 단축할 수 있게 됩니다. 어쨌든 배열을 사용할때의 장점은 나중에 본격적으... wecodefullstack위코드풀스택wecodefullstack 09. slice 메소드 미루고 미뤘던 배열의 메소드 중 하나, slice()입니다! 지난번에 배열의 구간 선택 삭제를 할 때 splice메소드를 이용했는데, slice는 스펠링이 조금 비슷하지만 완전히 다른 메소드입니다. 개인적으로 slice라고 하면 이런 이미지가 떠올라서, 배가 고파지네요. slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다. splice 메서드와는 다르... wecodefullstack위코드풀스택wecodefullstack 12. for 반복문 쇼핑몰의 회원 정보 관리 연간 예산 관리 개인 저작물의 미디어 관리 기관에서의 연간 주요 계획 및 운영에 필요한 모든 정보들 신입사원 동글이는 회사에서 1번부터 100번까지 번호표를 만드는 일을 받았습니다. 동글이는 초인적인 집념으로 어떻게든 번호표를 만들었지만, 일이 끝나고 나니 벌써 퇴근시간에 가까워졌습니다. "동글 씨, 1부터 500까지 번호표를 새로 만들어야하는데 30분 내로 해줄 수... 위코드풀스택wecodefullstackwecodefullstack
OKYA 2차 프로젝트 회고 또한 처음 프로젝트를 시작할때 새로운 부분(React-Hook, Styled-components)를 적용하여 1차 프로젝트보다 더욱 난이도 있는 사이트를 더 짧은 기간에 클론해야해서 부담이 있었다. 새로운 기술을 빨리 적용해 활용할 수 있다는 자신감을 얻은게 가장 큰 수확인것 같다. IKEA 클론 코딩 프로젝트, IKEA의 기본적인 기능들을 우리 힘으로 구현해 보았다. - 카메라 아이콘 클릭... nodejs위코드ReactWeCode위코드풀스택React 14. 객체-2 지난 포스팅에 이어 객체를 다루는 방식 등에 대해 더 서술하겠습니다. 이런 '객체를 다룬다'는 방법에는 이런 것들이 있겠죠? 객체의 value값을 바꾼다 객체에 새 property를 추가한다 객체의 property 를 삭제한다 마구 다뤄지는 객체의 모습이다. 일단 임의의 객체를 하나 만들어보겠습니다. 🔸 dot notation 🔸 bracket notation 중요한 것은 추가하려는 객체가 ... wecodefullstack위코드풀스택wecodefullstack 15. 객체 -3 이전 포스팅에서 객체의 key값을 바꾸려다가 배열 안에 객체를 넣는 요상한(?)형태가 있다는 것을 발견했습니다. 객체나 배열은 꼭 특정한 모습을 가지고 있지 않습니다. 예제에서나 쓰일 법한 아주 단순한 형태의 배열과 객체 자꾸 게임 이야기를 끌어와서 뭐하지만 객체의 예시를 들기에 아주 적절한 것 같습니다. 이처럼 객체 mythrilCirclet는 2개의 객체, 1개의 배열을 값으로 가지고 있... wecodefullstack위코드풀스택wecodefullstack HTML 레이아웃을 짜기 위한 기초 지식 모든 html 태그들은 block,inline-block,inline요소로 구분지어집니다. block: 자동으로 줄바꿈이 되고, width값을 부모 요소의 값을 따라갑니다. inline: 자동으로 줄바꿈이 되지 않고, width 값은 콘텐츠가 들어있는 만큼의 넓이만 가집니다. inline-block: 인라인과 블럭의 특징을 믹스시킨 짬뽕같은 요소입니다. block inline inline-b... wecodefullstack위코드풀스택wecodefullstack [1차 프로젝트] 다신코(다신샵 클론코딩) 더듬더듬 지금까지 이용해본 사이트를 찾아서 들어갔고, 2주 안에 할 수 없을 것 같은 사이트를 제외하고 나니 리유저블 컴포넌트로 사용할 수 있을만한 것들이 많이 보이는 다신샵이 목록에 남았다. 실제 서비스에는 시간 관련한게 굉장히 많기 때문에 앞으로도 유용하게 사용할 수 있을 것이다. 캐러셀을 만들며 리액트에 다시 한 번 익숙해졌고, state의 개념을 다시 한 번 잡고 다른 기능들도 구현할... 위코드위코드풀스택WeCode클론코딩프로젝트WeCode 파펨 클론 1차 프로젝트 프로젝트 시작전 나의 목표는 다음과 같았다. 특히 전체적으로 결과물에 대한 기대보다는 실제로 동료랑 협업하면서 개발하는건 어떨까? 가장 대표적인 웹사이트인 쇼핑몰의 사이클은 어떨까? 이때까지 배운부분에서 조금이라도 나은 결과물을 만들것 Find Your Scent, 가장 나다운 향을 찾아드립니다. 향수 판매 사이트 클론 프로젝트 BackEnd : Node.js, Nodemon, Express... 위코드위코드풀스택WeCode클론코딩프로젝트WeCode 01. console.log와 주석 위코드 사전 스터디 1주차 수업을 듣고 쓰는 글입니다. 수업 내용을 참고/인용하여 작성했습니다. console.log는 javascript의 대표적인 디버깅 명령이라고 합니다. 그래서 검색해봤습니다. 그냥 결과를 출력한다는 뜻으로 이해하기로 했습니다. 간단하네요! 저 괄호 안에는 수많은 데이터들을 넣을 수 있습니다. 다만 한가지 주의할점은, 1번째와 2번째 문장처럼 따옴표 안에 넣은 데이터들... wecodefullstack위코드풀스택wecodefullstack 03. 데이터 타입 기본 타입 - number 기본 타입 - string 여기서 중요한 것은 string을 나타내기 위해선 반드시 따옴표로 감싸주어야 한다는 것.또한 대소문자를 구별하기 때문에 대소문자 입력에도 주의해야합니다. 변수 이름을 정할 때 지켜야 할 것! 변수 이름을 정할 때 첫 번째 문자는 반드시 글자, 언더바(_), 달러기호($) 중 하나입니다. 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서... wecodefullstack위코드풀스택wecodefullstack #2 TIL Function 어제 공부한 내용을 토대로, Primtive Type 에는 number, string, boolean, null & undefined이 있다. In Javascript, undefined means a variable has been declared but has not yet been assigned a value, such as null is an assignment value. 위의 내... 위코드풀스택wecodefullstackwecodefullstack 04. String 활용하기 위코드 사전 스터디 1주차 수업을 듣고 쓰는 글입니다. 수업 내용을 참고/인용하여 작성했습니다. 이전에 문자열인 string은 +기호를 이용해 연결이 가능하다고 했습니다. 하지만 누군가는 이런 걸 시도해봤을겁니다. 숫자 2와 문자 2를 같이 연결해버렸어요. 이렇게 넘버와 스트링 데이터가 퓨전이 되는 경우엔, 문자열 22가 출력됩니다. 순서를 바꿔 볼까요? 순서를 바꿔도 결과가 같은 걸 보니 ... wecodefullstack위코드풀스택wecodefullstack 07. Array 수업 내용을 참고/인용하여 작성했습니다. 자바스크립트 배열은 여러 변수의 집합이며, 데이터를 대량으로 연산할 때 도움이 됩니다. 만약 1부터 100개까지 변수를 만들어서 이 변수들을 전부 더해야 한다는 문제가 주어지면 어떻게 될까요? 이것을 배열로 바꿔서 쓰면, 적어도 let 선언을 한번만 해준다는 점에서 굉장히 시간을 단축할 수 있게 됩니다. 어쨌든 배열을 사용할때의 장점은 나중에 본격적으... wecodefullstack위코드풀스택wecodefullstack 09. slice 메소드 미루고 미뤘던 배열의 메소드 중 하나, slice()입니다! 지난번에 배열의 구간 선택 삭제를 할 때 splice메소드를 이용했는데, slice는 스펠링이 조금 비슷하지만 완전히 다른 메소드입니다. 개인적으로 slice라고 하면 이런 이미지가 떠올라서, 배가 고파지네요. slice 메서드는 배열 내의 특정한 요소의 index 범위에 따라 새로운 배열을 리턴합니다. splice 메서드와는 다르... wecodefullstack위코드풀스택wecodefullstack 12. for 반복문 쇼핑몰의 회원 정보 관리 연간 예산 관리 개인 저작물의 미디어 관리 기관에서의 연간 주요 계획 및 운영에 필요한 모든 정보들 신입사원 동글이는 회사에서 1번부터 100번까지 번호표를 만드는 일을 받았습니다. 동글이는 초인적인 집념으로 어떻게든 번호표를 만들었지만, 일이 끝나고 나니 벌써 퇴근시간에 가까워졌습니다. "동글 씨, 1부터 500까지 번호표를 새로 만들어야하는데 30분 내로 해줄 수... 위코드풀스택wecodefullstackwecodefullstack