Develog 썸네일형 리스트형 반응형 웹제작을 위한 핵심기술 반응형 웹이란? pc,tv,내비게이션,스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공하는것을 말한다.반응형 웹을 만들때는 모든요소를 %로 계산한다고 한다.화면에 보이는 영역인 뷰포트, 화면의 크기와 환경을 감지하여 구조를 바꿀 미디어쿼리ViewPort스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 스마트기기에선 화면의 크기를 정확하게 감지하지 못한다.그래서 미디어쿼리가 기기의 화면 크기를 정확하게 감지할 수 있도록, 뷰 포트라는 기술을 사용한다.디바이스 기기에 따라 가로세로가 설정되도록 메타태그를 넣어준다.미디어 쿼리가 화면의 사이즈를 감지해 스타일을 적용시킨다.각각 320px, 768px, 960px 이상일때 배경색을 변경한다.가변그리드 공식(가변크기로 만들 박스의 .. 더보기 Webpack 번들링 : 각각 나눠진 파일들 (ex) 자바스크립트 파일) 등을 하나로 모아서 묶어주는 작업을 뜻함 webpack의 등장 웹개발이 발전하면서 다양한 모듈의 도입으로 애플리케이션이 커졌다. 조각난 모듈들의 의존성을 파악하여 번들링 해 주는 webpack이 등장하였다. 장단점 장점 : 1. 성능 최적화 & 자동화 코드축소, 사용하지 않는 코드를 제거하는 tree shaking을 사용, http 요청 수를 감소시켜 웹사이트 성능을 향상시킴 2. 번들러가 제공하는 편의성 css가 아닌 Sass나 Stylus등을 사용할 경우, 또는 typescript 사용시, 번들러가 컴파일 과정에서 필요 플러그인을 추가하고 번들러를 실행해줌 3. CodeSplitting 을 통해 필요할 때만 스크립트를 로드 할 수 있다. 시시.. 더보기 Expo ReactNative Storybook 도입시 Constants.expoConfig.extra.storybookEnabled === undefined in windows 발단 : ReactNative 로 스토리북 연습하려고 했을 시 Constants.expoConfig.extra.storybookEnabled === undefined 오류 windows유저들은 억울하다 공식문서를 보고 https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o How to swap between React Native Storybook and your app How to use expo constants and environment variables to swap between storybook and your app dev.to 위의 링크를 따라했는데도 undefined가 나오는 세상에서 살고있기 .. 더보기 React 중첩라우팅 https://ostarblog.tistory.com/9 React Router v6 정리 React Router v6 React Router는 현재 리액트의 라우팅 기능을 지원하는 가장 인기있는 라이브러리입니다. 이 React Router가 지난 2021년 11월에 정식 6.0 버전이 릴리즈되었습니다. 5.0 버전에서 큰 변경사항 ostarblog.tistory.com React-dom-router 의 대한 정보를 찾다가 v5랑 v6랑 섞인 정보가 많아 혼란스러웠다. 내가 원한건 페이지에서 -> 링크를 눌러서 하위 페이지로 이동할 경우에 따른 페이지를 보여주는걸 구현하고 싶었다. 이 페이지에서 nav 바를 누름에 따라 오른쪽 공간에 다른 정보가 보이게 하고 싶었는데. 이 블로그의 글을 읽고 중첩라우팅을.. 더보기 자주쓰는 문법 모음 1. 리스트 끼리의 덧셈 list1 = dict[i-2]; list2 = dict[i-1]; dict[i] = [x+y for x,y in zip(list1, list2)] 2. 여러 열에 적힌 값 리스트로 받기 data = [int(sys.stdin.readline().strip()) for i in range(n)]; 3. 에라토스테네스의 체 def isPrime(n): num = int(math.sqrt(n)); if n 더보기 파이썬 자주쓰는 함수 모음 1. 정렬 .sort() List.sort()로 리스트를 기본적으로 오름차순으로 정렬하고 List.sort(reverse =True) 하면 내림차순으로 정렬한다. + 새로운 정렬 리스트를 반환하는 함수는 sorted 리스트 자체를 정렬시켜버리는 함수는 sort 함수다. 2. set() 집합이란 의미로 순서가 없고 집합 안에서는 중복이 제거되고 unique한 값을 가진다. a = [3 3 6] len(set(a) == 2) 를 이용해 중복되는 값이 있는지 검사할 수 있다. 3.sum() sum(a) 리스트 값을 모두 더해준다. 3. map과 s.count list(map(s.count,['c=','c-','dz=','d-','lj','nj','s=','z='])) 꽤 신기한 코드다. 전체 문자열의 개수가 .. 더보기 [python]sys.stdin - 시간초과가 떠서 input()은 사용못하게 됐다. - 그래서 sys.stdin으로 입력을 받는연습을 해보자! sys.stdin을 쓸때는 맨 끝의 개행문자 까지 같이 입력받기 때문에 문자열을 저장받을땐 .rstrip을 추가해주자 1.한줄을 읽고 개행문자 삭제 2. 여러줄은 문자열로 입력받고 싶을 때 단 이때는 lines[0]을 하면 저 전체문장이 출력된다. 이때 sys.stdin.read().splitlines()를 이용하면 개행문자를 지운 리스트 형태로 반환해주기 때문에 인덱스로 접근도 가능해진다. 기억해두기! 3. 여러줄을 리스트로 입력 받고 싶을 때 개행 문자가 포함된 걸 볼 수 있고, 리스트로 받았기 때문에 인덱스로 접근할 수 있다. 더보기 백엔드 폴더 흐름 정리 개요 쇼핑몰 제작 팀 프로젝트에서 백엔드를 담당하게 됐다. 배울때는 할 수 있을 것 같았는데, 받은 코드의 폴더가 나뉘어져 있어서 각각 폴더가 어떤 역할을 하고 어떤 흐름으로 연동되는지 정리하려 한다. db : 데이터가 array형식으로 저장되어 있다. routers : 라우터들이 구현되어 외부에서 사용할 수 있게 export 되어있다. services : 필요한 기능들이 함수 또는 클래스로 구현되어있다. 클래스로 만들어져 있다면 객체를 생성한 후, export 해준다. static-files : bulma 관련 코드들, 프론트에서 백을 향해 fetch함수를 통해 요청을 보낸다. 그리고 결과를 받아서 , html 스크립트에 적용한다. 즉 pug와 같은 라이브러리인 것 같다. app.js : 백엔드의 ma.. 더보기 이전 1 2 3 4 5 6 다음
