글쓰는 개발자

CSS는 다음과 같이 클래스명에 매핑시켜서 사용한다.// .tsximport './style.css'// .css.main { display: flex;} 이는 정석적이고 쉽고 간편한 CSS의 사용법이다.그런데 리액트같이 컴포넌트형 구조를 가지고 있다면 클래스 명의 충돌이 일어날수 있다. button-text 이라는 이름의 컴포넌트가 존재한다고 할때, 다른 페이지에 같은 이름의 button-text라는 클래스명을 가진 엘리먼트가 존재한다면, 여기서 css의 충돌이 일어나게 된다. 재사용을 위해 컴포넌트화 한 클래스의 경우 더이상 그 내부를 신경쓰지 않기 때문에 중복되는 이름이 발생활 확률이 높다.이를 방지하기 위해서 컴포넌트형 클래스 명 앞이나 뒤에 추가적인 이름을 붙여서 이러한 충돌을 피할수 있다.하지..

터미널에 nextjs 프로젝트를 생성하기 위한 명령어를 입력합니다.npx create-next-app@latest 넥스트 js 프로젝트 세팅을 위한 옵션 사용여부를 각각 체크해줍니다.What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to use ..

IT 서비스 개발은 크게 프론트엔드 개발 / 백엔드 개발로 나뉘어진다.프론트엔드는 고객이 사용하는 서비스를 웹이나 앱을 통해 화면으로 전달하여 고객이 직접 인터렉션 하며 서비스를 사용할수 있도록 하며 디자이너와 협업하여 적절한 UI / UX 를 전달하는데 집중한다.UI는 그림 즉 어떻게 심미적으로 아름답게 보일지 여부에 집중하는 것이고, UX는 버튼의 위치 크기 등 고객의 행동을 유도하여 사용자가 서비스를 사용함에 불편함 없이 하는데 집중하는 것이라 할수 있겠다. 하나의 화면에 너무 많은 버튼이 존재하거나 사용자가 원하는 기능을 한번에 찾을수 없게 수번에서 수십번의 인터렉션을 필요로 하도록 배치한다면 잘못된 UX를 구성하였다 할수 있겠다. 초창기 웹브라우저가 나왔을때 웹은 정적인 웹 즉 내용이 변하지 않..

expo 프로젝트 생성 1. expo-cli를 설치합니다.npm install -g expo-cli 2. expo.dev에 로그인해서 Project 탭에 Create Project 버튼을 클릭해서 새로운 프로젝트를 생성한다. 3. PC에 project를 생성할 위치에 커맨드 창을 열고 expo.dev에 나타나는 명령을 하나씩 입력해서 새로운 프로젝트를 생성하고 expo.dev에 연결할수 있다. android APK 생성 1. apk build 명령을 입력한다.eas build --profile development --platform android 사용할 패키지명을 입력하고 키스토어도 새로 생성한다.What would you like your Android application id to be? … c..

1. 함수swift의 함수는 func로 시작한다func hello() { print("Hello")} 매개변수를 받아 문자열을 리턴하는 함수func printMessage(name: String, count: Int) -> String { return("\(name) is \(count) years old")} 함수가 단일 표현식을 가진다면 return 구문을 생략할 수 있다.func printMessage(name: String, count: Int) -> String { ("\(name) is \(count) years old")} 매개변수 앞에 따로 외부 매개변수명을 지정할수도 있다.func printMessage(userName name: String, age count: Int) -> Strin..

1. for-in 구문 swift의 for in 문은 다음과 같다.var array = [1, 2, 3, 4, 5]for index in array { print(index)} 이는 아래와 같이 범위문으로 변경 가능하다.for index in 1...5 { print(index)} index를 따로 사용할 필요가 없을 때는 밑줄로 생략도 가능하다.var sum = 0for _ in 1...5 { sum += 1}print(sum) 2. repeat while 반복문repeat while은 do while을 대체한다.var i = 0repeat { i += 1} while(i > 10)print(i) 3. switch 구문swift의 case문에는 break 문이 필요치 않다.let value = 1swi..

1. 옵셔널 타입변수를 선언할 때 ?를 사용해 옵셔널 선언이 가능하다.var index: Int? 이제 index는 정수 혹은 아무런 값도 할당되지 않을수 있다. 어떤 값도 할당되지 않을때 옵셔널은 nil 값을 갖는다.var index: Int?if index != nil { // 값이 할당되어 있다.} else { // 값이 할당되어 있지 않다.} 옵셔널 값을 사용하기 위해서는 ! 문구를 사용하여 강제 언래핑 해주어야 한다.var index: Int?index = 12if index != nil { print(index!)} else { print("index is nil")} 강제 언래핑 대신, 옵셔널로 할당된 값은 옵셔널 바인딩을 이용하여 임시 변수나 상수에 할당할 수 있다.var i..

1. 문자열 데이터 타입문자열은 변수, 상수, 표현식, 함수 호출을 조합하여 구성할 수 있다.var userName = "Kim"var count = 25var message = "\(userName) has \(count) apples."print(message) 결과Kim has 25 apples. 여러 줄의 문자는 삼중 따옴표 안에 넣어서 선언할 수 있다.var multiline = """ 안녕하세요 "김철수" 라고 합니다. 반갑습니다. """ print(multiline) 2. 상수와 변수변수는 var 키워드를 사용하여 선언하며, 상수는 let을 사용해서 선언한다.var userName = "Jim"let maxCount = 20 3. 튜플튜플은 여러 값을 하나의 항목으로 그루핑하는 ..