profile
늘 한결같이 꾸준히
post-thumbnail

[회고록] 1차 팀 프로젝트 후기

주절주절 1차 팀프로젝트가 끝이 났다! 시작 전에는 기대나 설레임보다는 걱정되고 두려운 마음이 더 컸던거 같다. 과연 내가 잘 해낼 수 있을까? , 내 실력이 부족해서 1인분을 못하면 어떡하지? 오만가지 생각이 다 들었었는데 막상 시작해보니 나름 막힘 없이 기능들도

2021년 9월 12일
·
0개의 댓글
post-thumbnail

[회고록] 팀프로젝트 1주차

팀 프로젝트를 시작한 지 일주일이 지났다. 왓챠피디아 클론 코딩을 하게 되었고 메인 페이지와 Footer, 프로필페이지를 맡게 되었다. 메인 페이지가 가장 쉬워 보여서 하고 싶었고 하게 되었지만 조금 후회가 되는 부분이다.욕심을 내서 더 어려운 기능이 있는 페이지를 맡

2021년 9월 4일
·
0개의 댓글
post-thumbnail

[React] filter() 메서드를 통한 검색기능 구현

React에서 filter() 메서드를 통해 검색기능을 구현해 보자! filter filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 사용법 > 내 코드 > 먼저 s에서input 값을 받아올수 있도록 userInp

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[React] HTML 요소의 ID 값으로는 숫자를 사용할 수 없다 🤬

나는 댓글 삭제 기능을 구현하기 위해 댓글 컴포넌트의 id 값과 댓글 삭제 버튼의id 값을 같게 부여하고 filter 함수를 통해 해당 댓글 삭제 기능을 구현하려고 했었다....그런데 아무리 코드를 수정하고 다시 짜봐도 기능이 제대로 작동하지 않는것이었다!그러다 구글링

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[React] fetch 함수를 이용해 백엔드와 통신하기

fetch 함수를 통해 백엔드와 데이터를 주고 받고 받는 방법에 대해 알아보자. fetch 함수는 인자를 2가지 받는다. 두 번째 인자안에는 method와 body가 있는데 먼저 method에 대해 알아보자.body 에는 JSON 형태로 주고 받을 데이터를 넣는다. 그

2021년 8월 25일
·
0개의 댓글
post-thumbnail

[회고록] 위코드 3주차 React 인스타그램 클론코딩

위코드 3주 차 드디어 프론트엔드의 꽃 리액트를 시작했다. 위 코드에 들어오기 전 리액트 강의를 몇 개 봤었는데그때는 강의가 정말 너무 어렵고 이해도 하나도 되지 않아 멍청하게 그냥 코드만 따라쳤던 기억이 있다.그런데 최근에 그 강의들을 다시 보는데 신기하게 이해가

2021년 8월 21일
·
0개의 댓글
post-thumbnail

[React] map 함수 적용시 key props를 부여하는 이유

이유 React에서 map 함수를 사용할때 key값을 할당 하지않으면 위와 같은 에러 메시지가 뜬다. React에서 Key는 어떤 항목을 변경, 추가, 삭제할때 식별 해주는 역할을 하기 때문이다. 그래서 엘리먼트에 고유성을 부여하기 위해서는 Key 값을 꼭 할당해

2021년 8월 20일
·
0개의 댓글
post-thumbnail

[React] 이벤트 바인딩(Event Binding)

리액트에서 이벤트 바인딩(Event Binding)을 하는 방법에 대해 알아보도록 하자.각자 다른 핸들 클릭 방식을 사용한 4개의 버튼이 있다. 각각의 버튼을 눌렀을때 어떤 일이 일어나는지 알아보자.콘솔을 살펴보면 버튼을 클릭하지 않았는데 this 객체가 표시되고 버튼

2021년 8월 16일
·
0개의 댓글
post-thumbnail

[회고록] 위코드 2주차 JavaScript 인스타그램 클론코딩

벌써 위코드 생활이 2주가 지났다.... 어제가 월요일 같았는데 시간이 정말 빠르게 흘러가는거 같다.2주차는 인스타그램 클론 코딩을 하였는데 시작전에 나는 HTML, CSS는 완성되어있고 자바스크립트만 추가하면 되는줄 알았다. 하지만 그게 아니였다. 바닥부터 하나하나

2021년 8월 14일
·
0개의 댓글
post-thumbnail

[JavaScript] 키보드 이벤트(keyboard event)

## 시작 전 주절주절 인스타그램 클론 코딩 중 아이디와 비밀번호가 1자 이상일때 로그인 버튼을 활성화 되게 하라는 미션이 있었다. 구현을 하는데 아이디나 비밀번호 둘중 하나가 2글자 될때 버튼이 활성화가 되는 문제가 발생하였었다. 점심시간에 동기들에게 이

2021년 8월 12일
·
0개의 댓글
post-thumbnail

[JavaScript] 이벤트 위임(event delegation)

인스타그램 클론 코딩 중 댓글 추가기능을 구현하고 추가로 댓글 삭제 및 좋아요를 구현하고 있었다.

2021년 8월 11일
·
0개의 댓글
post-thumbnail

[JavaScript] add와 remove를 한번에! toggle 메서드

자바스크립트 dom에 대해 공부하다가 아주 유용한 메서드를 발견하였다.그건 바로 toggle 메서드이다. add()와 remove()가 합쳐진(?) 개념의 메서드이다.일단 위 코드는 title이라는 id를 가진 태그가 클릭 되었을 시 clicked이라는 클래스를 해당

2021년 8월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] 인자 개수에 따라 다른 결과값 주기

replit을 풀다가 이 문제를 보고 든 생각은 인자의 개수에 따라 다른 결과값(?)을 주는 방법이 있나? 였다.엄청 어려운 문제로 생각했지만 검색을 해보니 쉬운 문제였어서 소개해보도록 하려고 한다.인자를 세개 받습니다.첫번째 인자는 년도에 해당하는 숫자입니다.두번째

2021년 8월 7일
·
0개의 댓글
post-thumbnail

[회고록] 위코드 1주차 간단한 회고록 겸 [JavaScript]

replit을 풀다가 정말 아무리 생각해도 모르겠는 문제가 있었다.그래서 결국 동기분에게 약간의 힌트(?)를 얻어서 풀게 되었는데 그게 바로 특정 문자가 포함된 문자열을 삭제해서 새로운 문자열을 반환하는 문제였다.sliceCityFromAddress 함수는 addres

2021년 8월 7일
·
0개의 댓글
post-thumbnail

[CSS] float 속성

float 속성은 html 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 주는것을 목적으로 만들어졌지만, 현재는 웹의 레이아웃을 작성할 때 자주 자동된다.위와 같이 float 속성을 이용하면 사진과 글자를 함께 출력할수 있고 float의 값에는 left, r

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[CSS] display 속성

display display 속성은 웹의 레이아웃을 결정하는 css의 중요한 속성 중 하나이다. 이 속성은 요소를 어떻게 보여줄지를 결정한다. 1. block

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[CSS] position 알아보기

position 속성은 html 요소를 배치하는 방법을 지정할수 있다.사용 방법은 4가지 방식이 있고 사용법에 대해 알아보도록 하자.가장 기본적인 방식이고 요소를 일반적인 흐름에 따라 배치한다.그리고 top, right, bottom, left 속성값에 영향을 받지 않

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[Web] 시맨틱 웹과 시맨틱 태그

시맨틱 웹 시맨틱 웹은 의미론적인 웹 이라는 뜻이고 검색시 방대한 양의 정보를 사용자가 직접 처리하는게 아닌 등장으로 사람,기계 모두 의미 정보 해석이 가능해 졌다. 웹의 창시자인 팀 버너리스가 1988년에 제안하였고 현재는 w3c에 의해 표준화 작업이 진행중

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[JavaScript] 배열에서의 filter 함수

filter 함수는 조건에 충족하는 요소만을 새로운 배열에 반환한다. 사용법 배열에서의 사용법 var arr = [1, 2, 3, 4, 5, 6]; var except = arr.filter(num => num%2); console.log(except); //

2021년 7월 28일
·
0개의 댓글
post-thumbnail

[JavaScript] 배열에서의 map 함수

배열의 값에 곱하기 2위 코드는 arr에 1, 2, 3, 4, 5 라는 값을 넣어 배열을 만든 후 map 함수를 통해 arr 배열의 각각 값에 곱하기 2를 한 후 그 값들을 double에 넣어 새로운 배열을 생성한다.map 함수를 사용하면 배열 속 값에 함수를 호출해

2021년 7월 23일
·
0개의 댓글