유쾌하고, 유익하게

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.3 - Figma 역시나.. 피그마는 개미지옥이다 ㅎ 오늘도 하루가 어떻게 지나갔는지 모르겠다. 어려운데 참 재밌고, 매력있는 프로그램이다. 아래 링크는 Figma 클론 과제를 진행한 링크이다. KINFOLK 의 웹사이트를 참조하여 만들어보았다. 킨포크 매거진은 웹사이트도 매력적이다. https://kinfolk.kr/ 킨포크 매거진 & 스토어 슬로우 라이프 문화를 만들어낸 킨포크포틀랜드와 코펜하겐의 라이프스타일 큐레이션 kinfolk.kr https://www.figma.com/proto/UmHn8gATaUdn4iMGjJ5LRJ/KINFOLK-CLONE-%2F-LO-FI?node-id=57-242&scal..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.3 - Figma 복지관에서 일할 때 미리 캔버스, 망고보드로 홍보지 만들고 했던게 기억나서, 재밌는 시간이었다. 피그마를 이용해서 작업하면서 신기했던 점은 페이지, 컴포넌트 간의 관계를 맺게 하는 것이었다. 피그마로 레이아웃을 잘 짠다고, 프론트엔드 개발을 잘하는 건 아니겠지만, 뭐든 잘하면 좋지 않겠나 싶다! 와이어프레임 제품 기획 단계에서 페이지의 구성과 구조를 잡기 위한 목적으로 사용된다. 피델리티(Fidelity) 와이어프레임을 표현할 때의 품질 수준을 의미한다. Low Fidelity Wireframe(Lo-Fi Wireframe) : 손으로 빠르게 그린 수준을 의미한다. 수정이 쉬워 새로운 의견..

출처: 프로그래머스 코딩 테스트 연습, https://school.programmers.co.kr/learn/challenges 코딩테스트 연습 | 프로그래머스 스쿨 개발자 취업의 필수 관문 코딩테스트를 철저하게 연습하고 대비할 수 있는 문제를 총망라! 프로그래머스에서 선발한 문제로 유형을 파악하고 실력을 업그레이드해 보세요! school.programmers.co.kr 배열의 평균값 구하기 문제] 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 수도코드 for문으로 풀기 for... of로 풀기 arr.reduce로 풀기 한줄로 풀기(reduce, arrow function 이용) 정리 및 회고 하나의 문제를 이렇..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.2 UI 디자인 패턴 = 자주 사용하는 UI 패턴 UI 디자인 패턴은 프로그래밍 시 자주 반복되는 문제점을 해결하고자 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴이다. 이 외에 더 다양한 UI 디자인 패턴 레퍼런스 https://ui-patterns.com/patterns Design patterns User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user..

SEB _ FE _ 45 Section 3. Unit 1. [자료구조/알고리즘] 재귀 과제1. stringify - json 과제2. Tree UI 흠.. 과제를 스스로 풀기가 너무 어렵다.. 결국 레퍼런스에 도움을..ㅜㅜ Section 2 에서 배운 내용인 DOM 까지 숙지를 하고 있어야 해서 정신이 없는 과제였다... 과제에 대한 리뷰 이전에 JSON에 대해서 정리해본다. JSON ( JavaScript Object Notation ) 은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 데이터 교환을 위해서는 발신자와 수신자가 모두 읽을 수 있는 범용 형태(ex. 문자열)여야 한다. JavaScript에서 객체를 문자열로 변환하기 위해 메서드(Object.toString())나 형변환(String..

SEB _ FE _ 45 Section 3. Unit 2. [사용자 친화 웹] UI/UX part.1 UI / UX 많이 들어봤는데...? UI(User Interface) 는 사람들이 컴퓨터와 상호작용하는 시스템을 말한다. UI는 그래픽 요소뿐만 아니라 물리적 요소(키보드와 마우스, 버튼 등)도 포함된다. 물리적 요소에 대한 예를 들어보면, 우리가 컴퓨터를 켜면 가장 먼저 윈도우를 만나게 된다. 이때, 물리적 요소인 키보느나, 마우스 같은 입력 장치가 없다면???? 아무리 좋은 그래픽 요소를 가진 프로그램도 물리적 요소가 없으면 사용할 수 없는 UI가 되는 것이다. 컴퓨터의 UI를 보면, 그래픽 기반의 UI가 많다. 이를 GUI(Graphical User Interface)라고 하며, 마우스를 이용해 ..

지난 포스팅까지 컴퓨팅 사고와 관련하여 2진법, 알고리, 스크래치 등을 알아보았다. 이후 포스팅에서는 C언어에 대해 정리해서 포스팅해보고자 한다. C 언어 기초 정리 C언어라고 하면 뭔가 딱딱해보이는 내용인데, 부스트코스 CS50 강의에서는 말랑말랑하게 가르쳐 주는 기분이다. 부트캠프를 통해 자바스크립트를 배우고 있어서 그런지 더욱 쉽게 와닿는 기분!(그래봐야 기초 of 기초를 본거다 ㅎ) 오늘 포스팅한 내용의 핵심은 printf("내용/n") => "내용"을 출력해라! 이다. 또한, 컴파일이 번역기 역할을 한다는 것은 대충 이해하고 있었지만, 내 코드를 뭘로 번역해주는지는 이해하지 못했다. 오늘 강의를 통해 내가 작성한 코드(소스코드)를 2진법으로 구성된 코드(머신코드)로 번환하는 프로그램이라는 것을 ..

SEB _ FE _ 45 Section 3. Unit 1. [자료구조/알고리즘] 재귀 코드스테이츠 부트캠프 참여한지 벌써 2달이 지났다? 시간이 참 빠른 것 같다. section2는 정신없이 유닛이 진행되어 "어어~!? " 하는 사이에 끝나버린 것 같아.. 제대로 된 이해를 위해 복습하면서 블로깅을 하도록 해야겠다. Section3 는 그날 배운 내용을 바로 복습 블로깅을 목표로 해보도록 하겠다!(이미 하루 늦음..) section3 첫 유닛은 재귀다! 재귀(recursion)란 사전적의미로 원래의 자리로 되돌아가거나 되돌아옴을 의미하는 단어이다. 재귀를 잘 사용하려면 재귀적 사고가 필요하다. 재귀 함수의 입력 값 출력 값 정의하기 가장 추상적으로 또는 가장 단순하게 정의하기 ex ) A 함수 : 입력값..

강의 듣고 정리하고, 블로깅하는데 시간이 생각보다 많이 든다. 블로깅을 하면서 느낀 생각은 블로그를 꾸준히 관리하는 사람들이 대단하다는 생각뿐이다!ㅎㅎ 이번 포스팅에서는 알고리즘과 스크래치에 대해 알아보겠다. 알고리즘!? 알고리즘(영어:algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 해결하기 위해 정해진 일련의 절차이다. - 출처 : 위키백과 알고리즘은 문제를 해결하기 위해 정해진 단계와 규칙에 따라 순서대로 수행되는 절차나 방법입니다. - 출처 : 챗GPT 알고리즘이란 문제 해결을 위한 과정을 단계적으로 나열한 것이라고 정리할 수 있겠다. 정확성과 효율성의 끝판왕! 알고리즘은 정확성과 효율성을 추구한다. CS50 강의에서는 전화번호부에서 이름을 찾는 방법을 예시..

SEB_FE_45 Section 2. Unit 1. [JavaScript] 고차함수 코드스테이츠 부트캠프 Section2도 이번주면 종료가 된다. 그 말은 벌써 부트캠프 참여 후 2달이 되었다는 이야기! 시간 진짜 빠르다.... 앞으로의 포스팅에서는 블로깅에 소홀해져서 작성하지 못했던 Section 2를 다뤄보도록 하겠다. Section 2는 첫 유닛부터 너무 힘들었던 기억이라 블로깅을 할정도의 에너지가 되지 않았다. 이에 이제라도 작성해보고자 한다! 시작! 일급객체란? 자바스크립트 내에서 특별한 대우를 받는 객체이며, 대표적인 일급객체는 함수(function)가 있다. 일급객체인 함수에게 주어진 특별한 대우? 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될..

프로퍼티 어트리뷰트? 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다. 개발자가 내부슬롯에 직접 접근할 수 있는 방법은 없다. 단, Object.getOwnPropertyDescriptor(객체의 참조, '프로퍼티 키') 메서드로 간접 접근이 가능하다. Object.getOwnPropertyDescriptors(객체의 참조) 메서드는 전달받은 인자인 객체의 모든 프로퍼티 키를 조회한다. 데이터프로퍼티 키와 값으로 구성된 일반적 프로퍼티이다. [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]

간만에 포스팅하는 미라클모닝 오늘은 눈이 떠져버렸다 떠진김에 산책을 나가볼까하다가 종아리 통증으로 스트레칭을 해버렸다! 날좋은 오늘 열심히 걷고 놀고 먹고 공부하자!

지난 포스팅에서는 컴퓨팅 사고 part.1으로 2진수에 대해 알아보았다. 2023.05.25 - [두번째 공부(개발공부)/CS(Computer Science)] - 부스트 코스 CS50 2019 ] 컴퓨팅 사고 part.1 - 2진법 이어서 이번 포스팅에서는 컴퓨터가 정보를 표현하는 방법에 대해 알아보고자 한다. 우리는 정보를 표현할 때, 문자 또는 그림과 소리 등을 이용해 표현한다. 세계에는 다양한 문자가 있으며, 나라마다 해당 문자를 알아야 정보를 표현할 수 있다. 컴퓨터도 마찬가지다. 컴퓨터가 이해할 수 있는 문자를 사용해야 소통할 수 있다. 컴퓨터는 숫자를 표현하기 위해 2진법을 이용한다고 하였다. 이에 우리가 정보를 표현하기 위한 다양한 매체들을 2진법으로 바꿔야 한다. 다만, 일일이 컴퓨터를 ..

컴퓨터 사이언스와 관련하여 지난 포스팅에서는 챗 GPT에게 컴퓨터 사이언스가 무엇인지, 왜 공부해야 하는지를 다뤘다. 2023.05.18 - [두번째 공부(개발공부)/CS(Computer Science)] - Chat GPT와 컴퓨터과학에 대해 이야기해보기! 앞으로의 컴퓨터 사이언스 관련 포스팅은 CS50 2019 강의를 바탕으로 작성해보려고 한다. 첫번째 포스팅은 컴퓨팅 사고(Computing Thinking)이다. 컴퓨팅 사고에 대해서도 지난 번 포스팅에 다뤘었다. 챗 GPT는 컴퓨터적 사고란 컴퓨터 과학적 접근법을 사용하여 문제를 분석하고 해결하는 사공방식을 말한다고 정의했다. 첫번째로 알아볼 내용은 2진법이다. 우리 숫자를 세기 위해 다양한 진법을 사용한다. 일반적으로는 10진법을 많이 사용한다...

SEB_FE_45 Section 2. Unit 8. REST API REST API 에대해 블로깅을 하라고 하는데, 이해의 영역이 아닌건가 아니면 뇌가 받아들이질 못하는건가..? REST API 란?? 우선, 강의 교안인 URCLASS에서는 REST API를 아래와 같이 정의하였다. 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 다음은 챗 GPT에게 REST API에 대해 정의를 물어본 내용이다. REST API는 Representational State Transfer API의 약어로, 웹 애플리케이션 간에 데이터를 주고받기 위한 표준화된 방법입니다. 이 방법은 HTTP를 기반으로 하며, 자원 식별, HTTP 메소드,..

수도코드 - 2차원 배열? : 내부 요소가 배열로 구성된 배열 - 외부 배열의 요소인 내부 배열의 요소를 이용하여 객체 만들기 - 외부 배열의 길이가 0인 경우에는 무시하기 - 중복되는 키는 가장 처음 만나는 값을 사용하기 - 빈배열을 입력 받으면 빈 객체를 반환하기 1. 함수 내부에 빈 객체(반환할 데이터)를 선언하고 할당한다. 2. 2차원 배열의 요소를 순회하는 반복문을 만든다. 3. 내부 배열의 길이가 0보다 클때 작동해야 한다. 4. 중복되는 키를 방지할 수 있는 조건을 작성해야 한다. 5. 배열의 요소들을 객체의 키와 값으로 설정한다. 위의 내용을 코드로 작성해보면, 아래와 같다. function convertListToObject(arr) { let obj = {} for(let i = 0; ..

변수란? 데이터 값을 담는 메모리 공간의 이름이다. let, const, var 키워드를 이용해 선언할 수 있다. ES6이전 문법에서는 var 키워드로만 변수를 선언할 수 있었지만, ES6문법부터 let, const 키워드가 도입되었다. var 키워드의 단점 때문에 let, const키워드가 등장하게 되었다. 변수를 선언하는 let, const 키워드의 가장 큰 차이는 재할당의 차이이다. let 키워드는 변수 선언 및 값 할당 후 재할당이 가능하지만, const 키워드는 값의 재할당이 불가능하다. 변수는 선언을 통해 메모리 공간을 확보하고 해당 공간의 이름을 붙인다. 선언을 통해 이름을 가진 공간을 확보했다면, 할당을 통해 값을 채워넣는다. 위 그림을 예시로 들면 바구니(변수)에 YONGTREE FARM..

어제 비와서 그런지 선선한 날씨였다. 걷기도 좋았고, 하늘도 공기도 맑았다. 5월은 장미의 계절이 맞는가 보다. 얼마전까지 한, 두송이 피어있던 장미꽃이 아주 흐드러지게 펴버렸다. 햇살이 좋아 동영상도 찍었는데 화질이 왜이러지? 반짝반짝! 얘는 키가 많이 자랐네! ㅋ 매일 오늘 같은 날씨와 풍광이면 좋겠다! 그럴 수 없다는 걸 알기에 더욱 감사한 아침 날씨였다! 오후 4시 30분 남은 하루도 힘냅시다!