분류 전체보기
-
useEffect와 side Effect프론트엔드 개발자가 될거야./react 2022. 7. 13. 22:50
react Hook 중에 하나인 useEffect. useEffect는 무엇일까? useEffect를 알기 전에 먼저 side Effect를 알아야 한다. side Effect side Effect는 우리말로 부작용, 부수효과로 해석된다. 근본적인 역할 대신에 부수적인 효과가 있거나 특정 목적 대신에 다른 행위가 발생할 때 부작용이 있다. 부수효과가 있다.라고 말할 수 있다. 이 개념을 React에 적용해보자. React의 함수 컴포넌트 자체는 input(인자)로 state, props를 받아 output으로 UI를 그려내는 것이다. 그런데 UI를 그려내지 않고 그 이외의 행위를 하면 side Effect가 일어났다고 할 수 있다. let count = 0 function greetWithSideEffe..
-
git clone시 git flow이해하기프론트엔드 개발자가 될거야./git 2022. 7. 10. 14:55
git에서 clone을 받아 내 local branch로 가져오는 실습을 진행했다. git clone의 flow는 위처럼 구성되어 있다. 이 flow는 내가 취직을 하고 프로젝트를 할 때 실제 해야하는 과정이니 잘 공부해두어야한다. git clone flow 정리 terminal에서 cd Desktop로 이동 -> git clone 주소 // 주소는 아래처럼 HTTPS 주소를 가져오면 된다. // 이렇게 하면 해당 git에서 파일들을 가져올 수 있고 이 주소가 자연스레 Remote master가 된다. -> cd 생성된 파일이름 // 주소를 clone하면 파일을 가져온다고 했다. 이제 그 생성된 파일로 이동하자. -> 생성된 파일을 vsc에서 열고 잘 들어왔는지 확인 -> vsc terminal에서 마저..
-
map 함수 적용시 key props를 부여하는 이유프론트엔드 개발자가 될거야./react 2022. 7. 10. 13:55
map 함수를 적용할 때 왜 key props를 부여해야 할까? 나도 map으로 댓글 추가 기능을 구현할 때 key props를 부여했다. {props.comment.map((data, i) => { return ; })} 이렇게 말이다! 간단하게 말하면 그래야 리액트가 댓글들을 각각 구분할 수 있기 때문이다. 만약 map을 돌릴 때 key값을 넣어주지 않으면 이렇게 콘솔에 warning메세지가 뜬다. key에 대해 더 알아보기 key는 element list를 만들 때 포함해야하는 특수한 문자열 속성이다. arr.map()안에서 리스트의 각 항목에 key를 할당해야한다. - key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다. - key를 선택하는 가장 좋은 방법은 리스트의 ..
-
instagram 댓글 기능 구현프론트엔드 개발자가 될거야./react 2022. 7. 10. 11:28
이번주 내내 React를 했다. React가 무엇인지, 왜 사용해야하는지, CRA, Component, JSX, Sass, Router를 배우고 마지막으로 리액트의 가장 핵심인 State, Props를 배웠다. 이번에는 js로 구현했던 댓글 추가 기능을 React로 구현해보는 미션이었는데 정말 어려웠다.. 하지만 절대 포기하지 않지!! 어려웠지만 결국은 구현해냈다. 다시한번 정리해보며 내것으로 만들어보려고한다! 댓글 기능 추가하기 - 사용자가 댓글 입력 후 enter 를 누르거나 버튼 클릭 시 댓글이 추가되도록 구현해주세요. - 댓글 기능을 구현하기 위해서는 배열 데이터 타입 활용해야 합니다. - 댓글 하나를 컴포넌트화 시키고 필요한 데이터는 props로 넘긴 다음 부모의 state에 저장된 댓글 데이터..
-
[TIL] Today I Learned : React sass - @mixin프론트엔드 개발자가 될거야./react 2022. 7. 5. 17:44
css.. 웹이 발전하면서 css 또한 유지보수하기 힘들어졌다. javascript를 위해 React가 나온 것 처럼 css를 위해서는 Sass가 나왔다고 생각하면 쉽다. 실제로는 React의 라이브러리 중에 하나다. sass로 작성하면 알아서 css로 변환되어 나타난다. sass에는 Nesting, mixin, 변수 활용, & 연산자 등 여러 유용한 기능이 있지만 그 중 가장 헷갈렸던 mixin에 대해 포스팅 해보려고 한다. @mixin 자주 사용하는 요소들은 @mixin으로 묶어줄 수 있다. 예를 들어 display: flex; align-items: center; justify-content: center; 이 세 개는 가운데 정렬을 해주기 위해 자주 쓰니 묶어서 @mixin으로 불러오면 코드가 한..
-
[TIL] Today I Learned : 코드카타 Day1 & 프로그래머스 직사각형 별찍기프론트엔드 개발자가 될거야./코딩테스트 2022. 7. 4. 23:25
오늘은 코드카타를 한 첫날이다. 코딩테스트를 준비해야지 하고 있었는데 제대로 사기를 돋아준 것 같다.... 문제는 어찌어찌 풀었는데 푼 것 같지 않은 이 느낌..... 코딩테스트 문제를 많이 풀어봐야겠다고 뼈저리게 느끼고 프로그래머스에서 문제 하나를 또 풀었다. 코드카타 Day1 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야..
-
위코드 2주차 중간시험 리뷰프론트엔드 개발자가 될거야./js 2022. 7. 1. 17:25
위코드 1주차로 html,css,js replit 풀고 위코드 2주차로 인스타그램 클론코딩 + 몇가지 js 기능 구현을 했다. 그리고 나의 학습을 스스로 점검하기 위해 중간 시험을 치뤘다. 1시간동안 자바스크립트 5문제를 푸는 형식이었다. 4,5번 문제는 (나는..) 어려웠다.. ^__^ 01. isEven Q. 짝수인지 판별하는 함수 isEven을 작성 주세요. console.log(isEven(11)) // --> "짝수가 아닙니다." console.log(isEven(10)) // --> "짝수 입니다." 나의 방법 function isEven(num) { // 아래 코드를 입력해주세요. if (num % 2 === 0) { return "짝수 입니다." } else { return "짝수가 아닙니..
-
데이터베이스(Database)CS지식 2022. 6. 30. 17:10
데이터베이스란? 데이터베이스는 1. 컴퓨터 시스템에 저장된 정보나 데이터를 모두 모아 놓은 집합 즉, 데이터를 많이 모아놓은 베이스이고 2. 이러한 데이터들은 데이터베이스 관리시스템(DBMS, Database Management System)으로 제어하고 관리한다. 즉, 1. 저장된 하드웨어 자체이고 2. 데이터 베이스를 관리하는 시스템 자체이다. 그렇다면 데이터베이스를 사용하는 이유는 무엇일까? 왜 굳이 데이터베이스에 데이터를 저장하는 걸까? 어플리케이션에서도 데이터를 잠깐 임시로 저장할 수는 있지만 어플리케이션을 종료하면 사라진다. 정말로 필요한 데이터는 사라지면 안되는데 말이다. 따라서 1. 데이터를 오랜기간 저장 및 보존하고 2. 체계적으로 보존하고 관리하기 위해 데이터베이스를 사용한다. 관계형 ..