공부블로그

우선, 웹 개발에서 사용되는 전형적인 기술 스택에 대해 알아보자. 프론트엔드(클라이언트 측): HTML(HyperText Markup Language): 웹 페이지의 구조를 정의하는 마크업 언어입니다. CSS(Cascading Style Sheets): 웹 페이지의 스타일을 정의하는 스타일 시트 언어입니다. JavaScript: 웹 페이지의 동적인 동작을 제어하고 사용자와 상호 작용하는 프로그래밍 언어입니다. 프레임워크 및 라이브러리: Vue.js(Nuxt.js), React.js(Next.js), Angular 등의 프론트엔드 프레임워크 및 라이브러리를 사용하여 웹 애플리케이션을 개발합니다. 백엔드(서버 측): 웹 서버: 클라이언트 요청을 받아들이고 응답하는 소프트웨어입니다. 예를 들어, Node.js..

1. 아이콘 직관적 : 지나치게 단순화하거나 본인만 아는 아이콘 X 통일성 단순성 : 작은 크기에서도 파악할 수 있는 형태 규격 및 시각보정 : 안전한 영역 안에서 작업, 시각적으로 부피의 면적이 동일한지 확인 ( 시각보정 ) 2. 타이포그래피 - 어떤 앱이 읽기 편한가요? 'UI 내 정보 전달, 우선순위에 따른 강약조절'이 있는 것 Typegraphy란? Type(활자) + Graphy(-술) : 활자의 서체나 글자배치 등의 구성 및 표현 타이포그래피 요소 서체 종류 ( 제목용 & 본문용, 고딕, 명조, 손글씨 ) 서체 크기와 두께 텍스트 컬러 ( 가독성과 연관! ) ※ 앱 UI 디자인 작업 시 타이포그래피가 중요한 이유 ※ 위계 구조 표현 정보전달을 위한 가독성 유효성 검사 충족된 크기, 대비 활용 ..

1 . 앱 디자인 레이아웃과 그리드 시스템 앱에서는 단조로운 레이아웃을 사용한다. 앱 ui 디자인 작업 시 그리드 시스템에 맞게 레이아웃을 구성해야 하는 이유 시각적으로 일관된 배치 작업 시간 단축 예측 가능한 화면 구성 [ 레이아웃을 위한 그리드 시스템 구성요소 ] Column (화면을 몇 단으로 쪼개는지, 유동적): 4단 or 6단 Gutter (단과 단 사이의 거리, 고정값): 16 Margin (컨텐츠 영역을 제외한 좌우 여백) : 16 or 20 좁은 화면의 단점을 해결하는 레이아웃: 가로 스크롤 ( 어떤 해상도에서든 컬럼 수, 거터, 마진을 유지해야하고 해당 그리드시스템에 맞게 디자인해야한다! ) 2 . UI 컬러 앱 ui 디자인 작업시 컬러가 중요한 이유 우선 순위 표현 가능 상황에 따른 컬..

https://school.programmers.co.kr/learn/courses/30/lessons/150370 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 오랜만에 알고리즘*^^* 테스트케이스 19번에서 걸렸는데 찾아보니까 유효기간이 100달일때를 고려해야했다! function solution(today, terms, privacies) { var answer = []; let arr_terms = {} terms.forEach(term => { if(term.length >= 5){ //유효기간이 100인 경우 arr_terms[term[0]] ..

회선 교환 회선 독점을 통한 통신방식이다. 위와 같이 전송을 위한 전용선을 할당하고 해당 선로로 모든 데이터를 전송한다. 핵심은 " 전용선 설정 "이다. 특징 및 장단점 통신 회선을 설정하여 데이터를 교환하는 방식이다. 쉽게 말해 전화망 ( 사이에 끼어들 수 없다. ) 송신자의 모든 데이터는 동일한 경로로 전송된다. 안정적인 통신 가능하고 전송 지연이 없고 데이터 전송률이 일정하다. 그러나 회선 이용 효율이 떨어지고 문제가 발생할 경우 전체 연결이 끊어지기 때문에 새로운 회선 할당이 필요하다. 위의 단점을 극복하기 위해 다중화라는 개념이 탄생한다. - 주파수 분할 다중화 한 전송로의 대역폭을 여러개의 작은 채널로 분할하여 여러 단말기가 동시에 이용하는 방식. 채널간에 상호간섭을 막으려면 보호 대역이 필요..

기초문법 php코드는 웹 페이지의 어느 부분에나 위치할 수 있다. php파서가 php코드를 인식하기 위해 시작과 끝을 알려줘야 한다. 즉, 은 출력용 태그라고 생각하자 마지막 ; (세미콜론) 주석 : // 출력 echo - 문자열 여러개 출력, 리턴값 X / print - 함수처럼 사용, 문자열 하나 출력, 항상 리턴값 1 변수 지역 변수 : 함수 내부에서 선언된 변수는 오직 함수 내부에서만 접근, 함수 호출이 종료되면 메모리에서 제거되므로 함수 밖에서 접근 불가 전역 변수 : 함수 밖에서 선언, 접근 함수 내부에서 전역 변수를 사용하고 싶다면 global키워드를 사용 정적 변수 : 함수의 호출이 종료되더라도 메모리 상에서 사라지지 않으므로 생성과 소멸을 반복하지 않고 함수 안에서 값이 공유된다. + $..

원래 Hot Reloading은 Next.js에서 제공하는 기능인데, 다시 프로젝트를 열고 실행하니까 반영이 안돼서 한참 찾아봤다. 해결방법 : 위에 답변 처럼 .next 폴더를 지우고 npm run dev하니까 잘 반영된다~! 이유는....찾으면 다시 오겠다...

list.map( )은 프론트엔드 하면서 제일 많이 쓰는 구문아닐까 싶다. { list.map((value, index) => ) } 보통 이런 식으로 코드를 작성해서 list안의 각 값에 따라 컴포넌트를 쫘악 펼쳐주는 역할을 하는데 개념자체를 혼동해버렸다... 에서 수정 모드로 변경하게 되면 전체 배열이 수정모드로 변경된다고 생각하고 수정모드로 변경된 아이템을 찾아서 따로 적용해줘야된다고 착각하고 있었다. 은 배열의 요소 중 오직 하나의 아이템이고 하나의 값만 넘어오기 때문에 내가 수정버튼을 누르면 내가 누른 그 컴포넌트만 변경되는 것이다!!! 그래서 다시 정리한다... map()은 뭘까? 보다시피 map은 배열 내에 모든 요소에 대해 주어진 함수를 실행하고 결과를 모아서 '새로운 배열'을 '반환'한다..