이번 주차 과제는 그동안 배운 툴들을 활용해서 나만의 캐릭터를 만들어 보는 거였다. 내가 제출한 과제는 아래와 같다.패스파인더와 펜 툴, 쉐입 빌더 툴 등을 적절하게 사용해서 완성했다. 토끼는 모르겠고, 판다는 마음에 든다 ㅎ.ㅎ 뿌듯티비 오홍홍
분류 전체보기
프론트 개발을 공부하면서, 서비스를 A부터 Z까지 내가 직접 만들어보고 싶음 + 프론트 개발자로서 UI/UX에 대한 심도있는 이해 + 디자이너와의 원활한 소통을 하고 싶다는 생각이 들어서 동아리 디자인팀 멘티로 지원했다.처음엔 Figma만 배우고 싶었는데, 피그마를 배우기 전에 일러스트를 배우는 게 좋다고 멘토님께서 말씀하셔서 일러스트팀부터 들어갔다. 멘토링은 아래 영상처럼 디자인베이스님의 강의를 토대로 진행한다. https://www.youtube.com/watch?v=HjVpxZknnSA&list=PLkbzizJk4Ae9GPEZD0rilHulxi-T06j8B&index=2 RGB는 가산혼합, 빛의 3원색이라고도 한다. 세가지 색상을 합칠수록 밝아진다. Red+Green+Blue = RGBCMYK는 ..
Mac 기본 터미널을 사용했는데, 밋밋한 감도 있고커스텀한 나만의 터미널을 사용하겠다!!!! 라는 생각으로 iTerm을 다운로드 하고 하단 블로그를 보면서 열심히 꾸몄다..ㅎhttps://salmonpack.tistory.com/52 [Mac Terminal] 간지나는 터미널 커스텀 - Homebrew, iTerm2, oh my zsh제가 찍은 커피 사진 어떤가요?? ☕️☕️ 갬성 넘치나요?? 오늘의 주제는 바로 이 갬성 입니다. 😎 맥 OS를 사용하시다 보면 맥 터미널을 사용하실 일이 종종 생기죠! 하지만 오타를 발견 하기salmonpack.tistory.com 그래서 결론적으로, 하트가 반짝이는 ㅎ나만의 터미널이 완성됐따!! 근데 이거 터미널 꾸미면서 vi 편집기 사용에도 미숙하고, 개념도 어려워..
급하게 ... 코테를 봐야하는 상황이 생겼는데, 자바는 아직 공부중이고 그나마 프론트 프레임워크나 라이브러리 쓰면서 익숙한 js로 코테를 보기로 했다 .. 급하게 .. 정리를 좀 해보자 ㅋㅋㅋㅋㅋㅋ 일단 조건문에서 삼항연산자 condition ? trueResult : falseResult ; 문자열 붙여서 출력하기str.join();const arr = ['바람', '비', '물'];console.log(arr.join());// 바람,비,물console.log(arr.join(''));// 바람비물console.log(arr.join('-'));// 바람-비-물 문자 입력받기const readline = require('readline');const rl = readline.createInterfa..
Next.js는 페이지 라우터와 앱 라우터, 두가지의 라우터를 제공한다. 페이지 라우터는 Next 초창기부터 제공되어 오던 구 버전의 라우터이고,앱 라우터는 Next13버전과 함께 2023년 처음 공개된 신규 라우터이다. 앱 라우터는 페이지 라우터의 단점을 보완하기 위한 서버 컴포넌트나 스트림이나 서버 액션등의 새로운 기능이 포함되어 있고 아직은 과도기를 겪고 있다. 그래서 페이지 라우터란, 현재 많은 기업에서 사용되고 있는 안정적인 라우터로 react router처럼 특정 조건을 기준으로 웹 서비스의 페이지를 분할하고 그 페이지 간의 이동을 제공하는 기능이다. 이름에 걸맞게 pages라는 폴더를 기준으로 라우팅한다. pagesㄴ index.js ㄴ about.js ㄴ item.js next는 파일명 ..
node js로 구현된 백엔드 서버 코드를 깃허브에 올려주셔서 다운받아 사용했다.DB 연결도 supabase라는 서비스를 사용해 간편하게 진행했다. (이거 신기하더라 ,, ㅎ) supabase 설정 이후 받은 database url을 .env 파일에DATABASE_URL = [DB 비밀번호]postgresql://어쩌구의 db 주소설정을 해주고 npm run buildnpm run start명령어를 통해 서버를 켠다. 그리고 localhost 포트 12345번으로 접속하고 엔드포인트를 /api로 설정하면 swagger로 넘어가 자세한 api호출을 볼 수 있게 구성되어 있다. 서버 종료는 ctrl+c로 진행하면 되고, 데이터를 좀 더 간편하게 보기 위해서 vs 터미널 창의 휴지통 왼쪽의 split 아이콘을..
세감 서비스에서 Next.js14를 사용하기 때문에 Nextjs 공부를 진행하려 한다.감자 탈출기 On ... 인프런에서 이정환 님의 2024년 8월 기준으로 제작된 강의다!Next.js란?: React.js 전용 웹 개발 프레임워크(라이브러리X)로 react.js보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공한다. 예를 들어, 페이지 라우팅, 빌트인 최적화 기능, 다이나믹 HTML 스트리밍 등의 기능이 추가되었다.: 리엑트에 비해 자유도는 낮지만 그만큼 웹개발에 있어 필요한 거의 모든 기능들을 제공한다. 렌더링1. JS 실행 : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정을 의미2. 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업을 의미 사전 렌더링(Pre..
24-2학기 앱개발 프로젝트를 준비하면서, 크로스 플랫폼 앱 개발을 하기로 팀원들과 결정했다.프레임워크를 결정하기 위해 알아보던 중 하이브리드 앱 개발 프레임워크 중 Flutter와 ReactNative가 가장 많이 사용한다는 점을 알게 되었다. 우리 동아리 내에서는 플러터를 많이 사용하고 있었으나, JS에 익숙하고 React를 다뤄본 적이 있는 나로써, 비교적 빠른 시간 내에 결과물을 만들어 내야 했기에 ReactNative 프레임워크(이하 RN)를 사용하기로 결정했다. RN은 2013년 Meta에서 출시했으며 JavaScript 기반의 오픈 소스 크로스 플랫폼 앱 개발 프레임워크로 개발자는 보다 더 짧은 개발 주기와 빠른 개발 속도로 고성능의 모바일 앱을 개발할 수 있게 되었다. 또한, JSX(Ja..
메서드 : 메서드도 함수의 한 종류publici static int add(int a, int b){ int sum = a + b; return sum;}: 메서드를 사용하면 중복이 제거되고 코드가 깔끔해짐메서드 선언과 메서드 본문- 메서드 선언 : 메서드의 이름, 반환 타입, 매개변수(파라미터) 목록을 포함함public static int add(int a, int b)- public : 다른 클래스에서 호출 할 수 있음- static : 객체를 생성하지 않고 호출할 수 있는 정적 메서드- int : 반환 타입- add : 메서드의 이름 부여- (int a, int b) : 메서드를 호출할 때 전달하는 입력 값으로 메서드 내에서만 사용됨제어자 반환타입 메서드이름 (매개변수 목록) { 메서드 본문}..
배열 : 같은 타입의 변수를 사용하기 편하게 하나로 묶어둔 것배열 선언int[] students; // 배열 선언students = new int[5]; //배열 생성: 배열을 생성하면 자동으로 내부 값이 초기화 됨 ( int - 0 / boolean - false / String - null ): 배열을 생성하고 나면 자바는 메모리 어딘가에 있는 이 배열에 접근할 수 있는 참조값(배열의 시작 주소)를 반환함 (students에 참조값을 보관함) - 참조값을 확인하고 싶으면 System.out.println(students);를 해보면 됨 인덱스 : 배열의 위치를 나타내는 숫자로 배열은 0부터 시작함배열은 왜 참조형을 사용하는가? (동적 메모리 할당): 기본형 변수들은 모두 사이즈가 명확하게 정해져 ..
