개발자와 화가 개발자와 화가

재귀 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요. 재귀함수는 자기 자신을 호출하는 함수로 주어진 문제를 비슷한 구조의 작은 문제로 나눌 수 있는 경우 사용하기 좋다. UI/UX UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요. UX는 user experience로 사용자가 서비스를 이용하면서 느끼고 생각하는 모든 경험을 의미한다. UI는 user interface로 사람과 컴퓨터가 상호작용하는 시스템을 뜻한다. UX는 UI를 포함하는 관계이다. 그러나 항상 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. Custom Component Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요. 기존에 HTML, C..

🌱컴포넌트 구현 Figma 툴에서 자주 사용하는 GNB+ 컴포넌트 4가지 + 2가지를 구현하였다. 기본: GNB(Global Navigaion Bar) 4가지: 모달, 토글, 탭, 아코디언 2가지: 드롭다운, 자동완성 알게된 점 GNB 인터렉션 구현할 때 Line의 이름을 전부 같게 하고 smart animation 설정을 주면, 해당 Line들이 동일한 Line으로 인식되어 애니메이션 처럼 움직이도록 구현이 가능하다. 어려웠던 점 - GNB에서 밑줄을 하나씩 다 그려서 그었는데 그렇게 안해도 된댄다. 코드스테이츠 모닝 세션 때 알려주셨는데, 굉장히 쉬운 방법으로 해결할 수 있었다. 각 글씨를 프레임으로 만들어서 프레임 하단만 검은색 선을 두껍게 표시하면 된다. 그거를 컴포넌트로 만들어서, 글씨가 on인..

✨ 23/05/11 - 06/08 : Section2 ✨ - [JS] 고차함수 - [JS] 객체지향 프로그래밍 - [JS/Node] 비동기 - [React] SPA, State & Props - [HTTP/Network] 기초, 실습 - [React] 클라이언트 Ajax 요청 - [Web server] node js, express js - Coz' Mini Hackathon 코드스테이츠의 두 번째 단위기간인 Seciton2가 종료되었다. 5월 내내 아파서 고생도 하고, 배우는 것도 어려운 것 투성이었는데 나름 잘 버텨준 내 자신이 너무 기특하고 고생했다. 오늘은 여러 회고 방법 중 현업에서도 활발하게 이용된다는 KPT 회고 기법으로 회고를 진행해보고자 한다. KPT를 기반으로 한 개인 회고 1. 목표 ..

1. JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 콜백 중첩을 해결하기 위해 등장한 것이 Promise입니다. Javascript 에서는 대부분의 작업들이 비동기로 이루어집니다. 이전에는 콜백 함수로 처리하면 되는 문제였지만 요즘에는 프론트엔드의 규모가 커지면서 코드의 복잡도가 높아지는 상황이 발생하였습니다. 이러면서 콜백이 중첩되는 경우가 따라서 발생하였고, 이를 해결할 방안으로 등장한 것이 Promise 패턴입니다. Promise를 사용하면 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수월해집니다. 또 예외처리 구조가 존재하기 때문에 오류 발생에 대해 더 쉽게 관리할 수 있습니다. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여..

🌱REST Representational State Transfer REST 는 하나의 아키텍쳐에 가깝다. 그래서 몇 가지 주요 원칙들이 존재하며, 이를 잘 지킨 API를 "REST ful" 하다고 표현한다. RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다. 즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서 알아보기 쉽게 작성해야할 필요가 있다. 🌱구성요소 REST API 는 자원, 행위, 표현으로 구성된다. API 만으로도 HTTP 의 요청을 직관적으로 이해할 수 있다. 🌿자원 : URL 자원은 서버에 저장되어 있으며, 해당 자원에 접근할 수 있는 URI ..

OSI 7계층? 개방형 시스템 상호 연결 모델의 표준 실제 인터넷에서 사용되는 TCP/IP 는 OSI 참조 모델을 기반으로 상업적이고 실무적으로 이용될 수 있도록 단순화한 것이다 7. 응용계층 인터페이스 역할을 하는 계층 HTTP: 웹에서 HTML, JSON 등 정보를 주고 받는 프로토콜 FTP: 파일 전송 프로토콜 SMTP: 메일을 전송하기 위한 프로토콜 SSH: CLI 환경의 원격 컴퓨터에 접속하기 위한 프로토콜 RDP: Windows 계열의 원격 컴퓨터에 접속하기위한 프로토콜 WebSocket: 실시간 통신, push 등을 지원하는 프로토콜 6. 표현 계층 데이터를 어떻게 표현할지 정하는 역할을 하는 계층 5. 세션 계층 통신 장치 간 상호작용 및 동기화를 제공하는 계층 4. 전송 계층 종단 간 신..

🌱포트 (Port) 운영체제 통신의 종단점, 논리적인 접속장소 TCP/IP를 사용할 때는 클라이언트가 네트워크 상의 특정 서버 프로그램을 지정하는 방법으로 사용한다. 하나의 컴퓨터에서 여러 개의 서버가 실행될 수 있고, 만약 그렇다면 어느 서버에 접속해야 하는지 컴퓨터에게 알려주어야 한다. 이때 사용되는 것이 포트 번호이다. 포트 번호는 서버를 구분짓기 위한 16비트의 논리적 할당이다. 컴퓨터에 있는 웹서버는 기본적으로 80포트이며, 아래 주소는 모두 같은 구글 주소를 뜻한다. 80포트는 생략이 가능하다. http://www.google.com/ http://www.google.com:80/ 🌿URL Uniform Resource Locator의 약자 http://www.domain.com:1234/pa..

1. fetch() 함수란? 원격 API를 간단하게 호출할 수 있도록 브라우저에서 제공하는 함수이다. 첫번째 인자로 URL, 두번째인자로는 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는 API 호출이 성공하면 response를 resolve하고, 실패한 경우 reject를 한다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 2. basicChaining.js Todo: fetch를 사용해 작성한다. 여러개의 promise를 then으로 연결하여 작성한다. //뉴스와 날씨 데이터를 가져오는 함수 1. n..