분류 전체보기

이번과제는 머리를 많이 썼던 것 같다 .. 실시간 세션 전에 하나의 문제가 발생해 시간내에 해결하지 못했지만 다시 복습을 통해 완벽하게 이해할 수 있었다. 페어분께도 도움을 많이 받아 여러 궁금증도 해결하고 정말 의미있던 과제였다 ! 구현해야할 과제는 아래와 같다 Bare minimum requirements react-router-dom을 이용해 Client Side Routing하는 방법을 학습합니다. useState를 이용해 상태를 사용하는 방법을 학습합니다. 쇼핑몰 애플리케이션의 주요 기능을 구현하세요. [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요. 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요. 장바구니 내에서 각 아이템 개수를 변경할..

블로깅 챌린지 첫날이 다가왔다. 나는 3주간 수요일에 블로그 글을 작성하기로 했다. 현재 코드스테이츠를 수강하면서 배운 것들 중 리액트를 공부했을 때 가장 어려웠고 부족했던 거 같아 리액트에 관한 주제로 3주간 세가지의 리액트를 주제로 한 글을 작성해볼 예정이다 . 오늘은 리액트를 사용한다면 기초적으로 알아야할 지식에 대해 공부하고 작성해볼 것이다. 다양한 리액트 실습을 진행하면서 아직 props 와 state에 대해 많이 헷갈리는 것 같다 .. 오늘을 계기로 완벽하게 이해하고 넘어갈 것이다 ! 리액트란 ? 리액트(React)는 자바스크립트 라이브러리로서 컴포넌트(Component) 기반으로 동작합니다. 리액트 컴포넌트는 props와 state를 통해 데이터를 관리하고 화면에 렌더링합니다. 컴포넌트란 ?..

오늘은 프론트엔드 개발자로서 꼭 알아야하는 UI/UX 지식에 대해 학습해볼 것이다. UI 란? User Interface , 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템을 의미함 화면상의 그래픽 요소 외에도 키보드,마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI라고 볼 수 있음 GUI 란? 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말함 ex) 운영체제의 화면 , 애플리케이션의 화면 프론트엔드 개발자로서 UI는 대부분 GUI 를 의미함 UX 란? User Experience , 사용자 경험 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험 즉 제품, 서비스 그 자체에 대한 경험은 물론 홍보, 접근성,사후 처리..

JSON이란? JavaScript Object Notaion의 줄임말로 데이터 교환을 위해 만들어진 객체 형태의 포맷 메세지 객체를 전송할 수 있게 하려면 , 메세지를 보내는 발신자와 메세지를 받는 수신자가 같은 프로그램을 사용하거나 문자열 처럼 범용적으로 읽을 수 있는 형태여야함 객체는 타입 변환을 이용해 String으로 변환 할 경우 객체 내용을 포함하지 않음. 자바스크립트에서 객체를 문자열로 변환하기 위해 메서드 toString() 이나 형 변환 String() 을 하게 된다면 [object Object] 라는 결과를 리턴함 그럼 객체는 어떻게 문자열로 변환해야 할까 ? 이 때 사용하는 것이 객체를 JSON 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법임 JSON.stringify : 객..

재귀란 ? 원래의 자리로 되돌아가거나 되돌아옴 아래의 코드 처럼 선언한 함수내의 같은 함수를 호출함으로서 재귀를 구현할 수 있음 아래의 코드처럼 recusion 함수는 재귀함수라고 함 재귀 함수를 잘 활용하면 반복적인 작업을 하는 문제를 좀 더 간결한 코드로 풀어낼 수 있음 언제 사용하는게 좋을까 ? 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는경우 2. 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운경우 function recursion() { console.log("hi") console.log("manchoon") recursion() } 재귀로 문제 해결하기 재귀로 문제를 풀기에 앞서 이론적으로 재귀로 문제를 해결하는 단계는 아래와 같음 1. 문제를 좀 더 작게 쪼갬..

정말 힘들었던 섹션2가 끝났다 .. 섹션1 때는 그래도 기존에 알고있던 지식들도 있어서 크게 공부를 따라가는데 어려움이 없었다. 섹션 2에 들어와서 리액트라던지 , 서버를 만든다던지 , 서버와 통신한다던지 어려운 개념들을 다뤘던 것 같다. 앞으로 더 어려워 질테지만 !! 그래도 얼렁뚱땅 섹션2까지 마무리를 했다 ... ! (나 자신 칭찬해!!!!!!!!!!!!!!!!!!) 물론 완벽하게 섹션2를 통달했다고 말할 순 없지만 그래도 백엔드와 소통하면서 프로젝트를 잘 진행할 수 있을 것 같다 ! 예전 졸업프로젝트로 백엔드와 나누어 프로젝트를 진행했었는데 그 때는 URL , URI , fetch 등등.. 뭔지도 제대로 모르는 상태에서 무작정 구글링을 통해 0부터 100까지 한번에 뛰어 넘으려고 했던 것 같다. ..

두괄식으로 설명하기 , 적절한 예시 들기 ,추측성 단어 사용 금지 이 글은 짧은시간안에 작성한 글이므로 완벽한 면접 대답을 쓴 것은 아니고 개념에 대한 포괄적인 정리를 한 글입니다 !! JavaScript Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 프로미스는 비동기 작업을 처리하고 결과를 다루기 위한 객체입니다. 여기서 비동기 작업에는 주로 서버에서 데이터를 가져오거나 파일을 읽거나 타이머 함수를 사용하는 등의 작업을 의미합니다. ( 예를들어 fetch API 를 활용하여 json파일을 불러오는 과정이 비동기 작업이라고 할 수 있습니다. ) 처음에는 이러한 비동기 작업을 처리하기 위해선 콜백함수를 중첩하여 사용하였습니다. 예를들어 서버에서 데이터를 가져와서 처리한 후 화면에 출력하는 코..

화,수 휴가를 제출하고 여행을 다녀왔더니 정말 많은 공부가 밀려있었다 ... 오늘 화, 수 안한만큼 해야지 !! 했는데 너무 피곤했는지 늦게 일어나서 9시 12분에 출석을 해버렸다 ... ㅜ 부랴부랴 웹 서버 기초에 대해 유어클래스를 공부해보았는데 아무래도 3일치를 하루만에 하려고 하니 뇌에 과부하가 온 거 같다. 오늘은 과제 제출도 하지 못해 반딧불반에 오게 되었고 당연한 결과인 만큼 열심히 나머지 공부를 해 볼것이당 ! ! 웹 서버에 대해서는 거의 노베이스라고 해도 될 정도로 무지해 공부하는데 어려움이 많았던 거같다. node.js 를 사용해본적이 없어 더 헤맸었던 거같다 .. 오늘 포스트는 오늘 공부한 web server 기초와 mini node server 과제를 의사코드로 작성해 볼 것이다. 또..

너어어어무 ! 헷갈렸던 클라이언트 ajax 부분이다... 이해가 갈듯말듯 했던 거 같다 .. !오늘은 클라이언트 ajax 요청에 대해 실습해보기 전 React 데이터 흐름과 state 끌어올리기 Effect Hook에 대해 공부하고 작성해보자 ! React 데이터 흐름 React 개발 방식 페이지 단위가 아닌 컴포넌트 단위로 시작 즉 상향식으로 앱을 개발함 장점 : 테스트가 쉽고 확장성 용이 데이터의 흐름 단방향 데이터 흐름 (데이터는 위에서 아래로 흐름 : 부모 -> 자식 ) 즉 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성처럼 전달 가능 state(상태) : 이벤트에 따라 얼마든지 변할 수 있는 것 부모로부터 props를 통해 전달되거나 , 시간이 지나도 변치 않거나 , 컴포넌트 ..