What I studied

What I Learned 이번 주차에서는 프론트와 백이 협업하여 클론코딩을 진행했다. 어떤 사이트를 클론할지 고민하다가 마켓컬리로 결정하게 되었는데 백엔드와의 협업이 잘 이루어진 것 같아 최종적으로 클론코딩 주차를 잘 마무리할 수 있었다. 서로가 모르는 부분을 물어보고 내가 아는 것을 가르쳐주면서 서로가 성장할 수 있었던 좋은 시간이었던 것 같은데 앞으로도 팀원 모두가 같이 성장할 수 있는 그런 환경을 만들고 싶다. 저번주 미니프로젝트에서는 로그인/회원가입 기능을 맡아 이번에는 CRUD에 도전해보고 싶었다. 주특기 심화 주간에 CRUD를 구현해보긴 했지만 강의를 보고 따라하는 수준이었기 때문에 이번에는 내가 직접 적용하며 구현해보고 싶었던 것이다. 그래서 CRUD에 더하여 좋아요 기능과 추가로 스크롤 ..

What I Learned 6주차를 마무리하며 프론트와 백의 첫 협업에 대해 되돌아보는 시간을 가졌다. 그 전까지는 프론트와 백을 나누지 않고 하나하나의 개인 프로젝트를 진행했다면 이제부턴 현업에서 필요한 의사소통 기술과 협업 기술을 배우기 위한 단계인 것 같다. 처음으로 API 명세서를 같이 짜보고 그에 따라 서버와 데이터를 주고 받으며 프로젝트를 완성해나갔다. API 명세서를 보고 적는 것이 처음이라 헷갈리는 부분도 있었지만 이 부분을 정확하게 짚고 넘어가야 데이터를 주고 받을 때 문제가 생기지 않는다는 것을 알게 되었다. 프론트와 백 서로 수정되는 부분이 있을 때는 미리 사전에 고지를 하고 그 부분을 맞춰나가기 위해 소통하였으며 그 결과 투두리스트 서비스를 구현할 수 있었다. 프로젝트 소개 해야할 ..

What I Learned 이번 주차에서 리액트를 활용해 magazine 사이트 만들기를 진행했다. magazine 사이트에는 기본적으로 로그인과 회원가입 기능, CRUD 기능 등이 들어갔는데 웹에서 가장 기본적인 부분을 학습할 수 있었다. 일주일만에 이 기능을 모두 구현하기까지 어려움은 있었지만 강의 내용을 꼼꼼하게 따라하며 최종적으로 완성을 할 수 있었다. 아직 강의를 보고 따라하는 수준이라고 생각하는데 이 코드를 다시 되돌아보며 어떤 로직으로 돌아가고 있는 것인지를 확실하게 다시 공부할 필요가 있어 보인다. - Axios란? Axios는 브라우저와 백앤드를 위한, Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 통신을 쉽게 하기 위해 Ajax와 비슷하게 활용..

What I Learned 이번 주차에서는 리액트와 조금 더 친숙해지는 시간을 가진 것 같은데 게시글 입력과 삭제 등의 기능을 파이어스토어와 연결하는 방법을 공부했다. DB와 연결하여 DB에 들어간 내용을 불러오고 삭제하는 기능을 구현하면서 오류가 발생했고 그 오류의 원인에 대해 알게 되며 리덕스로 상태관리하는 부분을 조금 더 공부해야겠다는 생각이 들었다. 라이프사이클(class형 컴포넌트 기반) 보통 라이프사이클은 class형 컴포넌트 기반을 이야기하는 것이고 함수형 컴포넌트에서는 Hook을 사용하게 된다. 먼저 class형 컴포넌트 기반의 라이프사이클을 살펴보면 "생성(mounting) -> 업데이트(updating) -> 삭제(unmounting)"와 같은 생명주기를 갖고 있다는 것을 알 수 있다...

문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한 조건 x는 1 이상, 10000 이하인 정수입니다. 초기 코드 function solution(x) { var answer = true; return answer; } 코드 풀이 설명 function solution(x) { // 더해줄 sum에 초기값 0 할당 let sum = 0; // 자릿수를 더하기 위해 문자열로 변환하여 쪼개기 let result = String(x).split(''); // sum의 초기값..

What I Learned 이번 주차에서 리액트를 처음 다뤘는데 기존에 공부했던 자바스크립트 언어를 기반으로 새로운 프레임워크를 사용해봤다. 처음이라 익숙하지 않았지만 리액트에 대해 알고 원하는 기능을 구현하면서 점점 리액트에 재미를 붙이고 있는 것 같다는 생각이 들었다. - DOM이란? DOM은 Document Object Model의 약자로 문서 객체 모델이라고 할 수 있는데 여기서 문서 객체는 html 문서의 태그들을 자바스크립트가 이용할 수 있는 객체로 만들어 놓은 것을 말한다. 여기에 모델을 더하여 DOM을 다시한번 정의해본다면 HTML문서에 접근하기 위한 일종의 인터페이스라고 정의할 수 있을 것이다. 이 객체 모델은 문서 내에 있는 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공할 ..

1. JSX란? JSX는 자바스크립트에 XML을 추가한 확장형 문법으로 리액트 요소를 만들 수 있게 해줍니다. JSX를 이용하면 보다 더 간단한 코드로 우리가 원하는 화면을 보여줄 수 있게 됩니다. 2. JSX 문법의 특징 ① 태그는 무조건 닫혀야 한다. , , 와 같이 짝이 있는 태그라면 반드시 닫는 태그와 함께 사용하여야한다. 단독으로 쓰이는 태그의 경우에도 반드시 태그를 닫아줘야 한다. ② 렌더링 될 루트 요소는 하나만 존재해야하기 때문에 두개 이상의 요소는 하나의 요소로 감싸져야한다. import React from 'react'; function App() { return ( Hello Hello Jieun ) export default App; ③ 자바스크립트 표현식 사용 JSX 내부에서는 변..

함수형 컴포넌트 생성하기 함수형 컴포넌트를 생성하기 위해 먼저 src 폴더 안에 Main.js라는 js파일을 만들어줍니다. import React from 'react'; function Main() { return 메인 페이지 입니다. } export default Main; 리액트 컴포넌트를 만들 때는 먼저 import를 하여 리액트를 불러와야 합니다. 그리고 코드 최하단에 Main이라는 컴포넌트를 내보내주겠나는 export를 해줍니다. 여기서 생각해볼 수 있는 것은 import가 있다면 export도 있어야한다는 것. 함수형 컴포넌트를 만들었다면 이제 App.js 파일로 이동해줍니다. import React from 'react'; import Main fr..

자바스크립트의 ES란? 자바스크립트는 언어를 뜻하고 ES는 자바스크립트의 표준 규격을 의미한다. ES뒤에 붙는 숫자는 버전을 의미하는데 ES5는 2009년, ES6은 2015년 출시하였다. ES5와 ES6 사이에는 6년이라는 기간이 존재하는데 그 사이에 많은 기능이 추가되었다. ES5와 ES6의 차이 우리가 사용하는 것들은 시간이 지나면서 편의를 위해 더욱 더 발전하게 되는데 프로그래밍 언어 또한 기존의 취약한 점을 보완하고 필요한 기능을 추가하면서 발전해나가고 있다. ES5 버전 다음으로 나온 것이 ES6 버전이며 ES6에는 새로운 기능들이 많이 추가 되었기에 지금부터 추가된 부분을 살펴보려고 한다. 1. let과 const 추가 2. 화살표 함수 추가 3. 템플릿 리터럴 추가 4. 프로미스 5. 모듈..

문제 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 제한 조건 a, b의 길이는 1 이상 1,000 이하입니다. a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 초기 코드 function solution(a, b) { var answer = 1234567890; return answer; } 코드 풀이 설명 function solution(a, b) { let answer = 0; for (let i = 0; i < a.length; i++) { answ..